Elementor adalah Page Builder yang powerful untuk WordPress, yang memungkinkan Anda membuat halaman web menarik tanpa pengetahuan pemrograman. Salah satu elemen paling berguna dalam Elementor adalah Icon-List. Dengan fitur ini, Anda dapat menyajikan informasi secara visual, baik itu untuk daftar tugas, tautan media sosial, atau konten lainnya. Dalam panduan ini, saya akan menunjukkan langkah demi langkah bagaimana cara membuat dan menyesuaikan Icon-Liste yang menarik.
Inti Pembelajaran
- Dengan Icon-Liste, Anda dapat dengan mudah menambahkan elemen visual.
- Masing-masing entri dapat diberi teks, ikon, dan tautan secara individual.
- Gaya dan tata letak Liste dapat disesuaikan dengan fleksibel.
Panduan Langkah demi Langkah
Langkah 1: Buka Elementor dan Tambahkan Icon-Liste
Pertama, buka editor Elementor di situs web yang sedang Anda kerjakan. Cari opsi "Icon-Liste" di area widget Elementor dan tarik widget ini ke bagian halaman yang diinginkan.
Langkah 2: Sesuaikan Elemen Icon-Liste
Setelah widget ditempatkan, Anda akan melihat beberapa elemen daftar secara default. Anda dapat mengubah jumlah ikon dan baris teks dengan menggunakan opsi yang sesuai di menu kiri. Klik "Listenelement 1" untuk mengedit teks. Di sini, Anda dapat memasukkan "YouTube," misalnya.
Langkah 3: Pilih Ikon
Untuk memilih ikon yang sesuai untuk setiap entri daftar, klik pada area ikon. Sebuah jendela akan muncul di mana Anda dapat memilih dari perpustakaan ikon yang luas. Cari "YouTube" dan tambahkan ikon yang diinginkan.
Langkah 4: Tambahkan Tautan
Anda juga dapat menetapkan tautan ke setiap entri daftar. Klik pada bidang "Tautan" di sebelah teks dan masukkan URL yang sesuai, seperti tautan ke saluran YouTube Anda.
Langkah 5: Sesuaikan Tata Letak
Sekarang Anda dapat mengonfigurasi opsi tata letak. Pilih antara "Inline" atau "Full Width." Tentukan bagaimana Anda ingin visualisasi Icon-Liste Anda, sesuaikan dengan gaya keseluruhan situs web Anda.
Langkah 6: Sesuaikan Gaya
Pergi ke tab Gaya untuk mengubah penampilan Icon-Liste Anda. Di sini Anda bisa menentukan jarak antara setiap baris, menyesuaikan penataan, dan mengaktifkan elemen pemisah yang mungkin. Misalnya, pilih garis putus-putus sebagai pemisah untuk tampilan yang elegan.
Langkah 7: Sesuaikan Warna
Anda dapat mengubah warna ikon dan teks Anda. Misalnya, pilih warna hijau saat mouse digerakkan di atas elemen. Ini menciptakan efek bayangan interaktif yang menarik perhatian pengunjung Anda.
Langkah 8: Atur Ukuran Font dan Tipografi
Untuk memastikan ukuran font cocok secara visual dengan ikon-ikon, atur ukuran teks di bawah tab "Teks." Misalnya, atur ukuran pada 25 dan pilih warna teks yang cocok, untuk menciptakan efek visual yang harmonis.
Langkah 9: Pratinjau dan Simpan
Jika Anda puas dengan Icon-Liste Anda, klik "Simpan" untuk menerapkan perubahan. Perhatikan pratinjau untuk melihat bagaimana daftar itu terlihat di frontend situs web.
Langkah 10: Uji Fungsionalitas
Uji tautan di halaman yang sudah dipublikasikan untuk memastikan semuanya berfungsi seperti yang diinginkan. Periksa juga apakah efek Hover ditampilkan dengan benar, untuk memastikan interaktivitasnya.
Ringkasan
Pada panduan ini, kamu telah belajar cara membuat daftar ikon yang menarik dan fungsional langkah demi langkah dengan Elementor untuk WordPress. Kamu hanya perlu melakukan beberapa penyesuaian sederhana untuk menyesuaikan daftar dengan gayamu dan meningkatkan pengalaman pengguna.
Pertanyaan Umum
Bagaimana cara menambahkan elemen daftar baru ke daftar ikon?Kamu dapat dengan mudah mengklik simbol "+" di widget daftar ikon untuk menambahkan elemen baru.
Dapatkah saya mengubah ikon setelah menambahkannya?Ya, kamu dapat mengubah setiap ikon kapan pun dengan mengklik elemen daftar yang sesuai.
Bagaimana cara mengubah warna ikon?Di area Gaya Editor Elementor, kamu dapat menyesuaikan warna ikon dan teks.
Dapatkah saya menambahkan tautan ke media sosial?Ya, setiap entri dalam daftar dapat dilengkapi dengan tautan, ideal untuk media sosial.
Apakah ada fitur pratinjau di Elementor?Ya, kamu dapat melihat pratinjaunya sebelum menyimpan perubahan.
