Tips-trik Kustomisasi Tombol WordPress

wpJakarta.Com

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

Artikel WooCommerce lainnya

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