Dalam tutorial sebelumnya, kami 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 desain plugin dan tema.
Divi adalah tema responsif dan yang terakhir kompatibel dengan beberapa plugin lain yang kami miliki WooCommerce. Hari ini kami akan menunjukkan kepada Anda bagaimana 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 bersifat teknis (sedikit CSS dan tidak ada yang lain), akan memungkinkan Anda untuk memperbaiki ini.
Tutorial lainnya tentang tema Divi
- 5 website untuk restoran penggunaan Divi tema
- Bagaimana menambahkan teks pada Divi produk WooCommerce
- Cara mengganti warna menu antar halaman di Divi
- Fitur yang tidak Anda ketahui tentang Divi
- Cara membuat slider di Divi
- Cara mengedit peran pengguna di Divi
Mari kita mulai.
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:
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:
Mengapa menggunakan teks dan bukan ikon?
Saya dapat memikirkan beberapa alasan yang dapat membuat Anda melakukan ini:
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 menelusuri situs yang memiliki teks tentang produk yang melayang. Saya tentu saja melihat situs e-commerce lain yang memiliki kata-kata daripada ikon pada produk yang melayang, jadi ini bukan konsep baru. Saya tidak pernah harus melakukan ini pada Tema Divi, dan ketika saya melihat ini, saya membuat tantangan bagi diri saya sendiri dan menyadari bahwa memang mudah untuk menerapkannya. Dengan sedikit kode yang dibutuhkan, Anda pasti tidak akan mempengaruhi kinerja blog Anda.
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.
Langkah 2: Menambahkan CSS
Kode CSS berikut di " Opsi tema> CSS Khusus Atau di lembar gaya tema anak Anda.
.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.
[vc_row center_row = "ya"] [vc_column width = "1/2 ] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] UNDUH TEMA DIVI [/ vcex_button] [/ width_column] [»vc_column] [ » 1/2 ] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] UNDUH TEMPLATE DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Tutorial Divi lainnya
- 5 website untuk restoran penggunaan Divi tema
- Bagaimana cara menambahkan teks pada produk Divi WooCommerce
- Cara mengubah warna menu antara halaman Divi
- Cara mempersonalisasi kisi-kisi blog dengan Divi
- Cara menggunakan peran Divi editor pada WordPress
- Cara membuat slider Divi layar penuh
- Cara mengubah warna menu antara halaman Divi
- Fitur yang Anda mungkin tidak tahu tentang Divi
- Cara menggunakan Divi Builder di WordPress
- Cara menggunakan modul gulir video Divi
- Cara menggunakan modul Flip Divi Builder
- Bagaimana cara menambahkan modul testimonial pada Divi Builder
- Cara menggunakan modul teks Divi
- Cara membuat slider di Divi
- Cara mengedit peran pengguna Divi
- Cara menggunakan modul Divi Social Media
- Cara menggunakan modul shop pada tema WordPress Divi
- Cara menggunakan modul sidebar Divi
- Cara menggunakan Modul Tabel Divi Price
- Cara menggunakan modul judul publikasi Divi
- Bagaimana cara menambahkan modul video Divi
- Cara menggunakan modul navigasi artikel
- Cara menggunakan modul pencarian Divi
- Cara menggunakan modul dompet Divi
- Cara menggunakan modul orang di Divi Builder
- Cara menggunakan modul dompet dengan filter Divi
- Cara menggunakan modul slider lebar penuh
- Cara menggunakan Modul Gambar Divi Builder
- Cara menggunakan modul navigasi penuh lebar dari Divi Builder
- Cara menggunakan modul galeri gambar
- Cara menggunakan Modul Full-Width Divi Builder Card
- Cara menggunakan Modul Portofolio Full Full Divi
- Cara menggunakan modul header penuh lebar Divi
- Cara menggunakan Modul Divi Counter
- Cara menggunakan slider artikel di Divi Builder
- Cara menggunakan modul Divi Email Optin
Teks berbeda per produk? Anda mengatakan untuk menambahkannya ke produk baru? bagaimana? dan dimana?
Artikel super, terima kasih atas tip ini. Dan jika kita menginginkan teks yang berbeda berdasarkan produk, bagaimana caranya?
Halo Brice,
Dalam hal ini, Anda menambahkan teks berbeda pada produk WooCommerce yang baru.
Super !! Terima kasih atas tip ini.
tidak ada apa-apa.