Cara Membuat Flipbox Overlay Dan Melayang Di WordPress

Saat mendesain situs WordPress yang menarik dan menarik, menambahkan elemen interaktif dapat sangat meningkatkan pengalaman pengguna. Flipbox adalah salah satu elemen yang memungkinkan Anda menampilkan konten secara dinamis dan interaktif.

Dalam posting blog ini, kami akan mengeksplorasi apa itu Flipbox, peran overlay dan hover Flipbox di situs WordPress, dan memberi Anda panduan langkah demi langkah tentang cara menambahkan overlay dan hover Flipbox di WordPress.

Apa itu Flipbox?

Flipbox adalah fitur desain yang memungkinkan Anda menyediakan materi sebagai kotak yang membalik atau berputar saat pengguna mengarahkan kursor ke atasnya. Biasanya mencakup dua sisi, depan, dan belakang, dengan konten berbeda di setiap sisi.

Peran Overlay Flipbox Dan Melayang di Situs WordPress

Overlay dan hover Flipbox dapat membantu meningkatkan pengalaman pengguna dan daya tarik visual situs WordPress Anda. Mereka memungkinkan Anda untuk menarik perhatian ke detail penting, menyorot fitur, atau memamerkan foto dan video Anda secara dinamis. Anda dapat membuat situs Anda lebih menarik, merangsang keterlibatan pengguna, dan meningkatkan estetika desain secara keseluruhan dengan menyertakan overlay dan hover Flipbox.

Panduan Langkah-demi-Langkah Untuk Menambahkan Flipbox ke Situs WordPress

Untuk menambahkan overlay dan hover Flipbox ke situs WordPress Anda, Anda memerlukan plugin yang sesuai yang menawarkan fungsi ini. Beberapa plugin Flipbox tersedia, tetapi dua pilihan populer adalah plugin Elementor dan ElementsKit Flipbox . Plugin ini menyediakan opsi yang mudah digunakan dan berbagai pengaturan penyesuaian untuk menciptakan efek Flipbox yang menakjubkan. Menginstal dan mengaktifkan plugin bukanlah ilmu roket. Anda dapat melakukannya dengan mudah dengan mengikuti beberapa langkah.

Sekarang, mari kembali menambahkan Flipbox ke situs Anda. Berikut adalah 4 cara mudah dan sederhana untuk melakukannya-

Langkah 1: Mengaktifkan Widget Flip Box

Untuk melakukan ini, masuk ke dasbor admin WordPress Anda dan Arahkan ke ElementsKit ⇒ widgets ⇒ flip box widget , nyalakan widget , dan klik Save Changes .

Langkah 2: Seret dan lepas widget

Edit halaman dengan memilih opsi Edit dengan Elementor. Kemudian, cari widget flip box dengan ikon Ekit dan cukup seret dan lepas widget ke halaman.

Langkah 3: Sesuaikan pengaturan

Luaskan menu Flip box untuk mengubah pengaturan :

0. Flip Options: Anda dapat memilih tampilan animasi flip. Ada empat opsi: Flip in, Zoom in, Slide in, dan 3D. Masing-masing memiliki gaya yang berbeda.

• Flip Direction: Ini menentukan ke arah mana animasi flip akan pergi. Bergantung pada jenis pembalikan yang Anda pilih, Anda akan melihat opsi yang berbeda untuk arah pembalikannya.

• Flip Trigger: Inilah cara Anda membuat flip terjadi. Anda dapat memilih di antara tiga opsi: Arahkan kursor (ketika Anda mengarahkan mouse ke atasnya), Klik Kotak (ketika Anda mengeklik kotak), atau Klik Tombol (ketika Anda mengeklik tombol tertentu).

• Tinggi Kotak Flip: Anda dapat mengubah ketinggian kotak flip. Di dalam pengaturan ini, ada dua tab: DEPAN dan KEMBALI. Anda dapat menyesuaikan konten di setiap sisi secara terpisah.

Untuk setiap sisi flip box, Anda dapat menyesuaikan hal-hal berikut:

• Jenis Media: Pilih apakah Anda ingin menggunakan ikon, gambar, atau tidak sama sekali (jika Anda tidak ingin menambahkan gambar apa pun).

• Ikon/Pilih file: Jika Anda memilih ikon atau gambar, Anda dapat memilih mana yang ingin Anda gunakan dari daftar atau memilih file dari komputer Anda.

• Judul: Beri judul atau nama pada sisi kotak lipat itu.

• Subtitle: Tambahkan teks yang lebih kecil di bawah judul untuk memberikan informasi lebih lanjut.

• Deskripsi Flip: Tulis deskripsi atau penjelasan untuk sisi kotak flip itu.

• Perataan: Putuskan apakah Anda ingin konten berada di sisi kiri, di tengah, atau di sisi kanan.

Setelah Anda selesai menyesuaikan konten untuk kedua sisi flip box, Anda dapat mengubah gaya agar terlihat seperti yang Anda inginkan.

Langkah 4: Formalisasi kotak flip Anda

Sekarang, buka tab Gaya dan luaskan setiap bagian ke opsi gaya yang sesuai:

Wrapper: Di sini Anda dapat mengubah Jenis Latar Belakang, Warna, Lokasi, Warna Kedua, Lokasi, Jenis, Sudut, dan sebagainya di bawah bungkus. Opsi untuk sisi depan dan belakang flip box dapat disesuaikan.

Ikon: Dengan memperluas opsi ini. Anda dapat mengubah Warna, Jenis Latar Belakang, Bayangan Kotak, Jenis Perbatasan, dan pengaturan lainnya untuk tampilan reguler dan hover. Baik ujung depan dan belakang kotak flip dapat memiliki gaya ikon yang disesuaikan.

Judul: Dari sini Anda bisa ubah Tipografi , Warna Judul, dan Margin Judul untuk kedua sisi kotak flip.

Subtitle: Ubah opsi ini untuk menyesuaikan Tipografi, Warna Judul, dan Margin Judul subtitle untuk kedua sisi kotak flip.

Deskripsi: Di ​​sini Anda dapat menyesuaikan Tipografi, Warna Deskripsi, dan Margin deskripsi untuk kedua sisi kotak flip.

Tombol: Perluas bagian tombol untuk mengubah Warna Teks, Warna Latar Belakang, Jenis Batas, Radius Batas, Kotak Batas, dan pengaturan lainnya. Tombol dapat ditata untuk tampilan reguler dan melayang.

Terakhir, klik terbitkan/ perbarui untuk menyimpan perubahan dan pratinjau kotak flip Elementor Anda:

Bagan yang mudah digunakan

Plugin Flipbox Overlay dan Hover Terbaik untuk WordPress

Inilah ikhtisar saya tentang dua plugin Flipbox overlay dan hover yang populer untuk WordPress secara berdampingan. Ini adalah plugin Elementor dan ElementsKit Flipbox. Lihat

Plugin Elementor Flipbox

Elementor adalah plugin pembuat halaman yang banyak digunakan dan sangat dihormati untuk WordPress. Ini menawarkan widget Flipbox yang memungkinkan Anda membuat animasi flip yang menakjubkan di situs web Anda. Dengan Elementor, Anda dapat dengan mudah menambahkan efek flip interaktif ke gambar, ikon, judul, dan deskripsi Anda. Plugin ini menyediakan antarmuka yang ramah pengguna di mana Anda dapat menyesuaikan arah flip, gaya animasi, peristiwa pemicu (arahkan, klik), dan berbagai elemen desain. Elementor dikenal dengan fleksibilitasnya, opsi gaya yang luas, dan kompatibilitas dengan berbagai tema.

Plugin Flipbox ElementsKit

ElementsKit adalah paket add-on komprehensif untuk Elementor yang meningkatkan fungsinya. Ada modul Flipbox khusus di dalam ElementsKit. Itu menambahkan fitur dan efek Flipbox yang lebih canggih ke situs web Anda yang diberdayakan oleh Elementor. Plugin ini menawarkan perpustakaan ekstensif template Flipbox pra-desain. Ini memungkinkan Anda membuat animasi flip yang menarik secara visual dengan cepat. Plugin ElementsKit Flipbox juga menyediakan opsi penyesuaian tambahan. Anda dapat memiliki berbagai gaya Flipbox, efek overlay, efek hover, dan berbagai peristiwa pemicu. Ini terintegrasi dengan mulus dengan Elementor dan memberikan pengalaman pengguna yang mulus untuk mendesain elemen Flipbox yang menawan.

Plugin Elementor Flipbox dan Plugin ElementsKit Flipbox dapat menjadi pilihan terbaik untuk Anda. Ini menghadirkan animasi flip yang interaktif dan menarik ke situs web. Plugin ini memiliki antarmuka yang ramah pengguna dan opsi penyesuaian yang luas. Plus, ini kompatibel dengan pembuat halaman Elementor. Tidak perlu menulis kode. Jadi, plugin ini membuat elemen Flipbox yang menarik secara visual dan interaktif menjadi lebih mudah bagi Anda.

Pertanyaan yang Sering Diajukan (FAQ)

Bagaimana Anda menambahkan efek hover di WordPress?

Untuk menambahkan efek hover di WordPress, Anda bisa memanfaatkan CSS atau plugin yang menawarkan fitur efek hover. Banyak pembuat halaman dan plugin penyesuai menyediakan opsi untuk menambahkan efek hover ke berbagai elemen, termasuk Flipbox.

Bagaimana Anda membuat kotak flip di WordPress?

Anda dapat membuat flip box di WordPress menggunakan plugin Flipbox khusus seperti ElementsKit. Plugin ini memungkinkan Anda membuat dan menyesuaikan elemen Flipbox dengan mudah tanpa memerlukan pengetahuan pengkodean.

Bagaimana Anda menambahkan gambar hover di WordPress?

Untuk menambahkan gambar hover di WordPress, Anda bisa menggunakan CSS atau plugin yang memberikan efek hover gambar. Plugin ini biasanya memiliki opsi untuk menentukan gambar yang berbeda atau mengubah tampilan saat mengarahkan kursor ke elemen gambar.

Bagaimana Anda menampilkan konten saat melayang di WordPress?

Anda dapat menampilkan konten saat melayang di WordPress menggunakan berbagai metode. Salah satu caranya adalah menggunakan CSS untuk menampilkan konten tersembunyi saat mengarahkan kursor ke elemen tertentu. Alternatifnya, plugin Flipbox sering menawarkan opsi untuk menampilkan konten yang berbeda di sisi depan dan belakang Flipbox, terlihat saat melayang.

Bungkus

Menambahkan overlay dan hover Flipbox ke situs WordPress Anda dapat secara signifikan meningkatkan pengalaman pengguna dan membuat konten Anda lebih menarik. Dengan mengikuti panduan langkah demi langkah yang diuraikan dalam posting blog ini dan memanfaatkan plugin Flipbox populer seperti ElementsKit, Anda dapat dengan mudah membuat efek Flipbox yang menakjubkan tanpa pengetahuan pengkodean apa pun. Jadi lanjutkan untuk membumbui situs web Anda dengan overlay dan hover Flipbox, dan pikat pengunjung situs Anda dengan konten yang interaktif dan menarik secara visual.