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 600.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 plugin dan tema desain.

Divi adalah tema 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 memadai, terutama jika gaya CSS Anda sedikit berbeda. Tutorial ini, yang akan sedikit teknis (sedikit CSS dan tidak ada), akan memungkinkan Anda untuk memperbaikinya.

Tutorial lain tentang tema Divi

Mari kita mulai.

Memodifikasi ikon untuk teks di atas mouse

Secara default, ketika 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 berbunyi sebagai berikut:

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]

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

Inilah yang akan kita selesaikan:

Mengapa menggunakan teks dan bukannya ikon?

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

Untuk menentukan memberikan tampilan unik ke toko Anda: Yang bisa Anda lakukan untuk membedakan situs Divi / WooCommerce Anda dari yang lain selalu merupakan hal yang baik.

Menggunakan kata seperti "Tampilan" atau "Beli" dapat menghasilkan lebih banyak konversi: Semua orang perlu melakukan apa yang terbaik untuk situs web mereka, dan Anda dapat memanfaatkan pengujian A / B yang dibuat di Divi untuk membantu dengan itu.

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]

Sumber inspirasi

Saya baru-baru ini menjelajahi situs yang memiliki teks pada produk yang melayang. Saya telah tentu melihat situs e-commerce lain yang memiliki kata-kata daripada melayang ikon produk, sehingga tidak konsep baru. Aku tidak pernah harus melakukan itu pada tema Divi, dan ketika saya melihat ini, saya menetapkan diri tantangan dan saya menyadari bahwa itu sebenarnya lebih mudah untuk menerapkan ini. Dengan sangat sedikit kode yang dibutuhkan, Anda yakin tidak akan memengaruhi kinerja blog Anda.

Menerapkan mouse ke teks

Langkah 1: Hamparan warna

Kami pertama akan mengubah warna overlay hamparan stasioner. Ini sangat mudah dilakukan di Divi. Di modul toko Anda Buka tab « parameter desain lanjutan canggih Dan pilih warna Anda.

Langkah 2: Menambahkan CSS

Kode CSS berikut dalam " Opsi Tema> CSS Khusus Atau pada 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. [GRATIS]

.woocommerce .et_overlay: sebelum {left: 0; margin-left: 0; konten: 'tampilan'; / *** Teks Anda Di Sini *** / font-family: 'Pro-Free Source', Arial! / *** Pilih font Anda *** / text-transform: huruf besar; ukuran font: 24px; warna: #fff; / *** Mengatur warna teks *** / font-weight: bold; text-align: center; lebar: 100%; padding: 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.

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
11 saham
saham6
menciak1
Register4
Ada apa