Sorotan Plugin Divi: Topeng Divi

Divi Mask adalah plugin pihak ketiga untuk Divi yang menambahkan modul baru ke Divi Builder dengan beberapa gaya unik untuk gambar dan latar belakang. Ini menempatkan topeng di atas gambar sehingga gambar mengambil bentuk topeng. Segala sesuatu di luar topeng dapat berupa warna apa pun yang Anda inginkan termasuk gradien atau bahkan latar belakang yang berbeda.

Ini mencakup 54 topeng preset yang berfungsi sebagai guntingan, mengungkapkan gambar di belakangnya. Anda juga dapat menambahkan milik Anda sendiri menggunakan SVG. Ini termasuk judul, konten, dan alat latar belakang. Setiap elemen dapat disesuaikan dan ditata.

Dalam sorotan plugin ini, kita akan melihat Divi Mask, melihat apa yang dapat dilakukannya, dan melihat betapa mudahnya menggunakannya. Anda dapat membeli Divi Mask dari situs web pengembang.

Modul Masker Divi

Unggah dan aktifkan plugin seperti biasa. Tidak ada yang perlu diatur. Ini siap digunakan segera setelah diaktifkan. Modul Divi Mask ditambahkan ke Divi Builder.

Tab Konten memungkinkan Anda menambahkan gambar, topeng, dan teks. Penyesuaian lain memungkinkan Anda untuk menyesuaikan warna latar belakang gambar, mencerminkan gambar, dan mengatur opasitas gambar. Anda juga dapat menambahkan tautan dan latar belakang. Gambar ini menunjukkan tab Mask di Mask Settings. Saya telah menambahkan gambar dari paket tata letak eSports.

Ini adalah tab Mask di Pengaturan Mask. Itu menambahkan kotak dropdown di mana Anda dapat memilih antara 54 topeng bawaan atau mengunggah topeng khusus Anda sendiri menggunakan plugin gratis bernama Save SVG.

Tab ini juga menambahkan opsi untuk mengisi modul, memilih di antara tiga versi topeng, menskalakan ke ukuran yang Anda inginkan, memutarnya, dan menyesuaikan posisi horizontal dan vertikal. Saya telah menyesuaikan masing-masing dalam contoh ini. Ini adalah opsi 1 dari topeng Splodge.

Ini adalah opsi 1 dengan Modul Isi diaktifkan. Ini membentang dan mengisi ruang yang disediakan untuk modul.

Ini adalah opsi 2 dari topeng Splodge. Ini menciptakan beberapa pola noda yang menarik.

Ini adalah opsi 3 dari topeng Splodge.

Tab Teks dari Pengaturan Topeng menambahkan area untuk judul dan konten, dengan penyesuaian independen untuk masing-masing.

Pilih tag heading, sesuaikan warna latar belakang, lebar latar belakang, posisi horizontal dan vertikal, dan rotasi. Penyesuaian teks ditangani di tab Desain.

Area Konten menambahkan editor lengkap tempat Anda dapat menambahkan teks, gambar, media, dll. Ini juga mencakup penyesuaian latar belakang untuk warna, lebar, dan posisi horizontal dan vertikal. Yang ini tidak termasuk rotasi. Penyesuaian untuk teks ada di tab Desain.

Tab Desain mencakup semua pengaturan yang diharapkan untuk judul, teks isi, ukuran, spasi, batas, bayangan kotak, filter, transformasi, dan animasi.

Tab Advanced menyertakan area CSS untuk heading dan teks.

Contoh Topeng Divi

Dalam contoh ini, saya menggunakan set topeng Paralelogram untuk mengisi modul. Saya telah menskalakan topeng dan menyesuaikan rotasi dan perataannya. Saya juga telah menambahkan latar belakang dan gradien dari gambar yang sama persis yang saya gunakan di tab Gambar pada Pengaturan Topeng. Topeng mengungkapkan bagian dari gambar dan memungkinkan gambar latar belakang untuk ditampilkan di latar belakang. Saya akan menggunakan yang lebih jelas nanti.

Untuk yang satu ini, saya menambahkan topeng Lingkaran. Saya menempatkan header di atas gambar dengan latar belakang putih. Saya mengurangi lebar dan opacity dari latar belakang dan menambahkan efek bayangan ke teks. Saya memindahkan konten di bawah gambar dan menambahkan satu set foto yang dapat diklik. Karena menggunakan editor konten, setiap elemen dapat memiliki URL yang berbeda, terpisah dari tautan modul. Tentu saja, saya dapat menempatkan konten di atas gambar jika saya mau. Ini akan membuat CTA menarik.

Untuk yang satu ini, saya mengubah latar belakang menjadi gelap dan memindahkan teks agar tumpang tindih dengan gambar. Saya meningkatkan ukuran tajuk dan teks konten dan memberi mereka latar belakang putih. Saya menghapus gambar mini dari contoh sebelumnya sehingga fokusnya akan berada di gambar tengah.

Untuk contoh ini, saya mengganti modul gambar tengah di paket tata letak Agen Perjalanan dan menambahkan gambar yang sama di modul Divi Mask. Saya mengurangi opacity gambar, menambahkan teks header, mengaturnya ke posisi vertikal 50%, mengubah warna latar belakang header, dan menurunkan opacity. Ini adalah cara mudah untuk membuat tautan ke halaman, proyek, posting, atau hanya menampilkan informasi.

Untuk contoh ini, saya membuat bagian lebar penuh dan saya akan menambahkan topeng yang akan menyatu dengan pemisahan bagian. Saya telah menambahkan teks header dan konten, mengubah warna dan ukurannya, membuat latar belakangnya transparan, dan memposisikannya di tempat yang saya inginkan pada gambar.

Saya menambahkan topeng Segitiga dan memilih opsi 2. Saya telah meningkatkannya dan menyesuaikan pengaturan horizontal. Saya juga telah menambahkan latar belakang gradien ke modul. Gradien yang sama ini dapat dicerminkan dan ditambahkan ke bagian berikutnya sehingga menyatu satu sama lain.

Ini adalah opsi 3. Ini membalik topeng ke sisi lain. Saya telah memindahkan posisi horizontal untuk menampilkan lebih banyak gambar dan menyesuaikan posisi vertikal header dan teks untuk menutupi topeng. Teks tumpang tindih secara otomatis.

Yang ini menunjukkan topeng panah pada opsi 1.

Ini adalah opsi panah 4. Saya telah menempatkannya di baris yang lebih kecil sehingga lebih banyak yang akan ditampilkan di layar saya.

Ini adalah topeng Boot menggunakan pengaturan default dengan gradien latar belakang saya.

Ini topeng kupu-kupu yang bagus.

Inilah topeng Hati. Saya mengubah gradien latar belakang hanya untuk mencocokkan tema hati.

Sekarang, saya telah menambahkan gambar yang sama dengan latar belakang dan mengatur gradien untuk ditampilkan di atas gambar latar belakang. Ini memberikan efek topeng memotong bagian dari gradien.

Tentu saja, gambar apa pun dapat digunakan sebagai latar belakang. Dalam contoh ini, saya telah mengganti gambar latar belakang sehingga gambar Mask ditampilkan di atasnya. Saya juga telah mengurangi opacity dari latar belakang sehingga lebih banyak yang akan terlihat, membuat efeknya lebih menonjol.

Untuk yang ini, saya memutar topeng dan memindahkannya ke kanan. Saya telah menyesuaikan opacity gradien latar belakang. Itu masih menampilkan gambar latar belakang yang berbeda dari gambar topeng. Saya juga telah menambahkan teks konten dan menyesuaikan ukuran teks, serta posisi dan lebar vertikal konten. Ini akan membuat beberapa CTA atau uraian yang menarik untuk informasi.

Yang ini menggunakan topeng Pidato. Saya telah menyesuaikan posisi horizontal dan memindahkan konten ke tengah di dalamnya.

Ini adalah topeng Perbatasan. Ini menciptakan bingkai foto. Saya telah memusatkannya, menskalakannya agar sesuai dengan gambar, dan memusatkan konten.

Untuk yang satu ini, saya mengatur skala kembali ke default dan memilih Modul Isi. Perbatasan masih ada, tetapi berada di luar area tampilan.

Untuk yang satu ini, saya menyesuaikan skala untuk menunjukkan batas.

Yang ini menggunakan topeng Belah Ketupat. Ini adalah persegi yang diputar di sudutnya. Saya telah meningkatkannya dan memindahkannya ke kanan. Saya telah memusatkan konten dan memberi konten latar belakang dengan transparansi yang cukup agar latar belakang dapat terlihat. Saya telah menambahkan tajuk dan memposisikannya untuk ditampilkan di sisinya. Saya juga memberinya latar belakang dengan sentuhan transparansi.

Harga dan Dokumentasi Masker Divi

Divi Mask adalah $12 dan termasuk 6 bulan dukungan dan pembaruan seumur hidup. Ini dapat digunakan di situs web tanpa batas. Anda dapat membeli Divi Mask dari situs web pengembang.

Situs web pengembang juga menyertakan panduan terperinci tentang plugin. Ini menunjukkan dasar-dasar dan termasuk cara menggunakan fitur SVG untuk membuat topeng kustom Anda sendiri. Situs ini juga menyertakan FAQ singkat untuk memandu Anda melalui proses instalasi.

Mengakhiri Pikiran

Saya menemukan Divi Mask sebagai modul yang menarik. Ini sangat intuitif. Saya tidak pernah perlu membaca instruksi atau menonton video, tetapi bagus bahwa mereka tersedia untuk berjaga-jaga. Cara favorit saya untuk menggunakannya adalah sebagai pengganti uraian, sebagai CTA, untuk menautkan ke halaman atau produk, atau hanya menambahkan beberapa gaya desain ke gambar.

Ini responsif, tetapi dimungkinkan untuk membuat desain yang tidak merespons sebaik yang Anda inginkan. Ini hanya sesuatu yang saya ingat saat saya mendesainnya. Tentu saja, Anda juga dapat membuat versi tablet dan seluler dari desain Anda, dan Anda dapat menguji desain menggunakan berbagai mode visual di Divi Builder.

Saya suka 54 topeng yang ada di dalamnya. Mereka memberikan beberapa visual yang menarik dan kontrolnya berkembang lebih jauh. Saya juga suka bahwa Anda dapat membuat sendiri menggunakan SVG. Menarik juga untuk memiliki elemen header dan konten terpisah dengan latar belakang yang dapat dipindahkan.

Divi Mask membuka banyak kemungkinan desain untuk gambar dan teks. Jika Anda tertarik untuk menambahkan guntingan ke gambar Anda di Divi, Divi Mask layak untuk dilihat.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba Masker Divi? Beri tahu kami pendapat Anda tentang hal itu di komentar di bawah.

Gambar Unggulan melalui Oleksandr Korchahin / shutterstock.com