Bagaimana tentangposterer blog Anda Divi dalam bentuk carousel tempat Anda dapat dengan mudah menelusuri artikel?
Bagi banyak situs web, blogging telah menjadi bagian penting dari strategi pemasaran mereka. SEO.
Namun selain membuat konten berkualitas tinggi, penting juga untuk menyederhanakan proses penelusuran postingan untuk pengunjung Anda. Dengan cara ini, mereka dapat melompat dari artikel ke artikel dan menghabiskan lebih banyak waktu di situs web Anda untuk membaca konten yang Anda posting di sana.
Di Divi, ada modul Blog yang dapat Anda gunakan untuk menampilkan artikel Anda secara dinamis dan menyesuaikannya juga. Jika Anda sedang mencari cara untuk membawa pengalaman pencarian posting ke tingkat berikutnya, Anda akan menyukai artikel ini.
Kami akan menunjukkan cara mengubah modul Blog terintegrasi Divi menjadi korsel menggunakan elemen terintegrasi Divi dan perpustakaan js gratis .
Mari kita pergi.
penelitian
Sebelum masuk ke tutorial, mari kita lihat dulu hasilnya.
Buat halaman blog dengan Divi Theme Builder
Mulailah dengan menambahkan halaman baru ke situs web yang sedang Anda kerjakan.
Beri judul halaman Anda, publikasikan halaman dan klik 'Gunakan Divi Builder'.
Unduh Halaman Blog Tata Letak Pra-desain 'Perusahaan Desain Interior'
Dalam tutorial ini, kita akan menggunakan Halaman Blog dari tata letak 'Perusahaan Desain Interior', tetapi Anda bebas menggunakan tata letak lain yang Anda suka.
Buat templat panah 'Sebelumnya' dan 'Berikutnya' menggunakan modul Ringkasan Divi
Setelah masuk ke halaman blog, kita bisa mulai membuat carousel.
Bagian pertama didedikasikan untuk membuat panah yang kita perlukan untuk memungkinkan pengunjung bernavigasi di antara artikel.
Baca juga: Cara membuat tajuk global yang lengket di DIVI
Untuk mendesain panah, kami akan menggunakan modul Ringkasan Divi, tetapi Anda bebas menggunakan modul lain pilihan Anda.
Tambahkan baris baru di bagian atas blog Anda menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul apa pun, buka pengaturan garis dan biarkan garis menyentuh sisi kiri dan kanan bagian dengan mengubah pengaturan ukuran sebagai berikut:
- Lebar maksimum: 100%
- Lebar maksimum: 100%
Tambahkan modul Ringkasan
Tambahkan modul Ringkasan dan masukkan judul.
Kemudian pilih salah satu ikon.
- Gunakan ikon: YA
Pengaturan ikon
Beralih ke tab Gaya dan ubah pengaturan ikon sebagai berikut:
- Warna Ikon: #000000
- Penempatan Gambar/Ikon: Vertex
- Penjajaran Gambar/Ikon: Tengah
Pengaturan teks judul
Selanjutnya, ubah pengaturan teks judul.
- Judul Font: Mulish
- Judul Cahaya Lembut: Semi Tebal
- Perataan teks: tengah
- Warna teks judul: #000000
perekat
Kami kemudian mengubah pengaturan ukuran modul pada ukuran layar yang berbeda.
- Lebar maksimum: 10% (desktop), 20% (tablet), 30% (ponsel)
- Perataan teks: kanan
Mari kita juga menambahkan kelas CSS. Kelas CSS ini akan membantu kita memicu aksi carousel saat diklik.
- Kelas CSS: tombol kembali
Terakhir, kita juga akan menambahkan sebaris kode CSS ke elemen utama modul untuk mengubah kursor menjadi pointer.
cursor: pointer;
Kloning garis dan letakkan di bagian bawah bagian
Setelah Anda menyelesaikan panah pertama, Anda dapat mengkloning seluruh penampung baris dan menempatkan baris duplikat di akhir bagian blog.
Buka modul Ringkasan di baris duplikat dan edit judulnya.
Gunakan ikon: YA.
Juga memodifikasi kelas CSS.
- Kelas CSS: tombol berikutnya
Siapkan modul Blog
perekat
Dengan panah di tempat, saatnya untuk mulai mengutak-atik modul Blog, dimulai dengan baris tempat modul itu ditempatkan. Buka pengaturan garis dan ubah pengaturan ukuran yang sesuai:
- Lebar maksimum: 100%
- Lebar maksimum: 100%
Kemudian atur garis overflow ke 'tersembunyi'. Ini akan membantu memastikan bahwa korsel tidak akan menyebabkan bilah gulir horizontal muncul di halaman kami.
- Luapan horizontal: Tersembunyi
- Luapan vertikal: Tersembunyi
Sembunyikan paginasi
Setelah pengaturan baris di tempat, buka pengaturan modul Blog. Pastikan paging dinonaktifkan di pengaturan item.
- Tampilkan pagination: Tidak
Selanjutnya, alihkan ke tab Style dan ubah layout menjadi 'Full Screen'.
- Model: Layar Penuh
Kami juga akan menambahkan overlay.
- Gambar overlay ditampilkan: AKTIF
- Warna ikon hamparan: #ffffff
- Warna latar belakang hamparan: rgba (1,0,66,0.33)
Selanjutnya, kita akan menambahkan kelas CSS ke blog kita, yang akan membantu kita mengaktifkan carousel nanti di tutorial.
- Kelas CSS: modul blog
Dan kami akan menghasilkan beberapa ruang antara meta pos dan kutipan dengan menambahkan margin bawah ke elemen CSS Metadata Postingan di tab lanjutan.
Temukan juga: Cara membuat menu geser dan tekan di DIVI
margin-bottom: 50px;
Tambahkan fungsionalitas Slick JS
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).
Kemudian tambahkan perpustakaan js yang apik dalam tag skrip (seperti yang Anda lihat di layar cetak di bawah). Anda juga bebas menambahkannya ke tajuk situs web Anda di pengaturan Tema Divi.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
Kami akan sedikit memodifikasi setiap posting blog pada tingkat individu menggunakan kode CSS.
Baca juga: Cara membuat halaman blog dengan modul Blog di DIVI
Pastikan untuk menempatkan kode antara tag gaya seperti yang ditunjukkan pada tangkapan layar di bawah ini.
.slick-slide {
float: left;
margin: 2vw;
}
Dan terakhir, kita akan menambahkan beberapa kode JQuery untuk memungkinkan carousel terbentuk. Dalam kode di bawah ini, kami juga menambahkan tombol yang kami rancang untuk fungsi carousel.
Pastikan untuk menempatkan kode dalam tag skrip seperti yang Anda lihat 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
}
}]
});
});
Simpan halaman dan keluar dari Divi's Visual Builder untuk menampilkan hasilnya
Di 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!
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
Unduh DIVI Sekarang!!!
Kesimpulan
Jadi ! Itu saja untuk artikel ini. Kami telah menunjukkan kepada Anda bagaimana membawa desain modul Blog Anda ke tingkat berikutnya. Secara khusus, kami menunjukkan kepada Anda cara mengubah modul Blog bawaan Divi menjadi korsel menggunakan pustaka js gratis.
Jika Anda ingin tahu lebih banyak tentang Divi, jangan ragu untuk mengunjungi katalog kami tutorial Divi. Anda juga dapat berkonsultasi Cara membuat halaman Blog dengan modul Blog Divi
Lihat juga sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
