Sorotan Plugin Divi: Kotak Alat Divi

Divi Toolbox adalah plugin pihak ketiga yang menambahkan banyak efek baru ke Divi yang biasanya membutuhkan CSS, JavaScript, PHP, atau banyak plugin individual. Efeknya mudah digunakan dan dikustomisasi dan memberi situs web Divi Anda kilau ekstra untuk menonjol dari keramaian.

Efek termasuk perubahan di seluruh situs, menu seluler baru, latar belakang partikel, footer, widget, gaya, animasi, header, navigasi, tata letak blog baru, tata letak Divi di lokasi baru, penyesuaian layar masuk, munculan, dan banyak lagi. Banyak fitur dapat ditata dengan tambahan baru pada penyesuai tema. Divi Toolbox tidak bekerja dengan Extra atau plugin Divi Builder.

Pengaturan Umum Kotak Alat Divi

Layar opsi Divi Toolbox ditambahkan ke menu dasbor Divi. Pengaturan diaktifkan di sini, tetapi penyesuaian dilakukan di penyesuai.

Pengaturan Umum mencakup gaya judul global, menyesuaikan halaman login, menyembunyikan proyek, mengizinkan unggahan jenis file SVG, bilah gulir browser khusus, pengaturan halaman 404 (pilih tata letak dan sembunyikan header dan footer), dan pengaturan ikon sosial (aktifkan gaya, buka di tab baru, dan tambahkan lebih banyak ikon).

Menambahkan lebih banyak ikon sosial akan membuka bidang tempat Anda dapat memasukkan URL untuk 9 jejaring sosial lainnya.

Inilah tab Umum di penyesuai, tempat saya dapat menyesuaikan pengaturan yang saya aktifkan. Pengaturan termasuk judul dan font, bilah gulir browser, dan layar masuk. Dalam contoh ini, saya telah membuat beberapa penyesuaian pada h1 dan teks isi dan menambahkan gaya ke bilah gulir. Saya juga telah menambahkan lebih banyak ikon sosial.

Untuk layar masuk, Anda harus membuat perubahan dan kemudian keluar atau melihat layar di browser lain.

Inilah layar login saya setelah menambahkan gambar latar belakang, logo, dan mengubah ukuran dan warna bidang dan teks. Perlu sedikit penyesuaian karena Anda tidak dapat melihat layar saat melakukan perubahan.

Pengaturan Tajuk Kotak Alat Divi

Pengaturan Header menambahkan gaya ke menu, mengaktifkan menu tarik-turun khusus, menambahkan tombol menu CTA, mengubah logo pada menu tetap, mengaktifkan logo yang tumpang tindih, dan menambahkan tata letak Divi sebelum navigasi di halaman beranda, dan tata letak sebelum dan sesudah navigasi di halaman lain.

Tombol menu CTA memungkinkan Anda menerapkan CTA ke item menu pertama atau terakhir, atau menerapkan kelas khusus. Ini menyediakan CSS dan instruksi di mana untuk menambahkannya.

Inilah penyesuai untuk tajuk. Saya telah menambahkan tata letak di atas menu (dalam contoh ini hanya modul teks, tetapi Anda dapat menambahkan tata letak lengkap jika Anda mau). Logo yang tumpang tindih memiliki kotak persegi dengan efek bayangan. Saya mengubah ukuran logo dari 200 menjadi 140 dan memindahkan ikon sosial ke menu utama. Saya mengarahkan kursor ke item menu Layanan sehingga Anda dapat melihat efek CSS.

Pengaturan Footer Toolbox Divi

Pengaturan footer mencakup sticky footer, footer mengungkapkan, menyesuaikan menu dan widget, menyesuaikan tombol kembali ke atas (yang menambahkan opsi tautan tombol kustom), dan menambahkan tata letak footer sebelum dan sesudah.

Dalam contoh ini, saya telah mengubah font header dan menu menjadi huruf besar semua dan menambah jarak. Saya juga telah menyesuaikan warna hover dan menambahkan ikon di sebelah teks saat hover. Saya telah menambahkan tata letak setelah tata letak footer. Yang ini menggunakan footer yang terungkap (itulah sebabnya teks berada di belakang modul teks di atasnya).

Saya telah menata tombol kembali ke atas sehingga menampilkan teks. Ini memiliki efek bayangan dan saya telah menyesuaikan lokasinya. Saya meninggalkan warna secara default. Saya telah memusatkan teks bawah dan ikon sosial. Untuk efek hover saya memilih Grow (ini juga termasuk shrink, move up, move down, wobble, detak jantung, jello, dan pulse). Saya mengarahkan kursor ke ikon Facebook sehingga Anda dapat melihat efeknya.

Pengaturan Seluler Divi Toolbox

Pengaturan Seluler menyertakan bidang untuk masuk ke breakpoint menu seluler (lebar layar yang tepat saat menu berubah dari desktop ke seluler), gaya kustom, ubah logo, pilih efek klik ikon hamburger, ciutkan submenu bersarang, dan aktifkan beberapa kelas CSS. Kelas CSS memungkinkan Anda untuk membalikkan kolom dan memusatkan teks, modul, dan tombol.

Berikut tampilan halaman di Google Chrome dengan Responsive yang dipilih. Segera setelah saya mengambil ukuran layar kurang dari 980 piksel itu berubah menjadi ikon ponsel yang saya pilih dan menambahkan menu hamburger dengan animasi yang saya pilih.

Di layar ini, saya menata warna latar belakang menu seluler, warna latar belakang melayang, dan menu hamburger. Saya telah mengubah teks untuk item menu utama menjadi huruf besar semua dan meninggalkan standar teks CTA. Saya juga mengubah latar belakang untuk item menu CTA. Anda juga dapat menyesuaikan menu dan ukuran ikon.

Pengaturan Blog Kotak Alat Divi

Pengaturan Blog memungkinkan Anda untuk menyesuaikan bilah sisi dan widget, meta posting, halaman arsip dan kategori, memilih tata letak (dari 6 opsi), menyembunyikan bilah sisi arsip, dan menyesuaikan teks tombol baca lebih lanjut.

Untuk posting tunggal Anda dapat memilih tata letak bilah sisi, menyembunyikan judul posting, menambahkan kotak penulis, menambahkan tautan sebelumnya dan berikutnya, menambahkan posting terkait, dan menyesuaikan formulir komentar. Anda juga dapat menambahkan tata letak khusus setelah navigasi ke satu posting, arsip, kategori, halaman penulis, dan halaman hasil pencarian.

Untuk halaman blog, saya menambahkan efek bayangan ke bilah sisi, mengubah font dan gayanya, dan memberi gaya pada kotak pencarian dan meningkatkan ukuran batas. Ini menggunakan tata letak bergantian dan saya menyesuaikan teks tombol baca lebih lanjut.

Contoh ini adalah tata letak 6. Saya telah menyesuaikan warna font meta lagi dan menambahkan warna hover. Saya juga telah menyesuaikan latar belakang tombol baca lebih lanjut.

Posting blog individual memungkinkan Anda menyesuaikan setiap elemen yang Anda tambahkan di pengaturan blog. Di layar ini, saya menyesuaikan posting terkait, tautan berikutnya dan sebelumnya, dan kotak penulis. Anda memiliki kendali atas semua teks, warna, bayangan, dll.

Dalam contoh ini, saya menyesuaikan formulir komentar. Anda memiliki kendali atas warna bidang (fokus dan non-fokus), batas, teks, warna, tombol, dll. Saya telah mengubah warna latar belakang tombol, warna fokus bidang, menambahkan batas ke bidang, dan mengubah radius.

Pengaturan Modul Kotak Alat Divi

Tab Modules menyediakan pengaturan untuk menambahkan efek hover follow-the-mouse, menambahkan email opt-in ramping (menyediakan CSS untuk tiga opsi berbeda), tombol sekunder (yang menambahkan lapisan kustomisasi baru), dan banyak tweak.

Tweak termasuk ikon segitiga animasi untuk modul akordeon dan sakelar, menghapus batas bawah horizontal dan bantalan untuk tabel harga, memindahkan gambar potret di bawah konten dalam testimonial, menyembunyikan bilah gulir horizontal, dan menambahkan CSS untuk menyelaraskan kolom secara vertikal dan untuk mengubah ketinggian elemen apa pun hingga 100% dari ketinggian viewport.

Berikut adalah tampilan keikutsertaan email yang ramping. Ini menempatkan semua bidang pada satu baris. Contoh ini juga menggunakan tombol sekunder. Hanya tombol yang telah saya tambahkan kelas CSS yang akan mendapatkan perubahan ini. Menggunakan kelas CSS berarti saya sekarang memiliki dua gaya tombol global.

Pengaturan Ekstra Kotak Alat Divi

Tab Ekstra mencakup prapemuat, munculan, latar belakang partikel, efek kemiringan 3D, dan pengguliran paralaks untuk modul.

Ada 12 preloader untuk dipilih. Anda dapat membuatnya hanya muncul di beranda jika Anda mau, dan memilih jenis dan kecepatan transisinya. Layar pemilih menampilkan animasi prapemuat. Anda dapat menyesuaikannya lebih lanjut di penyesuai tema.

Picu popup dengan tautan apa pun dari item menu, tombol, tautan dalam teks, dll. Buat sebanyak yang Anda inginkan. Pilih tata letak siap pakai apa pun untuk munculan. Kustomisasi tombol latar belakang dan tutup di penyesuai.

Ini adalah partikel yang bergerak. Anda memiliki kontrol penuh atas warna, bentuk, jumlah partikel, kecepatan, ukuran, ukuran garis, opasitas, dan interaktivitas. Ada dua ID CSS untuk partikel, memungkinkan Anda memiliki dua desain yang berbeda.

Berikut adalah tampilan fitur tilt. Anda dapat menyesuaikan kemiringan, perspektif, skala, kecepatan, dan silau. Tambahkan ke bagian, baris, atau modul mana pun.

Lisensi Kotak Alat Divi

Ada dua lisensi yang dapat dipilih:

• Lisensi Reguler (untuk digunakan pada satu proyek) – €49.00
• Lisensi Diperpanjang (untuk digunakan pada proyek tak terbatas) – €169.00

Mengakhiri Pikiran

Saya terkesan dengan jumlah fitur dan pengaturan yang dimiliki plugin ini. Saya terutama suka itu menambahkan posting terkait, tautan sebelumnya dan berikutnya, dan kotak penulis ke posting blog yang tidak dibuat dengan pembuat Divi. Scrollbar juga merupakan sentuhan yang bagus.

Ada beberapa pengaturan yang bisa Anda dapatkan di modul Divi, seperti teks header, tetapi ini memberikan lebih banyak detail untuk pengaturan tersebut. Saya ingin melihat beberapa penyesuaian lagi ditambahkan (misalnya, efek bayangan untuk kotak komentar, opsi logo lainnya, penempatan ikon media sosial, dll.).

Jika Anda tertarik untuk menambahkan banyak efek baru ke Divi dengan cara termudah, Divi Toolbox layak untuk dilihat.

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

Gambar Unggulan melalui vasabii / shutterstock.com