Mengubah Modul Blog Anda menjadi Carousel Draggable/Swipe Tingkat Lanjut dengan Divi & Slick

Bagi banyak situs web, blogging telah menjadi bagian penting dari strategi SEO mereka. Namun selain membuat konten berkualitas tinggi, penting juga untuk menyederhanakan proses navigasi postingan bagi pengunjung Anda. Dengan begitu, mereka dapat berpindah dari satu pos ke pos lainnya dan menghabiskan lebih banyak waktu di situs web Anda untuk membaca konten yang Anda taruh di sana. Di dalam Divi, ada Modul Blog yang dapat Anda gunakan untuk menampilkan posting blog Anda secara dinamis dan juga menatanya. Jika Anda mencari cara untuk membawa pengalaman pencarian pos ke tingkat berikutnya, Anda akan menyukai pos ini. Kami akan menunjukkan kepada Anda cara mengubah Modul Blog Divi bawaan menjadi carousel yang dapat diseret/digesek tingkat lanjut dengan elemen bawaan Divi dan pustaka js apik gratis. 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 Modul Blog Draggable Swipe Carousel Layout GRATIS

Untuk mendapatkan tata letak carousel gesek geser Modul Blog 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!

1. Buat Halaman Blog

Tambahkan Halaman Baru

Mulailah dengan menambahkan halaman baru ke situs web yang sedang Anda kerjakan. Beri judul pada halaman Anda, publikasikan halaman dan alihkan ke Visual Builder.

Unggah Tata Letak Halaman Blog Perusahaan Desain Interior

Dalam tutorial kasus penggunaan ini, kami akan menggunakan tata letak blog Perusahaan Desain Interior tetapi Anda bebas menggunakan tata letak lain pilihan Anda.

2. Buat Desain Panah Sebelumnya & Berikutnya Menggunakan Modul Blurb

Tambahkan Baris Baru ke Bagian Atas

Struktur Kolom

Setelah kita berada di dalam halaman blog, kita dapat mulai membangun carousel swipe draggable lanjutan. Bagian pertama didedikasikan untuk mendesain panah yang kita butuhkan untuk memungkinkan pengunjung bolak-balik di antara posting. Panah tidak akan menjadi satu-satunya pilihan pengunjung harus menavigasi melalui korsel. Mereka akan dapat menyeret carousel di desktop dan juga menggesek di ponsel. Untuk mendesain panah, kami akan menggunakan Modul Blurb bawaan Divi tetapi Anda bebas menggunakan modul lain pilihan Anda. Tambahkan baris baru ke bagian atas blog Anda menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris menyentuh sisi kiri dan kanan bagian dengan mengubah pengaturan ukuran sebagai berikut:

• Lebar: 100%
• Lebar Maks: 100%

Tambahkan Modul Blurb

Tambahkan judul

Kemudian, tambahkan Modul Blurb dan masukkan judul.

Pilih Ikon

Pilih ikon berikutnya.

Pengaturan Ikon

Pindah ke tab desain dan ubah pengaturan ikon sebagai berikut:

• Warna Ikon: #000000
• Ikon Lingkaran: Ya
• Warna Lingkaran: #f2f2f2
• Penempatan Gambar/Ikon: Atas
• Penjajaran Gambar/Ikon: Tengah

Pengaturan Teks Judul

Kemudian, ubah pengaturan teks judul.

• Judul Font: Muli
• Judul Font Berat: Semi Tebal
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #000000

Perekat

Kami mengubah pengaturan ukuran modul di berbagai ukuran layar berikutnya.

• Lebar: 10% (Desktop), 20% (Tablet), 30% (Ponsel)
• Penyelarasan Modul: Kanan

Kelas CSS

Dan kami juga akan menambahkan kelas CSS. Kelas CSS ini akan membantu kita memicu aksi carousel di klik nanti di tutorial.

• Kelas CSS: tombol kembali

Elemen Utama CSS

Last but not least, kita juga akan menambahkan satu baris kode CSS ke elemen utama modul untuk mengubah kursor menjadi pointer.

cursor: pointer;

Baris Klon & Tempatkan di Bagian Bawah

Setelah Anda menyelesaikan panah pertama, Anda dapat mengkloning seluruh penampung baris dan menempatkan baris duplikat di akhir bagian blog.

Ganti Judul

Buka Modul Blurb di baris duplikat dan ubah judulnya.

Ubah Ikon

Bersama dengan ikon.

Ubah Kelas CSS

Dan memodifikasi kelas CSS juga.

• Kelas CSS: tombol berikutnya

3. Siapkan Modul Blog

Baris Terbuka yang Berisi Modul Blog

Perekat

Setelah panah terpasang, saatnya untuk mulai mengubah Modul Blog, dimulai dengan baris penempatannya. Buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

• Lebar: 100%
• Lebar Maks: 100%

Visibilitas

Kemudian, tempatkan overflow baris ke hidden. Ini akan membantu memastikan bahwa carousel tidak menyebabkan scroll bar horizontal muncul di halaman kita.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Modifikasi Modul Blog

Sembunyikan Paginasi

Setelah pengaturan baris di tempat, buka pengaturan Modul Blog. Pastikan pagination dinonaktifkan di pengaturan elemen.

• Tampilkan Pagination: Tidak

Tata Letak

Kemudian, pindah ke tab desain dan ubah tata letak menjadi lebar penuh.

• Tata letak: Lebar penuh

Hamparan

Kami juga menambahkan overlay.

• Hamparan Gambar Unggulan: Aktif
• Warna Ikon Hamparan: #ffffff
• Warna Latar Belakang Hamparan: rgba(1,0,66,0.33)

Kelas CSS

Selanjutnya, kita akan menambahkan kelas CSS ke blog kita, yang akan membantu kita mengaktifkan carousel nanti di tutorial.

• Kelas CSS: modul blog

Posting Meta CSS

Dan kami akan membuat beberapa ruang antara meta pos dan kutipan dengan menambahkan beberapa margin bawah ke elemen CSS meta pos di tab lanjutan.

margin-bottom: 50px;

4. Tambahkan Fungsionalitas Slick JS

Tambahkan Modul Kode Di Bawah Modul Blog

Setelah semua pengaturan Divi siap, saatnya untuk menambahkan fungsionalitas js yang apik! Tambahkan Modul Kode tepat di bawah Modul Blog (atau di mana pun di halaman).

Tambahkan Tag Skrip JS yang Licin

Kemudian, tambahkan pustaka js yang apik di dalam tag skrip (seperti yang Anda lihat di layar cetak di bawah). Anda bebas menambahkan ini ke kepala situs web Anda di pengaturan tema Divi juga.

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

Tambahkan Kode CSS Slide

Kami akan sedikit memodifikasi setiap posting blog pada tingkat individu menggunakan beberapa kode CSS. Pastikan Anda menempatkan kode di antara tag gaya seperti yang terlihat pada layar cetak di bawah ini.

.slick-slide {
float: left;
margin: 2vw;
}

Tambahkan Kode JQuery

Dan yang tak kalah pentingnya, kami akan menambahkan beberapa kode JQuery untuk memungkinkan korsel geser lanjutan yang dapat diseret untuk mengambil bentuknya. Dalam kode di bawah ini, kami juga menambahkan tombol yang telah kami rancang ke fungsi carousel. Pastikan Anda menempatkan kode di dalam tag skrip seperti yang Anda lihat di layar cetak di bawah ini.

jQuery(function($){
  
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
  
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 

$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
  
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]

});
});

5. Simpan Halaman & Keluar dari Pembuat Visual untuk Melihat Hasil

Di dalam Visual Builder, Anda tidak akan melihat hasilnya. Jadi, segera setelah Anda selesai, simpan halaman Anda, keluar dari Visual Builder dan lihat hasilnya di situs web Anda!

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 bagaimana membawa desain Modul Blog Anda ke tingkat berikutnya. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara mengubah Modul Blog bawaan Divi menjadi korsel geser canggih yang dapat diseret menggunakan pustaka js licin gratis. Kami juga menyediakan file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk 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.