Cara termudah untuk Menambahkan Slider Sebelum dan Setelah ke Situs Web Anda

Gambar sebelum dan sesudah banyak digunakan untuk tujuan pemasaran di berbagai industri yang sangat luas . Tidak ada kata-kata yang dapat lebih menggambarkan efek suatu proses tertentu selain gambar yang menunjukkan secara tepat bagaimana seseorang atau sesuatu tampak sebelum dan sesudah proses itu. Bahkan dalam bisnis yang tidak berfokus pada produk yang efeknya terlihat, fitur ini dapat digunakan dengan cara yang lucu.

Katakanlah Anda menjalankan sebuah restoran – Anda dapat menunjukkan bagaimana penampilan seseorang sebelum makan di istana Anda dan betapa senangnya mereka setelah mencicipi makanan lezat Anda. Kemungkinan sebelum dan sesudah penawaran slider dalam hal menggambarkan manfaat dan keunggulan produk/layanan Anda tidak terbatas . Itu semua terserah imajinasi Anda.

Sama seperti menambahkan efek paralaks ke halaman Anda, kami membuat situs web Anda terlihat modern, penggeser sebelum dan sesudah membuatnya sulit untuk dilupakan karena gambar dapat menceritakan lebih dari 1000 kata.

Plus, Anda dapat menambahkan fitur ini ke situs web Anda sepenuhnya secara gratis, dan semuanya sendiri. Pada artikel ini, kami akan menunjukkan cara membuat slider sebelum dan sesudah dengan plugin Qi Addons for Elementor yang populer dan gratis.

Tetap disini untuk membaca lebih lanjut tentang:

• Menambahkan Sebelum dan Setelah Slider dengan Qi Addons untuk Elementor
• Menjelajahi Opsi Lanjutan

Menambahkan Sebelum dan Setelah Slider dengan Qi Addons untuk Elementor

Qi Addons for Elementor adalah alat intuitif dan gratis yang memungkinkan Anda menambahkan berbagai elemen cantik ke situs web Anda dengan mudah. Muncul dengan antarmuka yang sangat praktis dan ramah pengguna , dan baik pemula maupun pengguna tingkat lanjut akan mudah menggunakannya. Apa yang sangat hebat tentang Qi adalah kenyataan bahwa selain begitu banyak fitur yang berguna, ia juga memberi Anda sedikit keanggunan kontemporer.

Proses pemasangan QI Addons for Elementor tidak berbeda dengan pemasangan plugin lainnya. Jika Anda memiliki pertanyaan tentang itu, pastikan untuk memeriksa tautan yang kami sediakan di atas, dan Anda juga dapat menulis kepada kami di bagian komentar.

Karena ini adalah plugin Elementor, pastikan untuk beralih ke editor Elementor saat membuat postingan baru . Semua widget Qi Addons akan ditampilkan dengan rapi di menu elemen sebelah kiri . Cukup gulir ke bawah menu untuk menemukannya.

Widget Before dan After Slider menawarkan cara sederhana dan efektif untuk menampilkan dua gambar dalam bingkai yang sama . Temukan di menu sidebar di sebelah kiri, dengan mengetikkan nama widget di kolom pencarian atau dengan menelusuri widget di menu.

Untuk menambahkan Slider perbandingan Sebelum/Sesudah, seret dan lepas elemen Elementor ke tempat yang diinginkan. Saat widget ditambahkan, semua pengaturan akan berada di sisi kiri dan di dalam tab Konten dan Gaya adalah semua opsi yang terkait dengan penggeser .

Sekarang, Anda perlu menambahkan gambar sebelum dan sesudah ke penggeser . Pertama, kami menambahkan gambar sebelumnya – arahkan kursor ke bidang gambar dan opsi Pilih Gambar akan muncul atau cukup klik ikon plus kecil di tengah bidang.

Anda dapat memilih gambar dari perpustakaan media atau mengunggah gambar ke perpustakaan media Anda jika perlu . Cukup seret dan lepas gambar yang dipilih dan ke perpustakaan media jika belum ada, lalu pilih dan pilih.

Setelah Anda menyisipkan gambar yang diinginkan, Anda dapat melanjutkan untuk menyesuaikan penggeser sebelum/sesudah dengan mengubah teks yang akan ditampilkan dalam lingkaran di tengah penggeser . Anda dapat menulis instruksi di sini, atau pesan yang lebih menarik, terserah Anda dan gaya situs web Anda. Anda juga dapat memilih apakah Anda ingin teks disejajarkan secara vertikal atau horizontal.

Jika Anda ingin mengatur di mana batas antara gambar sebelum dan sesudah akan muncul di penggeser, Anda dapat memasukkan nilai Offset yang diinginkan di bidang . Nilai defaultnya adalah 50% yang artinya batas default berada tepat di tengah-tengah gambar. Seperti inilah tampilan slider jika Anda menyesuaikan offset:

Sekarang, saatnya untuk lebih menyempurnakan slider sebelum-sesudah. Mari kita lihat apa lagi yang dapat Anda sesuaikan untuk membuat bilah geser terlihat seperti yang Anda inginkan. Klik tab Gaya untuk menjelajahi opsi lainnya .

Jika Anda ingin memindahkan pegangan melingkar dari tengah gambar, cukup gunakan penggeser untuk menyesuaikan nilai Handle Top Offset . Anda akan segera melihat perubahan langsung sehingga Anda dapat dengan mudah memutuskan apa yang terbaik untuk Anda. Anda juga akan menyesuaikan ukuran lingkaran dengan cara yang sama, serta batas antara versi gambar sebelum / sesudah .

Anda juga dapat mengklik Warna Teks Nabdle untuk membuat bayangan warna Anda untuk teks dalam lingkaran , juga memilih font teks dengan cara yang sama . Terakhir, Anda juga dapat menyesuaikan warna lingkaran dengan cara yang sama.

Menjelajahi Opsi Lanjutan

Di tab Advanced, Anda akan menemukan lebih banyak opsi untuk membuat slider lebih menarik dan menarik. Opsi ini tidak eksklusif untuk widget ini saja, ini adalah opsi Elementor default yang dapat Anda gunakan untuk mengedit widget lain di halaman juga.

Mari kita ilustrasikan beberapa yang paling menarik. Jangan ragu untuk menguji semua opsi, karena Anda akan melihat semua perubahan yang Anda buat secara langsung, sehingga Anda dapat langsung mempelajari apa yang dilakukan setiap opsi pada penggeser dan apakah itu berfungsi untuk Anda.

Jika Anda membuka menu Lanjutan, Anda akan melihat opsi untuk mengatur margin dan padding . Anda akan melihat ikon laptop kecil di sebelah setiap opsi yang memungkinkan Anda untuk menetapkan nilai yang berbeda untuk margin dan padding pada perangkat yang berbeda – laptop, tablet, atau ponsel.

Efek Gerak sangat menarik dan Anda memiliki lebih dari 35 pilihan efek gerak untuk dipilih. Anda juga memiliki kemungkinan untuk mengatur animasi yang berbeda untuk ditampilkan pada perangkat yang berbeda . Setelah Anda memilih jenis animasi, Anda juga dapat menyesuaikan durasi dan penundaannya jika dirasa perlu.

Sekarang klik tab Transform untuk menemukan lebih banyak efek yang dapat Anda gunakan . Dari memutar ke miring dan membalik horizontal dan vertikal, ada banyak hal yang dapat Anda lakukan untuk mengubah tampilan slider.

Di tab Perbatasan, Anda akan menemukan opsi yang memungkinkan Anda untuk menghias sider dengan menambahkan batas gambar bayangan dalam warna yang Anda pilih . Anda juga dapat memilih untuk menambahkan efek bayangan di sekitar kotak slide dan mengatur output efek bayangan.

Opsi di tab Mask sangat berguna. Anda dapat mengatur di sini agar penggeser ditampilkan dalam berbagai bentuk – lingkaran, bunga, sketsa, segitiga, gumpalan, segi enam, atau bahkan menambahkan bentuk khusus. Dimungkinkan juga untuk menyesuaikan ukuran dan posisi bentuk yang dipilih.

Berikan perhatian khusus pada tab Responsive , karena ini sangat Anda dapat memilih slider untuk tidak ditampilkan pada perangkat yang dipilih .

Seperti inilah tampilan slider pada halaman setelah kami menyesuaikannya dengan kebutuhan kami:

Kesimpulannya

Seperti yang Anda lihat, menambahkan penggeser sebelum dan sesudah di halaman Anda bukanlah ilmu roket. Sekarang Anda dapat membiarkan imajinasi Anda menjadi liar dan membuat beberapa representasi visual yang mengesankan dari efek yang mungkin dihasilkan oleh pekerjaan, produk, atau layanan Anda. Jika Anda memiliki pertanyaan, komentar, atau pertanyaan apa pun, jangan ragu untuk menghubungi kami kapan saja.

Kami harap artikel ini bermanfaat. Jika Anda menyukainya, jangan ragu untuk membaca beberapa artikel ini juga!

• Cara Menyesuaikan Formulir Kontak Anda 7 Gaya dengan Cara Mudah
• Cara Menyorot Teks di WordPress dengan Cara Mudah
• Cara Membuat Alur Langkah Menggunakan Widget Proses Elementor