Apakah Anda ingin menyesuaikan tautan Baca Selengkapnya dari modul Blog dari Divi ? Kemudian ikuti tutorial kami.
Tautan "Baca Selengkapnya" blog dapat menjadi bagian penting dari peningkatan pengalaman pengguna. Oleh karena itu, penting bagi kita untuk mengetahui cara menyesuaikannya dengan benar.
Dalam tutorial ini, kami akan menunjukkan cara menyesuaikan tautan "Baca Selengkapnya" di modul Blog. Dalam artikel ini, kami akan menunjukkan cara:
- Sesuaikan tautan "Baca Selengkapnya" menggunakan opsi bawaan Divi
- Sejajarkan tautan "Baca Selengkapnya" (kiri, tengah, kanan)
- Ubah tautan "Baca Selengkapnya" menjadi tombol layar penuh
- Buat Tombol Baca Selengkapnya Kustom dengan Efek Arahkan Arah
- Ganti teks "Read More" dengan yang lain (seperti "Read the article").
penelitian
Berikut sekilas desain yang akan kita buat dalam tutorial ini.
Muat Modul Blog di Halaman Menggunakan Pembuat Tema Divi
Untuk mulai menyesuaikan tautan Baca Selengkapnya, Anda memerlukan akses ke modul Blog.
Vous pouvez memuat tata letak yang telah ditentukan dengan modul Blog pilihan Anda atau cukup tambahkan modul Blog baru ke halaman.
Untuk memulai proses, kami akan menggunakan halaman blog dari tata letak yang telah ditentukan Kecerdasan Buatan.
Tambahkan halaman baru dari Dasbor WordPress
Kemudian, beri judul pada halaman Anda lalu klik " penggunaan Divi Pembangun".
Kemudian klik " Pilih tata letak«
Temukan dan pilih " Buatan intelijen Halaman Blog«
Terakhir, pilih tata letak Blog dan klik “ Pilih tata letak«
Sesuaikan dan ratakan teks tautan Baca Selengkapnya
Setiap modul Blog menawarkan opsi untuk menampilkan atau menyembunyikan tautan "Baca Selengkapnya" untuk setiap artikel dalam tata letak. Untuk menampilkan tautan "Baca Selengkapnya", buka pengaturan blog dan alihkan tombol " Tampilkan tombol Baca Selengkapnya untuk "YA" dalam daftar item blog yang ingin Anda tampilkan.
Di bawah tab Gaya, Anda dapat menyesuaikan teks Baca Selengkapnya menggunakan salah satu opsi bawaan. Untuk contoh ini, mari perbarui yang berikut ini:
- Font Baca Selengkapnya: Barlow
- Baca lebih lanjut Cahaya Redup: Semi Tebal
- Baca selengkapnya Gaya Salin: Huruf Besar (TT), Garis Bawah (U)
- Warna teks Baca selengkapnya: #db0eb7
- Baca lebih lanjut Teks yang digarisbawahi Warna: #3c5bff
- Spasi huruf Baca lebih lanjut: 1px
Inilah hasilnya.
Saat ini, tautan "Baca Selengkapnya" ditempatkan di sebelah kiri secara default, kecuali jika Anda mengubah perataannya. Untuk menyelaraskan tautan ke tengah atau kanan pos, tambahkan cuplikan CSS sebagai berikut:
Di bawah tab pengaturan lanjutan blog, tambahkan CSS berikut ke CSS Tombol Baca Selengkapnya:
display: block;
text-align: right;
"Display:block" akan mengubah tautan ke elemen blok yang membentang sepanjang lebar wadahnya (dalam hal ini, badan elemen isi publikasi). Setelah didefinisikan sebagai elemen blok, kita dapat meratakan teks ke kanan menggunakan “text-align:right”.
Baca juga: Cara Membuat Header Global yang Lengket di Divi
Inilah hasilnya.
Untuk memusatkan tautan, cukup ganti "kanan" dengan "pusat" untuk nilai properti "text-align" sebagai berikut:
Inilah hasilnya.
Sesuaikan tautan "Baca selengkapnya" agar terlihat seperti tombol
Untuk contoh ini, kami akan membuat gaya tombol lebar penuh sederhana untuk tautan "Baca Selengkapnya". Sebelum menambahkan CSS khusus, buka pengaturan blog dan perbarui teks tautan "Baca Selengkapnya" sebagai berikut:
- Baca selengkapnya Gaya salin: huruf besar (TT)
- Warna teks Baca selengkapnya: #ffffff
Pada contoh sebelumnya, kami menggunakan "display:block" dan "text-align:center" untuk membuat tautan menjangkau lebar penuh wadah dan memusatkan teks.
Lihat juga: Cara membuat menu geser dan tekan di Divi
Untuk membuatnya terlihat seperti tombol, yang harus kita lakukan adalah menambahkan beberapa warna latar belakang dan spasi bersama dengan beberapa potongan CSS tambahan. Untuk melakukan ini, buka tab Lanjutan dan perbarui CSS dari tombol "Baca selengkapnya" sebagai berikut:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Hasil
Inilah hasilnya!
Membuat gaya tombol tingkat lanjut dengan CSS
Jika Anda ingin membawa gaya tombol ke level lain, kita dapat menambahkan latar belakang dan efek hover.
Untuk melakukan ini, ganti CSS untuk "Tombol Baca Selengkapnya" dengan yang berikut:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
Untuk mengubah latar belakang saat mengarahkan kursor, Anda dapat menempelkan CSS berikut pada "Tombol Pelajari Lebih Lanjut" saat mengarahkan kursor mouse:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Hasil
Inilah hasilnya!
Ubah teks "Baca Selengkapnya" menjadi yang lain
Untuk mengubah teks "Baca selengkapnya" menjadi teks lain, seperti "Baca artikel", kita memerlukan sedikit jQuery. Tapi jangan khawatir, ini hanya beberapa baris.
Sebelum menambahkan kode jQuery kami, tambahkan kelas CSS khusus ke modul Blog sebagai berikut:
- Kelas CSS: et-custom-read-more-text
CATATAN: Pastikan nama kelas benar agar jQuery berfungsi.
Untuk menambahkan jQuery yang mengubah teks "Read More", tambahkan modul Code di bawah modul Blog.
Kemudian tempel kode jQuery berikut, pastikan untuk membungkus kode dengan tag skrip yang diperlukan:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Kode ini pada dasarnya memberi tahu browser untuk mengubah teks tautan "Baca Selengkapnya" menjadi "Baca Artikel" setelah halaman dimuat.
Hasil
Inilah hasilnya!
Hasil akhir
Berikut tampilan lain dari penyesuaian tautan (atau tombol) Baca Selengkapnya yang telah kami lakukan.
Unduh DIVI Sekarang!!!
Kesimpulan
Jadi ! Itu saja untuk artikel ini. Modul Blog Divi memungkinkan Anda untuk menyesuaikan tautan "Baca Selengkapnya" secara kreatif. Dan jika Anda ingin bereksperimen dengan beberapa cuplikan CSS, Anda dapat membuat sendiri modifikasi yang lebih canggih.
Kami harap tutorial ini membantu Anda membawa tautan "Baca Selengkapnya" itu ke tingkat berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Namun, Anda juga bisa berkonsultasi 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.
...
