Dapatkan Hosting Instan dengan Elementor dan Elementor Pro

dengan CDN, SSL dan cadangan.

Mulai hari ini

Cara Menambahkan Pagination ke Modul Blog Divi Anda

Rifat Divi Tutorials Mar 2, 2022

Tingkatkan navigasi situs web Anda dan buat konten halaman Anda tetap sederhana dengan menggunakan pagination. Beberapa artikel blog dapat ditampilkan pada satu halaman, dan tautan dapat disediakan untuk memungkinkan pengguna melihat lebih banyak jika mereka mau. Divi memudahkan untuk menambahkan pagination. Menambahkan pagination ke modul Divi Blog Anda akan dibahas dalam posting ini. Kami juga akan menunjukkan cara menatanya agar sesuai dengan kebutuhan desain halaman Anda.

Mari kita mulai sekarang.

Cara Kerja Pagination

Membagi konten ke dalam halaman, seperti feed blog, dengan pagination. Tautan pagination memungkinkan pengguna untuk berpindah antar halaman daripada menampilkan semua konten sekaligus.

Ada tautan di bawah umpan Blog di modul Divi Blog yang memungkinkan pengguna beralih di antara kumpulan entri blog sebelumnya dan berikutnya. Jika Anda tidak ingin menempatkan semua posting Anda di layar sekaligus, ini adalah pilihan yang baik untuk Anda.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang

Mungkin bagi pengguna untuk menggulir mundur dan maju melalui posting situs menggunakan fitur pagination. Jika Anda menggunakan modul blog, pagination dapat diakses. Sebagai contoh, posting unggulan dapat ditampilkan menggunakan modul ini. Saat umpan, seperti posting atau proyek, ditampilkan di modul Blog, pagination harus digunakan. Lihat halaman dengan banyak modul Blog untuk mengetahui alasannya.

Beberapa Modul Untuk Pagination

Halaman blog dari Paket Tata Letak Lantai terlihat di atas. Desain ini menampilkan empat bagian blog. Sebagai permulaan, Anda akan memiliki akses ke modul Slider Blog. Modul blog mengikuti tiga modul berikutnya. Dalam dua yang pertama, kami telah menetapkan pahlawan. Ini tidak memiliki nomor halaman. Tautan pagination dapat ditemukan di modul Blog keempat. URL ini hanya berlaku untuk modul Blog saat ini.

Pagination hanya memengaruhi posting di modul Blog, bukan seluruh situs. Tidak akan ada perubahan pada modul Blog lain di halaman jika Anda memiliki lebih dari satu.

Awalnya, beberapa orang mungkin khawatir tentang hal ini. Ada kemungkinan bahwa seluruh halaman akan diubah. Modul-modul ini akan masuk akal bagi mereka jika mereka tampak cukup berbeda satu sama lain. Namun, bagian pahlawan tetap tidak terpengaruh jika bagian umpan blog memiliki konten baru. Mereka tersebar di seluruh desain.

Pagination telah ditambahkan ke setiap modul Blog dalam contoh ini. Karena itu, pengalaman pengguna desain (UX) telah memburuk ke tingkat yang mengerikan. Untuk mempermudah, pagination hanya boleh diterapkan ke feed blog utama. Kecuali Anda menggunakan tata letak bergaya majalah, pagination tidak akan berfungsi dengan banyak modul Blog.

Perbedaan Antara Navigasi & Pagination

Pagination modul Blog berbeda dari modul Navigasi Postingan. Mereka memiliki banyak kesamaan, namun mereka tidak dapat dipertukarkan.

Ada beberapa opsi mudah untuk pagination di modul Blog. Anda dapat melompat dari satu posting blog ke yang lain menggunakan fitur Navigasi Posting. Ini memiliki beberapa fitur menarik, tetapi seharusnya digunakan di artikel blog atau template posting blog daripada di halaman blog itu sendiri.

Mari kita lihat pengaturan pagination modul Divi Blog, termasuk cara mengaktifkan dan menonaktifkannya.

Aktifkan Pagination

Navigasi halaman dapat diaktifkan dengan mengaktifkan Visual Builder di bagian atas halaman modul Blog Anda. Buka pengaturan modul Blog Anda dengan mengklik ikon roda gigi di sisi kanan halaman.

Gulir ke bawah ke Elemen di bawah tab Konten. Beberapa opsi tersedia untuk Anda aktifkan atau nonaktifkan di sini. Untuk mengaktifkan pagination, pilih Show Pagination di akhir daftar dan klik Yes.

  • Tampilkan Pagination: Ya

Teks Gaya Paginasi

Pilih tab Desain di opsi modul Blog, lalu gulir ke bawah ke Pagination di bawah bagian Pagination. Kami akan menggunakan font default untuk keperluan demonstrasi ini.

  • Jenis huruf: Default
  • Berat: Tebal
  • Gaya: Digarisbawahi
  • Warna: #7c8b56

Setiap jenis layar akan memiliki ukuran font yang disesuaikan secara individual. Untuk memulai, klik ikon Layar dengan mengarahkan kursor ke judul Ukuran Teks Pagination.

  • Ukuran Teks Pagination Desktop: 20px

Setelah itu, klik ikon Tablet dan ubah Size menjadi 18px.

  • Ukuran Teks Paginasi Tablet: 18px

Anda sekarang dapat menyesuaikan Ukuran Font menjadi 16px dengan memilih ikon Telepon.

  • Ukuran Teks Pagination Telepon: 16px

Tinggi Garis harus disetel ke 1.4em. Setelah Anda menyimpan dan keluar dari Visual Builder, Anda dapat menutup modul.

  • Tinggi Garis: 1.4em

Ini semua yang diperlukan untuk membuat pagination terlihat seperti milik desain kita. Kita akan melihat beberapa contoh lagi dari penataan Teks Pagination. Beberapa penyesuaian akan dilakukan pada tata letak dan aspek estetika, tetapi kami akan mempertahankan desain keseluruhan.

Gaya Teks Pagination Alternatif

Kali ini, saya hanya mengubah beberapa hal. Italic adalah gaya font yang dipilih. Warna Garis Bawah telah diperbarui ke #2f5349 agar sesuai dengan warna latar belakang footer. Akibatnya, itu menonjol dibandingkan dengan bagian lainnya. Teks sekarang memiliki ukuran font 22px, dan spasi huruf telah ditingkatkan sebesar 2px. Ini seperti contoh terakhir.

  • Gaya: Miring, Garis Bawah
  • Warna Garis Bawah: #2f5349
  • Ukuran Teks Desktop: 22px
  • Spasi Huruf: 2px

Sebuah font semi-tebal dengan warna font #2f5349 telah dipilih untuk yang satu ini, serta ukuran font 22px, dan tinggi garis 1.7em. Berbeda dengan contoh sebelumnya, pagination ini memiliki nuansa yang lebih kontemporer.

  • Berat: Semi Tebal
  • Gaya: TT
  • Warna Huruf: #2f5349
  • Ukuran Teks Desktop: 22px
  • Spasi Huruf: 1px
  • Tinggi Garis: 1.7em

Berat font telah ditingkatkan menjadi Bold untuk contoh ini. Topi sekarang digunakan dalam ukuran besar dan kecil, seperti yang terjadi sebelumnya. Warna font adalah #28292d, abu-abu gelap dari CTA di footer. Ukuran font saya telah dikurangi menjadi 20px, dan jarak antar huruf telah dikurangi dari 3px menjadi 2px. Tebal adalah berat yang disarankan.

  • Gaya: Topi Besar dan Kecil
  • Warna Huruf: #28292d
  • Ukuran Teks Desktop: 20px
  • Spasi Huruf: 2px
  • Tinggi Garis: 2em

Perubahan kecil ini dapat berdampak besar pada tampilan produk secara keseluruhan. Anda harus bereksperimen dengan berbagai tata letak untuk menemukan yang paling cocok untuk Anda.

Pikiran Akhir

Ini menyimpulkan tampilan kami pada opsi pagination modul Divi Blog. Penggunaan pagination membantu menjaga halaman situs web tetap rapi dan teratur. Pengguna dapat dengan mudah memperoleh konten tambahan dengan hanya melihat sebagian dari posting blog Anda. Tidak masalah apakah tautannya polos atau tidak; Anda dapat menyesuaikannya agar sesuai dengan desain Anda.