Sorotan Plugin Divi: Pro Efek Gambar Berikutnya

Next Image Effect Pro adalah plugin pihak ketiga untuk Divi yang menambahkan banyak efek hover gambar yang membantu menarik perhatian ke gambar dan tautan Anda. Plugin menambahkan 7 modul ke Divi Builder, masing-masing dengan rangkaian desain dan efeknya sendiri. Pada artikel ini, kita akan melihat Next Image Effect Pro dan melihat apa yang dapat dilakukannya.

Instalasi Pro Efek Gambar Berikutnya

Beli dan unduh plugin dari Divi Marketplace. Ikuti langkah-langkah ini untuk menginstalnya:

1. Di dasbor WordPress, buka Plugin > Add New
2. Unggah plugin dari komputer Anda
3. Klik Instal Sekarang
4. Setelah plugin diinstal, klik Aktifkan

Selanjutnya, Anda harus mengaktifkan lisensi. Buka Plugin > Lisensi Pro Efek Gambar . Masukkan kunci lisensi Anda dan simpan perubahannya.

Modul Pro Efek Gambar Berikutnya

Image Effect Pro menambahkan satu set modul ke Divi Builder yang menyertakan kombinasi gaya gambar dan teks. Mereka menambahkan ratusan efek hover dan kombinasi arah. Opsi gaya teks mencakup kontrol independen untuk judul, teks fokus, konten, dan latar belakangnya.

Modul meliputi:

• Arahkan Gambar Melingkar
• Kotak Arahkan Gambar
• Efek Ikon Gambar
• Efek Gambar Mega
• Arahkan Gambar Minimal
• Gulir Gambar Berikutnya
• Arahkan Gambar Ultimate

Arahkan Gambar Melingkar

Circular Image Hover memiliki dua bagian utama: gambar dan teks (hover content). Saya telah menambahkan gambar persegi panjang. Ini menampilkan gambar dalam bentuk aslinya tetapi kemudian membuatnya melingkar. Jika gambarnya persegi, ini akan menjadi lingkaran yang sempurna.

Pengaturan desain untuk gambar meliputi posisi bayangan kotak, kekuatan, dan warna.

Teks termasuk bagian untuk menambahkan judul dan konten. Anda dapat menatanya dalam pengaturan desain. Saya telah meningkatkan ukuran dalam contoh ini.

Latar belakang teks dapat berupa warna solid atau gradien. Yang ini menggunakan gradien default.

Ini memiliki 19 efek hover dengan 4 pilihan arah untuk setiap efek. Ini adalah efek 1. Efek memiliki berbagai cara untuk mentransisikan gambar keluar dan mentransisikan konten masuk. Mereka termasuk zoom, flips, slide, dan banyak lagi.

Kotak Arahkan Gambar

Kotak Gambar Arahkan kursor juga menyertakan gambar dengan konten arahkan kursor. Itu tidak mengubah bentuk gambar.

Ini juga mencakup hamparan (atau latar belakang yang terlihat dan terlihat seperti hamparan) dan menambahkan latar belakang judul. Kedua latar belakang dapat menyertakan warna solid dan gradien. Contoh ini menggunakan latar belakang overlay default. Saya telah mengubah warna latar belakang judul dan memperbesar ukuran teks.

Ini memiliki 13 efek melayang yang berbeda termasuk membalik, slide, memudar, memperbesar, dll. Beberapa efek menambahkan opsi untuk arah. Ini adalah efek 1.

Efek Ikon Gambar

Image Icon Effect menambahkan elemen hover yang menampilkan judul dan teks fokus di atas gambar. Seperti yang lain, Anda dapat mengubah warna latar belakang dengan warna solid atau gradien, dan itu mencakup beberapa efek hover. Efek hover yang satu ini menghadirkan batas dan terlihat sangat elegan. Ini adalah efek hover Zoe.

Yang membedakan ini adalah ikonnya. Anda dapat menambahkan 4 ikon berbeda dan membukanya di jendela yang sama atau jendela baru.

Pengaturan ikon termasuk warna, ukuran, jarak, tinggi garis, warna latar belakang, bayangan, batas, dll. Dalam contoh ini, saya telah menambahkan warna latar belakang dan mengurangi tinggi garis untuk membuat garis. Saya juga telah menambahkan bayangan. Ini efek hover Hera.

Ini adalah efek hover Terry. Saya telah mengubah warna judul dan teks fokus dan menggunakan pengaturan untuk ukuran font dan ikon dari contoh sebelumnya.

Efek Gambar Mega

Mega Image Effect adalah kartu 2 sisi lainnya dengan gambar di satu sisi dan konten di sisi lain. Sisi depan menampilkan gambar seperti biasa.

Bagian belakang kartu menampilkan konten seperti biasa dan mencakup penyesuaian font dan latar belakang. Yang membedakannya adalah kemampuan untuk menambahkan tombol.

Anda memiliki kendali penuh atas desain tombol termasuk warna solid dan opsi gradien yang sama dengan latar belakang standar. Contoh ini menunjukkan gradien untuk latar belakang tombol.

Anda memiliki kontrol penuh atas gaya tombol untuk font dan latar belakang. Saya telah menyesuaikan font dan batas dalam contoh ini. Setiap elemen modul juga memiliki penyesuaian jarak. Saya telah menambahkan 20 piksel ke bagian bawah tombol. Masing-masing modul memiliki penyesuaian jarak ini.

Modul ini memiliki terlalu banyak efek hover untuk dihitung. Hanya efek gambar saja yang mengesankan, tetapi juga memiliki banyak efek teks. Anda dapat menyesuaikan gambar melayang dan teks melayang secara terpisah dan mengatur waktu untuk efek teks.

Ini contoh gambar Kiri Paralel, efek teks Zoom In, dan penundaan teks kecil.

Arahkan Gambar Minimal

Minimal Image Effect adalah modul paling sederhana di set. Ini menampilkan gambar dengan efek hover.

Satu-satunya pengaturan khusus adalah efek hover. Ini mencakup 10 efek untuk dipilih. Kami akan melihat beberapa.

Contoh ini adalah Scale Out Rotate. Gambar diperkecil dan diputar sedikit dalam keadaan normal. Saat mengarahkan kursor, gambar diperbesar dan diputar ke keadaan normalnya.

Ini adalah Blur. Gambar diburamkan hingga Anda mengarahkan kursor, lalu perlahan-lahan tidak diburamkan hingga tajam.

Ini Berkedip. Semburan putih berkedip di atas gambar dan kemudian hilang saat Anda mengarahkan kursor.

Gulir Gambar Berikutnya

Next Image Scroll menempatkan overlay di atas gambar dan menambahkan tombol ke sudut kanan atas. Anda dapat menyesuaikan warna tombol untuk warna solid dan gradien. Contoh ini menunjukkan pengaturan default.

Anda juga dapat menyesuaikan hamparan. Atur warna solid atau gradien. Ini juga mencakup tipe gradien dan kontrol standar.

Posisi latar belakang memungkinkan Anda menampilkan bagian atas atau bawah gambar.

Gambar bergerak ke atas atau bawah saat mengarahkan kursor. Dalam contoh ini, modul menunjukkan bagian bawah gambar dan menggulir ke bagian atas gambar saat mengarahkan kursor.

Arahkan Gambar Ultimate

Ultimate Image Hover menampilkan ukuran dan bentuk berdasarkan efek yang Anda pilih. Ini adalah Efek 1. Ini menunjukkan sebagian foto dalam gambar persegi panjang yang tinggi. Ini mencakup judul dan teks fokus, konten, dan hamparan. Overlay mencakup penyesuaian untuk warna sebagai solid atau gradien.

Saat melayang, overlay menjadi terang dan teks terungkap.

Opasitas gambar memungkinkan Anda menyesuaikan jumlah latar belakang yang dapat dilihat. Dalam contoh ini, saya telah mengurangi opacity, mengubah ukuran heading dan teks fokus, warna teks heading, ketebalan teks fokus, membuat teks fokus menjadi huruf besar, dan menambahkan bayangan teks ke teks fokus.

Modul ini memiliki 24 efek hover. Mereka menampilkan gambar dalam berbagai ukuran, tingkat opacity, penempatan teks, dan menambahkan batas.

Ini adalah Efek 4. Ini menampilkan gambar dalam bujur sangkar dan menambahkan batas di sekitar bagian dalam yang tumpang tindih di ujungnya.

Ini adalah Efek 5. Ini menggelapkan overlay dan menambahkan batas di sekitar bagian dalam gambar dan menampilkan gambar dalam kotak.

Efek 6 menempatkan judul dan teks fokus di bagian atas dengan garis di bawahnya, dan konten di bagian bawah.

Efek 8 menjaga ukuran persegi panjang besar dan menambahkan batas tipis.

Ini adalah Efek 10. Saat mengarahkan kursor, gambar diperbesar, garis menjadi x, dan gradien muncul.

Contoh Pro Efek Gambar Berikutnya

Sebagai contoh sederhana, berikut adalah tampilan tata letak Divi Home Renovation dengan modul Ultimate Image Hover yang ditambahkan untuk membuat CTA. Saya telah menambahkannya di sebelah kiri gambar dan menggunakan warna dari tata letak.

Saat melayang, gambar meluncur ke kanan, CTA terungkap, gambar menjadi kurang buram (yang memungkinkan lebih banyak warna latar belakang) dan perbatasan ditambahkan. Contoh ini menggunakan efek hover 8.

Beli Pro Efek Gambar Berikutnya

Next Image Effect Pro tersedia di Divi Marketplace seharga $49. Ini termasuk penggunaan situs web tanpa batas, jaminan uang kembali 30 hari, dan 1 tahun dukungan dan pembaruan.

Mengakhiri Pikiran

Itulah tampilan kami di Next Image Effect Pro untuk Divi. 7 modul menambahkan banyak fitur gambar yang membuat situs Anda menonjol. Menggunakannya intuitif. Jumlah efek dan kombinasi antara semua modul sangat mengesankan. Setiap modul unik, tetapi sebagian besar menambahkan gambar, judul, dan konten untuk memberikan banyak kemungkinan desain untuk CTA, anggota tim, testimonial, informasi umum, informasi kontak, dan banyak lagi.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba Next Image Effect Pro? Beri tahu kami pendapat Anda tentang hal itu di komentar.

Gambar Unggulan melalui elenabsl / shutterstock.com