Cara Membuat Korsel Otomatis dengan Divi & Slick.js

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang berkelanjutan, kami akan menunjukkan cara membuat korsel otomatis dengan Divi, Slick.js, dan Paket Tata Letak Toko Es Krim. Kami akan mulai dengan menyertakan pustaka JS yang apik di situs web kami dan melanjutkan dengan membuatnya berfungsi di dalam Divi Builder. Ini adalah cara yang bagus untuk membuat korsel otomatis untuk semua jenis modul yang ingin Anda tampilkan. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Korsel Otomatis GRATIS

Untuk mendapatkan tata letak carousel otomatis gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Pastikan Anda menyertakan file Slick.js di tag kepala Anda! Tanpa itu, itu tidak akan berhasil. Lihat langkah pertama di bawah ini.

1. Tambahkan Slick JS ke Integrasi Tema Divi Anda

Buka Opsi Tema Divi

Bagian pertama dari tutorial ini sangat penting; menambahkan Slick.js ke situs web Anda. Untuk melakukannya, buka Opsi Tema Divi Anda.

Tambahkan Slick.js ke Head Tags

Arahkan ke tab integrasi dan tambahkan file Slick.js ke tag kepala situs web Anda.

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

2. Buat Halaman Baru Menggunakan Tata Letak Menu Toko Es Krim

Tambahkan Halaman Baru

Lanjutkan dengan menambahkan halaman baru ke situs web Anda. Beri judul pada halaman Anda, publikasikan halaman dan alihkan ke Divi Builder.

Unggah Tata Letak Menu Toko Es Krim

Untuk tutorial ini, kami menggunakan tata letak menu Paket Tata Letak Toko Es Krim, tetapi jangan ragu untuk menggunakan laman/tata letak lain pilihan Anda.

2. Tambahkan Bagian Baru ke Halaman

Tambahkan Bagian Baru

Langkah selanjutnya dalam membuat carousel otomatis adalah menambahkan bagian baru ke halaman Anda.

Warna latar belakang

Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #f5f5f5

Pembagi Bawah

Tambahkan pembagi bawah ke bagian juga.

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #ffffff
• Berat Pembagi: 10vw

Jarak

Seiring dengan beberapa bantalan bawah.

• Padding Bawah: 10vw

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama menggunakan struktur kolom berikut:

Tambahkan Modul Teks Judul ke Kolom

Tambahkan Konten H2

Tambahkan Modul Teks ke kolom baris dan masukkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Pindah ke tab desain dan ubah pengaturan teks H2 yang sesuai:

• Judul 2 Font: Prompt
• Judul 2 Berat Font: Ultra Ringan
• Judul 2 Perataan Teks: Tengah
• Judul 2 Ukuran Teks: 60px (Desktop), 40px (Tablet), 25px (Ponsel)
• Pos 2 Tinggi Baris: 1.2em

Perekat

Ubah juga pengaturan ukuran modul.

• Lebar Maks: 800px
• Penyelarasan Modul: Pusat

3. Dedikasikan Baris Satu Kolom Baru ke Slider Otomatis

Tambahkan Baris Baru

Struktur Kolom

Untuk membuat carousel otomatis, kita perlu mendedikasikan baris baru ke item yang ingin kita tempatkan di dalam carousel. Pastikan Anda memilih baris dengan satu kolom saja. Pada langkah berikutnya, kami akan mengubah kolom ini menjadi korsel otomatis.

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar dalam pengaturan ukuran.

• Lebar: 100%
• Lebar Maks: 100%

Jarak

Tambahkan beberapa margin atas dan hapus semua padding atas dan bawah default berikutnya.

• Margin Atas: 50px
• Padding Atas: 0px
• Padding Bawah: 0px

Meluap

Kami juga memastikan tidak ada yang melebihi penampung baris dengan menyembunyikan luapan.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Pengaturan Kolom

Lanjutkan dengan membuka pengaturan kolom.

Kelas CSS

Tambahkan dua kelas CSS yang berbeda ke kolom. Pastikan Anda meninggalkan ruang di antara mereka. Nanti di tutorial ini, kita akan menggunakan kelas-kelas ini untuk membuat carousel otomatis.

• Kelas CSS: penggeser item es krim

Tambahkan Item Slider Pertama ke Kolom (Modul Ajakan Bertindak)

Konten Bawaan

Saatnya mulai menambahkan item carousel pertama! Kami akan menggunakan Modul Ajakan Bertindak tetapi jangan ragu untuk menggunakan modul lain pilihan Anda. Masukkan beberapa konten pilihan Anda.

Arahkan Konten

Ganti judul dan isi isi dengan karakter kosong (seperti ini: ' ') untuk menghapus konten saat mengarahkan kursor.

Tautan

Pastikan Anda menambahkan tautan ke modul juga sehingga tombolnya muncul.

• URL Tautan Tombol: #

Latar Belakang Gradien Default

Kemudian, buka pengaturan latar belakang dan tambahkan latar belakang gradien.

• Warna 1: #8300e9
• Warna 2: rgba(41.196.169,0)
• Tipe Gradien: Radial
• Arah Radial: Atas
• Posisi Awal: 35%
• Posisi Akhir: 35%

Hapus Hover Gradient Background

Hapus latar belakang gradien saat melayang.

Gambar latar belakang

Unggah juga gambar latar belakang yang relevan.

Pengaturan Teks Judul

Pindah ke tab desain dan ubah pengaturan teks judul yang sesuai:

• Judul Font: Prompt
• Judul Teks Ukuran: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)
• Tinggi Baris Judul: 2vw (Desktop), 3vw (Tablet), 4vw (Telepon)

Pengaturan Teks Tubuh

Ubah juga pengaturan teks isi.

• Font Tubuh: Buka Sans
• Ukuran Teks Tubuh: 0.9vw (Desktop), 2vw (Tablet), 2.5vw (Telepon)
• Tinggi Garis Tubuh: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)

Pengaturan Tombol

Kemudian, pergi ke pengaturan tombol dan gaya tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.9vw (Desktop), 1.5vw (Tablet), 2vw (Ponsel)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000 (Default), #ff6f7e (Hover)
• Lebar Batas Tombol: 0px

• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 2px
• Font Tombol: Prompt
• Berat Font Tombol: Reguler
• Gaya Font Tombol: Huruf Besar

• Margin Atas: 19vw (Desktop), 30vw (Tablet), 45vw (Telepon)
• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)
• Padding Kanan: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)

Perekat

Kami juga memodifikasi lebar dan tinggi modul.

• Lebar: 23vw
• Tinggi: 23vw (Desktop), 50vw (Tablet), 80vw (Telepon)

Jarak

Last but not least, buka pengaturan spasi dan tambahkan beberapa margin kustom dan nilai padding.

• Margin Kiri: 1vw
• Margin Kanan: 1vw
• Padding Atas: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)

4. Clone Slider Item Sesering yang Diinginkan

Modul CTA Klon Empat Kali

Setelah Anda menyelesaikan Modul CTA pertama, Anda dapat melanjutkan dan mengkloningnya sebanyak yang Anda inginkan. Setiap modul di kolom ini akan menjadi bagian dari carousel otomatis.

Ubah Konten, Latar Belakang Gradien & Gambar Latar Belakang untuk Setiap Duplikat

Pastikan Anda mengubah konten, latar belakang gradien, dan gambar latar belakang setiap duplikat untuk membuat setiap Modul CTA unik.

5. Tambahkan Baris Baru Di Bawah Baris Sebelumnya

Tambahkan baris berikutnya dan terakhir ke bagian menggunakan struktur kolom berikut:

Masukkan Modul Kode Pertama dengan Kode jQuery

Tambahkan Modul Kode Baru ke Kolom

Tambahkan Modul Kode pertama ke kolom.

Masukkan Kode CSS

Dan masukkan baris Kode CSS berikut:

<style>
.slick-slider
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-slide
{
float: left;
}
</style>

Masukkan Modul Kode Kedua dengan Kode CSS

Tambahkan Modul Kode Baru ke Kolom

Tambahkan Modul Kode lain tepat di bawah yang sebelumnya.

Masukkan Kode jQuery

Dan masukkan baris kode jQuery berikut:

<script>
jQuery(function($){
$('.icecream-items').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 700,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 1079,
settings: {
slidesToShow: 2
}
}]
});
});
</script>

Setelah Anda menambahkan kode CSS dan jQuery, Anda dapat keluar dari Visual Builder untuk melihat hasilnya!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat korsel otomatis menggunakan Divi, slick.js, dan Paket Tata Letak Toko Es Krim. Ini adalah cara yang bagus untuk menambahkan interaksi ke situs web Anda. Anda dapat membuat teknik ini bekerja dengan semua jenis modul yang ingin Anda tampilkan! Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.