Create a step-by-step design (step icon) Attractive layouts usually require additional plugins in Elementor. However, did you know you can create them with just a few CSS touches? This method is more lightweight because it doesn't burden your site with new plugins.
Here is a step by step guide to make it:
Step 1: Use the Icon Box Widget
The first step is to prepare the basic elements.
- Open your Elementor editor.
- Search and select widget Icon Box, then drag it into your design column.
- Duplicate the widget according to the number of times step or steps you want to make.
Step 2: Set Icon Position and Style
To make it look like a process flow, you need to adjust the layout.
- Go to the Icon Box widget settings.
- Set Icon Position to the left (Left) or customize it to your design needs.
- Make sure the style (Style) the icon is in accordance with your site's color theme.
Step 3: Adding Custom CSS Code
This is the most important part to make the connecting lines between icons appear automatically.
- Click on the first Icon Box widget.
- Open tab Advanced and look for the column Custom CSS.
- Paste the following CSS code:
CSS
selector:not(:last-child):after { content: ''; position: absolute; width: 2px; background-color: #0055CC; /* Line color */ top: 50px; /* Adjust to fit the icon height */ bottom: -30px; /* Line length down */ left: 35px; /* Adjust to fit the icon center */ }Fine-Tuning Tips:
- Line Color: Change code
#0055CCaccording to identity brand You. - Line Position: If the line does not fit in the center of the icon, you can shift the value.
left(eg to30pxor40px). - Distance: Set values
topAndbottomto adjust when the line starts and how far it extends down towards the next icon.
With this simple CSS technique, you now have step icon A clean and professional design without the need to install heavy third-party plugins. This design will automatically remove the line on the last item thanks to the command :not(:last-child) in the code.