Cara Membuat Carousel Modul Divi yang Dapat Diklik
Diterbitkan: 2017-09-19Postingan hari ini dikirimkan oleh Michelle Nunan dari Divi Soup, rumah dari “Divi Kitchen” di mana dia terus-menerus membuat tutorial dan ecourse Divi yang baru dan berguna.
Korsel adalah fitur situs web yang populer. Mereka memungkinkan Anda untuk menampilkan lebih banyak konten tanpa mengambil ruang ekstra, dan mereka juga menambahkan elemen interaktivitas ke situs web Anda yang dapat mendorong pengunjung Anda untuk lebih terlibat dengan konten Anda.
Ada sejumlah plugin hebat yang dapat membantu menampilkan konten Anda di carousel tetapi dalam posting ini saya akan menunjukkan kepada Anda cara membuat carousel modul Divi yang dapat diklik hanya menggunakan CSS dan Javascript.
Efek ini dapat digunakan dengan hampir semua modul Divi standar, atau kombinasi modul. Saya akan menunjukkan cara membuat korsel ini menggunakan modul gambar, dan kemudian dengan modul blog sebagai prosesnya sedikit berbeda. Dari sana Anda harus memahami bagaimana Anda dapat membuat korsel Anda sendiri dengan hampir semua modul standar.
Hasil
Inilah yang harus Anda dapatkan setelah membuat korsel dengan modul blog
Anda dapat melihat demo langsung di sini yang menunjukkan efeknya menggunakan berbagai Modul Divi Builder.
Jadi mari kita mulai.
Tambahkan halaman baru
Kita akan mulai dengan membuat carousel dengan modul gambar. Tambahkan halaman baru atau buka halaman yang ingin Anda tambahkan carousel.
Tambahkan bagian baru
Tambahkan bagian standar baru ke halaman Anda dengan satu kolom. Kemudian buka pengaturan bagian dan di tab Lanjutan, tambahkan kelas ds-carousel-section di bidang Kelas CSS.
Karena kami akan mengubah cara tampilan bagian dan baris, kami hanya ingin perubahan ini diterapkan pada carousel kami, oleh karena itu kami menambahkan kelas khusus untuk mencegah kode kami memengaruhi elemen lain di situs kami.
Kemudian Simpan & Keluar dari bagian tersebut.
Sekarang buka pengaturan baris dan di tab Lanjutan, tambahkan kelas ds-carousel-row di bidang Kelas CSS. Kemudian Simpan & Keluar dari baris.
Selanjutnya kita akan menambahkan modul gambar ke baris kita. Klik Sisipkan Modul dan pilih Modul Gambar dari daftar.
Di tab Konten modul gambar, klik Unggah Gambar dan pilih gambar yang Anda inginkan dari perpustakaan media atau unggah yang baru.
Jika Anda ingin gambar Anda terbuka di lightbox, pilih opsi ini di pengaturan.
Atau Anda dapat menambahkan url untuk membuka halaman baru ketika gambar diklik jika Anda mau.
Hal terakhir yang perlu kita lakukan pada modul adalah menambahkan kelas. Klik pada tab Advanced dan tambahkan class ds-carousel-module di kolom CSS Class. Kemudian Simpan & Keluar dari modul.
Itu salah satu modul kami selesai, tapi kami akan membutuhkan lebih dari satu gambar untuk membuat korsel. Kode yang akan saya berikan nanti di posting ini akan menampilkan 5 gambar sekaligus, jadi kita akan membutuhkan setidaknya 6 gambar agar tombol carousel kita memiliki efek dan menggeser konten kita.
Menggunakan fitur klon Divi, duplikat modul gambar sebanyak yang Anda inginkan agar gambar ditampilkan di korsel Anda.
Setelah selesai, bagian Anda akan terlihat seperti ini, dengan modul gambar Anda ditumpuk dalam satu baris.
Anda perlu membuka pengaturan untuk setiap modul dan menukar gambar dan URL Anda jika Anda menambahkannya.
Demikian pengaturan konten selesai, sekarang kita akan membuat navigasinya.
Tambahkan bagian baru
Tambahkan bagian baru tepat di bawah bagian gambar Anda, kali ini dengan dua kolom.
Buka pengaturan baris dan di tab Lanjutan tambahkan kelas ds-panah-baris di bidang Kelas CSS. Kemudian Simpan & Keluar dari baris.
Tambahkan navigasi
Selanjutnya, tambahkan modul teks ke masing-masing dari dua kolom di baris ini.
Sekarang kita perlu membuat field input untuk bertindak sebagai tombol navigasi kita. Buka modul teks di kolom kiri dan di area konten, rekatkan HTML berikut:
<input id="ds-arrow-left" type="button" value="8">
Kemudian Simpan & Keluar dari modul.
Selanjutnya buka modul teks di kolom kanan dan rekatkan HTML berikut:
<input id="ds-arrow-right" type="button" value="9">
Kemudian Simpan & Keluar dari modul.
Kami memberikan kolom input ini ID unik ds-arrow-left dan ds-arrow-right sehingga kami dapat menata keduanya dengan CSS dan menargetkannya dengan JavaScript untuk memberi tahu mereka apa yang kami ingin mereka lakukan saat diklik.
Nilai 8 dan 9 mengacu pada panah kiri dan kanan ganda dari keluarga font Modul ET.
Itu saja yang perlu kita lakukan di builder. Jika Anda memeriksa ujung depan halaman Anda sekarang, itu hanya akan menjadi satu kolom gambar dan kemudian dua tombol abu-abu kecil dengan 8 dan 9 di atasnya dan mereka tidak akan melakukan apa-apa. Jadi mari kita ke bagian yang menyenangkan, menambahkan kode kita.
Tambahkan CSS
Saya akan menyarankan untuk menambahkan CSS berikut ke tema anak Anda, tetapi jika Anda tidak menggunakan tema anak maka tidak apa-apa untuk menambahkan ke Divi > Opsi Tema > Umum > CSS Khusus dan pastikan untuk menekan Simpan.
/*Hide the section overflow*/
.ds-carousel-section {
width: 100%;
overflow: hidden;
}
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
color: #fff;
background: gray;
font-family: 'ETModules';
font-size: 30px;
padding: 5px 30px;
border-style: none;
border-radius: 0;
cursor: pointer;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*Position the left arrow*/
#ds-arrow-left {
float: right;
margin-right: 5px;
}
/*Position the right arrow*/
#ds-arrow-right {
float: left;
margin-left: 5px;
}
/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
-webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}
/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}
/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
float: left;
width: 100% !important;
margin-right: 0 !important;
}
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}Edit CSS untuk kebutuhan Anda
Anda mungkin perlu mengedit beberapa deklarasi CSS tergantung pada berapa banyak modul yang Anda gunakan di carousel Anda.
Sekarang untuk sedikit matematika!
Deklarasi ini menetapkan lebar baris yang berisi modul.
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}Untuk mengapungkan modul kita di samping satu sama lain, dengan beberapa duduk di luar area yang terlihat, kita perlu menambah lebar baris.
Jika Anda menampilkan total 15 modul dengan 5 per halaman maka Anda akan berakhir dengan 3 halaman. Jadi lebar baris yang terlihat harus:
(15/5) x 100 = 300.
Oleh karena itu Anda perlu mengubah nilai 1000vw menjadi minimal 300vw. (Tidak masalah jika Anda memasukkan angka yang lebih besar karena JavaScript akan menjaga agar tidak menampilkan halaman kosong tambahan). Jadi CSS Anda yang disesuaikan akan terlihat seperti ini:
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 300vw;
max-width: 300vw;
}Dengan media query itu sedikit berbeda. Karena CSS dikonfigurasi untuk menampilkan 3 gambar per halaman pada layar dengan lebar 1024px atau kurang, dan 1 gambar per halaman pada layar dengan lebar 479px atau kurang, kita perlu menyesuaikan matematika untuk mencerminkan bahwa:
(15/3) x 100 = 500 (untuk tablet)
(15/1) x 100 = 1500 (untuk handphone)
CSS Anda yang disesuaikan akan terlihat seperti ini:
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 500vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1500vw !important;
}
}Anda dapat jika Anda ingin mengubah semua nilai ini menjadi lebar yang lebih besar dari jumlah total modul yang Anda gunakan untuk kesederhanaan. Jadi dalam contoh di atas, nilainya akan menjadi 1500vw atau lebih.
Anda mungkin juga ingin mengubah jumlah modul yang ditampilkan per halaman. Deklarasi CSS ini adalah tempat Anda dapat menyesuaikannya.
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
Nilai lebar 20vw menampilkan 5 gambar per halaman, dan itu hanya persentase 100. Jadi 25vw akan menampilkan 4 gambar per halaman dan 16.66vw akan menampilkan 6 gambar per halaman, dan seterusnya.
Anda dapat melakukan hal yang sama untuk kueri media:
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}Ingatlah bahwa jika Anda mengubah jumlah gambar yang ditampilkan per halaman, Anda mungkin juga perlu menyesuaikan nilai lebar baris yang dibahas sebelumnya.
Jika Anda memeriksa halaman Anda lagi sekarang, semuanya harus ditata dengan baik dan terlihat seperti korsel, tetapi agar berfungsi, kita perlu menambahkan beberapa JavaScript.
Tambahkan JavaScript
Salin dan tempel kode berikut ke Divi> Opsi Tema> Integrasi> Tambahkan kode ke <head> blog Anda dan pastikan untuk Simpan.
<script type="text/javascript">
(function ($) {
var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}
function mn_carousel_init() {
mn_set_visible();
var item = $('.ds-carousel-module');
$('#ds-arrow-right').click(function() {
mn_next_slide(item);
});
$('#ds-arrow-left').click(function() {
mn_previous_slide(item);
});
$(window).resize(function() {
mn_set_visible();
mn_first_slide(item);
});
}
$(document).ready(function() {
mn_carousel_init();
});
})(jQuery)
</script>Kode ini menambahkan fungsionalitas ke tombol kami, memindahkan baris ke kiri dan kanan saat klik untuk menampilkan modul.
Ada beberapa area yang mungkin ingin Anda edit:
var mn_index = 0; //Starting index var mn_visible = 5; var mn_end_index = 0;
mn_terlihat = 5; variabel sesuai dengan jumlah modul yang ditampilkan per halaman di desktop. Jadi jika Anda mengubah ini di CSS seperti yang disebutkan sebelumnya, Anda juga ingin mengubah nilai ini.
Demikian juga, fungsi ini menyesuaikan jumlah gambar yang ditampilkan di tablet dan ponsel. Jadi jika Anda mengubah ini di CSS, maka sesuaikan nilai mn_visible di sini juga.
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}Akhirnya, kami memiliki kecepatan di mana korsel bergerak. Ini diatur di sini sebagai 1000. Ini adalah kecepatan dalam milidetik: 1000 milidetik = 1 detik.
Anda dapat menyesuaikan nilai ini untuk mempercepat atau memperlambat animasi.
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}Itu dia! Sekarang jika Anda melihat halaman Anda, Anda harus memiliki carousel modul gambar yang dapat diklik.
Seperti yang saya katakan, Anda dapat menggunakan metode ini dengan hampir semua modul pembuat Divi standar, tetapi Anda mungkin perlu menyesuaikan pengaturan dengan modul yang dirancang untuk menampilkan beberapa jenis umpan, seperti modul blog.
Saat modul blog menarik posting dan menampilkannya di beberapa kolom (saat menggunakan fitur kisi), ini akan memerlukan penyesuaian pengaturan modul dan sedikit CSS tambahan.
Korsel Menggunakan Modul Blog
Ikuti langkah yang sama untuk menyiapkan bagian dan baris Anda.
Alih-alih menambahkan modul gambar, pilih modul blog dan tambahkan kelas ds-carousel-module di tab Advanced pada pengaturan modul.
Selanjutnya, di tab Design pilih Grid dari dropdown layout.
Anda dapat membiarkannya sebagai Fullwidth jika Anda suka, tetapi opsi Grid secara otomatis menambahkan gaya yang lebih sesuai dengan tata letak carousel.
Sekarang kita perlu menyesuaikan beberapa pengaturan di tab Konten.
Untuk modul pertama ini, kita memerlukan Nomor Postingan ke 1, dan Nomor Offset diatur ke 0.
Bagaimana Anda menyesuaikan sisa pengaturan dan konten mana yang Anda tampilkan sepenuhnya terserah Anda. Kemudian Simpan dan Keluar.
Seperti yang kita lakukan sebelumnya, gunakan fungsi kloning Divi untuk menduplikasi modul sebanyak yang Anda butuhkan.
Setelah Anda memiliki jumlah modul blog yang Anda butuhkan, buka masing-masing modul dan tambahkan angka offset sebanyak 1 setiap kali sehingga setiap modul blog menampilkan posting berikutnya di feed.
Jadi pengaturan Anda akan terlihat seperti ini:
1 = Nomor Offset: 0
2 = Nomor offset: 1
3 = Nomor Offset: 2
4 = Nomor Offset: 3
Dll.
Sedikit Tambahan CSS
Saat modul blog ditampilkan dalam kolom saat menggunakan format Grid, kita perlu menambahkan kueri media tambahan ini ke CSS kita untuk mengesampingkan pengaturan kolom Divi pada layar yang lebih kecil:
@media all and (max-width: 980px) {
/*Set post to fullwidth on smaller screens*/
.ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
width: 100% !important;
margin: 0 !important;
}
}Jika Anda memutuskan untuk menggunakan modul blog dalam mode Fullwidth, Anda tidak perlu menambahkan ini.
Hasil
Sekarang periksa halaman Anda dan lihat Korsel Blog baru Anda yang indah
Pikiran Akhir
Ada banyak cara Anda dapat menggunakan efek carousel ini untuk menampilkan lebih banyak konten tanpa menambah panjang halaman Anda.
Anda dapat menampilkan etalase desain situs Anda, testimonial klien, biografi karyawan, video, podcast, atau bahkan produk dari toko Anda.
Saya akan senang mendengar bagaimana Anda menggunakan tutorial ini untuk membuat carousel modul Divi yang dapat diklik, jadi silakan tinggalkan komentar di bagian di bawah ini!
Gambar Unggulan Oleh aunaauna / Shutterstock.com