Sorotan Plugin Divi: Modul Pita Divi

Modul Pita Divi adalah plugin pihak ketiga untuk Divi yang menambahkan pita gaya ke konten modul. Tambahkan gambar, tombol, judul, konten, dan gaya setiap elemen sedetail yang Anda inginkan. Gunakan untuk menyoroti penjualan produk, membuat ajakan bertindak, atau menarik perhatian ke elemen apa pun. Dalam sorotan plugin Divi ini, kita akan melihat Modul Pita Divi dan melihat apa yang dapat dilakukannya.

Memasang Modul Pita Divi

1. Buka dan unduh plugin
2. Di dasbor WordPress, buka Plugin > Add New
3. Klik Unggah Plugin
4. Pilih file zip dari komputer Anda
5. Klik Instal Sekarang
6. Ketika Anda melihat "Plugin diinstal dengan sukses", klik Aktifkan Plugin
7. Buka Alat > Lisensi Plugin Pita Divi dan masukkan kunci lisensi Anda

Modul Pita Divi

Modul baru ditambahkan ke Divi Builder yang disebut Divi Ribbon. Modul membuat uraian (lengkap dengan judul, konten, ikon, gambar, dan tombol) dan menempatkan pita pada uraian tersebut. Anda memiliki kontrol atas penempatan dan gaya pita serta elemen lain dalam modul. Uraian mencakup bayangan kotak secara default.

Tab Konten Pita Divi

Tab Konten mencakup pengaturan utama, rotasi uraian, gambar dan ikon, tautan, latar belakang, dan label admin. Pengaturan utama menyediakan pilihan untuk jenis pita, lokasi, teks, judul, dan konten.

Pengaturan utama

Ada 7 jenis pita untuk dipilih. Mereka bekerja dengan cara yang sama dan menyertakan konten yang sama, tetapi mereka menampilkan bentuk yang berbeda. Bentuk termasuk pita dengan ujung bercabang, pita yang membentang di blurbs, pita di samping atau atas, dan memiliki berbagai jenis ujung seperti garpu atau lingkaran. Ini memberi Anda banyak pilihan tampilan.

Setiap jenis pita memiliki opsi lokasi yang berbeda tergantung pada kemampuan tampilannya. Contoh ini menunjukkan pita sudut. Itu dapat ditempatkan di kiri atau kanan atas, atau di kiri atau kanan bawah.

Forked dapat ditampilkan di kiri atas atau kanan.

Lebar penuh dapat ditampilkan di atas atau di bawah.

Beberapa tipe pita memiliki opsi lain yang terbuka saat Anda memilihnya. Contoh ini menunjukkan pita lebar penuh. Anda dapat menyesuaikan lokasi dan ketinggiannya.

Pita samping mencakup penyesuaian untuk lokasi, lebar, dan tinggi. Semua kontrol adalah bilah geser Divi standar, sehingga mudah digunakan.

Judul dan konten ditambahkan ke kartu itu sendiri. Area konten memiliki tab untuk visual dan teks, dan mereka dapat menyertakan media, tautan, kode, dan kode pendek.

Rotasi kabur

Rotasi blur menambahkan opsi flip 3D yang menampilkan konten setelah kartu terbalik di sisinya, dan gambar serta ikon untuk ditampilkan di font.

Tambahkan gambar dari perpustakaan media Anda dan ikon dari daftar. Gambar/ikon akan ditampilkan terlebih dahulu, lalu kartu akan dibalik untuk menampilkan konten saat dilayangkan. Anda juga dapat menambahkan gambar sebagai latar belakang.

Tombol

Tombol tersebut mencakup teks, tautan, opsi jendela, bantalan, dan margin. Saya telah menambahkan beberapa margin kiri untuk mengeluarkan tombol dari bawah pita.

Tab Desain Pita Divi

Tab Divi Ribbon Design mencakup pengaturan untuk gambar dan ikon, rotasi, teks, ukuran, pita, teks judul, teks isi, tombol, spasi, batas, filter, transformasi, dan animasi.

Gambar dan Ikon

Pengaturan gambar dan ikon memungkinkan Anda untuk menyesuaikan lebar gambar, batas, bayangan kotak, warna, mode campuran, dll.

Rotasi

Pengaturan rotasi memungkinkan Anda untuk menyesuaikan warna wajah. Ini adalah latar belakang di balik gambar. Nonaktifkan batas kartu asli sehingga Anda dapat membuatnya sendiri. Sesuaikan ikon rotasi. Ini memiliki banyak opsi untuk ikon. Tambahkan warna ikon, latar belakang, batas, dan gunakan ukuran font pra-rotasi.

Pada awalnya, agak membingungkan bahwa penyesuaian ikon ada di sini alih-alih pengaturan gambar dan ikon, tetapi masuk akal untuk berada di bagian ini. Masuk akal untuk menempatkan pengaturan gambar di sini juga, tetapi ada begitu banyak sehingga memerlukan tab terpisah.

Spasi Teks

Spasi teks memberi Anda pengaturan margin dan padding untuk judul dan teks isi. Biasanya, pita akan ditampilkan di atas konten. Ini memungkinkan Anda menyesuaikan pemosisian teks berdasarkan lokasi pita jika Anda ingin itu terlihat. Saya telah menambahkan padding untuk judul dan teks isi dalam contoh ini.

Pengaturan Pita

Pengaturan pita memungkinkan Anda untuk mengubah warna, menambahkan gambar yang akan mengisi pita, mematikan ujung pita (untuk menghentikan gaya agar tidak tumpang tindih dengan kartu), menyesuaikan font, menambahkan bayangan teks, menyesuaikan sudut pita, dan batas. Saya telah mengubah warna pita dalam contoh ini.

Gambar akan mengisi pita. Saya hanya bisa membuat JPG berfungsi, tetapi itu berfungsi dengan baik. Saya sarankan memilih gambar dengan ukuran yang Anda inginkan sehingga Anda akan memiliki kendali atas tampilannya.

Mematikan ujung pita akan menghilangkan bagian yang terlipat kembali di belakang kartu, seperti yang Anda lihat di sebelah kiri pita dalam contoh ini.

Teks

Judul dan teks isi mencakup semua opsi yang diharapkan. Dalam contoh ini, saya telah meningkatkan ukuran keduanya, mengubah warna teks judul, dan memusatkan keduanya.

Tombol

Penataan tombol mencakup semua opsi yang diharapkan dan menambahkan fitur untuk menampilkan gradien di atas gambar latar belakang. Dalam contoh ini, saya telah meningkatkan ukuran font, mengubah warna font dan batas, membulatkan batas, memberi latar belakang gradien, dan menambahkan bayangan.

Contoh Pita Divi

Berikut adalah beberapa contoh tampilan Pita Divi dalam tata letak Divi.

Dijual Pita

Untuk contoh pertama, saya akan mengganti CTA di sebelah kanan.

Itu dibuat dengan tiga modul: gambar, teks, dan tombol. Saya akan menggunakan latar belakang, teks, dan tombol yang sama dan membuatnya kembali dengan satu modul Pita Divi.

Berikut hasilnya menggunakan Divi Ribbon. Saya menambahkan gambar, teks judul, dan teks isi agar sesuai dengan aslinya. Saya juga menambahkan pita ke sudut dan memindahkan tombol ke tengah dan menggunakan warna batas dari latar belakang pita. Yang asli menggunakan gambar di kolom. Saya menghapusnya dan menambahkan gambar ke modul, tetapi itu akan berhasil.

Saya tidak menyertakan gambar berlekuk-lekuk (gelombang segitiga), tetapi dapat ditambahkan di area konten dengan mudah. Judul juga perlu dipindahkan ke area konten agar grafik muncul di atas judul. Pita On Sale membuatnya lebih menonjol.

Pita Proyek Terbaru

Untuk yang ini, saya mengganti gambar dengan modul Divi Ribbon dan menambahkan pita lebar penuh sebagai CTA untuk melihat proyek terbaru. Pita memiliki gambar latar belakang dan font dari tata letak. Bayangan kotak adalah pengaturan default. Saya telah memusatkan teks.

Pita CTA Produk

Untuk contoh ini, saya menambahkan modul Pita Divi ke bagian pahlawan halaman toko dari tata letak Perusahaan Kulit. Menggunakan gambar dari tata letak, saya mengganti CTA penjualan standar. Pita dan tombol menggunakan warna dari tata letak. Saya memindahkan pita ke sudut kanan bawah dan melepas ujung pita.

Ini adalah bagian Khusus. Saya senang melihatnya bekerja dengan baik di bagian Spesialisasi. Banyak modul pihak ketiga tidak selalu kompatibel dengan jenis bagian ini.

Uji dan Beli

Anda dapat membeli Modul Pita Divi dari situs web pengembang seharga $11 untuk penggunaan pribadi atau komersial di satu situs web.

Anda juga dapat menguji plugin sebelum membeli untuk melihat apakah itu sesuai dengan kebutuhan Anda. Tautan untuk menguji plugin dapat ditemukan di halaman penjualan pengembang. Ini memberi Anda akses penuh ke Divi Builder dan plugin, sehingga Anda dapat menatanya sesuai keinginan Anda. Saya sarankan untuk mencobanya.

Mengakhiri Pikiran

Modul Pita Divi adalah modul yang menarik untuk Divi Builder. Ini mencakup beberapa tempat untuk menambahkan gambar dan Anda dapat menyertakan judul, konten, ikon, dan tombol. Dengan semua fitur ini, ini berfungsi dengan baik sebagai uraian, ajakan bertindak, tautan produk, tautan blog, dll. Tambahkan ke pita gaya untuk menarik perhatian pada penjualan atau CTA lainnya, dan plugin ini menyediakan opsi gaya yang sulit untuk dapatkan dengan satu modul.

Modul Pita Divi bekerja sangat baik dengan Visual Builder dan Theme Builder. Ini adalah plugin luar biasa yang mudah untuk direkomendasikan.

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

Gambar Unggulan melalui Foxys Graphic / shutterstock.com