Sorotan Plugin Divi – Hamparan Divi

Divi Overlays adalah plugin untuk Divi by DiviLife, perusahaan pengembangan Divi pihak ketiga oleh anggota komunitas Tim Strifle. Ini memungkinkan Anda membuat popup dengan mudah menggunakan Divi Builder. Ini bukan hanya modal. Anda dapat membuat overlay layar penuh, dan menambahkan semua jenis konten yang Anda inginkan di overlay menggunakan Divi Builder, dan kemudian memicunya dengan apa pun di halaman termasuk tombol, tautan, gambar, dll. Anda dapat menyesuaikan warna latar belakang, font warna, dan pilih animasi pembuka.

Hamparan dapat mencakup formulir, tabel harga, keranjang belanja, video, gambar, tautan unduhan, peta, dan banyak lagi. Anda bahkan dapat mengaturnya untuk membuka overlay saat halaman dimuat. Mereka memungkinkan Anda untuk menampilkan konten tambahan tanpa harus menunggu halaman dimuat.

Kemampuan untuk menggunakan Divi Builder tentu saja berarti Anda memiliki akses ke setiap modul dan pengaturan untuk membuat overlay Anda. Ini berarti Anda memiliki akses ke hampir 40 modul dan Anda dapat menggunakan kode pendek dari plugin lain. Dengan akses ke modul jumlah ini Anda hanya dibatasi oleh imajinasi Anda.

Unduh: Unduh Divi Overlay

Dalam ikhtisar ini saya melihat versi 1.1, yang mencakup beberapa fitur baru yang diminta oleh pelanggan. Di bagian akhir, saya akan membahas beberapa fitur yang dapat Anda lihat di versi 2.0. Untuk contoh saya menggunakan kit gambar rangka serbaguna vol. 1. Mari kita menggali…

Instalasi

Unggah, instal, dan aktifkan plugin seperti yang Anda lakukan pada plugin premium lainnya. Setelah diaktifkan, Anda harus memasukkan kunci lisensi Anda. Buka Pengaturan dan pilih Aktivasi Divi Overlay di dasbor.

Masukkan kunci API dan email (dari akun Anda di DiviLife) dan pilih Simpan Perubahan . Sekarang Anda siap untuk mulai membuat overlay.

Tambahkan Hamparan Divi Baru

Hamparan dibuat secara terpisah dari konten Anda dan kemudian dibuka dari konten Anda menggunakan kode sederhana.

Untuk membuat overlay, buka Divi Overlays dan pilih Add New di dasbor. Dari sini Anda dapat memilih untuk menggunakan Divi Builder. Ini berfungsi sama seperti halaman atau posting normal mana pun yang menggunakan Divi Builder, termasuk plugin dan modul Divi khusus, dan Anda bahkan dapat menjalankan pengujian A/B menggunakan Divi Leads. Mereka bahkan bekerja dalam modul global. Anda juga dapat mengimpor dan mengekspor overlay Anda.

Pilih animasi dan pengaturan overlay dari kotak dropdown di sudut kanan atas. Di bawah Divi Builder adalah pilihan untuk latar belakang dan warna font.

Beberapa pengaturan ditambahkan ke sisi kanan. Sebuah kotak bernama Divi Overlay Animation menyertakan kotak dropdown di mana Anda dapat memilih dari 11 animasi. Ini menentukan bagaimana overlay muncul di layar.

Kotak centang ditambahkan untuk mencegah halaman utama bergulir saat hamparan ada di layar. Ini membuat pengguna tetap berada di lokasi yang sama di layar sehingga ketika mereka menutup overlay, mereka tahu di mana mereka berada. Ini sangat membantu jika mereka mengklik salah satu dari banyak tombol untuk membuka overlay. Dengan cara ini mereka tahu tombol mana yang mereka klik dan tidak kehilangan tempat di layar.

Saya telah menambahkan modul video dan memilih Genie untuk animasi overlay dan memilih untuk mencegah pengguliran halaman utama.

Sekarang setelah saya membuat overlay, saya dapat menggunakannya pada sebuah halaman. Untuk melakukan ini, buka Divi Overlay di dasbor dan pilih Divi Overlay untuk melihat daftar overlay yang tersedia. Untuk menggunakan overlay, salin kode yang ingin Anda gunakan dan tempel ke lokasi yang tepat. Mari kita lihat bagaimana melakukannya secara rinci.

Tautan dibuat menggunakan ID CSS. Salin ID CSS dan tambahkan tag pembuka <a id= dan penutup </a> seperti yang ditunjukkan pada contoh.

Dalam contoh ini saya menggunakan halaman arahan. Saya ingin menambahkan pemicu ke teks, logo toko aplikasi, ke gambar ponsel, membuat tombol, dan menempatkan tautan di dalam menu.

Tautan Teks

Salin Kode Pendek Konten dan tempelkan ke dalam kode atau modul teks (modul apa pun yang menerima kode pendek) di halaman Anda. Saya menempelkannya ke modul kode. Anda dapat menempatkan kode pendek Divi Overlay dalam modul ini sebanyak yang Anda inginkan. Tidak masalah di mana Anda menempatkan modul. Saya sarankan Anda menguji untuk memastikan modul tidak memengaruhi tata letak Anda.

Saya ingin menggunakan teks WATCH A DEMO sebagai tautan untuk membuka video. Untuk melakukan ini, salin ID CSS dari daftar overlay di layar dasbor.

Tempel kode ke modul teks Anda dan format teks Anda seperti ini:

<a id="overlay_unique_id_211154">WATCH A DEMO</a>

Dalam hal ini teks sudah tertanam dalam beberapa HTML, tapi tidak apa-apa. Buat saja Anda menempatkan kode di lokasi yang benar di dalam HTML.

Teks sekarang berwarna biru untuk menunjukkan bahwa itu adalah tautan.

Ketika saya mengklik teks, saya disajikan dengan video yang saya tempatkan tautannya di dalam overlay. Overlay dibuka dengan animasi yang saya pilih.

Tautan Gambar

Ada dua cara untuk menambahkan ID CSS ke gambar. Metode yang harus Anda gunakan akan bergantung pada bagaimana gambar ditempatkan di dalam konten Anda. Berikut adalah dua contoh:

Modul Teks

Saya ingin membuat gambar toko aplikasi dapat diklik, tetapi alih-alih membawa Anda ke toko aplikasi, saya ingin itu memberikan beberapa opsi dan informasi. Ini membutuhkan overlay baru, yang juga membutuhkan kode pendek baru di dalam modul kode.

Sekarang ketika saya mengklik logo aplikasi, saya mendapatkan hamparan dengan tautan ke dua toko aplikasi yang berbeda. Untuk UX/UI yang lebih baik, saya akan mengubah grafik untuk tombol, tetapi ini menunjukkan potensi menyediakan banyak opsi sambil menjaga konten tetap bersih. Untuk contoh ini saya mengatur backgound overlay menjadi putih dengan opacity 90 dan warna font menjadi abu-abu gelap.

Modul Gambar

Dalam contoh di atas saya menambahkan kode ke HTML karena gambar ditempatkan di dalam modul teks. Opsi lainnya adalah menempatkan gambar di dalam modul gambar dan menggunakan ID CSS di tab CSS Khusus .

Dalam tata letak ini ponsel berada dalam modul gambar. Saya akan menambahkan ID CSS sehingga akan membuka overlay video.

Di URL Tautan gunakan #open-overlay (atau teks serupa dengan simbol #). Sekarang saya bisa mengklik gambar dan membuka overlay.

Tautan Tombol

Menambahkan tautan hamparan ke tombol sama dengan menambahkannya ke gambar. Ingatlah untuk menambahkan kode pendek ke modul kode.

Tambahkan teks # ke URL tombol. Saya menggunakan #open-overlay seperti sebelumnya karena deskriptif (dan saya mencurinya dari Tim Strifler, tapi jangan katakan itu padanya).

Tambahkan kode ID CSS ke tab CSS Kustom .

Dan itu saja! Tombol baru sekarang membuka formulir kontak.

Tautan Menu

Untuk membuat tautan menu, salin ID Menu dan buka Appearance , Menus , dan pilih menu yang ingin Anda tambahkan tautannya dan muat. (Lihat artikel ini Cara Membuat Struktur Menu Kustom di WordPress untuk informasi lebih lanjut).

Pilih Opsi Layar di sudut kanan atas dan centang kotak berlabel Hubungan Tautan (XFN) .

Pilih Tautan Khusus . Tambahkan simbol # sebagai tautan, tambahkan teks yang Anda inginkan untuk ditampilkan, dan pilih Tambahkan ke Menu . Rekatkan ID Menu ke bidang Hubungan Tautan dan simpan menu. Pastikan untuk menetapkan menu ke lokasi tampilan di bawah Pengaturan Menu jika Anda belum melakukannya. Dalam contoh ini saya telah mengaturnya ke Menu Utama .

Item menu sekarang muncul di dalam struktur menu. Mengkliknya akan membuka overlay. Ini memiliki keuntungan menyediakan CTA (ajakan bertindak) di dalam struktur navigasi dan di seluruh situs.

Widget

Plugin ini juga menyertakan area widget baru. Perbedaan dalam menggunakan widget dan metode lainnya adalah di mana Anda menempatkan kode pendek. Daripada menempatkan kode pendek di dalam modul berulang-ulang, Anda dapat menempatkannya sekali, menjadikannya global. Anda kemudian dapat memicunya dari item apa pun di halaman mana pun, dari bilah sisi, menu utama, atau menu footer.

Ini adalah halaman yang saya gunakan dari kit gambar rangka serbaguna vol. 1. Saya ingin membuat tombol dapat diklik sehingga akan membuka video dalam overlay. Saya menambahkan kode pendek saya ke area widget (dengan menempatkannya di dalam widget teks) dan menambahkan ID CSS ke gambar di halaman.

Kode pendek di widget berfungsi bahkan tanpa widget terlihat. Saya tidak perlu menempatkan sidebar di halaman atau widget apa pun di footer. Ini hanya berfungsi karena area widget baru ini dimuat di belakang layar. Jika Anda menjatuhkan widget lain di area widget ini, widget tersebut akan ditampilkan di sudut kiri atas halaman. Kode pendek tidak ditampilkan sebagai teks secara default, sehingga widget dapat tetap tidak terlihat.

Menutup Hamparan

Hamparan dapat ditutup dengan tanda X di sudut, dengan mengeklik latar belakang hamparan, atau dengan menekan tombol escape.

Opsi lainnya adalah menambahkan kelas dekat ke tautan di dalam hamparan. Dengan menggunakan metode ini Anda dapat membuat tombol tutup atau teks. Ini memungkinkan Anda untuk menambahkan tombol batal ke CTA Anda atau membuat tombol tutup lebih terlihat.

Kelas dekat terlihat seperti ini:

class = “close-divi-overlay”>Tidak, Terima kasih

Masuk 2.0

Berikut adalah beberapa fitur yang diharapkan:

Fitur tunda waktu akan memungkinkan hamparan terbuka berdasarkan waktu yang ditentukan setelah halaman dimuat, memungkinkan pembaca melihat konten Anda selama jangka waktu tertentu sebelum membuka hamparan secara otomatis.

Fitur piksel akan membuka hamparan berdasarkan jumlah piksel yang digulir atau persentase halaman yang digulir.

Pilihan lain akan membuka overlay ketika pembaca memilih tombol kembali atau menempatkan kursor di atas bilah alamat.

Dokumentasi

Dokumentasi disediakan di situs web DiviLife. Ini mencakup ikhtisar dan contoh berbagai cara Anda dapat menggunakan plugin. Dokumentasi mencakup teks, video, dan kode sampel.

Harga

Divi Overlay adalah plugin premium. Biayanya $15 untuk penggunaan pada satu situs, $29 untuk tiga situs, $59 untuk situs tak terbatas, dan $129 untuk lisensi tak terbatas seumur hidup. Setiap lisensi mencakup semua fitur inti dan dokumentasi. Tiga yang pertama mencakup pembaruan dan dukungan satu tahun, sedangkan yang terakhir mencakup pembaruan dan dukungan seumur hidup.

Pikiran Akhir

Divi Overlay adalah cara yang bagus untuk membuat overlay menggunakan Divi Builder. Divi Builder memungkinkan Anda untuk menambahkan hampir semua jenis konten ke overlay menggunakan modul Divi atau kode pendek dari plugin lain. Sulit membayangkan overlay yang tidak dapat dibuat oleh Divi Overlay. Dibutuhkan beberapa langkah untuk menambahkan kode jika diperlukan, tetapi mudah dilakukan dan dokumentasi membantu Anda melewatinya. Imbalannya jauh melebihi beberapa menit yang diperlukan untuk belajar menggunakannya.

Kami ingin mendengar dari Anda! Sudahkah Anda mencoba Divi Overlay? Beri tahu kami tentang pengalaman Anda di komentar.

Gambar Unggulan melalui brickclay / shutterstock.com