Loncat ke Konten Utama

Bagaimana cara menambahkan teks pada produk WooCommerce di Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Dalam tutorial sebelumnya, kami Anda memperkenalkan Divi. Bagi mereka yang tidak tahu, Divi adalah tema WordPress premium yang dirancang oleh tim Elegan Tema yang menawarkan berbagai layanan di WordPress dan desain plugin dan tema.

Divi adalah tema yang responsif dan yang terakhir kompatibel dengan beberapa plugin lain di antaranya WooCommerce yang kami miliki. Hari ini kami akan menunjukkan kepada Anda bagaimana memberikan animasi yang berbeda untuk produk WooCommerce Anda.

Terkadang gaya WooCommerce mungkin sedikit tidak pantas, terutama jika gaya CSS Anda sedikit berbeda. Tutorial ini, yang akan sedikit teknis (sedikit CSS dan tidak ada yang lain), akan memungkinkan Anda untuk memperbaiki ini.

Tutorial lainnya tentang tema Divi

Mari kita mulai.

Bagaimana cara menambahkan gambar ke produk woocommerce

Memodifikasi ikon untuk teks di atas mouse

Secara default, saat Anda menggunakan WooCommerce dengan Divi dan mengarahkan kursor ke produk, Anda akan melihat ikon '+' kecil yang merupakan font (membuat-icon) diusulkan oleh Divi dan yang adalah sebagai berikut:

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Ikon woocommerce default

Sangat mudah untuk mengubahnya ke ikon yang berbeda dalam pengaturan, tetapi jika Anda ingin menambahkan beberapa teks, apakah itu hal lain? Saya akan menunjukkan cara mencapai ini dengan cuplikan CSS hari ini, dan saya juga akan menyertakan kode opsional untuk ditambahkan ke situs Anda.

Inilah yang akan kami selesaikan:

Hasil akhir modifikasi produk wordpress

Mengapa menggunakan teks dan bukan ikon?

Saya dapat memikirkan beberapa alasan yang dapat membuat Anda melakukan ini:

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Untuk menentukan, berikan tampilan unik ke toko Anda: Apa pun yang dapat Anda lakukan untuk membedakan situs Divi / WooCommerce Anda dari yang lain selalu merupakan hal yang baik.

Menggunakan kata seperti "Lihat" atau "Beli" dapat menghasilkan lebih banyak konversi: Semua orang perlu melakukan yang terbaik untuk situs web mereka, dan Anda dapat memanfaatkan pengujian A / B terintegrasi pada Divi untuk membantu hal itu.

Sumber inspirasi

Saya baru-baru ini menjelajahi situs yang memiliki teks tentang produk hover. Saya tentu saja telah melihatnya dari situs e-niaga lain yang memiliki kata-kata daripada ikon pada produk yang melayang, jadi ini bukanlah konsep baru. Saya tidak pernah harus melakukan ini pada tema Divi, dan ketika saya melihat ini, saya menetapkan tantangan untuk diri saya sendiri dan saya menyadari bahwa memang mudah untuk menerapkannya. Dengan sedikit kode yang dibutuhkan, Anda pasti tidak akan memengaruhi kinerja blog Anda.

Contoh situs web

Menerapkan mouse ke teks

Langkah 1: Hamparan warna

Kami akan mengubah warna overlay saat hover terlebih dahulu. Ini sangat mudah dilakukan di Divi. Di modul toko Anda, buka " parameter desain canggih canggih Dan pilih warna Anda.

Pemilihan warna divi

Langkah 2: Menambahkan CSS

Kode CSS berikut di " Opsi tema> CSS Khusus Atau di lembar gaya tema anak Anda.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

.woocommerce .et_overlay: before {left: 0; margin-kiri: 0; konten: 'lihat'; / *** Teks Anda Di Sini *** / font-family: 'Source Without Pro', Arial! / *** Pilih font Anda *** / text-transform: huruf besar; ukuran font: 24px; warna: #fff; / *** Atur warna teks *** / font-weight: bold; perataan teks: tengah; lebar: 100%; pengisi: 5px 0; }

Jika Anda ingin produk Anda agak bulat, Anda dapat menambahkan kode opsional ini:

.woocommerce ul.products li.product sebuah img, .et_overlay {border-radius: 50%; }

Itu saja!

Sekarang Anda dapat mengunjungi toko Anda dan melihat bagaimana perubahan Anda dipertimbangkan.

Tutorial Divi lainnya

Artikel ini berisi komentar 5

  1. Artikel super, terima kasih atas tip ini. Dan jika kita menginginkan teks yang berbeda berdasarkan produk, bagaimana caranya?

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
10 saham
saham6
menciak
Register4