Panduan Praktis tentang Cara Membuat Gaya Pagination di Divi

Pagination adalah salah satu elemen situs web yang sering diabaikan, terutama dalam hal desain. Dan ada beberapa tempat di mana pagination mungkin cocok untuk digunakan di situs web Anda. Pada dasarnya, pagination (atau menu pagination) memungkinkan pengguna untuk menavigasi melalui beberapa halaman item (misalnya arsip posting). Ini sangat membantu untuk mengurangi konten halaman awal.

Divi memiliki beberapa modul yang menyertakan pagination (seperti modul galeri) yang dapat ditata menggunakan pengaturan bawaan. Beberapa modul ini (seperti blog dan portofolio) mewarisi pagination default dari Divi Theme (atau WordPress) yang dapat disederhanakan untuk beberapa situs. Tetapi dengan bantuan plugin, Anda dapat mengganti pagination seluruh tema Anda dengan yang lebih kompleks. Kemudian Anda dapat menatanya dengan CSS sesuai kebutuhan.

Dalam tutorial ini, saya akan menunjukkan cara menata pagination di seluruh Divi. Inilah yang akan kita lalui:

• Hal-hal yang Perlu Dipertimbangkan Saat Menata Pagination di Divi
• Styling Divi Gallery Module dan Filterable Portfolio Module Pagination
• Gaya Pagination Tingkat Lanjut untuk Modul Galeri dan Modul Portofolio yang Dapat Difilter
• Modul Blog Styling dan Modul Portofolio Pagination
• Menambahkan Pagination Kompleks ke Divi Menggunakan Plugin WP-PageNavi
• Menata Paginasi WP-PageNavi dengan CSS Kustom

Mari kita mulai.

Sneak Peek

Posting ini sebagian besar tentang cara menata pagination. Namun, berikut adalah beberapa gaya pagination kompleks yang akan saya tunjukkan kepada Anda cara membuatnya.

Mulai

Berlangganan Saluran Youtube Kami

Untuk tutorial ini, Anda memerlukan yang berikut:

• Tema Divi diinstal dan aktif.
• Untuk menguji desain pagination dari modul yang berbeda, Anda memerlukan beberapa konten tiruan. Misalnya, untuk mendesain paginasi modul portofolio (atau portofolio yang dapat difilter), Anda memerlukan sekitar 12-16 proyek yang ditambahkan ke tema Anda sehingga Anda akan memiliki konten yang cukup untuk memungkinkan paginasi diterapkan. Untuk modul galeri, Anda juga membutuhkan sekitar 12-16 gambar untuk mengisi galeri.
• Jika Anda ingin menggunakan Plugin WP-PageNavi, Anda harus menginstal dan mengaktifkan plugin. Ini adalah plugin gratis yang dapat diunduh dari Direktori WordPress dari dalam Dasbor WordPress situs Anda. Cukup navigasikan ke Plugin > Add New dan cari WP-PageNavi.
  

Setelah Anda memiliki beberapa konten tiruan, Anda siap untuk membuat halaman baru. Dari dashboard WordPress Anda, navigasi ke Pages > Add New. Beri Anda judul halaman dan gunakan Divi Builder. Pilih opsi untuk "Membangun dari Awal". Kemudian klik untuk Membangun di Front End.

Sekarang Anda siap untuk mulai menguji beberapa desain pagination.

Hal-hal yang Perlu Dipertimbangkan Saat Menata Pagination di Divi

Secara umum, Anda mungkin tidak ingin terlalu gila dengan desain pagination karena, seperti menu navigasi lainnya, penting untuk membuatnya tetap sederhana dan intuitif. Namun, berikut adalah beberapa hal yang mungkin Anda pertimbangkan saat mendesain pagination di Divi.

Font paginasi

Pagination adalah tempat yang bagus untuk melepaskan diri dari font utama yang Anda gunakan untuk situs Anda. Anda ingin memilih font terbaik yang ditujukan untuk antarmuka pengguna dan navigasi. Dan karena pagination sebagian besar berisi angka, Anda ingin memastikan font menampilkan semua angka dengan tinggi dan lebar yang sama (apa yang disebut ahli tipografi sebagai lining dan tabular). Beberapa favorit konservatif saya termasuk Oxygen, Nunito Sans, dan Source Sans Pro. Dan jika Anda memiliki banyak halaman di pagination Anda, Anda mungkin perlu mengosongkan beberapa ruang dengan menggunakan font yang dipadatkan seperti Fjalla One atau Roboto Condensed.

Gaya Font Paginasi

Anda juga dapat mencoba beberapa gaya font untuk membedakan pagination Anda. Misalnya, Anda dapat menggunakan gaya font huruf besar untuk membuat tautan "berikutnya" dan "sebelumnya" lebih jelas dan sama dengan tinggi nomor halaman. Namun, menambahkan gaya font garis bawah mungkin agak berlebihan mengingat tautannya sudah ada di menu navigasi.

Spasi Huruf Pagination

Spasi huruf adalah cara yang bagus untuk menambahkan sedikit lebih banyak spasi horizontal ke pagination Anda. Ini dapat menambahkan elemen desain yang bagus dan membuat navigasi menonjol.

Perataan Teks Pagination

Di Divi Anda dapat dengan mudah menyelaraskan pagination Anda ke kiri, tengah, atau kanan halaman. Jadi jangan lupa tentang ini setiap kali Anda mendesain halaman web Anda.

Ruang yang Dapat Diklik

Penting untuk memiliki cukup ruang yang dapat diklik untuk tautan pagination Anda. Secara default, ini akan cukup kecil. Anda dapat menambah ruang yang dapat diklik dengan menggunakan teks yang lebih besar atau menambah tinggi garis. Tetapi Anda juga dapat menambahkan beberapa bantalan di sekitar tautan tersebut dengan beberapa CSS.

Ukuran Teks Paginasi

Ukuran teks pagination biasanya cukup kecil. Ini mungkin untuk menjaganya agar tidak mengganggu pengguna dari konten halaman. Namun, memiliki ukuran teks yang lebih besar dapat meningkatkan ruang yang dapat diklik dari tautan pagination dan membuatnya lebih terlihat oleh pengguna. Saya suka menggunakan unit panjang vw untuk teks pagination yang lebih besar sehingga skala dengan browser dan konten dengan baik.

Tinggi Garis Pagination

Karena pagination biasanya tetap pada satu baris, Anda dapat menambahkan sedikit lebih banyak tinggi baris ke tautan untuk menambahkan ruang tambahan yang dapat diklik.

Bayangan Teks Pagination

Text Shadow dapat mengganggu jika digunakan dengan buruk. Sebaiknya tinggalkan saja kecuali Anda berencana untuk membuatnya tetap halus. Ini juga dapat digunakan untuk menambahkan cahaya kreatif di sekitar teks Anda jika Anda menginginkan hal semacam itu.

Halaman Aktif Pagination

Aspek pagination ini penting untuk memberi tahu pengguna halaman apa yang sedang mereka buka saat bernavigasi. Harus ada kontras yang jelas antara gaya link halaman aktif dan link halaman non-aktif. Secara default, Divi akan menggunakan warna aksen utama yang diatur di Penyesuai Tema sebagai warna tautan halaman aktif di Divi. Namun, Anda dapat menimpanya dengan baris CSS.

Untuk modul yang memiliki pagination, Divi memiliki opsi desain bawaan untuk menata berbagai elemen pagination. Selain itu, Anda dapat dengan mudah menambahkan beberapa cuplikan CSS di tab lanjutan untuk kontrol lebih besar terhadap desain di satu tempat yang nyaman.

Tetapi untuk pagination di tingkat tema, Anda bisa mendapatkan solusi kompleks menggunakan plugin WP-PageNavi dengan CSS khusus (lebih lanjut tentang ini nanti).

Untuk saat ini, mari kita mulai dengan cara menata pagination di Divi Modules.

Styling Divi Gallery Module dan Filterable Portfolio Module Pagination

Dengan Divi Builder aktif di halaman baru, buat bagian reguler baru dengan baris satu kolom. Kemudian tambahkan modul portofolio yang dapat difilter ke baris. Seperti disebutkan sebelumnya, pastikan Anda memiliki 12-16 proyek yang dibuat sehingga Anda dapat melihat pagination.

Dalam pengaturan portofolio yang dapat difilter, perbarui yang berikut ini:

Nomor Posting: 4 (sehingga Anda dapat melihat lebih banyak tautan halaman di pagination)

Judul Acara: TIDAK
Tampilkan Kategori: Tidak

Secara default Divi akan Menampilkan Pagination jadi biarkan opsi itu disetel ke YA.

Anda akan melihat pagination di kanan bawah portofolio.

Untuk menata pagination, buka tab desain dan buka sakelar Teks Pagination untuk melihat semua opsi yang tersedia. Perbarui berikut ini:

Tata Letak: Kotak
Font Pagination: Sumber Sans Pro
Gaya Font Paginasi: TT
Perataan Teks Pagination: Tengah
Warna Teks Pagination: #cccccc
Ukuran Teks Pagination: 4vw (desktop), 38px (tablet dan ponsel)
Spasi Huruf Pagination: 1vw
Tinggi Garis Pagination: 2em

Kemudian klik tab lanjutan dan tambahkan potongan CSS berikut di bawah Halaman Aktif Pagination :

color: #0096eb !important;

Dengan membuat teks lebih besar dengan tinggi garis yang lebih besar, ada lebih banyak ruang yang dapat diklik bagi pengguna. Mengubah perataan ke tengah dan menambahkan sedikit spasi membantu membuat pagination lebih terlihat. Dan warna teks pagination khusus dengan warna halaman aktif yang kontras membantu pengguna mengetahui halaman apa mereka berada.

Cuplikan CSS Cepat Lainnya

Berikut adalah beberapa cuplikan CSS cepat dan mudah untuk mengubah desain pagination.

Untuk menghilangkan garis batas default yang berada tepat di atas pagination, Anda dapat memasukkan CSS berikut di bawah Portfolio Pagination:

border: none;

Untuk memberikan batas pagination Anda secara lengkap, Anda dapat memasukkan CSS berikut di bawah Portfolio Pagination:

border: 2px solid #dddddd;

Untuk memberi Anda warna latar belakang pagination, Anda dapat memasukkan CSS berikut di bawah Portfolio Pagination:

background: #333333;

Bekerja untuk Modul Galeri juga

Pengaturan desain yang sama ini juga akan berfungsi untuk Modul Galeri. Bahkan Anda dapat menyalin gaya teks pagination dari Modul Portofolio Filterable dan menempelkannya ke dalam Modul Galeri! Pastikan Anda juga mentransfer cuplikan CSS apa pun.

Gaya Pagination Tingkat Lanjut untuk Modul Galeri dan Modul Portofolio yang Dapat Difilter

Jika Anda ingin mendapatkan desain yang lebih canggih untuk penomoran halaman modul Portofolio dan Galeri yang Dapat Difilter, Anda dapat menggunakan beberapa CSS khusus yang lebih canggih. Yang saya sukai dari contoh khusus ini adalah bahwa CSS khusus bekerja bersama-sama dengan pengaturan bawaan modul.

Untuk mendemonstrasikan, mari gunakan Portofolio Filterable lagi. Kali ini, perbarui opsi desain dengan yang berikut:

Tata Letak: Kotak
Ukuran Teks Paginasi: 16px
Tinggi Garis Pagination: 2.5em

Di bawah tab lanjutan, tambahkan kelas CSS berikut:

Kelas CSS: pagi-spasi

Ini akan memungkinkan CSS kita diterapkan hanya pada modul ini.

Sekarang simpan pengaturan Anda dan buka modal popup Pengaturan Halaman. Di bawah tab lanjutan, tambahkan kode CSS berikut di dalam kotak Custom CSS.

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

Dengan kode di tempat, Anda dapat melihat bahwa pagination sekarang memiliki lebih banyak ruang yang dapat diklik untuk setiap tautan halaman. Dan tautannya juga memiliki warna latar belakang yang ditambahkan sehingga lebih terlihat seperti tombol yang dapat diklik. Batas halus juga ditambahkan ke setiap tautan saat melayang. Tautan halaman aktif menonjol dengan latar belakang gelap yang kontras dengan warna teks yang lebih terang.

Kode ini akan mengatur gaya pagination untuk modul portofolio yang dapat difilter dan modul galeri. Pastikan Anda menambahkan kelas CSS "pagi-space" ke modul agar bisa diterapkan.

Berikut adalah hasil dari modul portofolio yang dapat difilter.

Modul Blog Styling dan Modul Portofolio Pagination

Modul Blog dan Modul Portofolio mewarisi pagination WordPress default yang memungkinkan Anda untuk menavigasi melalui arsip posting Anda dengan tautan ke "Entri Lama" dan tautan ke "Entri berikutnya".

Inilah tampilan pagination default pada halaman arsip blog di Tema Divi:

Pagination yang sama ini digunakan oleh modul blog dan modul portofolio.

Jika Anda menggunakan Modul Blog (atau modul portofolio), Anda dapat mengatur gaya teks pagination menggunakan pengaturan bawaan.

Ini adalah solusi sederhana dan elegan untuk sebagian besar kasus. Namun, jika Anda mencari pagination yang lebih kompleks untuk menggantikan pagination Divi/WordPress default, ada solusi yang sangat mudah yang mungkin akan mengejutkan Anda.

Menambahkan Pagination Kompleks ke Divi Menggunakan Plugin WP-PageNavi

Jika Anda menginginkan pagination yang lebih maju untuk seluruh Tema Divi Anda, termasuk modul blog dan modul portofolio, Anda dapat mengganti pagination WordPress default dengan yang berbeda menggunakan plugin populer yang disebut WP-PageNavi. Plugin ini bekerja dengan baik dengan Divi. Desainnya sederhana tetapi dapat dengan mudah dikustomisasi menggunakan CSS.

Menambahkan Plugin ke Divi

Jika Anda belum melakukannya, lanjutkan dan instal plugin seperti yang dijelaskan di bagian "Memulai" di bagian atas posting. Setelah plugin diinstal dan aktif, bentuk pagination baru akan muncul secara otomatis di seluruh tema Anda.

Ini juga akan mempengaruhi modul blog dan modul portofolio juga.

Pengaturan Plugin

Anda dapat menemukan pengaturan plugin dari dasbor WordPress Anda dengan menavigasi ke Pengaturan> WP-PageNavi.

Pengaturan terutama untuk menyesuaikan fungsionalitas dan konten teks yang ditampilkan. Namun, jika Anda ingin menata pagination, Anda perlu menggunakan beberapa CSS khusus.

Menata Paginasi WP-PageNavi dengan CSS Kustom

Karena Anda mungkin ingin menata pagination untuk seluruh tema, masuk akal untuk menambahkan CSS ke Penyesuai Tema atau file style.css Tema Anak Anda. Silakan dan tempatkan CSS berikut ke dalam kotak CSS Tambahan Penyesuai Tema:

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

Berikut adalah hasil akhirnya.

Menata WP-PageNavi di Modul Blog dan Modul Portofolio

Seperti disebutkan sebelumnya, Modul Blog dan Modul Portofolio mewarisi navigasi halaman WordPress default. Karena ini telah diganti dengan pagination kompleks baru WP-PageNavi, modul akan menampilkan pagination baru ini juga.

Anda dapat menggunakan opsi desain teks pagination bawaan untuk menambahkan gaya lebih lanjut ke pagination.

Ingatlah bahwa beberapa opsi mungkin tidak berfungsi seperti yang diharapkan dengan CSS khusus eksternal yang ada.

Pikiran Akhir

Pagination tidak harus terus menjadi renungan saat membangun situs web di Divi. Ada beberapa opsi bawaan yang berguna untuk membantu modul-modul yang menggunakan pagination. Dan dengan beberapa CSS khusus, Anda dapat membuat gaya apa pun yang Anda inginkan. Plugin WP-PageNavi adalah solusi elegan untuk menambahkan pagination yang kompleks di seluruh Tema Divi. Tidak hanya bekerja dengan mulus dengan Divi, ini memberi Anda opsi tambahan yang dapat Anda sesuaikan dengan mudah. Menata pagination WP-PageNavi memang memerlukan beberapa CSS, tetapi semoga template yang digunakan dalam artikel ini akan menempatkan Anda di jalur yang benar.

Contoh desain dalam posting ini sengaja dibuat sederhana.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!