In un tutorial precedente, noi hai presentato Divi. Per chi non lo sapesse, Divi è un tema WordPress premium progettato dal team Temi eleganti che offre vari servizi su WordPress e progetta plugin e temi.
Divi è un tema reattivo e quest'ultimo è compatibile con molti altri plugin tra gli altri che abbiamo WooCommerce. Oggi vi mostreremo come dare un'animazione diversa ai vostri prodotti WooCommerce.
A volte lo stile di WooCommerce potrebbe essere un po' inadeguato, soprattutto se il tuo stile CSS è un po' diverso. Questo tutorial, che sarà un po' tecnico (un po 'di CSS e nient'altro), ti consentirà di rimediare.
Altri tutorial sul tema Divi
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere il testo su un prodotto WooCommerce su Divi
- Come cambiare il colore del menu tra le pagine su Divi
- Funzionalità che non conosci su Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente su Divi
Cominciamo.
Modifica di un'icona per il testo al passaggio del mouse
Per impostazione predefinita, quando utilizzi WooCommerce con Divi e passi il mouse su un prodotto, vedi una piccola icona "+" che è un carattere (make-icona) proposto da Divi e che è il seguente:
È davvero facile cambiarlo con un'icona diversa nelle impostazioni, ma se vuoi aggiungere del testo, è un'altra cosa? Ti mostrerò come ottenere questo risultato con gli snippet CSS di oggi e includerò anche codice opzionale da aggiungere al tuo sito.
Ecco cosa avremo completato una volta:
Perché usare comunque il testo invece di un'icona?
Posso pensare ad alcuni motivi che possono farti fare questo:
Per definire dare un aspetto unico al tuo negozio: Tutto ciò che puoi fare per distinguere il tuo sito Divi / WooCommerce da un altro è sempre una buona cosa.
L'utilizzo di una parola come "Visualizza" o "Acquista" può generare più conversioni: Tutti devono fare ciò che è meglio per il proprio sito Web e puoi sfruttare i test A / B integrati su Divi per aiutarti.
Fonte d'ispirazione
Di recente ho visitato un sito che conteneva un testo sul prodotto in bilico. Ovviamente ho visto altri siti di e-commerce che hanno parole piuttosto che icone sul prodotto in bilico, quindi questo non era un concetto nuovo. Non avevo mai dovuto farlo su a Tema Divi, e quando l'ho visto, mi sono proposto una sfida e mi sono reso conto che è davvero facile implementarlo. Con pochissimo codice richiesto, sei sicuro di non influire sulle prestazioni del tuo blog.
Implementazione del mouse sul testo
Passaggio 1: sovrapposizione di colori
Per prima cosa cambieremo il colore della sovrapposizione al passaggio del mouse. Questo è estremamente facile da fare su Divi. Nel modulo del tuo negozio Vai al " parametri di progettazione avanzati avanzati E seleziona il tuo colore.
Passaggio 2: aggiunta di CSS
Il seguente codice CSS in " Opzioni del tema> CSS personalizzato O sul foglio di stile del tema di tuo figlio.
.woocommerce .et_overlay: before {left: 0; margine sinistro: 0; contenuto: 'vista'; / *** Il tuo testo qui *** / font-family: 'Source Without Pro', Arial! / *** Scegli il tuo carattere *** / text-transform: maiuscolo; dimensione carattere: 24px; colore: #fff; / *** Imposta il colore del testo *** / font-weight: grassetto; text-align: center; larghezza: 100%; imbottitura: 5px 0; }
Se vuoi che i tuoi prodotti siano piuttosto rotondi, puoi aggiungere questo codice opzionale:
.woocommerce ul.products li.product un IMG, .et_overlay {border-radius: 50%; }
Questo è tutto!
Ora puoi visitare il tuo negozio e vedere come vengono prese in considerazione le modifiche.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" vuoto "layout =" espanso "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "piatto" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] SCARICA IL 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 = "vuoto" layout = "espanso" align = "centro" 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 "] SCARICA MODELLI DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Altri tutorial di Divi
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere testo su un prodotto Divi WooCommerce
- Come cambiare il colore del menu tra le pagine Divi
- Come personalizzare le griglie di un blog con Divi
- Come utilizzare il ruolo di Editor Divi su WordPress
- Come creare un dispositivo di scorrimento Divi a schermo intero
- Come cambiare il colore dei menu tra le pagine di Divi
- Funzionalità che probabilmente non conosci su Divi
- Come usare Divi Builder su WordPress
- Come usare il modulo di scorrimento video Divi
- Come utilizzare il modulo Divi Builder Flip
- Come aggiungere un modulo di testimonianza su Divi Builder
- Come usare il modulo di testo Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente Divi
- Come usare il modulo Divi Social Media
- Come utilizzare il modulo negozio sul tema WordPress Divi
- Come utilizzare il modulo barra laterale Divi
- Come utilizzare il modulo Tabella prezzi Divi
- Come utilizzare il modulo del titolo delle pubblicazioni Divi
- Come aggiungere un modulo video di Divi
- Come utilizzare il modulo di navigazione dell'articolo
- Come usare il modulo di ricerca Divi
- Come utilizzare il modulo portafoglio Divi
- Come usare il modulo persona su Divi Builder
- Come usare il modulo portafoglio con filtro Divi
- Come utilizzare il modulo di scorrimento a larghezza piena
- Come utilizzare il modulo immagine Divi Builder
- Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
- Come utilizzare il modulo della galleria di immagini
- Come utilizzare il modulo Divi Builder Full-Width Card
- Come utilizzare il modulo Divi Full Width Portfolio
- Come utilizzare il modulo di intestazione a tutta larghezza Divi
- Come utilizzare il modulo contatore Divi
- Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
- Come utilizzare il modulo Divi Email Optin
Testo diverso per prodotto? dici di aggiungerlo a nuovi prodotti? come? e dove?
Super articolo, grazie per questo suggerimento. E se vogliamo un testo diverso per prodotto, come?
Ciao Brice,
In questo caso, aggiungi un testo diverso sul nuovo prodotto WooCommerce.
Eccellente !! Grazie per questo suggerimento.
di niente.