Sorotan Plugin Divi: Slide-Ins Mudah

Easy Slide-Ins adalah plugin pihak ketiga untuk Divi dan Extra yang memungkinkan Anda membuat slide-in (dan popup) menggunakan Divi builder. Slide-in dapat menampilkan apa pun yang dapat dibangun dengan Divi Builder. Picu slide-in dengan persentase gulir, maksud keluar, tombol dengan beberapa lokasi, dan dengan Kelas CSS. Ini termasuk pembaruan dan demo seumur hidup.

Dalam artikel ini, kita akan melihat Easy Slide-Ins dan melihat apa yang dapat dilakukan dan mudah digunakan. Kami juga akan melihat beberapa demo yang disertakan dengan plugin. Plugin ini tersedia dari situs web pengembang.

Memasang Slide-In Mudah

Pertama, unzip file. Di dalam folder, Anda akan menemukan demo, file dengan tautan ke dokumentasi, dan plugin Easy Slide-Ins.

Unggah dan aktifkan plugin seperti biasa.

Menu baru ditambahkan ke dasbor yang disebut Easy Slide-Ins. Klik menu ini dan masukkan kunci lisensi Anda.

Mengaktifkan lisensi menambahkan dua item menu (Semua Item dan Tambah Baru) di mana Anda dapat melihat slide-in Anda dan membuat slide-in baru.

Membuat Slide-In Baru

Mengklik untuk menambahkan slide baru akan membuka editor tempat Anda dapat menggunakan Divi Builder untuk membuat slide-in.

Ini juga mencakup banyak pengaturan. Mereka ditempatkan di bawah Divi Builder. Pilih posisi dari kiri, kanan, kiri atas, kanan atas, kiri bawah, kanan bawah, bilah atas, bilah bawah, bilah sisi kiri, atau bilah sisi kanan. Setel ke pemicu otomatis saat gulir dan pilih jumlah gulir. Anda juga dapat mengaturnya agar terbuka pada maksud keluar. Atur warna latar belakang, bayangan kotak, dan lebar slide-in.

Tampilkan judul dan masukkan teks untuk ditampilkan. Pilih latar belakang judul dan warna teks, serta jenis font, ukuran, dan berat. Atur kebulatan sudut, tinggi label, dan lebar label. Tampilkan ikon penutup dan pilih latar belakang dan warna ikon serta ukuran ikon.

Kontrolnya intuitif untuk digunakan dan dipahami. Ada cukup penyesuaian untuk memberi gaya pada label agar sesuai dengan situs web Anda dan mengontrol cara kerja slide-in.

Fitur lain ditambahkan atau dihapus tergantung pada opsi yang Anda pilih. Saya memilih Box Shadow dan sekarang menyediakan opsi untuk posisi horizontal dan vertikal, kekuatan kabur dan menyebar, dan warna.

Tab Tingkat Lanjut memungkinkan Anda memilih halaman tempat slide dapat ditampilkan. Anda dapat memilih semua halaman, halaman individual, dan semua posting. Anda dapat menyembunyikan slide-in di perangkat tertentu.

Tab Bidang Kustom memungkinkan Anda menambahkan bidang khusus seperti halaman atau pos mana pun.

Contoh Slide-In Mudah

Ini adalah halaman kontak dari tata letak Manajemen Risiko. Saya menggunakan ini untuk membuat slide-in sehingga desainnya sesuai dengan tata letak. Saya telah mengatur untuk tidak menampilkan bilah sisi atau navigasi titik. Anda dapat melihat pratinjau seperti halaman standar. Setelah Anda mendesain slide, publikasikan seperti biasa.

Saya telah mengaktifkan label di pengaturan dan mengatur latar belakang menjadi hitam dan teks menjadi putih. Saya menyimpan teks default (Hubungi Kami). Saya telah mengaturnya untuk ditampilkan di sudut kanan atas. Ini menggunakan ketinggian default, tetapi dapat diubah dengan mudah.

Mengklik label akan membuka slide, yang ditampilkan di atas layar yang memperlihatkan formulir kontak dari paket tata letak Manajemen Risiko. Mengklik tombol Hubungi Kami sekali lagi akan menutup slide-in. Saya mengatur lebar slide-in ke 500 piksel, tinggi label 150, dan lebar label 60.

Contoh menunjukkan bayangan kotak. Saya telah mengubah lokasi ke bilah sisi kanan, yang menampilkan tombol tutup. Saya telah mengubah warna label dan tombol tutup dan membuat sudut label lebih membulat. Saya juga telah mengatur lebar slide-in menjadi 600 piksel.

Untuk yang ini, saya memindahkan label ke posisi bar atas. Saya menggunakan warna dari tata letak dan mengubah lebar menjadi 122 piksel dan tinggi menjadi 40 piksel. Seperti yang Anda lihat pada gambar ini, label tetap berada di tempatnya saat menggulir.

Ini terbuka di layar penuh dan termasuk tombol tutup.

Untuk yang ini, saya telah menambahkan slide-in baru ke sidebar kiri. Saya telah menatanya agar sesuai dengan situs dan membiarkan sudut-sudut label dikuadratkan. Saya menggunakan margin atas label 50%, yang menempatkan bagian atas label di tengah tinggi layar saya.

Ini terbuka dari kiri. Saya memberikan lebar piksel 1000, sehingga mencakup banyak layar saya. Slide-in Kontak masih ditampilkan di bagian atas meskipun menu tertutup oleh slide-in buletin.

Slide-in memberi Anda kelas pemicu tombol. Anda dapat menggunakan ini dengan tombol untuk membuka slide-in.

Salin kelas dan tempel ke bidang Kelas CSS tombol.

Sekarang, mengklik tombol akan membuka slide-in. Tidak perlu ada label di mana pun, tetapi label akan meluncur dari arah tempat Anda meletakkan slide. Yang ini ditempatkan di sebelah kiri, jadi itu berasal dari kiri. Saya telah mengatur lebar ke 1000 piksel.

Demo Slide-In Mudah

File unduhan mencakup 12 demo. Ini adalah tata letak yang dibuat sebelumnya (file JSON) yang dapat Anda unggah ke Perpustakaan Divi. Impor mereka ke perpustakaan Divi seperti tata letak biasa. Mereka termasuk modul bergaya tetapi Anda harus mengatur pengaturan desain. Berikut adalah melihat beberapa dari mereka.

Ini adalah Koleksi Email dengan Exit Intent. Ini mencakup beberapa modul teks, formulir kontak, dan modul gambar.

Berikut tampilannya di layar. Saya telah meninggalkan semuanya secara default di sini, jadi tombol masih menampilkan teks asli, lokasi, dan gaya.

Yang ini adalah Collection Email with Scroll Intent. Ini termasuk gambar latar belakang, dua modul teks, dan modul email.

Begini tampilannya di halaman menggunakan pengaturan yang dibuat sebelumnya. Ini menunjukkan seberapa responsif slide-in (yang persis seperti yang kami harapkan, karena ini menunjukkan tata letak Divi). Jika Anda ingin menampilkan lebih banyak gambar, buat slide-in lebih lebar.

Ini adalah Panduan Pengunjung Anda. Ini termasuk modul kode (untuk Google Maps), beberapa uraian, teks, dan formulir kontak.

Begini tampilannya di halaman menggunakan pengaturan default.

Yang ini Promosi dengan label. Ini termasuk modul teks, beberapa tabel harga, dan tombol.

Berikut tampilannya di layar. Saya telah mengaturnya ke 800 piksel sehingga akan menunjukkan lebar penuh jika slide masuk. Saya menghapus label dan mengaturnya untuk ditampilkan ketika gulir halaman mencapai 60%.

Berikut tata letak yang sama jika dilihat dengan Extra. Saya senang melihat ini bekerja dengan baik dengan Divi dan Extra.

Harga dan Dokumentasi Slide-Ins Mudah

Easy Slide-Ins tersedia dari situs web pengembang. Ini memiliki dua opsi pembelian:

• Situs tunggal – $27
• Situs tidak terbatas – $97

Kedua lisensi termasuk demo dan pembaruan seumur hidup.

Dokumentasi disediakan di halaman dokumentasi dan dukungan pengembang. Halaman ini mencakup panduan dari masing-masing poin dengan gambar untuk menunjukkannya. Halaman ini juga menyertakan tautan ke dukungan email.

Mengakhiri Pikiran

Easy Slide-Ins memudahkan pembuatan slide-in dan popup untuk Divi dan Extra. Saya merasa mudah digunakan. Saya tidak pernah membutuhkan dokumentasi, tetapi ada jika diperlukan. Ini adalah cara yang menarik untuk memasukkan elemen halaman tersembunyi. Karena apa pun dapat digunakan dalam slide-in, Anda dapat menampilkan formulir kontak, pendaftaran buletin, ajakan bertindak, video, modul toko, dll. Ini bisa berupa modul tunggal atau tata letak halaman penuh.

Saya suka itu memiliki beberapa opsi pemicu. Exit intent dan auto trigger menjadikannya pilihan yang baik untuk membuat email dan popup CTA. Membuka dengan mengklik label adalah cara yang bagus untuk menambahkannya ke beberapa lokasi di halaman Anda. Saya suka Anda dapat menambahkan beberapa slide-in pada satu halaman dan Anda dapat menentukan halaman mana yang mereka tampilkan. Menambahkan Kelas CSS ke tombol adalah cara yang bagus untuk mengungkapkan informasi saat pengunjung memilih untuk melihatnya.

Anda dapat membuat slide-in dari front-end tetapi saya tidak melihat cara mengakses pengaturan. Tanpa pengaturan, saya tidak dapat memindahkan label dan melihat lokasinya secara real-time. Saya harus memuat halaman untuk melihatnya. Itu masih tidak sulit untuk digunakan, tetapi ada sedikit dugaan yang terlibat. Ini sangat kecil sehingga saya tidak akan melarang saya untuk menggunakan atau merekomendasikannya.

Jika Anda mencari cara sederhana dan intuitif untuk membuat slide-in menggunakan Divi Builder, Easy Slide-Ins layak untuk dilihat.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba Easy Slide-Ins untuk Divi? Beri tahu kami pendapat Anda tentang hal itu di komentar.

Gambar Unggulan melalui ByEmo / shutterstock.com