Code by Day | Explore By Weekend

How To Add Arrow Icons Between Divi Columns To Create Process Steps Tutorial by Pee Aye Creative

How To Add Arrow Icons Between Divi Columns To Create Process Steps

In this tutorial, I will show you how to add arrow icons between Divi columns in a row to create process steps.

Setup

Add Row, Columns, And Modules

There are a few setup steps that are needed for this, and then we will get to the CSS snippets that make this happen. First, I suggest creating your row with columns and add any modules into them. You could use a blurb, text, buttons, images, etc. You can also adjust any settings in the columns like adding a background color, padding, border, etc.

Adjust Row Gutter And Equalize Columns

This step is optional, but recommended. If you want more space between columns, this is called the gutter. So I suggest changing the row gutter width to 4 in the Design tab of the Row settings. Below that setting is another setting, and this is helpful if your content in the columns is not exactly equal. If you have a background color on the columns, turning this setting on will make them equal height.

set the Divi row gutter width to 4 and equalize column heights

Adjust The Column Margin Bottom On Mobile

That solves the spacing issue on Desktop, but what about when the columns stack? We also need to add more space for responsive layouts to make more room for the icon at the bottom on Tablet and Phone. To do this, go to the settings of first two cololumns to the Advanced tab. Open the Custom CSS toggle and click on the responsive phone icon beside Main Element. Click on the Tablet tab and write “margin-bttom: 75px” (which will also apply to Phone too).

add margin bottom on the Divi columns on Tablet and Phone

Overflow Visible

Another setting that may be necessary is setting the overflow on the columns to visible. You can do this by going to the Column settings to the Advanced tab to the Visibility toggle. There you will see Horizontal Overflow and Vertical Overflow. Set both of these to Visible.

change the column visibility to overflow visibile

Add The CSS

We have two snippets here that are slightly different. One of them has an arrow pointing to the right, while the other has an arrow pointing down. The position of the arrow is also different based on where the icon is added.

Add The Icon For Desktop

Go to the settings for both the first and second columns to the Advanced tab and open the Custom CSS toggle. Go down to the “After” input field. Hover over the setting and click on the responsive phone icon. This opens the Desktop, Tablet, and Phone responsive tabs. Paste this first snippet in the Desktop tab only.

Desktop
content: '24'!important;
font-family: 'ETMODULES';
font-size: 50px!important;
font-weight: bold;
color: #d2007f;
position: absolute;
top: 50%;
right: -55px;
add an icon to the right of the Divi columns on Desktop

Add The Icon For Tablet And Phone

Go to the settings for both the first and second columns to the Advanced tab and open the Custom CSS toggle. Go down to the “After” input field. Hover over the setting and click on the responsive phone icon. This opens the Desktop, Tablet, and Phone responsive tabs. Paste this second snippet in the Tablet tab only. This will actually affect both Tablet and Phone, so no need to paste it into Phone.

Tablet & Phone
content: '22'!important;
font-family: 'ETMODULES';
font-size: 50px!important;
font-weight: bold;
color: #d2007f;
position: absolute;
left: calc(50% - 25px);
bottom: -50px;
add an icon to the bottom of the Divi columns on Tablet and Phone

Here is how this looks with the design settings used in the video and the CSS snippets.

final process steps with icons between columns in Divi
final responsive process steps with icons between columns in Divi

Edit To Your Own Liking

Now obviously these snippets are just starter snippets, and are meant to be modified. You can change the icon using the ETModules font family, change the color, change the size, position, etc. Have fun!

15
Last updated Apr 12, 2021 @ 11:24 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Janis
Janis
24 days ago

Thank you! I have a place where I could use this!

Carl Cyphers
Carl Cyphers
22 days ago

Nelson, Will this work with 4 columns?

javier
19 days ago

So glad you addressed this issue. Very useful! thanks so much Nelson!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,900 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart