Creating Title Section
To create a title section, add a one-column row with a text module. For the content of the text module, enter the following HTML.
Update the design tab setting for your text module as follows. Text Font: Source Sans Pro Text Text Size: 16px
Since we have both an h2 and an h3 header, we will design both of them.
H2 Font: Archivo Narrow
H2 Font Weight: Bold
H2 font Style: TT
H2 Text Size: 24px
H2 Text color: #06a08c
H3 Font: Julius Sans One
H3 Font Weight: Bold
H3 font Style: TT H3 Text Size: 62px
H3 Text color: #3d394b
Updating Row Settings
Now that we have finished entering the content for the title of the section, now let’s update the row settings to give it a little more space as follows: Use Custom Width: Yes Custom Width: 1245px Use Custom Gutter Width: Yes Gutter Width: 1
Create Your Work Experience Timeline
To create your work experience timeline, add a new row with a one-fourth, one-fourth, one-half column layout.
Overlap Circle Counter Modules to Create a Skills Infographic
Instead of spacing out 4 different circle counter modules to illustrate your levels of skill on a page, you can create different sizes of each circle counter and overlap them to create one single infographic. With the built-in animation, it really makes for an impressive illustration.
Add Your First Circle Counter Module
To do this, first, we must create our first of four circle counter modules. Let’s add our first one to the far right column of our row next to our timeline.
Design and Place the Second Circle Counter
Update the settings for the second circle counter (the one under the original) with the following: Number: 80 Bar Background Color: #187d6f Width: 330px Notice I decrease the width of the circle counter by 20px from the first one. That way it will fit nicely in the middle of the larger circle. Now we need to bring our circle counters up with a negative margin. Custom Margin: -338px Top Now save your settings and take a preview of your page. You should see the circle fits inside the other.
Design and Place the Third Circle Counter
For the third circle counter, update the following settings: Number: 70 Bar Background Color: #eec42d Width: 310px Decreased the width of the circle again by 20px. This is to make sure the spacing between the overlapping circles are an even distance apart. Custom Margin: -318px Top A custom margin is also decreased by 20px to account for the proper vertical spacing between overlapping circles.
Design and Place the Fourth Circle Counter
For the fourth circle counter, update the following settings: Number: 90 Bar Background Color: #3d394b You may want to include the number in the middle of your circle counters at this point. If so you can simply update the text color to dark. Text Color: dark Actually, you can choose to display any one of the number values from your four circle counters this way. Just make sure you only choose one to have a dark text color so that you don’t have to numbers overlapping. Width: 290px Custom Margin: -298px Top, 80px Bottom For this last circle module, not only is it necessary to bring it up with a negative margin, but we also want to add some positive margin below to make up for the negative space created. This will make sure the next module you put under the circle modules will have proper spacing. Now check out the result.
List your Skills with Colored Labels that Corresponds to your Circle Counter Colors
The final step is to create a color key to help understand what skills correspond to each bar color within each of the circle counters. A great way to create custom list items is to use the blurb module. Before you toggle out of the wireframe view, add a new blurb module under your Circle counters in the right column. Then toggle the desktop view to complete the rest of the tutorial. Update the blurb module settings as follows: Title: C++ Use Icon: YES Icon: select the square icon
Add the Second Colored Label
To create the second colored label, duplicate the one you just created and update the following: Title: HTML/CSS Icon Color: #06a08c Title Text Color: #06a08c
Add the Third Colored Label
To create the third label, duplicate the one you just created and update the following: Title: WordPress Icon Color: #eec42d Title Text Color: #eec42d
Add the Fourth Colored Label
To create the fourth label, duplicate the one you just created and update the following: Title: WordPress Icon Color: #3d394b Title Text Color: #3d394b
Once your design is complete, all you need to do is go back and update your icons, content, skills, etc. to suit your needs and you are all set. If you need to replace the icons with your own icons/images, feel free. Just make sure they are 40px by 40px to fit with this layout.