We can add Divi icons between the columns inside a Row using CSS properties to create a "process steps" feel.
Create the Desktop layout
To make this work, we need a Row with at least 2 columns. In the following example, we are going to use a 3-column Row for a better outcome.
Note: The following process can be used for Rows/Columns already added to the page's layout.
Important Note: For this to work properly, make sure that the Dynamic Icons option in Divi > Theme Options > Performance Tab is deactivated.
In the page layout, insert a Row with 3 Columns;
Edit the Row settings and go to the Design Tab;
Open the Sizing options group and enable Use Custom Gutter Width and Use Equalize Column Heights;
Set the Custom Gutter Width to 4;
For the first column inside the Row, go to Advanced Tab > Custom CSS > After and add these CSS properties:
content: '$';
font-family: 'ETmodules';
font-size: 50px;
color: #6c2fb9;
position: absolute;
top: 50%;
right: -60px;
For the second column inside the Row, go to Advanced Tab > Custom CSS > After and add these CSS properties:
content: '$';
font-family: 'ETmodules';
font-size: 50px;
color: #6c2fb9;
position: absolute;
top: 50%;
right: -60px;
Create the Tablet and Phone layout
Edit the first column in the Row, go to Advanced Tab > Custom CSS > After, and enable Divi's Responsive Settings for the Main element as well as for the After element and switch to Tablet View
For the Main (Tablet), add this CSS property:
margin-bottom: 70px;
For the After (tablet), add these CSS properties:
content: '"';
font-family: 'ETmodules';
font-size: 50px;
color: #6c2fb9;
position: absolute;
left: 50%;
transform: translatex(-50%);
bottom: -50px
Edit the second column in the Row, and repeat steps 1, 2 and 3.
The demo section is available for download from the following link: https://slack-files.com/T0J2HJAJ2-F05SW1EBVJL-e9874af828.
How to use the JSON file
Download the JSON file to your computer
Go to the WordPress Dashboard > Divi > Divi Library
Click on the Import/Export button at the top
Choose the JSON file downloaded at step 1
Once the import is done, open the page where that layout should be imported
Click on the Add New Section button
Choose Add from Library tab
Choose the Section named
Arrows between columns