Sorotan Plugin Divi – Owl Carousel Pro

Pernahkah Anda ingin menampilkan posting, proyek, jenis posting khusus, dan gambar dalam korsel menggunakan Divi Builder? Posting dan gambar biasanya ditampilkan dalam slider, yang menampilkan satu posting atau gambar pada satu waktu, tetapi bagaimana jika Anda menginginkan korsel sebenarnya yang menampilkan beberapa posting sekaligus? Anda dapat melakukannya dengan mudah dengan plugin bernama Owl Carousel Pro.

Owl Carousel Pro adalah plugin pihak ketiga yang menambahkan dua modul baru ke Divi Builder. Yang pertama menampilkan jenis posting seperti proyek, posting, dan jenis posting khusus. Yang kedua adalah carousel gambar bersaing dengan editor visual untuk menambahkan semua jenis konten yang Anda inginkan.

Ada versi gratis dari plugin yang tersedia. Saya sedang melihat versi pro, yang menambahkan beberapa fitur baru termasuk:

• jenis posting khusus
• tampilkan bidang khusus
• permintaan khusus
• ubah ukuran thumbnail
• ubah jumlah gambar yang ditampilkan
• buka gambar di lightbox

Gambar untuk contoh diambil dari Unsplash.com.

Memasang Owl Carousel Pro

Unggah dan aktifkan plugin seperti biasa. Anda kemudian akan melihat dua modul baru di Divi Builder: DP Owl Carousel dan DP Owl Image Carousel. Modul berwarna berbeda dari modul Divi standar untuk membantu mereka berdiri terpisah. Ini adalah preferensi saya untuk modul pihak ketiga karena membuatnya lebih mudah ditemukan.

DP Burung Hantu Korsel

DP Owl Carousel menampilkan posting, dan proyek, dan jenis posting khusus dalam carousel. Ini akan menampilkan 10 posting terakhir Anda atau dari kategori atau tag yang Anda pilih. Tab kontennya mencakup pengaturan untuk konten, dan elemen. Tab desain mencakup teks, teks judul posting, teks meta posting, teks kutipan posting, teks yang diajukan khusus, spasi, panah, kontrol, dan gambar mini.

Tab lanjutan berisi pengaturan CSS yang diharapkan tetapi juga menambahkan tindakan klik, animasi (menentukan waktu untuk pengguliran), latar belakang, dan visibilitas. Warna latar belakang di kedua modul hanya satu warna, jadi tidak ada gradien atau gambar yang tersedia. Saya biasanya tidak akan melihat di tab lanjutan kecuali saya ingin menggunakan CSS, jadi saya akan melewatkan pengaturan ini seperti yang saya harapkan ada di tab konten.

Anda dapat membuat kueri khusus (contoh yang diberikan di situs web) atau Anda dapat menggunakan pengaturan di dalam modul untuk mengontrol apa yang ditampilkan. Ini mencakup beberapa pengaturan untuk mengontrol tampilan seperti jumlah posting, nomor offset, nama jenis posting kustom, kategori, tag untuk disertakan, dan tag untuk dikecualikan. Itu menambahkan jenis posting khusus saya secara otomatis.

Kueri khusus ditambahkan ke tema anak Anda dalam kode PHP (selalu buat perubahan PHP dalam tema anak dan bukan tema induk sehingga Anda tidak kehilangan perubahan saat tema diperbarui). Situs web pengembang menyertakan beberapa contoh.

Catatan – selalu coba kode di situs uji sebelum menambahkannya ke situs langsung Anda.

Contoh DP Burung Hantu Korsel

Ini adalah desain standar (saya telah menambahkan latar belakang untuk membuatnya menonjol). Ini menampilkan 10 posting terakhir saya di semua kategori. Saya telah menyertakan header Divi dan meta posting untuk menunjukkan tampilannya di dalam halaman. Mengklik salah satu gambar akan membawa Anda ke pos.

Yang ini menambahkan judul, kategori, dan tanggal. Anda juga dapat menampilkan bidang khusus jika Anda telah menyiapkannya.

Yang ini menunjukkan judul dan kutipan posting menggunakan 270 karakter default.

Dalam yang ini saya telah mengatur kutipan posting menjadi 70 karakter.

Dalam hal ini saya telah menonaktifkan panah dan kontrol. Animasi masih berfungsi tetapi pengguna tidak dapat mengacak slide.

Dalam hal ini saya telah mengubah ukuran dan warna font, membuat panah merah, meningkatkan ukuran kontrol dan menjadikannya ungu, meningkatkan ukuran thumbnail, mengurangi margin menjadi 0, dan mengaturnya untuk menampilkan 3 gambar. Warna kedua untuk kontrol adalah versi yang lebih gelap dari warna yang saya pilih. Warna kedua disediakan oleh plugin.

Dalam hal ini saya telah menambahkan latar belakang dalam modul itu sendiri dan mengubah margin item sehingga latar belakang terlihat di antara posting. Saya juga telah mengubah warna font dan kali ini saya menyesuaikan tinggi dan spasi baris. Ini menunjukkan 4 posting per layar dan saya telah mengurangi ukuran thumbnail. Saya mengatur panah ke besar dan kontrol ke kecil.

Ketika Anda mengubah ukuran thumbnail, itu hanya akan menyesuaikan agar sesuai dengan jumlah posting yang Anda tampilkan. Jadi jika Anda ingin gambar lebih besar, Anda harus mengurangi jumlah posting yang ditampilkan secara manual.

DP Gambar Burung Hantu Korsel

Carousel Gambar Burung Hantu DP menampilkan gambar di dalam carousel. Ini memungkinkan Anda menambahkan gambar dan menampilkan panah dan kontrol. Pengaturan desain meliputi teks, teks judul gambar, teks konten gambar, spasi, panah, kontrol, dan gambar mini. Tab lanjutan sama dengan modul DP Owl Carousel.

Anda dapat menambahkan gambar sebanyak yang Anda inginkan, membukanya di lightbox, dan memintanya untuk menggunakan versi salinan dari gambar atau gambar asli. Saya sengaja memilih gambar dengan ukuran berbeda untuk melihat cara kerjanya.

Gambar ditampilkan dengan baik. Saya suka Anda dapat menautkan ke URL atau membukanya di lightbox. Saya ingin melihat hamparan ditambahkan ke gambar karena ini akan meningkatkan pengalaman lebih jauh.

Contoh Carousel Gambar DP Burung Hantu

Begini tampilan modul di halaman menggunakan pengaturan default. Saya telah menambahkan latar belakang di bagian untuk membuatnya menonjol.

Dalam contoh ini saya telah menambahkan judul dan teks ke gambar. Saya juga telah mengatur panah dan kontrol ke besar dan mengubah warna untuk masing-masing.

Yang ini menampilkan 4 gambar. Saya telah meningkatkan ukuran gambar dan mengurangi margin item dari 8 menjadi 4. Selanjutnya saya menyesuaikan ukuran dan warna font, panah, dan kontrol. Font judul telah meningkatkan spasi.

Yang ini menggunakan latar belakang gelap dengan warna baru untuk font, kontrol, dan panah.

Berikut tampilan gambar saat Anda membukanya di lightbox. Animasi bergulir masih berfungsi di latar belakang.

Jenis Posting Kustom

Dalam modul Owl Carousel Pro pastikan Custom Query dinonaktifkan (ini hanya digunakan jika Anda ingin membuat filter kustom Anda sendiri daripada memilih kategori dari daftar) dan pilih jenis posting Anda di bawah Nama Jenis Posting Kustom. Saya menginstal WooCommerce dan sekarang secara otomatis memiliki Produk sebagai opsi.

Setiap kategori produk saya secara otomatis ditambahkan ke daftar kategori. Sekarang saya dapat menggulir ke bawah dan memilih produk yang ingin saya tampilkan di carousel.

Produk akan ditampilkan tetapi untuk menunjukkan harga saya perlu mengaktifkan bidang khusus, memilih bidang yang akan ditampilkan, dan menambahkan label untuk menunjukkan simbol mata uang yang saya inginkan. Gulir ke bawah dan aktifkan Tampilkan Bidang Kustom. Tambahkan _price ke Nama Bidang Khusus dan $ ke Label Bidang Khusus.

Saya sekarang memiliki korsel produk yang memamerkan kategori WooCommerce yang saya pilih. Saya memilih untuk menampilkan 4 posting, meningkatkan ukuran gambar, mengubah warna font untuk judul, meta, dan bidang khusus, dan meningkatkan ukuran font untuk bidang judul dan khusus. Dalam contoh ini saya hanya menunjukkan tanggal untuk meta, tetapi seperti halnya posting biasa, saya dapat menampilkan informasi meta dan kutipannya.

Menggunakan Owl Carousel Pro dengan Extra dan Plugin Divi Builder

Owl Carousel Pro bekerja sangat baik dengan Extra juga. Ini adalah korsel gambar.

Berikut adalah tampilan plugin dengan plugin Divi Builder yang diinstal pada tema WordPress Twenty Seventeen. Yang ini menampilkan produk WooCommerce saya.

Lisensi

Plugin ini dapat digunakan di situs web tanpa batas untuk Anda dan klien Anda. Ini termasuk 1 tahun pembaruan dan dukungan.

Pikiran Akhir

Owl Carousel Pro menambahkan dua modul bagus ke Divi Builder yang memungkinkan Anda menampilkan posting, proyek, jenis posting khusus, dan gambar dalam korsel yang dapat disesuaikan. Sebagian besar penyesuaian modul Divi yang diharapkan disertakan serta beberapa fitur baru untuk mengontrol tampilan.

Saya menemukan hampir setiap fitur dan pengaturan intuitif. Saya memang menemukan filter khusus membingungkan bagi pengguna rata-rata. Saya ingin melihat beberapa contoh lengkap pembuatan filter karena ini akan menunjukkan kemampuan besar plugin ini. Bahkan jika Anda tidak ingin berurusan dengan kode, versi pro menambahkan fitur yang cukup untuk membuatnya layak dipertimbangkan.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba Own Carousel Pro? Beri tahu kami tentang pengalaman Anda di komentar.

Gambar Unggulan melalui gst / shutterstock.com