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.
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).
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.
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.
content: '24'!important; font-family: 'ETMODULES'; font-size: 50px!important; font-weight: bold; color: #d2007f; position: absolute; top: 50%; right: -55px;
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.
content: '22'!important; font-family: 'ETMODULES'; font-size: 50px!important; font-weight: bold; color: #d2007f; position: absolute; left: calc(50% - 25px); bottom: -50px;
Here is how this looks with the design settings used in the video and the CSS snippets.
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!