Ingin mengetahui cara menambahkan efek hover pada widget Postingan di Elementor ? Jadi, teruslah membaca.
Menciptakan pengalaman pengguna yang menarik di situs web Anda memerlukan lebih dari sekadar memposting konten yang menarik. Untuk benar-benar memikat pengunjung Anda, penting untuk menambahkan elemen interaktif yang menarik dan mengejutkan. Efek hover adalah cara terbaik untuk mencapai hal ini. Mereka memberikan interaksi visual tambahan yang menarik perhatian dan mendorong pengguna untuk menjelajahi situs Anda lebih jauh.
Pada artikel ini, kami akan memandu Anda melalui proses menambahkan efek hover ke elemen widget Postingan.Elementor. Anda akan menemukan cara mengubah postingan Anda menjadi elemen dinamis dan interaktif, meningkatkan daya tarik visual dan keterlibatan pengunjung.
Baik Anda ingin menyorot artikel terbaru, promosi, atau konten tertentu, efek ini memungkinkan Anda melakukannya dengan gaya dan efisiensi.
Teruslah membaca untuk mempelajari teknik penting untuk menyesuaikan efek hover dan memaksimalkan dampak visual postingan Anda Elementor. Bersiaplah untuk memperkaya situs web Anda dengan elemen interaktif yang tidak hanya menarik perhatian tetapi juga meningkatkan pengalaman pengguna.
Daftar isi
Mengapa menggunakan efek hover?
Efek hover adalah teknik desain yang mengubah tampilan elemen saat pengguna mengarahkan kursor ke elemen tersebut. Penggunaannya di situs web, khususnya di widget postingan seperti yang ada di Elementor, memiliki beberapa keuntungan utama:
1. Peningkatan Interaktivitas
Efek hover meningkatkan interaktivitas dengan memberikan umpan balik visual langsung. Saat pengunjung mengarahkan kursor ke suatu elemen, perubahan halus atau mencolok akan menarik perhatian mereka dan menunjukkan bahwa elemen tersebut dapat diklik atau interaktif. Hal ini membuat navigasi lebih intuitif dan menarik.
2. Peningkatan daya tarik visual
Efek hover menambah dimensi estetika ekstra pada situs Anda. Mereka membantu membuat elemen lebih dinamis dan menarik secara visual, yang dapat menarik perhatian pengguna dan mendorong mereka untuk menjelajahi konten lebih jauh.
3. Menyoroti informasi penting
Dengan menerapkan efek hover, Anda dapat menyorot informasi tertentu, seperti judul, ringkasan, atau tombol ajakan bertindak. Hal ini memudahkan pengguna untuk melihat detail penting atau tindakan yang tersedia.
4. Memperkuat komitmen
Efek hover yang dirancang dengan baik dapat mendorong pengguna untuk lebih banyak berinteraksi dengan konten Anda. Dengan membuat elemen lebih menarik dan memberikan reaksi visual terhadap tindakannya, Anda dapat meningkatkan rasio klik-tayang dan memperpanjang waktu yang dihabiskan di situs Anda.
5. Pengalaman pengguna yang lebih baik
Penggunaan efek hover yang tepat meningkatkan pengalaman pengguna dengan membuat navigasi lebih lancar dan menyenangkan. Pengguna merasa situs web interaktif lebih menyenangkan untuk digunakan, sehingga dapat menghasilkan kepuasan dan retensi yang lebih baik.
Dengan mengintegrasikan efek hover ke dalam widget postingan Elementor, Anda tidak hanya dapat meningkatkan tampilan visual situs Anda tetapi juga memperkaya pengalaman pengguna secara signifikan.
Teknik-teknik ini adalah cara yang efektif untuk melibatkan pengunjung Anda dan mendorong mereka untuk menjelajahi konten Anda lebih jauh.
Bagaimana cara menambahkan efek hover ke widget Elementor Posts
Berbicara tentang efek hover, artikel ini akan menunjukkan kepada Anda cara menambahkan efek hover ke elemen postingan individual di widget Elementor Posts menggunakan CSS kustom Elementor, lebih khusus lagi, efek zoom-in hover.
Jika Anda kesulitan memahami apa yang kami bicarakan, kami mengundang Anda untuk menonton video di bawah ini.
Ada dua alasan mengapa kami membuat tutorial ini untuk Anda:
- Secara default, Anda dapat menambahkan efek hover ke postingan dari widget postingan Elementor. Tapi, efek hover akan sangat mendasar/standar.
- Secara default, Elementor memungkinkan Anda menambahkan efek ritsleting ke widget Posting (tab maju -> Transformasi -> skala). Tetapi efek hover akan memengaruhi semua (bukan individu) elemen widget posting.
Langkah-langkah untuk menambahkan efek hover ke setiap posting dari widget posting Elementor
Sebelum memulai tutorial, kami ingin memberi tahu Anda bahwa tutorial ini menggunakan fitur CSS Kustom Elementor. Fitur ini hanya tersedia di Elementor Pro; pastikan Anda telah meningkatkan versi Anda.
Langkah 1: Tambahkan Widget Posting
Buka editor Elementor Anda dan kami akan memulai semuanya dari awal, jadi buatlah bagian dengan satu kolom.
Baca juga: Bagaimana mengintegrasikan MailChimp dengan Elementor
Selanjutnya, pilih widget Posting dari panel widget, lalu seret dan lepas ke area pengeditan. Setelah Anda menambahkan widget Posting, Anda dapat mengedit dan mengatur gaya widget sesuai dengan preferensi Anda.
Ucapan: Harap pastikan Anda telah menerbitkan artikel di situs web Anda.
Langkah 2: Tambahkan Cuplikan CSS
Setelah Anda mengedit dan menata widget Postingan, kami kemudian akan menambahkan efek hover dalam setiap postingan dengan menambahkan cuplikan CSS sederhana.
Di pengaturan widget Postingan, buka Tab maju -> CSS khusus. Salin cuplikan CSS di bawah, lalu tempelkan ke kolom CSS khusus.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Kode di atas akan memilih elemen postingan individu pada widget Posts menggunakan pemilih .élémentor-post dan terapkan transformasi CSS.
Temukan juga: semua pemilih widget Elementor di artikel berikut
Jika Anda senang dengan efek hover yang digunakan, Anda dapat tetap seperti itu dan menyimpan proyek Anda jika diinginkan. Namun, jika Anda ingin menyesuaikan kecepatan transisi dan nilai skala transformasi, Anda dapat mengubah nilainya di cuplikan CSS.
Ucapan: Mengubah/memperbesar adalah efek umum dan populer yang digunakan di situs web. Jika Anda ingin tahu lebih banyak tentang metode lain untuk mengubah efek hover, Anda dapat mengunjungi ini halaman.
Sumber Daya terkait:
- Cara Menggunakan Pemosisian Online di Elementor
- Add-on Elementor Terbaik untuk WooCommerce
- Daftar Pemilih Widget Elemen
- Cara Membuat Menu Layar Penuh di Elementor
- Cara Membuat Akordeon Gambar dengan JetTabs di Elementor
- Cara Membuat Halaman 404 di Elementor
Tanya Jawab
Bisakah saya menambahkan efek hover khusus ke widget Postingan?
Ya, Anda dapat menggunakan opsi penyesuaian di Elementor untuk membuat efek hover unik, atau menambahkan kode CSS khusus untuk efek lebih lanjut.
Apakah efek hover memperlambat situs?
Efek hover yang dioptimalkan dengan baik seharusnya tidak mempengaruhi kinerja situs secara signifikan. Pastikan transisinya mulus dan gambarnya dioptimalkan.
Bisakah saya menggunakan efek hover yang berbeda untuk perangkat yang berbeda?
Ya, Elementor memungkinkan Anda menyetel efek hover untuk desktop dan perangkat seluler secara terpisah, memastikan pengalaman pengguna yang konsisten di semua perangkat.
Kesimpulan
Mengintegrasikan efek hover ke dalam elemen widget Postingan Elementor adalah strategi yang ampuh untuk memperkaya interaktivitas dan daya tarik visual situs Anda. Dengan menerapkan efek ini, Anda menciptakan pengalaman pengguna yang lebih menarik, dinamis, dan intuitif. Efek hover tidak hanya menambah sentuhan estetika; mereka juga memainkan peran penting dalam menyoroti informasi dan tindakan penting, sekaligus meningkatkan navigasi dan keterlibatan secara keseluruhan.
Kemampuan untuk memfokuskan perhatian pengunjung pada elemen tertentu dan mendorong interaksi yang lebih dalam berkontribusi terhadap pengalaman pengguna yang lebih baik dan berpotensi meningkatkan tingkat konversi. Dengan menggunakan alat yang disediakan oleh Elementor untuk menyesuaikan efek ini, Anda memberi pengunjung antarmuka interaktif yang mendorong mereka untuk menjelajahi lebih jauh konten Anda dan berinteraksi dengan situs Anda.
Ingatlah bahwa efek hover harus digunakan dengan bijaksana agar tidak membebani pengguna Anda. Pilihlah animasi yang halus dan relevan yang melengkapi keseluruhan estetika situs Anda sekaligus meningkatkan fungsionalitas. Dengan menggabungkan teknik ini dengan fitur-fitur canggih Elementor, Anda bisa buat situs web yang tidak hanya menarik perhatian tetapi juga memberikan pengalaman pengguna yang mengesankan.
Jelajahi berbagai opsi yang tersedia di Elementor dan mulai tambahkan efek hover untuk mengubah widget Postingan Anda menjadi elemen yang menarik secara visual dan interaktif. Situs web Anda akan mendapatkan keuntungan dari antarmuka yang lebih menarik, atraktif, dan fungsional.
Jika Anda memiliki kekhawatiran tentang cara menggunakannya, beri tahu kami di dalam komentar.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
