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!

Preview

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

Spacing

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 Creating an “Our Process” Section with Divi’s New Column Structures

Visibility

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

Sizing

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 Creating an “Our Process” Section with Divi’s New Column Structures

Spacing

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

Transitions

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

Add Horizontal Divider to Second Column of Row #1

Visibility

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 Creating an “Our Process” Section with Divi’s New Column Structures

Divider Color

Change the divider color next.

  • Color: #dddddd

creating-an-our-process-section-with-divis-new-column-structures-22 Creating an “Our Process” Section with Divi’s New Column Structures

Spacing

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

Add Vertical Divider to First Column of Row #2

Visibility

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 Creating an “Our Process” Section with Divi’s New Column Structures

Background Color

Add a background color to the module next.

  • Background Color: #dddddd

creating-an-our-process-section-with-divis-new-column-structures-26 Creating an “Our Process” Section with Divi’s New Column Structures

Sizing

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 Creating an “Our Process” Section with Divi’s New Column Structures

Spacing

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

Spacing

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

Spacing

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 Creating an “Our Process” Section with Divi’s New Column Structures

Visibility

And hide the section on desktop in the visibility settings.

creating-an-our-process-section-with-divis-new-column-structures-35 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

Remove Spacing

Continue by removing the spacing settings of this module.

creating-an-our-process-section-with-divis-new-column-structures-38 Creating an “Our Process” Section with Divi’s New Column Structures

Add Row #2

Column Structure

Then, add another row with one column.

creating-an-our-process-section-with-divis-new-column-structures-39 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

Change Icon

Change the icon into the one that points downwards.

creating-an-our-process-section-with-divis-new-column-structures-41 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

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 Creating an “Our Process” Section with Divi’s New Column Structures

Preview

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 Creating an “Our Process” Section with Divi’s New Column Structures

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!

SEO News and More

SEO News and More