Cara Membuat Step Icon di Elementor Tanpa Plugin Tambahan

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 #0055CC according 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 to 30px or 40px).
  • Distance: Set values top And bottom to 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.

Leave a Reply