Ingin menambahkan overlay flipbox dan efek hover gambar ke situs WordPress Anda?

Bahkan jika Anda menggunakan tema WordPress berkualitas tinggi, Anda mungkin merasa dibatasi oleh opsi penyesuaian. Flipbox dan hover gambar menambahkan efek animasi yang menarik ke situs Anda.

Pada artikel ini, kami akan menunjukkan cara menambahkan overlay kotak flip dan gambar melayang ke situs WordPress Anda.

Cara membuat overlay flipbox dan hover di WordPress

Apa itu Flipbox?

Kotak flip adalah kotak yang terbalik saat Anda mengarahkan mouse ke atasnya. Anda dapat menambahkan efek animasi hover ini ke bagian tertentu dari situs web Anda termasuk kotak teks dan gambar.

Animasi Demo Flipbox

Istilah ini berasal dari fitur unik “balik” yang terjadi saat mouse mengarahkan kursor ke gambar. Anda dapat mengontrol bagaimana gambar dibalik, bersama dengan informasi dan desain dari kedua sisi gambar.

Jika situs Anda relatif statis, Anda dapat menggunakan efek flipbox agar terasa lebih interaktif.

Misalnya, Anda dapat menambahkan flipbox hover gambar ke halaman harga produk. Dengan begitu, saat pengguna mengarahkan kursor ke tingkat harga Anda, harga akan muncul.

Atau, jika Anda seorang freelancer, Anda dapat menambahkan logo perusahaan tempat Anda bekerja dengan flip itu dan menautkan ke setiap proyek.

Meskipun efek animasi ini dapat meningkatkan pengalaman pengguna situs web Anda, penting untuk tidak berlebihan.

Pikirkan efek flipbox seperti menambahkan bumbu ke dalam makanan. Itu ada di sana untuk meningkatkan rasa dan bahan yang ada, tetapi jika terlalu banyak maka akan merusak hidangan.

Karena itu, mari kita lihat bagaimana Anda dapat menambahkan overlay flipbox dan efek hover gambar ke blog atau situs WordPress Anda.

Cara Membuat Overlay Flipbox dan Efek Hover di WordPress

Anda dapat menambahkan flipbox dan efek hover ke situs WordPress Anda menggunakan banyak metode seperti pembuat halaman Elementor, atau menambahkan CSS khusus.

Namun, pendekatan yang kami rekomendasikan adalah menggunakan Flipbox – Hamparan Gambar Kotak Flip Awesomes plugin. Plugin ini fleksibel dan mudah digunakan. Ini adalah plugin WordPress flipbox dan image hover terbaik.

Versi gratis dari plugin ini menawarkan kecepatan dan kesederhanaan. Setelah plugin diinstal, Anda dapat dengan cepat menambahkan flip box yang bagus ke situs Anda.

Jika Anda memerlukan lebih banyak opsi penyesuaian, maka Anda mungkin ingin meningkatkan ke versi premium plugin. Ini memungkinkan Anda untuk mengontrol warna flipbox Anda dan menambahkan CSS khusus.

Anda mungkin menemukan bahwa template yang ada sudah terlihat bagus saat ditambahkan ke situs Anda, dalam hal ini, tidak perlu mengupgrade.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan Flipbox – Hamparan Gambar Kotak Flip Awesomes plugin. Untuk lebih jelasnya, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.

Setelah plugin dipasang dan diaktifkan, Anda dapat membuat flipbox pertama Anda dengan masuk ke Flip Box ┬╗Buat Baru.

Buat flipbox baru

Ini menampilkan seluruh pilihan template.

Jika itu tidak cukup, maka Anda dapat mengklik opsi menu ‘Impor Template’ untuk lebih banyak template yang dapat Anda gunakan.

Impor template flipbox

Dengan versi gratis plugin, ada 5 template berbeda yang bisa dipilih, ditambah 10 template lain yang bisa Anda impor.

Untuk mengimpor template baru yang dapat disesuaikan, klik tombol ‘Impor’ di sebelah nomor Style.

Flipbox klik tombol impor

Sekarang, saatnya memilih dan mulai menyesuaikan template Anda.

Anda perlu mengklik ‘Buat Gaya’ untuk memuat desain flipbox pertama Anda.

Ini akan memunculkan menu pop-up di mana Anda dapat menamai flipbox Anda, dan memilih tata letak yang ingin Anda sesuaikan.

Pilih flipbox apa yang akan disesuaikan

Opsi ‘Tata Letak’ ke-1, ke-2, dan ke-3 cocok dengan flipbox individual dalam tata letak. Klik ‘Simpan’ setelah Anda menentukan pilihan.

Penting untuk disebutkan bahwa desain akhir Anda akan sangat cocok dengan template flipbox, jadi sebaiknya pilih template yang menyerupai tampilan yang Anda inginkan di situs web Anda.

Ada tiga tab utama yang akan Anda gunakan untuk mengubah tampilan flipbox Anda, ‘Umum’, ‘Depan’, dan ‘Backend’.

Menu pengaturan umum Flipbox

Di setiap tab ini, Anda dapat mengubah font, padding, dan margin. Tapi, kami pikir opsi default sudah terlihat bagus.

Selanjutnya, kami akan mengubah teks di kedua sisi flipbox.

Arahkan kursor ke flipbox di bagian bawah layar dan klik ‘Edit’.

Teks edit pratinjau Flipbox

Ini akan memunculkan jendela pop-up yang memungkinkan Anda mengubah teks depan, teks belakang, dan gambar latar belakang.

Untuk mengubah judul, edit kotak teks ‘Judul Depan’ dan kotak ‘Ikon Font:’ jika Anda ingin menampilkan ikon yang berbeda.

Ubah judul dan ikon depan flipbox

Jika Anda ingin menambahkan gambar latar belakang, klik ‘Unggah Gambar’ di sebelah kanan opsi ‘Gambar Depan’.

Selanjutnya, unggah gambar baru atau pilih gambar dari perpustakaan Media Anda yang sudah ada.

Unggah gambar latar depan untuk flipbox

Setelah itu, Anda akan mengikuti serangkaian langkah yang sama untuk bagian belakang flipbox di bawah ‘Pengaturan Backend’.

Di sini Anda dapat mengubah judul dan teks yang ditampilkan saat kartu membalik.

Ubah teks flipbox backend

Anda juga dapat mengubah bidang ‘Teks Tombol Backend’ dan ‘Tautan’.

Ini mengubah teks tombol dan ke mana pengguna Anda akan pergi saat diklik.

Tambahkan tombol dan tautan backend flipbox

Terakhir, klik ‘Unggah Sekarang’ untuk mengubah gambar latar belakang di bagian belakang flipbox.

Sama seperti di atas, Anda dapat mengunggah gambar, atau memilih salah satu dari perpustakaan Media Anda.

Unggah gambar latar backend

Setelah Anda selesai mengedit, pastikan untuk mengklik tombol ‘Kirim’ untuk menyimpan perubahan Anda.

Anda akan melihat bahwa perubahan baru Anda akan segera muncul di jendela ‘Pratinjau’.

Jika Anda ingin membuat seluruh baris flipbox, klik ikon ‘+’ di meta box ‘Add New Flip Boxes’.

Tambahkan sebaris flipbox

Ini akan memunculkan kotak pop-up yang mirip dengan yang di atas yang memungkinkan Anda menyesuaikan flipbox kedua Anda.

Sekarang Anda telah membuat dan menyesuaikan flipbox Anda, jadi inilah saatnya untuk menambahkannya ke situs WordPress Anda.

Cara termudah untuk melakukannya adalah dengan menggunakan kode pendek yang disertakan. Di sisi kanan layar Anda, ada kotak meta berlabel ‘Shortcode’, salin kode pendek yang menyerupai gambar di bawah ini.

Salin shortcode flipbox

Selanjutnya, navigasikan ke halaman atau posting di mana Anda ingin menambahkan flipbox dan tempel kode pendek Anda.

Kemudian, klik ‘Publikasikan’ atau ‘Perbarui’ jika posting Anda sudah tayang.

Tempel kode pendek flipbox

Flipbox baru Anda sekarang akan tersedia di situs Anda.

Perhatikan bahwa saat Anda mengubah ukuran jendela browser Anda, flipbox menyesuaikan karena 100% responsif.

Flipbox tampilan WordPress langsung

Plugin ini juga menyertakan widget flipbox yang dapat Anda tambahkan ke area widget mana pun yang didukung oleh tema Anda.

Untuk melakukan ini, navigasikan ke Penampilan ┬╗Widget dan temukan widget berjudul ‘Flipbox – Awesomes Flip Boxes Image Overlay’.

Tambahkan widget flipbox

Kemudian Anda dapat menarik dan melepas widget ke lokasi pilihan Anda.

Terakhir, masukkan id gaya, yang dapat ditemukan di menu utama plugin Flipbox, dan klik ‘Simpan’.

ID widget Flipbox

Kami berharap artikel ini membantu Anda mempelajari cara menambahkan hamparan flipbox dan mengarahkan kursor ke situs WordPress Anda. Anda mungkin juga ingin melihat panduan kami tentang mengoptimalkan gambar untuk SEO, dan panduan pemecahan masalah kami untuk memperbaiki masalah umum gambar WordPress.

Jika Anda menyukai artikel ini, silakan berlangganan kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Indonesia dan Facebook.



Author

Write A Comment