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 in cui il testo del prodotto era scorrevole. Naturalmente ho visto altri siti di e-commerce in cui il prodotto in evidenza è visualizzato con parole anziché con icone, quindi non si trattava di un concetto nuovo. Non ho mai dovuto farlo su un tema Divi e quando ho visto questa cosa, mi sono lanciato una sfida e ho capito che in realtà è facile da implementare. Dato che è richiesto pochissimo codice, puoi essere certo che non influirà 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

Blair Jersyer

Sviluppatore WordPress e appassionato di tutto ciò che riguarda le nuove tendenze tecnologiche. Autori del plugin, Temi WordPress e altre applicazioni web. Autore su BlogPasCher.com.

Vedi biografia completa