Elementor Read More WordPress Button Cara Sederhana

Halo teman-teman! Hari ini kita akan membahas cara menambahkan sentuhan keren pada tombol “read more wordpress” di Elementor. Jika kamu sedang menggunakan Elementor untuk mengembangkan situs webmu, kamu pasti tahu betapa pentingnya tombol ini untuk mengarahkan pengunjung ke konten yang lebih detail. Mari kita lihat cara membuat tombol ini lebih menarik dan mencuri perhatian!

1. Langkah Pertama: Buat Tombol “Read More WordPress”

   
   Pertama-tama, pastikan kamu sudah menambahkan widget tombol pada halaman atau posting yang ingin kamu tambahkan tombol “read more wordpress”-nya. Pilih widget tombol dari panel Elementor dan seretnya ke posisi yang diinginkan. Kamu bisa menyesuaikan teks tombol sesuai keinginanmu, misalnya “Baca Selengkapnya” atau “Lihat Lebih Banyak”.

2. Mengatur Gaya Tombol

   
   Sekarang saatnya memberikan sentuhan keren pada tombol tersebut. Klik kanan pada tombol dan pilih “Edit Tombol” untuk membuka panel pengaturan. Di sini, kamu akan menemukan berbagai opsi untuk mengatur gaya tombol. Anda bisa menyesuaikan warna latar belakang, teks tombol, dan bahkan animasi hover. Jangan ragu untuk bermain-main dengan opsi ini dan lihatlah perubahan yang terjadi secara langsung di tampilan tombolmu. Ingat, tujuan kita di sini adalah membuatnya menarik dan mencolok!

3. Efek Hover yang Menarik

   
   Salah satu trik yang bisa kita gunakan untuk membuat tombol “read more wordpress” menjadi lebih menarik adalah dengan menambahkan efek hover. Efek ini akan muncul ketika pengunjung mengarahkan kursor ke tombol tersebut. Di panel pengaturan tombol, cari opsi “Efek Hover” dan pilih yang sesuai dengan keinginanmu. Misalnya, kamu bisa menambahkan efek perubahan warna, bayangan, atau transisi animasi yang unik. Jangan takut untuk mencoba berbagai opsi dan melihat mana yang paling cocok dengan desain situs webmu.

4. Ukuran dan Tampilan yang Pas

   
   Selain mengatur gaya dan efek, ukuran tombol juga perlu dipertimbangkan. Pastikan tombol “read more wordpress”mu memiliki ukuran yang memadai dan mudah terlihat oleh pengunjung. Jika tombol terlalu kecil atau terlalu besar, mungkin akan sulit bagi pengunjung untuk menemukannya. Jangan lupa untuk melihat tampilan tombol di berbagai perangkat, seperti desktop, tablet, dan ponsel, untuk memastikan tampilan yang responsif. Elementor menyediakan opsi untuk mengatur ukuran tombol secara otomatis agar sesuai dengan layar yang digunakan.

5. Letakkan di Tempat yang Tepat

   Terakhir, tapi tidak kalah pentingnya, adalah mempertimbangkan letak tombol “read more wordpress” di halaman atau postingmu. Pastikan tombol tersebut ditempatkan di tempat yang mudah ditemukan oleh pengunjung dan membuatnya ingin mengekliknya.

Cobalah untuk menempatkannya di bawah kutipan ringkas atau cuplikan artikelmu. Hal ini akan memberikan pengunjung sedikit rasa ingin tahu dan mendorong mereka untuk mengeklik tombol “read more wordpress” untuk mendapatkan informasi lebih lanjut.

Terakhir, tambahkan CSS ini di halaman yang sama dengan elemen toggle read more

Jika Anda menginginkan ini hanya pada satu halaman, Anda dapat menambahkan CSS khusus ke Pengaturan Halaman > Lanjutan > CSS Kustom . Pengaturan halaman ada di ikon roda gigi kiri bawah. Jika Anda menginginkan perilaku yang sama di seluruh situs web Anda, cukup tambahkan CSS di penyesuai tema > CSS tambahan (dari WordPress > Tampilan > Sesuaikan, lalu CSS tambahan),dan terapkan kode dibawah ini :

body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}

Untuk memusatkannya, gunakan kode ini sebagai gantinya

body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}

.readmoretoggle .elementor-toggle .elementor-tab-title {
display: flex;
justify-content: center;
}

Jika Anda lebih suka read more terlihat seperti tombol, gunakan kode CSS di bawah ini

body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}

/* button styling below */
.readmoretoggle .elementor-tab-title a{
display:inline-block;
padding:0.4em 1.6em;
margin:0.14em 0 ;
border:0.16em solid rgba(0,0,0,0);
border-radius:2em;
font-weight:300;
color:rgba(255,255,255,0.9); /* button text color */
text-align:center;
background-color: rgba(0,0,0,.71); /* button color */
transition: all 0.34s ease;
}

/* hover button styling */
.readmoretoggle .elementor-tab-title a:hover{
color:rgba(255,255,255,1); /* change color of text when hovering */
transform: scale(1.03); /* delete to remove the zoom in effect */
}

Nah, di sini ada trik keren nih buat kamu yang mau ngubah tampilan tombol “Baca Selengkapnya” di Elementor. Yuk, kita modifikasi gayanya agar lebih kece sesuai dengan kebutuhan kamu!

Pertama-tama, kita perlu ngopy kode CSS di bawah ini:

.readmoretoggle .elementor-tab-title.elementor-active::before {
content: ‘Read Less’;
font-family:roboto;
font-weight: 400;
font-size: 16px;
color: #000000;
}

.readmoretoggle .elementor-toggle-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column-reverse;
}

.readmoretoggle .elementor-tab-title.elementor-active a{
display:none;
}

Nah, itulah beberapa tips untuk menambahkan sentuhan keren pada tombol “read more wordpress” di Elementor. Selamat mencoba dan jadikan situs webmu semakin menarik!

Kesimpulan

Menambahkan fitur “Read More WordPress” dapat meningkatkan pengalaman pembaca dan memungkinkan Anda untuk mengatur tata letak posting dengan lebih baik. Dalam artikel ini, kami telah membahas langkah-langkah untuk membuat “Read More Woordpress”.

Dengan mengikuti panduan ini, Anda dapat dengan mudah menampilkan tombol “Read More WordPress” Anda dan menyesuaikan tampilannya sesuai kebutuhan.

Salam Sukses – Rakita Website.