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

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

barang serupa

5 Komentar

kapal pesiar pada 8 Agustus 2019 pukul 22 h 58 menit

Teks berbeda per produk? Anda mengatakan untuk menambahkannya ke produk baru? bagaimana? dan dimana?
jawaban
brice bayle pada 30 Mei 2018 pukul 5:18

Artikel super, terima kasih atas tip ini. Dan jika kita menginginkan teks yang berbeda berdasarkan produk, bagaimana caranya?
jawaban
- Thierry Bertrand pada 31 Mei 2018 pukul 6:12
  
  Halo Brice,
  
  Dalam hal ini, Anda menambahkan teks berbeda pada produk WooCommerce yang baru.
  jawaban
Laura pada 26 April 2018 pukul 16 j 48 mnt

Super !! Terima kasih atas tip ini.
jawaban
- Thierry Bertrand pada 26 April 2018 pukul 17 j 21 mnt
  
  tidak ada apa-apa.
  jawaban