Egy előző bemutatóban mi bemutattad Divi-t. Azok számára, akik nem ismerik, a Divi a WordPress téma a csapat által tervezett prémium elegáns témák amely különféle szolgáltatásokat kínál a WordPressen, valamint a plug-inek és témák tervezését.

A Divi egy reszponzív téma, és ez utóbbi kompatibilis számos más beépülő modullal, többek között nálunk WooCommerce. Ma megmutatjuk, hogyan adhatsz más animációt a termékeidhez WooCommerce.

Néha a stílus WooCommerce lehet, hogy egy kicsit nem megfelelő, különösen, ha a CSS-stílusod egy kicsit más. Ez az oktatóanyag, amely egy kicsit technikai jellegű lesz (egy kis CSS és semmi más) lehetővé teszi ennek orvoslását.

Egyéb útmutatók a Divi témáról

• 5 weboldalak éttermi felhasználásra Divi téma
• Szöveg hozzáadása a WooCommerce termék Divi
• Hogyan változtathatja meg a menü színét a Divi oldalak között?
• Jellemzők, amelyeket nem ismer a Divi-ről
• Hogyan lehet létrehozni egy csúszkát a Divi-n
• Felhasználói szerepkör szerkesztése a Divin

Kezdjük.

Ikon módosítása a szövegre az egér felett

Alapértelmezés szerint, ha a WooCommerce szoftvert használja a Divivel, és egy termék fölé viszi az egérmutatót, akkor egy kis „+” ikont lát, amely egy betűtípus (make-ikon), amelyet a Divi javasolt, és amely a következő:

Nagyon egyszerű ezt megváltoztatni egy másik ikonra a beállításokban, de ha szöveget szeretne hozzáadni, az más dolog? Megmutatom, hogyan lehet ezt elérni a mai CSS-kivonatokkal, és egy opcionális kódot is felveszek a webhelyére.

Itt van, amit egyszer készen állunk:

Miért is használjon szöveget ikon helyett?

Gondolok néhány okra, amelyek ezt tehetik:

Annak meghatározása érdekében, hogy egyedi megjelenést nyújtson üzletének: Bármi, amit tehet, hogy megkülönböztesse Divi / WooCommerce webhelyét egy másiktól, mindig jó dolog.

Az olyan szavak használata, mint a „Megtekintés” vagy a „Vásárlás”, több konverziót eredményezhet: Mindenkinek meg kell tennie azt, ami a legmegfelelőbb a saját webhelye számára, és ennek érdekében kihasználhatja a Divi-nél alkalmazott integrált A / B tesztelés előnyeit.

Az inspiráció forrása

Nemrég böngésztem egy webhelyet, ahol a termékről szóló szöveg lebegett. Természetesen láttam más e-kereskedelmi webhelyeket is, amelyeken ikonok helyett szavak szerepelnek a terméken, szóval ez nem volt új ötlet. Soha nem kellett ilyet tennem a Divi téma, és amikor ezt megláttam, kihívás elé állítottam magam, és rájöttem, hogy ezt valóban könnyű megvalósítani. Ha nagyon kevés kódra van szükség, akkor biztosan nem befolyásolja blogja teljesítményét.

Egér végrehajtása szöveg felett

1 lépés: A színátfedés

Először megváltoztatjuk az átfedés színét az egérrel. Ezt rendkívül könnyű megtenni a Divi-n. Az áruház moduljában lépjen a " fejlett fejlett tervezési paraméterek És válassza ki a színt.

2 lépés: CSS hozzáadása

A következő CSS kód a " Témaopciók> Egyéni CSS Vagy a gyermek témájának stíluslapján.

.woocommerce .et_ overlay: előtt {balra: 0; margó-bal: 0; tartalom: 'nézet'; / *** A szöveg itt *** / font-család: 'Source nélkül Pro', Arial! / *** Válassza ki a betűtípust *** / text-transform: nagybetűs; betűméret: 24px; szín: #fff; / *** Állítsa be a szöveg színét *** / betűméret: félkövér; szöveg igazítás: középpont; szélesség: 100%; párnázat: 5px 0; }

Ha azt akarja, hogy termékei meglehetősen kerek legyenek, hozzáadhatja ezt a választható kódot:

.woocommerce ul.products li.product a img ,. and_overlay {határ-sugár: 50%; }

Ez az!

Most már meglátogathatja üzletét, és megnézheti, hogyan veszik figyelembe a változásokat.

[vc_row center_row = "igen"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" kibontva "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"] A DIVI TÉMA LETÖLTÉSE [/ vcex_button] [/ width [»v_c_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "üres" layout = "kibontva" igazítás = "középre" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" TE fa-downLOAD "] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Egyéb Divi oktatóanyagok

• 5 weboldalak éttermi felhasználásra Divi téma
• Hogyan lehet szöveget hozzáadni a Divi WooCommerce termékhez?
• Hogyan változtathatja meg a menü színét a Divi oldalak között
• Hogyan lehet személyre szabni egy blog rácsát a Divi-vel
• Hogyan kell használni a szerepe Divi szerkesztő WordPress
• Hogyan készítsünk teljes képernyős Divi csúszkát?
• Hogyan változtathatja meg a menük színét a Divi oldalak között
• Funkciók, amelyeket valószínűleg nem ismer a Divi-ről
• A Divi Builder használata a WordPress-en
• Hogyan használjuk a Divi video scrolling modult
• A Divi Builder Flip modul használatának módja
• Hogyan adhatunk hozzá egy beszámolót a Divi Builderhez
• A Divi szövegmodul használata
• Hogyan lehet létrehozni egy csúszkát a Divi-n
• A Divi felhasználói szerepkör szerkesztése
• A Divi Social Media használata
• Hogyan lehet használni az üzlet modult a WordPress Divi témában?
• A Divi oldalsáv moduljának használata
• A Divi áratábla modul használatának módja
• A Divi kiadványok címmoduljának használata
• Hogyan adhatunk hozzá egy Divi video modult
• A cikk navigációs moduljának használata
• A Divi keresőmodul használata
• A Divi pénztárca moduljának használata
• A személyi modul használata a Divi Builder-en
• A pénztárca moduljának használata a Divi szűrővel
• A teljes szélességű csúszka modul használata
• A Divi Builder képmodul használata
• A Divi Builder teljes szélességű navigációs moduljának használata
• A képgaléria modul használata
• A Divi Builder teljes szélességű kártya moduljának használata
• A Divi teljes szélességű portfólió moduljának használata
• A Divi teljes szélességű fejléc moduljának használata
• A Divi számláló modul használata
• Hogyan lehet használni a Divi Builder cikkcsúszkáját?
• A Divi Email Optin modul használata