How to Design a Standout Work Experience Section with Divi.

Showcasing work experience is essential skills to set yourself apart. With Divi we can create a timeline to display work history in both clean and professional manner. In this post, I will walk you through designing a standout work experience and skills section for your website.  So, let’s get started.  

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.

<h2>Here's my</h2>

  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.

  Before we add the first module, we need to match the style of the above row with our new row.  To do this, right click options to copy the style of the first row above and paste the style to the row you just added.  

  In the first column, add a blurb module.

Then update the blurb module settings as follows:  Title: 2001-2003 Content: Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec. Use Icon: YES Icon: Select an Icon  

Under the design tab settings, update the options for the icon design as follows: Icon color: #06a08c Circle Icon: YES Circle color: #ffffff Show Circle Border: YES Circle Border Color: #06a08c Image/Icon Placement: Left Use Icon Font Size: YES Icon Font Size: 40px    

Now let’s update the title and body text design options as follows: Title Font: Archivo Narrow Title Font Weight: Semi Bold Title Font Style: TT Title Text Size: 24px Title Line Height: 60px    

Update the body text settings as follows:  Body Font: Source Sans Pro Body Text Size: 16px  

Now let’s position our blurb module so that it will overlap the left border line we will create later on for our row. Update the following:  Custom Margin: -30px Top, -30px Left Custom Padding: 30px Right, 40px Bottom  

We need to create a right borderline to use for the continuing timeline on the second column. To do this we are going to create a right border on this blurb module. Update the following: Border Styles: right border Right Border Width: 2px Right Border Color: #06a08c  

Now we are ready to duplicate our blurb module to create our additional timeline content. Duplicate the blurb module three times to create a total of 4 blurb module in the first column.  

  Next copy the same blurb module and paste it into the second column. Then take out the right border for the blurb module now sitting in the second column.  

Now duplicate that blurb module twice to create a total of three blurb module in the second column.

  We need to get rid of the extra line space below the second column blurbs by taking out the right border of the last two blurbs in the first column. To do that update the last two blurb modules in the first column with the following: Right Border Width: 0px  

  Now we need to add the left border to our row in order to attach the blurb icons in the first row. To do that, update the row settings as follows: Border Styles: Left Border Left Border Width: 2px Left Border Color: #06a08c  

Now update the row spacing a little. Custom Padding: 28px Top, 0px Bottom Since our icons are extending past the left border of our row, we need to add a single line of custom CSS to make sure the rest of the icon is visible. To do this, go to the advanced tab of the row settings and enter the following under the main element box: overflow: visible;

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.

Since we are going to be layering our circle counter module with others, we don’t want this first one to actually show the number value. But we do want to set a number of value in order to display the animated color bar. Update the Circle counter settings as follows: Number: 60 Percent Sign: OFF

Under the design tab… Bar Background color: #06a08c Text Color: Light (this will hide our text on the white background)

Width: 350px Module Alignment: Center The Width of 350px will gradually decrease with each circle module we add on top of the previous one to complete the infographic design. Custom Margin: -2px Left (this is to hide the green left border that will show next to the circle module on mobile)

Since we are going to be doing some overlapping of modules, deploy the wireframe view to complete the next three circle modules. Then duplicate the circle module three times so that you have a total of four circle counter modules in the far right column of the row.

Now we need to update the design and place the three duplicated circle counter modules to complete the rest of the illustration.

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.  

Continue this process with the next two circle counters.

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

Save your changes.  

Here is the final result.

Wrapping up

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.