Sorotan Plugin Divi – Modul Divi Miringkan Blurb

Blurb populer dalam tata letak Divi. Mereka menampilkan teks, gambar, ikon, dan banyak lagi, yang sangat bagus untuk menampilkan produk dan layanan. Bagaimana jika Anda ingin mereka lebih menonjol dan memberikan beberapa animasi melayang yang menarik? Animasi umum dapat dilakukan melalui CSS, tetapi bagaimana jika Anda menginginkan sesuatu yang berbeda? Sebuah plugin bernama Tilt Blurb Divi Module mungkin yang Anda cari.

Apa itu Modul Miringkan Blurb?

Tilt Blurb Module adalah plugin pihak ketiga dari Hadworm yang menambahkan modul blurb baru ke Divi Builder (untuk Divi dan Extra) yang menambahkan efek miring yang menarik, menciptakan tampilan 3D. Dalam sorotan plugin ini kita akan melihat modul dan melihat apa yang dapat dilakukannya. Saya telah menunjukkan beberapa gif tetapi sebagian besar akan berupa gambar karena ukuran file gif. Gambar untuk contoh diambil dari Unsplash.com dan dari WordPress.org.

Memasang Modul Divi Miringkan Blurb

Unggah dan aktifkan plugin seperti biasa. Di tautan Plugin di dalam menu dasbor, Anda akan menemukan item baru bernama Tile Blurb License. Klik ini, masukkan kunci lisensi Anda, dan simpan perubahan. Ini akan memastikan Anda mendapatkan pembaruan.

Modul baru ditambahkan ke Divi Builder yang disebut Tilt Blurb. Warnanya ungu di dalam Divi Builder sehingga sulit untuk dilewatkan. Saya suka ketika pengembang menggunakan warna yang berbeda untuk modul mereka sehingga mereka menonjol dari modul standar (untuk apa nilainya).

Modul ini mencakup tab standar plus yang baru:

• Konten – teks, tautan, gambar dan ikon, latar belakang, label admin
• Pengaturan Kemiringan – pengaturan kemiringan, latar belakang kemiringan, lapisan kemiringan
• Desain – gambar dan ikon, teks, teks header, teks isi, batas, ukuran, spasi
• Lanjutan – ID dan kelas CSS, CSS khusus, animasi, visibilitas

Pengaturan Kemiringan

Untuk contoh ini saya menambahkan latar belakang dan kemudian menempatkan gambar yang lebih kecil sebagai latar depan di atasnya untuk menciptakan efek 3D. Dan kemudian membuat kopi. Banyak kopi.

Contoh dengan Pengaturan Default

Berikut adalah contoh tampilan kemiringan 3D sebelum penyesuaian. Saya menambahkan judul, teks, latar belakang, dan ikon. Kemiringan mengikuti mouse saya dan membedakan teks dan ikon dari gambar sehingga memberikan tampilan 3D. Bagi saya efek paralaks menghilangkan latar belakang jadi saya tidak menggunakannya.

Ukuran dengan Gambar

Ini mengukur uraian menggunakan gambar tersembunyi dan memusatkan konten.

Ukuran Miringkan Blurb dengan 2 Gambar dengan Konten Mengambang

Yang ini mencakup dua gambar – satu untuk latar depan dan satu untuk latar belakang. Gambar latar depan dan teks dalam 3D menggunakan fitur konten float.

Anda dapat menyesuaikan jumlah float yang berfungsi seperti zoom, membawa konten latar depan lebih dekat ke pembaca. Gambar ini menggunakan 200 untuk jumlah float, yang dimaksimalkan.

Jumlah Miring

Penggeser jumlah kemiringan memungkinkan Anda mengontrol seberapa jauh gambar akan dimiringkan. Pengaturan default adalah 20. Yang ini menggunakan 100.

Perspektif Miring

Tilt Perspective memperdalam perspektif. Semakin rendah angkanya, semakin dalam perspektifnya. Standarnya adalah 1000. Contoh ini adalah 200.

Skala Miring

Tilt Scale adalah tingkat zoom. Defaultnya adalah 1.1, artinya saat mengarahkan gambar dikalikan dengan 1.1. Contoh ini adalah 2. Ini menuju ke 0 tetapi level 0 membuat zoom bolak-balik terus menerus yang tidak berfungsi untuk gambar ini. Mungkin perlu beberapa percobaan untuk membuatnya melakukan apa yang Anda inginkan.

Kecepatan Miring

Tilt Speed ​​mengontrol kecepatan gambar bergerak saat Anda mengarahkan kursor. Semakin rendah angkanya semakin cepat ia bergerak. Standarnya adalah 100. Yang ini 5000. Saya tidak menyukai efek lambat.

Miringkan Terbalik

Tilt Reverse mengubah arah kemiringan. Biasanya kemiringan bergerak menjauh dari mouse. Reverse memiringkan gambar ke arah mouse.

Kemiringan Silau

Tilt Glare menambahkan efek silau yang mengikuti mouse. Jumlah silau dapat disesuaikan. Gambar di atas menggunakan .8 yang merupakan pengaturan default. Ini bagus untuk menciptakan efek pencahayaan.

Radius Perbatasan

Border Radius mengubah bentuk perbatasan. Standarnya adalah 40. Ini diatur ke 100, jumlah maksimum.

Latar Belakang Miring

Tilt Background memungkinkan Anda mengatur warna latar belakang dan efek batas.

Latar Belakang Miring

Salah satu efek samping dari Tilt Background Color adalah ia menciptakan cahaya yang bagus di sekitar gambar.

Sesuaikan warna Latar Belakang Miring, lebar batas, gaya batas latar belakang, lebar batas, dan warna batas dan bayangan kotak.

Jarak Latar Belakang Miring

Jarak Latar Belakang Kemiringan menyesuaikan jarak bayangan. Ini diatur ke -50 secara default. Contoh ini menggunakan -25.

Contoh ini menggunakan jarak latar belakang kemiringan 0 dan opasitas 0,3, yang menciptakan hamparan di atas latar belakang.

Miringkan Ukuran/Skala Latar Belakang

Kemiringan Latar Belakang Ukuran/Skala mengubah jarak latar belakang kemiringan. Standarnya adalah 1,04. Yang ini 1.2.

Lapisan Miring

Tilt Layers menerapkan gambar yang sama berulang-ulang sebagai beberapa lapisan, menciptakan efek 3D yang solid. Itu dapat menggunakan gambar atau warna latar belakang dan Anda dapat menyesuaikan kedalaman lapisan. Saya telah menerapkan gambar di atas dengan kedalaman lapisan 50.

Gambar yang saya terapkan terlihat di sini sebagai perbatasan. Saya telah menyesuaikan jumlah kemiringan agar lebih mudah dilihat.

Seperti yang diharapkan, bagian bawah gambar terlihat berbeda. Ini adalah cara yang bagus untuk menambahkan beberapa tekstur ke perbatasan. Kedalaman lapisan yang lebih kecil akan membuat perbatasan lebih tipis.

Yang ini menggunakan kedalaman lapisan 10.

Contoh ini menggunakan latar belakang kemiringan dan lapisan kemiringan.

Berikut adalah logo WordPress 3D yang terlihat terbungkus kristal. Saya mengunggah logo ke dalam area gambar Gambar & Ikon, mengatur jumlah kemiringan menjadi 100, menggunakan silau kemiringan default, menambahkan logo ke gambar lapisan di bawah Lapisan Kemiringan, mengatur kedalaman lapisan 50, dan mengatur warna lapisan menjadi putih dan hampir sepenuhnya transparan.

Berikut logo tanpa warna layer. Sisi-sisinya lebih sulit dilihat.

Lisensi, Dukungan, dan Dokumentasi

Plugin ini dapat digunakan di situs web tanpa batas untuk Anda dan klien Anda. Ini termasuk 6 bulan dukungan. Dokumentasi disediakan di situs web pengembang. Ini mencakup instruksi tentang cara membuat beberapa contoh yang ditampilkan di situs web. Saya ingin melihat lebih banyak contoh seperti bagaimana logo dibuat.

Pikiran Akhir

Modul Tilt Blurb menyediakan banyak efek miring yang menarik, yang menciptakan tampilan 3D yang bagus untuk gambar, ikon, dan teks. Ini adalah cara yang bagus untuk membuat CTA, sampul buku 3D, dan gambar produk. Modul Tilt Blurb bersifat inovatif dan intuitif. Jika Anda ingin menambahkan beberapa efek miring yang bagus ke uraian Anda, Modul Miringkan Blurb layak untuk dilihat.

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

Gambar Unggulan melalui hobbit / shutterstock.com