Cara Membuat Step Icon di Elementor Tanpa Plugin Tambahan

Membuat desain langkah-demi-langkah (step icon) yang menarik biasanya membutuhkan plugin tambahan di Elementor. Namun, tahukah Anda bahwa Anda bisa membuatnya hanya dengan sedikit sentuhan CSS? Metode ini lebih ringan karena tidak membebani situs Anda dengan plugin baru.

Berikut adalah panduan langkah demi langkah untuk membuatnya:

Langkah 1: Gunakan Widget Icon Box

Langkah pertama adalah menyiapkan elemen dasarnya.

• Buka editor Elementor Anda.
• Cari dan pilih widget Icon Box, lalu tarik ke dalam kolom desain Anda.
• Duplikat widget tersebut sesuai dengan jumlah step atau langkah yang ingin Anda buat.

Langkah 2: Atur Posisi dan Gaya Icon

Agar terlihat seperti alur proses, Anda perlu menyesuaikan tata letaknya.

• Masuk ke pengaturan widget Icon Box.
• Atur Icon Position ke sebelah kiri (Left) atau sesuaikan dengan kebutuhan desain Anda.
• Pastikan gaya (Style) icon sudah sesuai dengan tema warna situs Anda.

Langkah 3: Menambahkan Kode Custom CSS

Ini adalah bagian terpenting untuk memunculkan garis penghubung antar icon secara otomatis.

• Klik pada widget Icon Box pertama.
• Buka tab Advanced dan cari kolom Custom CSS.
• Tempelkan kode CSS berikut ini:

CSS

selector:not(:last-child):after {
content: '';
position: absolute;
width: 2px;
background-color: #0055CC; /* Warna garis */
top: 50px; /* Sesuaikan dengan tinggi icon */
bottom: -30px; /* Panjang garis ke bawah */
left: 35px; /* Sesuaikan agar tepat di tengah icon */
}

Tips Penyesuaian (Fine-Tuning):

• Warna Garis: Ubah kode #0055CC sesuai dengan identitas brand Anda.
• Posisi Garis: Jika garis tidak pas di tengah icon, Anda bisa menggeser nilai left (misal ke 30px atau 40px).
• Jarak: Atur nilai top dan bottom untuk menyesuaikan kapan garis dimulai dan seberapa jauh garis tersebut menjuntai ke bawah menuju icon berikutnya.

Dengan teknik CSS sederhana ini, Anda kini memiliki step icon yang bersih dan profesional tanpa perlu menginstal plugin pihak ketiga yang berat. Desain ini otomatis akan menghilangkan garis pada item terakhir berkat perintah :not(:last-child) dalam kode tersebut.