wpJakarta.Com – Tips-trik Kustomisasi Tombol WordPress. Satu lagi element yang kurang menarik pada tema website storefront by WooCommerce adalah tampilan blok element tombolnya. Rata dan kaku juga dengan warna default yang sangat tidak menarik. Beruntung pada WordPress versi 5.5, kita dapat menggunakan warna “pattern”. Atau warna dengan tampilan paduan 2 atau 3 warna.
Harap maklum jika tombol pada tema website ini begitu kaku dan dengan warna yang “pucat”. Tema website storefront adalah tema website dasar dimana banyak kalangan developer tema menggunakan storefront sebagai basisnya. Dengan begitu pihak pengembang (developer) da[at memberikan kustomisasi (warna, font dan lainnya) sesuai niche tema yang ingin di buat.
Tips-trik kustomisasi tombol WordPress dengan memberikan warna
Pada artikel ini kami sedikit memberikan tips-trik kustomisasi tombol WordPress khususnya yang menggunakan tema website storefront. Tips-trik yang pertama kustomisasi tombol WordPress, tentu saja dengan memberikan warna. Jangan biarkan tombol di website plain hanya warna default -biasanya abu-abu. Jika website anda bekerja sebagai “mesin” penghasil uang dari niche afiliasi misalnya. Maka mutlak rasanya untuk memberikan kustomisasi tombol dengan warna yang sesuai. Karena tentu anda mengharapkan seseorang untuk mengklik tombol tersebut. Pastikan untuk memberikan warna yang sesuai dengan color palette desain website.
Artikel WordPress lainnya
- Tips-trik Kustomisasi Prev Next Post WordPress
- Untuk Website WordPress, Pilih myISAM atau InnoDB
- Tips-trik Kustomisasi Footer WordPress
- Tips-trik Membuat Dan Kustomisasi Topbar WordPress
- Tips-trik Menampilkan Jumlah View Halaman WordPress
- Tips-trik Membatasi Jumlah Revisi Post Website WordPress
- Tips-trik Mengatasi WordPress Error Establishing a Database Connection
- The Response Is Not A Valid JSON Response
- Tutorial WordPress
- Tips-trik Membuat Author Box WordPress
Artikel WooCommerce lainnya
- Tips-trik Kustomisasi Halaman Checkout WooCommerce
- Tips-trik Menambahkan Teks Pada Halaman Login WooCommerce
- Tips-trik Membuat Deskripsi Pendek Produk Pada Halaman Belanja WooCommerce
- Tips-trik Kustomisasi Halaman Produk WooCommerce
- Tips-trik Membuat Produk WooCommerce
- Menampilkan Harga Yang Berbeda Pada Masing-Masing Kustomer WooCommerce
- Tips-trik Merubah Teks No-Shipping Available WooCommerce
- Memindahkan Deskripsi Kategori Produk WooCommerce Ke Bagian bawah
- Menambahkan Gambar Checkout Aman Pada Halaman Single WooCommerce
- Membuat Menu Sosial Media Pada Tema Storefront WooCommerce
Tips-trik kustomisasi tombol WordPress dengan kode CSS
Tips berikutnya yaitu hanya dengan memberikan sedikit kode css, tombol yang kaku bisa sedikit di modifikasi. Selain membuat tombol menjadi sedikit lebih hidup. Kustomisasi dengan CSS juga agak ringan karena tidak menambahkan element tambahan apapun. Juga karena kode css tersebut “tertuju” pada selector tombol global (block), maka seluruh tombol yang ada di website juga bisa di buat seragam. Tambahkan kode CSS berikut kotak snippet CSS.
.hentry .entry-content .wp-block-button .wp-block-button__link {
box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
-moz-box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
-webkit-box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
}
.hentry .entry-content .wp-block-button .wp-block-button__link:hover {
box-shadow:0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Tentu saja anda bisa mengelaborasi sendiri, mau diapakan bentuk tombol yang di inginkan. Tambahkan saja kode CSS yang sesuai dengan tampilan tombol yang di inginkan.
Tips-trik WooCommerce lainnya
Untuk tips-trik WooCommerce lainnya kunjungi halaman kategory WooCommerce. Dimana kami banyak menulis tentang tips-trik kustomisasi atau modifikasi pada tampilan (visual) maupun skrip toko online WooCommerce. Kami juga banyak menulis artikel dan tips-trik kustomisasi tema website storefront. Anda dapat mengunjungi artikel-artikel yang di tag sebagai storefront.
Artikel lainnya
- Monetisasi Trafik Dengan Afiliasi Accesstrade
- Desain Ulang Website Freshplus62.Com
- Daftar Iklan Alternatif Selain Google Adsense
- Remove BG – Tools Online Remove Background
- Insight dan Data Industri Laundry di Indonesia (pengalaman selama 10 tahun QnC Laundry)
- Perbedaan Kol Dan Kubis ?
- Cari Website Guest Posting Gratis, Aman Dan Terpercaya
- wpJakarta Write For All
- Guest Post Gratis wpJakarta (Write For All)
- Tips-Trik Menambahkan Kode Verifikasi Google Adsense