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

Posted on December 5, 2018 by in Divi Resources | 7 comments

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

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.

process section

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

process section

Spacing

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

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

process section

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.

process section

Add Row #1

Column Structure

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

process section

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%

process section

Sizing

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

  • Make This Row Fullwidth: Yes

process section

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

process section

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.

process section

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.

process section

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

process section

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.

process section

Choose Icon

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

process section

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

process section

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)

process section

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

process section

Hover Icon Settings

Apply a different icon color and font size on hover.

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

process section

Text Settings

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

  • Text Orientation: Center
  • Text Color: Light

process section

Title Text Settings

The title text settings need to be modified as well.

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

process section

Transitions

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

  • Transition Duration: 500ms

process section

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.

process section

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.

process section

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

process section

Divider Color

Change the divider color next.

  • Color: #dddddd

process section

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

process section

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:

process section

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

process section

Background Color

Add a background color to the module next.

  • Background Color: #dddddd

process section

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

process section

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

process section

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.

process section

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.

process section

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)

process section

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

process section

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

process section

Spacing

Add some custom top and bottom padding values.

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

process section

Visibility

And hide the section on desktop in the visibility settings.

process section

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.

process section

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.

process section

Remove Spacing

Continue by removing the spacing settings of this module.

process section

Add Row #2

Column Structure

Then, add another row with one column.

process section

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.

process section

Change Icon

Change the icon into the one that points downwards.

process section

Change Sizing

Change the sizing settings next.

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

process section

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.

process section

Change Spacing

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

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

process section

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.

process section

Preview

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

process section

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!

7 Comments

  1. This is great – thanks.

  2. I didn’t know that reducing the width of the divider creates a vertical line. Did I miss that information somewhere in the past?

  3. Wonderful Article… Please keep up the best work!

  4. I followed all the steps (might want to add opacity setting for title text in the middle – that one threw me for a sec) and it worked out great!

  5. Great! Like it very much. Thanks for sharing.

  6. I’m having trouble- I’m not able to use gradient effects (or image, or any of the other background types) on hover. It will only allow me to add a color. I CAN use gradients on the default side. What would be causing this??

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest