V předchozím tutoriálu jsme představil jsi Divi. Pro ty, kteří nevědí, Divi je a WordPress téma prémiový navržený týmem elegantní témata který nabízí různé služby v oblasti WordPress a navrhuje doplňky a témata.

Divi je responzivní téma a je kompatibilní s několika dalšími pluginy, které máme WooCommerce. Dnes vám ukážeme, jak dát svým produktům jinou animaci WooCommerce.

Někdy může být styl WooCommerce trochu nevhodný, zejména pokud je váš styl CSS trochu jiný. Tento tutoriál, který bude trochu technický (trochu CSS a nic jiného), vám to umožní napravit.

Další návody na téma Divi

• 5 webové stránky pro použití v hotelu Divi téma
• Jak přidat text na produktech Divi WooCommerce
• Jak změnit barvu nabídky mezi stránkami v programu Divi
• Funkce, které o Divi neznáte
• Jak vytvořit posuvník na Divi
• Jak upravit roli uživatele v Divi

Začněme.

Úprava ikony pro text nad myší

Ve výchozím nastavení, když používáte WooCommerce s Divi a umístíte kurzor na produkt, uvidíte malou ikonu '+', což je písmo (make-icon), které navrhla Divi a které je následující:

Je opravdu snadné to změnit v nastavení na jinou ikonu, ale pokud chcete přidat nějaký text, je to další věc? Ukážu vám, jak toho dosáhnout pomocí dnešních úryvků CSS, a přidám také volitelný kód, který přidáte na svůj web.

Zde je to, co budeme mít jednou dokončeno:

Proč přesto používat místo ikony text?

Dokážu vymyslet několik důvodů, které vás k tomu mohou přimět:

Chcete-li definovat, dejte vašemu obchodu jedinečný vzhled: Cokoli můžete udělat pro odlišení vašeho webu Divi / WooCommerce od jiného, ​​je vždy dobrá věc.

Použití slova jako „Zobrazit“ nebo „Koupit“ může vést k větší konverzi: Každý musí udělat to, co je pro jeho web nejlepší, a vy můžete využít integrovaného testování A / B na Divi.

Zdroj inspirace

Nedávno jsem procházel web, na kterém se vznášel text o produktu. Samozřejmě jsem viděl jiné weby elektronického obchodu, které mají na produktu spíše slova než ikony, takže to nebyl nový koncept. Nikdy jsem to nemusel dělat na a Divi téma, a když jsem to viděl, postavil jsem si výzvu a uvědomil jsem si, že je opravdu snadné to implementovat. S velmi malým potřebným kódem máte jistotu, že neovlivníte výkon svého blogu.

Provádění myši nad textem

Krok 1: Barevné překrytí

Nejprve změníme barvu překrytí při najetí myší. To je na Divi mimořádně snadné. Ve vašem modulu obchodu Přejít na pokročilé pokročilé konstrukční parametry A vyberte si barvu.

Krok 2: Přidání CSS

Následující kód CSS v položce „ Možnosti motivu> Vlastní CSS Nebo na listu stylů vašeho dětského motivu.

.woocommerce .et_overlay: before {left: 0; levý okraj: 0; content: 'view'; / *** Váš text zde *** / font-family: 'Source without Pro', Arial! / *** Vyberte písmo *** / text-transformace: velká písmena; velikost písma: 24px; barva: #fff; / *** Nastavte barvu textu *** / font-weight: bold; zarovnání textu: střed; šířka: 100%; čalounění: 5px 0; }

Pokud chcete, aby vaše produkty byly spíše kulaté, můžete přidat tento volitelný kód:

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

A je to!

Nyní můžete navštívit svůj obchod a podívat se, jak jsou vaše změny brány v úvahu.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" rozšířené "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"] STÁHNOUT TÉMA DIVI [/ vcex_button] [/ width_column] [»v] » 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 " TEM DOWNLOOWN DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Ostatní výukové programy Divi

• 5 webové stránky pro použití v hotelu Divi téma
• Jak přidat text na produkt Divi WooCommerce
• Jak změnit barvu nabídky mezi stránkami Divi
• Jak přizpůsobit mřížky blogu s Divi
• Jak používat role Divi editor na WordPress
• Jak vytvořit posuvník Divi na celé obrazovce
• Jak změnit barvu nabídek mezi stránkami Divi
• Funkce, které pravděpodobně nevíte o Divi
• Jak používat Divi Builder na WordPress
• Jak používat modul posunu videa Divi
• Jak používat modul Divi Builder Flip
• Jak přidat zkušební modul na Divi Builder
• Jak používat textový modul Divi
• Jak vytvořit posuvník na Divi
• Jak upravit roli uživatele Divi
• Jak používat modul Divi Social Media
• Jak používat modul obchodu na téma WordPress Divi
• Jak používat modul bočního panelu Divi
• Jak používat modul tabulky ceny Divi
• Jak používat titulní modul publikací Divi
• Jak přidat video modul Divi
• Jak používat navigační modul článku
• Jak používat vyhledávací modul Divi
• Jak používat modul peněženky Divi
• Jak používat modul osob na nástroji Divi Builder
• Jak používat modul peněz s filtrem Divi
• Jak používat posuvný modul s plnou šířkou
• Jak používat modul obrazu Divi Builder
• Jak používat navigační modul plné šířky nástroje Divi Builder
• Jak používat modul galerie obrázků
• Jak používat modul karty Divi Builder Full-Width Card
• Jak používat portálový modul Divi s plnou šířkou
• Jak používat modul záhlaví Divi s plnou šířkou
• Jak používat počítací modul Divi
• Jak používat posuvník článků v Divi Builderu
• Jak používat modul Divi Email Optin