Creating an “Our Process” Section with Divi’s New Column Structures

December 5, 2018

Divi’s new column structures have undeniably added a ton more built-in design possibilities to Divi. To show you how unique you can get with Divi’s versatile column structures, we’re going to show you how to create a unique “our process” section using Divi’s built-in options only. On top of that, we’ll also add a subtle hover effect that appears when hovering one of the steps in the process. These sections are great for explaining how you do what you do to your clients or prospective clients.

Let’s get to it!


Before we dive into the tutorial, let’s take a look at the outcome you can expect from this tutorial.

creating-an-our-process-section-with-divis-new-column-structures Theme Builder Layout

Add New Section

Background Color

Add a standard section to a new or existing page and use the following background color for it:

  • Background Color: #3a1dad

creating-an-our-process-section-with-divis-new-column-structures Theme Builder Layout


Go to the spacing settings next and add some custom top and bottom padding.

  • Top Padding: 170px
  • Bottom Padding: 170px

creating-an-our-process-section-with-divis-new-column-structures-1 Theme Builder Layout


We’re creating an alternative on smaller screen sizes but we’ll start off creating the desktop version. That’s why were disabling this section on phone and tablet in the visibility settings.

creating-an-our-process-section-with-divis-new-column-structures-2 Theme Builder Layout

Add Row #1

Column Structure

Once you’re done modifying the section settings, continue by adding a new row using the following column structure:

creating-an-our-process-section-with-divis-new-column-structures-3 Theme Builder Layout

Add Gradient Background to Column 1, 3 & 5

To create a nice hover effect, we’re going to add a gradient background to column 1, 3 & 5. These are the columns that’ll each hold a process step. We’ll use the two remaining columns to connect the steps to one another. Each one of the three columns we mentioned will need the same gradient background:

  • Color 1: #580cf2
  • Color 2: rgba(41,196,169,0)
  • Column 1 Gradient Type: Radial
  • Column 1 Start Position: 38%
  • Column 1 End Position: 38%

creating-an-our-process-section-with-divis-new-column-structures-4 Theme Builder Layout


Once you’re done adding the gradient backgrounds, go to the sizing settings and enable the fullwidth option.

  • Make This Row Fullwidth: Yes

creating-an-our-process-section-with-divis-new-column-structures-5 Theme Builder Layout


We’ll also need some custom padding values for the entire row and the column that are dedicated to holding process steps.

  • Top Padding: 0px
  • Bottom Padding: 0px
  • Column 1 Top Padding: 20px
  • Column 1 Bottom Padding: 20px
  • Column 3 Top Padding: 20px
  • Column 3 Bottom Padding: 20px
  • Column 5 Top Padding: 20px
  • Column 5 Bottom Padding: 20px

creating-an-our-process-section-with-divis-new-column-structures-6 Theme Builder Layout

Clone Row #1 Twice

Before adding any modules, we’re going to clone the row twice. This will help us save time in the upcoming steps.

creating-an-our-process-section-with-divis-new-column-structures-7 Theme Builder Layout

Modify First Duplicate

Remove Column Gradient Backgrounds

Open the second row in your section (the first duplicate) and remove all the column gradient backgrounds that have been applied to it. We won’t be needing those since the second row will not hold any process steps, only a title and vertical dividers that’ll connect the steps.

creating-an-our-process-section-with-divis-new-column-structures-8 Theme Builder Layout

Remove Column Spacing

Likewise, remove all the column custom padding that has been applied to column 1, 3 & 5.

  • Top Padding: 0px
  • Bottom Padding: 0px

creating-an-our-process-section-with-divis-new-column-structures-9 Theme Builder Layout

Add Blurb Module to First Colum of Row #1

Add Content

Time to start adding the modules! We’ll start with a Blurb Module in column 1 of the first row. This Blurb Module will hold the content of our first step so go ahead and add some text of your choice.

creating-an-our-process-section-with-divis-new-column-structures-10 Theme Builder Layout

Choose Icon

We’re also using the following icon that’ll indicate where to look for the next step:

creating-an-our-process-section-with-divis-new-column-structures-11 Theme Builder Layout

Default Background Color

Then, add a default background color to the Blurb Module. This background color is the same as the one we’ve used for the section. It hides the column gradient background we’ve added in the previous part of this tutorial.

  • Background Color: #3a1dad

creating-an-our-process-section-with-divis-new-column-structures-12 Theme Builder Layout

Hover Background Color

However, we want the column gradient background to show up on hover. That’s why we’re changing the background color on hover to a completely transparent one.

  • Background Color: rgba(255,255,255,0)

creating-an-our-process-section-with-divis-new-column-structures-13 Theme Builder Layout

Default Icon Settings

Continue by going to the icon settings and making some changes.

  • Icon Color: #9d8ad8
  • Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 80px

creating-an-our-process-section-with-divis-new-column-structures-14 Theme Builder Layout

Hover Icon Settings

Apply a different icon color and font size on hover.

  • Icon Color: #ffffff
  • Icon Font Size: 120px

creating-an-our-process-section-with-divis-new-column-structures-15 Theme Builder Layout

Text Settings

Next, go to the text settings and make some changes.

  • Text Orientation: Center
  • Text Color: Light

creating-an-our-process-section-with-divis-new-column-structures-16 Theme Builder Layout

Title Text Settings

The title text settings need to be modified as well.

  • Title Font Weight: Ultra Bold
  • Title Font Style: Uppercase

creating-an-our-process-section-with-divis-new-column-structures-17 Theme Builder Layout


To create a smooth transition, we’ll increase the transition duration.

  • Transition Duration: 500ms

creating-an-our-process-section-with-divis-new-column-structures-18 Theme Builder Layout

Clone Blurb Module & Place in Uneven Columns (Both Row #1 & #3)

Now that we’ve created the first Blurb Module step, we can clone it 5 times and place the duplicates in the columns marked in the print screen below.

creating-an-our-process-section-with-divis-new-column-structures-19 Theme Builder Layout

Change Content & Icon of Each Duplicate

Of course, you’ll have to change the content of each one of the duplicates along with the icon to make sure the process is making sense.

creating-an-our-process-section-with-divis-new-column-structures-20 Theme Builder Layout

Add Horizontal Divider to Second Column of Row #1


The second module we’ll need to add is a Divider Module. We’re using this module to connect all Blurb Module steps to one another. Go ahead and add one to the second column of the first row.

  • Show Divider: Yes

creating-an-our-process-section-with-divis-new-column-structures-21 Theme Builder Layout

Divider Color

Change the divider color next.

  • Color: #dddddd

creating-an-our-process-section-with-divis-new-column-structures-22 Theme Builder Layout


To align the Divider Module vertically, we’ll use some top margin. We’ll also increase the width of the module by using some negative left and right margin.

  • Top Margin: 150px
  • Left Margin: -60px
  • Right: -60px

creating-an-our-process-section-with-divis-new-column-structures-23 Theme Builder Layout

Clone Horizontal Divider & Place in Even Columns (Both Row #1 & #3)

Clone the Divider Module and place it in the columns that are marked in the print screen below:

creating-an-our-process-section-with-divis-new-column-structures-24 Theme Builder Layout

Add Vertical Divider to First Column of Row #2


We’ll need a vertical divider as well. To create one, we’ll add a new Divider Module to column 1 of the second row but we’ll make sure the ‘Show Divider’ option is disabled.

  • Show Divider: No

creating-an-our-process-section-with-divis-new-column-structures-25 Theme Builder Layout

Background Color

Add a background color to the module next.

  • Background Color: #dddddd

creating-an-our-process-section-with-divis-new-column-structures-26 Theme Builder Layout


And change the Sizing settings next. Once you do, you’ll notice a vertical divider fall into place.

  • Width: 0.5%
  • Module Alignment: Center

creating-an-our-process-section-with-divis-new-column-structures-27 Theme Builder Layout


To increase the height of the vertical divider, we’ll use some custom spacing values.

  • Top Margin: 20px
  • Top Padding: 120px
  • Bottom Padding: 120px

creating-an-our-process-section-with-divis-new-column-structures-28 Theme Builder Layout

Clone Vertical Divider & Place Duplicate in Column 5 of Row #2

Clone the vertical divider you’ve created and place it in the last column of the second row.

creating-an-our-process-section-with-divis-new-column-structures-29 Theme Builder Layout

Add Title Text Module to Column 3 of Row #2

Add Content

The last module we’ll need is a title Text Module. Add this module to the third column of the second row with some content of choice.

creating-an-our-process-section-with-divis-new-column-structures-30 Theme Builder Layout

Heading Text Settings

Go to heading text settings and make some changes to the appearance of your title.

  • Heading 2 Font Weight: Ultra Bold
  • Heading 2 Text Alignment: Center
  • Heading 2 Text Color: rgba(255,255,255,0.09)
  • Heading 2 Text Size: 220px (Desktop), 150px (Tablet), 100px (Phone)
  • Heading 2 Letter Spacing: -50px (Desktop), -30px (Tablet), -25px (Phone)

creating-an-our-process-section-with-divis-new-column-structures-31 Theme Builder Layout


Lastly, add some custom spacing values to allow the title Text Module to fall into place.

  • Top Margin: 30px
  • Left Margin: -800px
  • Right Margin: -800px

creating-an-our-process-section-with-divis-new-column-structures-32 Theme Builder Layout

Create Alternative for Tablet & Phone

Add New Section

Background Color

As mentioned at the beginning of this post, we’re going to create an alternative for smaller screen sizes. Go ahead and add a new regular section using the same background color as the previous one.

  • Background Color: #3a1dad

creating-an-our-process-section-with-divis-new-column-structures-33 Theme Builder Layout


Add some custom top and bottom padding values.

  • Top Padding: 170px
  • Bottom Padding: 170px

creating-an-our-process-section-with-divis-new-column-structures-34 Theme Builder Layout


And hide the section on desktop in the visibility settings.

creating-an-our-process-section-with-divis-new-column-structures-35 Theme Builder Layout

Add Row #1

Column Structure

Instead of using a 6-column row, as we did for the desktop section, we’re using one column only.

creating-an-our-process-section-with-divis-new-column-structures-36 Theme Builder Layout

Clone Title Text Module of Previous Section & Place in Row #1

Clone the title Text Module of your desktop section and place the duplicate in your new row.

creating-an-our-process-section-with-divis-new-column-structures-37 Theme Builder Layout

Remove Spacing

Continue by removing the spacing settings of this module.

creating-an-our-process-section-with-divis-new-column-structures-38 Theme Builder Layout

Add Row #2

Column Structure

Then, add another row with one column.

creating-an-our-process-section-with-divis-new-column-structures-39 Theme Builder Layout

Clone Blurb Module of Previous Section & Place in Row #2

Clone one of the Blurb Module steps in the desktop section and place the duplicate in your new row.

creating-an-our-process-section-with-divis-new-column-structures-40 Theme Builder Layout

Change Icon

Change the icon into the one that points downwards.

creating-an-our-process-section-with-divis-new-column-structures-41 Theme Builder Layout

Change Sizing

Change the sizing settings next.

  • Width: 39% (Tablet), 59% (Phone)
  • Module Alignment: Center

creating-an-our-process-section-with-divis-new-column-structures-42 Theme Builder Layout

Clone Vertical Divider of Previous Section & Place in Row #2

We’re using the vertical divider of the previous section here as well. Go ahead and clone it and place the duplicate right below the Blurb Module.

creating-an-our-process-section-with-divis-new-column-structures-43 Theme Builder Layout

Change Spacing

Change the spacing settings of this module to make decrease its height.

  • Top Padding: 50px
  • Bottom Padding: 50px

creating-an-our-process-section-with-divis-new-column-structures-44 Theme Builder Layout

Clone Both Modules as Many Times You Want

You can clone both these modules as many times as you want to showcase all the process steps on smaller screen sizes.

creating-an-our-process-section-with-divis-new-column-structures-45 Theme Builder Layout


Now that we’ve gone through all steps, let’s take a final look at the outcome.

creating-an-our-process-section-with-divis-new-column-structures Theme Builder Layout

Final Thoughts

In this post, we’ve shown you how to creatively use Divi’s column structures to create a stunning and unique process section. On top of that, we’ve also added a subtle hover effect to each one of the process steps that appears once you hover an element. Feel free to play around with this design to create your own unique alternative. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Share this article:

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:


Related Posts

how-to-start-a-podcast-with-wordpress Theme Builder Layout

How to Start a Podcast with WordPress

Let’s talk about podcasting. Because it seems like everybody already is. Podcasting is taking over content creation and media and spreading like wildfire. Nearly everyone wants to get a part of the billion dollar industry, so we want to give you a definitive look at...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.