Loncat ke Konten Utama

Bagaimana cara menambahkan teks pada produk WooCommerce di Divi

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]

Sebelumnya Tutoriel, nous Anda memperkenalkan Divi. Bagi yang belum 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 yang kami miliki WooCommerce. Hari ini, kami akan menunjukkan cara memberikan animasi yang berbeda untuk produk Anda WooCommerce.

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:

Divi: Tema WordPress terbaik sepanjang masa!

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

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:

Buat Toko Online Anda dengan mudah

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

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.

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.

.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 4
  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
11 saham
saham6
menciak1
Register4
Ada apa