Developing an “Our Procedure” Phase with Divi’s New Column Constructions

Divi’s new column structures have undeniably added a ton extra integrated design probabilities to Divi. To turn you the way distinctive you’ll be able to get with Divi’s flexible column buildings, we’re going to turn you the way to create a singular “our procedure” segment the usage of Divi’s integrated choices most effective. On best of that, we’ll additionally upload a refined hover impact that looks when soaring some of the steps within the procedure. Those sections are nice for explaining the way you do what you do in your purchasers or potential purchasers.

Let’s get to it!

Preview

Ahead of we dive into the educational, let’s check out the end result you’ll be able to be expecting from this instructional.

Upload New Phase

Background Colour

Upload a regular segment to a brand new or present web page and use the next background colour for it:

Background Colour: #3a1dad

Spacing

Move to the spacing settings subsequent and upload some customized best and backside padding.

Best Padding: 170px
Backside Padding: 170px

Visibility

We’re developing an alternate on smaller display sizes however we’ll get started off developing the desktop model. That’s why have been disabling this segment on telephone and pill within the visibility settings.

Upload Row #1

Column Construction

If you’re accomplished enhancing the segment settings, proceed via including a brand new row the usage of the next column construction:

Upload Gradient Background to Column 1, 3 & 5

To create a pleasing hover impact, we’re going so as to add a gradient background to column 1, 3 & 5. Those are the columns that’ll every cling a procedure step. We’ll use the 2 ultimate columns to glue the stairs to each other. Every some of the 3 columns we discussed will want the similar gradient background:

Colour 1: #580cf2
Colour 2: rgba(41,196,169,0)
Column 1 Gradient Sort: Radial
Column 1 Get started Place: 38%
Column 1 Finish Place: 38%

Sizing

If you’re accomplished including the gradient backgrounds, pass to the sizing settings and allow the fullwidth possibility.

Make This Row Fullwidth: Sure

Spacing

We’ll additionally want some customized padding values for all the row and the column which might be devoted to protecting procedure steps.

Best Padding: 0px
Backside Padding: 0px
Column 1 Best Padding: 20px
Column 1 Backside Padding: 20px
Column 3 Best Padding: 20px
Column 3 Backside Padding: 20px
Column 5 Best Padding: 20px
Column 5 Backside Padding: 20px

Clone Row #1 Two times

Ahead of including any modules, we’re going to clone the row two times. This may increasingly lend a hand us save time within the upcoming steps.

Regulate First Replica

Take away Column Gradient Backgrounds

Open the second one row for your segment (the primary replica) and take away the entire column gradient backgrounds which have been implemented to it. We gained’t be wanting the ones since the second one row won’t cling any procedure steps, just a name and vertical dividers that’ll attach the stairs.

Take away Column Spacing

Likewise, take away the entire column customized padding that has been implemented to column 1, 3 & 5.

Best Padding: 0px
Backside Padding: 0px

Upload Blurb Module to First Colum of Row #1

Upload Content material

Time to start out including the modules! We’ll get started with a Blurb Module in column 1 of the primary row. This Blurb Module will cling the content material of our first step so pass forward and upload some textual content of your selection.

Make a choice Icon

We’re additionally the usage of the next icon that’ll point out the place to search for the next move:

Default Background Colour

Then, upload a default background colour to the Blurb Module. This background colour is equal to the only we’ve used for the segment. It hides the column gradient background we’ve added within the earlier a part of this instructional.

Background Colour: #3a1dad

Hover Background Colour

Alternatively, we wish the column gradient background to turn up on hover. That’s why we’re converting the background colour on hover to a fully clear one.

Background Colour: rgba(255,255,255,0)

Default Icon Settings

Proceed via going to the icon settings and making some adjustments.

Icon Colour: #9d8ad8
Icon Placement: Best
Use Icon Font Dimension: Sure
Icon Font Dimension: 80px

Hover Icon Settings

Practice a distinct icon colour and font dimension on hover.

Icon Colour: #ffffff
Icon Font Dimension: 120px

Textual content Settings

Subsequent, pass to the textual content settings and make some adjustments.

Textual content Orientation: Heart
Textual content Colour: Gentle

Identify Textual content Settings

The name textual content settings wish to be changed as smartly.

Identify Font Weight: Extremely Daring
Identify Font Taste: Uppercase

Transitions

To create a easy transition, we’ll building up the transition length.

Transition Period: 500ms

Clone Blurb Module & Position in Asymmetric Columns (Each Row #1 & #3)

Now that we’ve created the primary Blurb Module step, we will clone it 5 instances and position the duplicates within the columns marked within the print display under.

Trade Content material & Icon of Every Replica

After all, you’ll have to switch the content material of every some of the duplicates along side the icon to verify the method is making sense.

Upload Horizontal Divider to 2d Column of Row #1

Visibility

The second one module we’ll wish to upload is a Divider Module. We’re the usage of this module to glue all Blurb Module steps to each other. Move forward and upload one to the second one column of the primary row.

Display Divider: Sure

Divider Colour

Trade the divider colour subsequent.

Colour: #dddddd

Spacing

To align the Divider Module vertically, we’ll use some best margin. We’ll additionally building up the width of the module via the usage of some damaging left and proper margin.

Best Margin: 150px
Left Margin: -60px
Proper: -60px

Clone Horizontal Divider & Position in Even Columns (Each Row #1 & #3)

Clone the Divider Module and position it within the columns which might be marked within the print display under:

Upload Vertical Divider to First Column of Row #2

Visibility

We’ll desire a vertical divider as smartly. To create one, we’ll upload a brand new Divider Module to column 1 of the second one row however we’ll ensure the ‘Display Divider’ possibility is disabled.

Display Divider: No