Come aggiungere un titolo di sito dinamico e uno slogan a un'intestazione Divi globale

Come aggiungere un titolo di sito dinamico e uno slogan a un'intestazione Divi globale

Sapere come aggiungere un titolo di sito dinamico e uno slogan a un'intestazione globale Divi sarà utile durante la creazione di siti Web Divi. E ci sono alcuni buoni motivi per farlo. Da un lato, non tutti i siti hanno un logo. Il titolo di un sito è un buon sostituto del logo. Un altro motivo è aumentare il tuo marchio includendo informazioni vitali sul tuo sito dove tutti le vedranno.

In questo tutorial, ti mostreremo come aggiungere un titolo del sito dinamico e uno slogan a un'intestazione globale Divi. Questa soluzione estrarrà dinamicamente il titolo del sito e la tagline dal back-end di WordPress. Inoltre, avrai tutte le potenti opzioni di design di Divi per personalizzare il titolo e lo slogan come preferisci!

Possibile risultato

Ecco un'anteprima del design che costruiremo in questo tutorial.

Modello di intestazione globale del titolo del sito dinamico 6

Nota il titolo del sito e lo slogan nella parte superiore centrale dell'intestazione che viene visualizzata dinamicamente.

Esempio di modifica del titolo Divi

Download gratuito

Unisciti a Divi Newlsetter e ti invieremo via e-mail una copia dell'Ultimate Divi Landing Page Layout Pack, insieme a tantissime altre incredibili risorse, suggerimenti e trucchi Divi gratuiti. Seguilo e sarai un maestro Divi in ​​pochissimo tempo. Se sei già abbonato, inserisci semplicemente il tuo indirizzo e-mail di seguito e fai clic su download per accedere al layout pack.DOWNLOAD

Per importare il modello, vai a Divi> Generatore di temi.

Fare clic sull'icona della portabilità in alto a destra nella pagina.

Nella finestra a comparsa della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Scegli un modello divi

Una volta completato, il modello di intestazione generale sarà disponibile in Divi Theme Builder.

Modifica intestazione divi globale

Di seguito passeremo al design.

Il titolo del sito e lo slogan su WordPress

Ogni sito WordPress ha un titolo del sito e uno slogan. Il titolo del sito è fondamentalmente il nome del sito e lo slogan è una breve frase che di solito spiega di cosa si tratta.

Non è raro aggiungere il titolo del sito durante l'installazione di WordPress e dimenticarlo.

Personalizza titolo divi

E alcune persone non si rendono nemmeno conto che lo slogan esiste, per non parlare del tempo per aggiornarlo. Inoltre, quando utilizzi il tema Divi, il titolo del sito e lo slogan non saranno visibili sul tuo sito per impostazione predefinita, quindi è facile ignorarli. Tuttavia, il titolo del sito e lo slogan sono parti essenziali del sito Web e saranno riconosciuti dai motori di ricerca.

Puoi individuare e aggiornare il titolo del sito e lo slogan in WordPress in qualsiasi momento accedendo alla dashboard di WordPress e accedendo a Impostazioni> Generali.

In alternativa, puoi seguire un altro percorso utilizzando il personalizzatore del tema per aggiornare il titolo del sito nelle impostazioni generali.

Personalizza l'identità di wordpress

Ora che sappiamo dove si trovano il titolo e lo slogan del sito nel backend di WordPress, esploriamo come possiamo aggiungerli a un'intestazione Divi!

Come aggiungere un titolo e uno slogan dinamici del sito a un'intestazione globale in Divi

Importazione del modello di intestazione globale preimpostato

Per questo tutorial, ci concentreremo su come aggiungere il titolo del sito dinamico e lo slogan a un'intestazione esistente invece di creare un'intestazione completa da zero. Ti farà risparmiare tempo e migliorerà la chiarezza. Quindi, per iniziare questa progettazione dell'intestazione, importeremo un modello di intestazione globale predefinito dal nostro file quarto generatore di temi .

Una volta che hai scaricato il pacchetto di creazione di tema , decomprimere il file e individuare il file JSON del modello di sito Web predefinito.

Quindi vai su Divi> Theme Builder.

Fare clic sull'icona della portabilità in alto a destra. Nella finestra a comparsa della portabilità, scegli il file JSON del modello di sito Web predefinito e fai clic sul pulsante Importa.

Importazione del modello Divi

Una volta che il modello è stato aggiunto al generatore di temi, elimina il modello di piè di pagina e fai clic per modificare l'intestazione generale.

Rimuovi modello dal piè di pagina

Aggiunta di un titolo del sito dinamico e una tagline all'intestazione

All'interno dell'editor del layout del modello, vedrai l'intestazione predefinita già progettata. Possiamo iniziare subito a fare le nostre personalizzazioni.

Sposta logo

Per iniziare, trascina il modulo immagine che mostra il logo (dinamicamente) dalla colonna centrale della riga superiore alla colonna sinistra della riga superiore.

Aggiungi un modulo di invito all'azione per visualizzare il titolo del sito e lo slogan

Quindi aggiungi un nuovo modulo Call to Action nella colonna centrale della riga superiore (dove si trovava il logo).

Personalizza l'invito all'azione

Useremo il modulo Call to Action per visualizzare il titolo del sito e lo slogan.

Ma prima di iniziare ad aggiungere contenuti, seleziona prima NO per utilizzare il colore di sfondo.

Configura azioni di invito all'azione

Aggiungi un titolo dinamico al sito

Nelle impostazioni del contenuto, passa con il mouse sopra la casella di immissione del titolo e fai clic sull'icona "Usa contenuto dinamico". Quindi seleziona "Titolo del sito" dall'elenco.

Aggiungi uno slogan dinamico del sito

Quindi, passa il mouse sull'area del corpo e seleziona l'icona "Utilizza contenuto dinamico". Quindi seleziona "Tagline del sito" dall'elenco.

Aggiungi uno slogan del sito divi

Aggiungi un link dinamico alla home page

È normale che il titolo del sito reindirizzi alla home page al clic, soprattutto se si sostituisce il logo. Per reindirizzare l'intero corso alla home page, aggiungere il collegamento alla home page come contenuto dinamico all'URL del collegamento al corso.

Aggiungi un collegamento alla home page

Progettazione del testo del titolo e dello slogan del sito

Ora il titolo del sito e lo slogan vengono visualizzati dinamicamente nell'intestazione. Tutto quello che dobbiamo fare ora è aggiungere un po 'di stile. Ricorda, dobbiamo personalizzare il testo del titolo per progettare il titolo del sito e il testo del corpo per progettare il motto.

Passa alla scheda di progettazione e aggiorna quanto segue:

  • Carattere del titolo: Heebo
  • Peso carattere titolo: grassetto
  • Stile carattere titolo: TT
  • Dimensione testo titolo: 32 px (desktop), 24 px (tablet e telefono)
  • Spaziatura lettere titolo: 0.3em
  • Carattere del corpo: Roboto
  • Stile carattere corpo: corsivo
  • Colore del corpo:
  • Dimensioni del testo del corpo: 13 px
  • Distanza tra le lettere del corpo: 0.1em
  • Altezza della linea del corpo: 1em
Personalizza il carattere del titolo divi

Per facilitare il centraggio, elimina l'imbottitura predefinita sotto il testo del corpo aggiungendo il seguente CSS personalizzato alla descrizione della promozione:

imbottitura inferiore: 0px
Aggiungi codice css divi personalizzato

Aggiustamenti di progettazione aggiuntivi

Per quest'ultima parte del tutorial, apporteremo alcune modifiche al design dell'intestazione per assicurarci che gli elementi rimangano centrati verticalmente in ogni colonna e per dare al pulsante un design unico. Aggiungeremo anche una linea a spirale prima e dopo alla tagline (solo per i calci).

Centratura verticale delle colonne / del contenuto

In questo momento la riga superiore è "Equalize Column Heights" attiva che utilizza la proprietà flex. Possiamo trarre vantaggio da questo aggiungendo un piccolo frammento CSS per assicurarci che tutte le colonne rimangano centrate verticalmente all'interno della riga. Per fare ciò, apri le impostazioni per la riga superiore e aggiungi il seguente CSS all'elemento principale:

align-items: center;

Aggiornamento della colonna con il pulsante

Quindi, apri le impostazioni per la colonna 3 nella riga superiore ed elimina il colore di sfondo e il riempimento.

Personalizza il pulsante di contatto divi

Aggiornamento dello sfondo del pulsante

Quindi apri le impostazioni del modulo dei pulsanti e aggiorna lo sfondo con un nuovo gradiente di sfondo come segue:

  • Sfondo sfumato Colore sinistro: #ffffff
  • Colore gradiente di sfondo a destra: # 1dbf73
  • Direzione gradiente: 135deg
  • Posizione iniziale: 10%
  • Posizione finale: 0%
Personalizza lo sfondo del pulsante divi

Aggiunta di caratteri prima e dopo allo slogan

Ogni elemento di contenuto dinamico può essere modificato facendo clic sull'icona a forma di ingranaggio. Per aggiungere caratteri prima e dopo allo slogan, apri le impostazioni del modulo di invito all'azione contenente lo slogan e fai clic sull'icona di modifica sul contenuto dinamico dello slogan del sito. Quindi aggiungi i caratteri alle voci prima e dopo.

Mostra lo slogan divi

Risultato finale

Per vedere il risultato, apri una pagina qualsiasi del tuo sito. Dovresti vedere il titolo del sito dinamico e lo slogan visualizzati magnificamente!

Risultato finale divi

Considerazioni finali

È davvero bello poter personalizzare un'intestazione generale con un titolo del sito e uno slogan dinamici. Sembra qualcosa che sarà utile per molti siti. Mi piace anche l'idea di includere il titolo del sito e la tagline oltre al logo per una rappresentazione ancora più forte del marchio.

Fonte: Tema elegante

Come creare una transizione senza interruzioni con effetti di scorrimento su Divi

Come creare una transizione senza interruzioni con effetti di scorrimento su Divi

Quando progetti la tua pagina dei servizi, vuoi assicurarti che i tuoi visitatori notino tutti i diversi servizi che fornisci. In molti casi, questo sarà solo un servizio specifico che stanno cercando, ma se fornisci un modo semplificato nella tua struttura di servizio, è più probabile che i tuoi visitatori li trattino tutti. 

In questo tutorial, ti mostreremo come essere creativo con gli effetti di scorrimento di Divi e creare una transizione di servizio senza interruzioni. Puoi anche scaricare il file JSON gratuitamente!

Andiamo.

Possibile risultato

Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.

Transizione tra sezione divi

1, ricrea la struttura degli elementi

Aggiungi la sezione # 1

spaziatura

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e modifica i valori di riempimento su schermi di dimensioni diverse.

  • Imbottitura superiore: 80 px (desktop e tablet), 0 px (telefono)
  • Imbottitura inferiore: 80px
Sezione parametri Divi

Aggiungi una nuova linea

Struttura a colonne

Continua ad aggiungere una nuova riga utilizzando la seguente struttura di colonne:

dimensionamento

Senza aggiungere più moduli, aprire i parametri di linea e applicare le seguenti modifiche ai parametri di quotatura:

  • Usa una larghezza della grondaia personalizzata: Sì
  • Larghezza della grondaia: 1
  • Larghezza: 90%
  • Larghezza massima: 1580 px
Configurazione della spaziatura Divi

spaziatura

Quindi aggiungere un margine superiore e inferiore personalizzato.

  • Margine superiore: 200px
  • Margine inferiore: 200px
Configurazione della spaziatura delle linee Divi

Aggiungi un modulo di testo alla colonna 1

Aggiungi contenuto H2

È ora di aggiungere i moduli, iniziando con un modulo di testo nella colonna 1. Inserisci il contenuto H2 che desideri.

I nostri servizi offerti dagli esperti del momento

Impostazioni di testo H2

Vai alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 come segue:

  • Titolo 2 Polizia: trimestrale
  • Intestazione 2 Dimensioni testo: 80 px (desktop), 50 px (tablet), 40 px (telefono)
  • Altezza della linea 2 della testa: 1.2em
Capo polizia divi

spaziatura

Quindi aggiungi un margine inferiore sul tablet e sul telefono.

  • Margine inferiore: 50 pixel (solo tablet e telefono)
Configurazione della spaziatura del testo Divi

Aggiungi un modulo di testo alla colonna 2

Aggiungi contenuto

Passiamo alla seconda colonna. Il primo modulo di cui abbiamo bisogno è un modulo di testo con un contenuto descrittivo.

Casella di testo Content divi

Impostazioni del testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

  • Carattere testo: cabina
  • Stile del carattere del testo: maiuscolo
  • Colore del testo: # 000000
  • Dimensioni del testo: 18 px (desktop), 15 px (tablet), 13 px (telefono)
  • Spaziatura lettere di testo: 3px (desktop), 1px (tablet e telefono)
  • Altezza della riga di testo: 3em
Parametro di testo Divi

Aggiungi un modulo di separazione alla colonna 2

visibilità

Il modulo successivo e finale di cui abbiamo bisogno in questa colonna è un modulo di separazione. Assicurati che l'opzione "Mostra separatore" sia abilitata.

  • Mostra separatore: Sì
Divisorio visibile

Linea

Quindi modificare il colore della linea del modulo.

  • Colore della linea: # 000000
Colore di sfondo divisore

dimensionamento

Quindi apportare alcune modifiche ai parametri di dimensionamento.

  • Peso del divisore: 3px
  • Larghezza: 28%
Dimensionamento separatore Divi

spaziatura

Aggiungiamo anche un margine superiore.

  • Margine superiore: 10px
Interasse moduli separatori Divi

Aggiungi la sezione # 2

spaziatura

Passiamo alla sezione successiva regolare. Rimuovere il riempimento superiore predefinito dalla sezione.

  • Imbottitura superiore: 0px
Sezione 2 spaziatura divi

overflow

Nascondi anche gli overflow.

  • Straripamento orizzontale: nascosto
  • Straripamento verticale: nascosto
Nascondi gli overflow del modulo divi

Aggiungi una nuova linea

Struttura a colonne

Continua ad aggiungere una prima riga usando la seguente struttura di colonne:

Scegli un layout divi

dimensionamento

Senza aggiungere più moduli, aprire i parametri di linea, accedere ai parametri di quotatura e apportare le seguenti modifiche:

  • Usa una larghezza della grondaia personalizzata: Sì
  • Larghezza della grondaia: 1
  • Equalizza le altezze delle colonne: Sì
  • Larghezza: 90%
  • Larghezza massima: 1580 px
Sezione divi configurazione grondaia

spaziatura

Quindi rimuovere tutte le imbottiture superiore e inferiore predefinite.

  • Imbottitura superiore: 0px
  • Imbottitura inferiore: 0px
Impostazioni spaziatura modulo linea Divi 1

Impostazioni della colonna 1

Colore di sfondo

Quindi apri le impostazioni per la colonna 1 e cambia il colore di sfondo.

  • Colore di sfondo: # f7f7f7
Configurazione dello sfondo del modulo della linea Divi

spaziatura

Completa le impostazioni della colonna aggiungendo valori di riempimento personalizzati su schermi di dimensioni diverse.

  • Imbottitura superiore: 200 px (scrivania), 100 px (tablet e telefono)
  • Imbottitura inferiore: 200 px (scrivania), 100 px (tablet e telefono)
  • Imbottitura sinistra: 8%
  • Imbottitura destra: 8%
Impostazioni della colonna del modulo riga

Impostazioni della colonna 2

spaziatura

Continua aprendo le impostazioni nella colonna 2. Vai alla scheda Avanzate e aggiungi valori di riempimento personalizzati su schermi di dimensioni diverse.

  • Imbottitura superiore: 100 px (desktop), 50 px (tablet e telefono)
  • Imbottitura inferiore: 200px
  • Imbottitura sinistra: 150 px (scrivania), 0 px (tablet e telefono)
Impostazioni spaziatura modulo Divi

Aggiungi un modulo di separazione alla colonna 1

visibilità

Nella prima colonna, il primo modulo di cui abbiamo bisogno è un modulo di separazione. Assicurati che l'opzione "Mostra separatore" sia abilitata.

  • Mostra separatore: Sì
Mostra separatore divi 1

Linea

Quindi modificare il colore della linea del modulo.

  • Colore della linea: # 000000
Impostazioni separatore Divi

dimensionamento

Apportare anche modifiche ai parametri di dimensionamento.

  • Peso del divisore: 3px
  • Larghezza: 50%
Dimensionamento separatore Divi

Aggiungi un modulo di testo alla colonna 1

Aggiungi contenuto H3

Il prossimo modulo di cui abbiamo bisogno nella colonna 1 è un modulo di testo con contenuto H3.

Impostazione della sezione dei contenuti Divi

Impostazioni di testo H3

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H3:

  • Titolo 3 Polizia: trimestrale
  • Colore del testo dell'articolo 3: # 000000
  • Voce 3 Dimensioni del testo: 50 px (desktop), 40 px (tablet), 35 px (telefono)
  • Altezza della linea 3 della testa: 1.1em

Aggiungi un modulo di testo alla colonna 2

Aggiungi contenuto

Nella seconda colonna, il primo modulo di cui abbiamo bisogno è un modulo di testo con alcuni contenuti descrittivi.

Impostazione del modulo di testo Divi

Impostazioni del testo

Modificare le impostazioni di testo del modulo come segue:

  • Carattere testo: cabina
  • Stile del carattere del testo: maiuscolo
  • Dimensioni del testo: 18 px (desktop), 15 px (tablet), 13 px (telefono)
  • Spaziatura lettere di testo: 3px (desktop), 1px (tablet e telefono)
  • Altezza della riga di testo: 3em
Regolazione del carattere dello stampo del testo Divi

Aggiungi un modulo pulsanti alla colonna 2

Aggiungi una copia

Il prossimo e ultimo modulo di cui abbiamo bisogno è un modulo pulsanti. Inserisci una copia a tua scelta.

Impostazione del contenuto del modulo di testo

Impostazioni dei pulsanti

Quindi stile il pulsante.

  • Usa stili personalizzati per il pulsante: Sì
  • Dimensione del testo del pulsante: 20 pixel
  • Colore testo pulsante: #ffffff
  • Colore sfondo pulsante: # 000000
  • Larghezza bordo pulsante: 0px
Impostazione dello stile del pulsante Divi
  • Carattere pulsante: trimestrale
  • Peso carattere pulsante: grassetto
Impostazioni del colore del pulsante Divi

spaziatura

Aggiungi anche un'imbottitura personalizzata.

  • Imbottitura superiore: 50px
  • Imbottitura inferiore: 50px
  • Padding sinistro: 100px
  • Imbottitura destra: 100px
Impostazioni della spaziatura dei pulsanti del modulo Divi

Posizione

E riposiziona il pulsante di conseguenza:

  • Posizione: assoluta
  • Posizione: in basso a sinistra
Regolazione della posizione del modulo pulsanti Divi

Clona la linea tutte le volte che è necessario

Dopo aver completato l'intera linea e tutti i suoi moduli, è possibile clonare l'intera linea tre volte.

Modulo clone divi

Cambia tutto il contenuto

Assicurati di modificare tutto il contenuto in righe duplicate.

Modifica il contenuto della sezione divi

2. Applicare effetti di scorrimento

Effetti di scorrimento della prima riga

Movimento orizzontale

Dopo aver completato tutte le righe nella sezione, è il momento di aggiungere gli effetti di scorrimento. Apri la prima riga della sezione e aggiungi il movimento orizzontale.

  • Attiva movimento orizzontale: Sì
  • Avvia offset: -5
  • Offset medio: 0 (al 26%)
  • Scostamento finale: 0
  • Attivare l'effetto di movimento: metà dell'elemento
Applica effetti di scorrimento divi

Dissolvenza in entrata e in uscita

Usa anche un effetto di dissolvenza in entrata e in uscita.

  • Attiva dissolvenza in entrata e in uscita: Sì
  • Opacità iniziale: 100%
  • Opacità media: 100% (al 50%)
  • Opacità finale: 0% (al 53%)
  • Attivare l'effetto di movimento: metà dell'elemento
Configura divi della sezione animazione dissolvenza

Effetti di scorrimento della riga centrale

Movimento verticale

Successivamente, aggiungeremo effetti di scorrimento a tutte le righe tra la prima e l'ultima riga della sezione. Per prima cosa usa un movimento verticale:

  • Attiva movimento verticale: Sì
  • Avvia offset: -4
  • Offset medio: 0 (al 26%)
  • Scostamento finale: 0
  • Effetto di attivazione del movimento: metà dell'elemento
Configurazione dell'aniazione di scorrimento Divi

Dissolvenza in entrata e in uscita

Attiva anche un effetto di dissolvenza in entrata e in uscita.

  • Attiva dissolvenza in entrata e in uscita: Sì
  • Opacità iniziale: 0%
  • Opacità media: 100% (dal 27% al 50%)
  • Fine offset: 0 (al 53%)
  • Attivare l'effetto di movimento: metà dell'elemento
Animazione in dissolvenza della linea Divi

Effetti di scorrimento dell'ultima riga

Movimento verticale

Quindi aprire l'ultima riga della sezione e aggiungere il seguente movimento verticale:

  • Attiva movimento verticale: Sì
  • Avvia offset: -4
  • Offset medio: 0 (al 26%)
  • Scostamento finale: 0
  • Attivare l'effetto di movimento: metà dell'elemento
Animazione a scorrimento modulo linea divi

Dissolvenza in entrata e in uscita

Con un effetto di dissolvenza in entrata e in uscita e il gioco è fatto!

  • Attiva dissolvenza in entrata e in uscita: Sì
  • Opacità iniziale: 0%
  • Opacità media: 100% (dal 27% al 50%)
  • Opacità finale: 100% (al 53%)
  • Attivare l'effetto di movimento: metà dell'elemento
Impostazioni dell'animazione dell'aspetto del modulo della linea Divi

Risultato finale

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

Demo finale

Considerazioni finali

In questo articolo, ti abbiamo mostrato come creare una bellissima transizione di servizio con gli effetti di scorrimento di Divi. Prima ancora che una di servizio scompaia, comincia ad apparire l'altra, regalando un bel passaggio gradevole alla vista. Questo approccio ti aiuterà a mettere in evidenza ogni servizio a livello individuale. Puoi anche scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.

Come creare un carosello di scorrimento dei membri del team con Divi

Come creare un carosello di scorrimento dei membri del team con Divi

Quando crei la tua pagina Informazioni, probabilmente vorrai presentare anche i membri del tuo team. In tal modo, consenti ai visitatori di interagire con le persone dietro la tua attività. Se stai cercando un modo per ravvivare la sezione dei membri del tuo team sullo scorrimento, questo tutorial potrebbe essere per te. Creeremo un carosello di membri del team a scorrimento automatico che si sposta mentre i tuoi visitatori scorrono la pagina. 

Dimostrazione

Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.

Scroll divi membro del team

Inizio del concepimento

Aggiungi una nuova sezione

spaziatura

Inizia aggiungendo una nuova sezione normale alla pagina su cui stai lavorando. Apri le impostazioni della sezione e aggiungi un riempimento personalizzato su schermi di dimensioni diverse.

  • Imbottitura superiore: 200 px (scrivania), 100 px (tablet e telefono)
  • Imbottitura inferiore: 200 px (scrivania), 100 px (tablet e telefono)
Configurazione dei parametri

overflow

Per assicurarci che non compaia alcuna barra di scorrimento orizzontale nel nostro design, nasconderemo le sezioni in eccesso nella scheda avanzata.

  • Straripamento orizzontale: nascosto
  • Straripamento verticale: nascosto
Configurazione overflow

Aggiungi riga n. 1

Struttura a colonne

Continua ad aggiungere una nuova riga alla sezione utilizzando la seguente struttura di colonne:

Scegli layout divi

dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga, passa alla scheda di progettazione e modifica la larghezza e la larghezza massima nelle impostazioni di dimensionamento.

  • Larghezza: 90%
  • Larghezza massima: 1580 px
Parametro della linea Divi

spaziatura

Aggiungiamo anche un'imbottitura superiore e inferiore personalizzata.

  • Imbottitura superiore: 100px
  • Imbottitura inferiore: 100px
Configurazione divisione interlinea

Aggiungi un modulo di testo alla colonna

Aggiungi contenuto H2

È ora di aggiungere moduli, iniziando con un primo modulo di testo. Inserisci il contenuto H2 di tua scelta.

Incontrare la squadra

Impostazioni di testo H2

Vai alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 come segue:

  • Titolo carattere 2: Sabbie mobili
  • Titolo carattere 2: semi-grassetto
  • Colore del testo dell'articolo 2: # 000000
  • Intestazione 2 Dimensioni testo: 70 px (desktop), 50 px (tablet), 40 px (telefono)
Divi spaziatura del testo

Aggiungi un modulo di separazione alla colonna

visibilità

Quindi aggiungi un modulo di separazione. Assicurati che l'opzione "Mostra separatore" sia abilitata.

  • Mostra separatore: Sì
Mostra separatore divi

Linea

Quindi apportare alcune modifiche alle impostazioni della linea.

  • Colore linea: # edf000
  • Stile della linea: solido
  • Posizione linea: in alto
Stile di spaziatura Divi

dimensionamento

E completare i parametri del modulo modificando i parametri di quotatura di conseguenza:

  • Peso del divisore: 20px
  • Larghezza: 11%
  • Allineamento del modulo: a sinistra
  • Altezza: 20px
Dimensionamento modulo linea divi

Aggiungi una riga # 2

Struttura a colonne

Alla riga successiva! Utilizza la seguente struttura di colonne:

Configurazione della colonna Divi

dimensionamento

Senza aggiungere più moduli, aprire i parametri di linea e modificare i parametri di dimensionamento come segue:

  • Usa una larghezza della grondaia personalizzata: Sì
  • Larghezza della grondaia: 2
  • Larghezza: 100%
  • Larghezza massima: 100%
Configurazione della larghezza della grondaia

spaziatura

Quindi aggiungi l'imbottitura sinistra e destra solo sugli schermi più piccoli.

  • Imbottitura sinistra: 5% (solo tablet e telefono)
  • Imbottitura destra: 5% (solo tablet e telefono)
Configurazione dello stile di interlinea

Parametri di colonna (5x)

Ora, nei prossimi tre passaggi di questo tutorial, apporteremo alcune modifiche alle colonne. Applica i tre passaggi a ciascuna delle colonne della riga.

Configurazione della linea dei parametri Divi

Sfondo sfumato

Innanzitutto, aggiungi uno sfondo sfumato a ciascuna colonna.

  • Colore 1: rgba (255,255,255,0)
  • Colore 2: rgba (0,0,0,0,84)
  • Tipo di gradiente: lineare
  • Posizione iniziale: 25%
  • Posizione finale: 86%
  • Posiziona il gradiente sopra l'immagine di sfondo: sì
Configurazione colonna posteriore Divi

Immagine di sfondo

Quindi carica un'immagine di sfondo a tua scelta. Questa immagine di sfondo rappresenta ogni membro del team, quindi utilizza un'immagine diversa per ogni colonna.

  • Dimensione dell'immagine di sfondo: copertina
  • Posizione dell'immagine di sfondo: al centro
Aggiungi l'immagine di sfondo della colonna divi

Elemento principale

Completa le impostazioni della colonna aggiungendo CSS personalizzato all'elemento principale del tablet di ogni colonna. Queste righe di codice CSS ci aiuteranno a posizionare le colonne una sotto l'altra sul tablet, invece di averne due affiancate.

larghezza: 100%! importante; margine: 50px 0px 50px 0px! importante;
Colonna codice css divi

Aggiungi un modulo persona alla colonna

Aggiungi contenuto

Per condividere le informazioni sui membri del team, utilizzeremo un modulo Persona. Aggiungi il primo modulo Persona alla colonna 1 e usa il contenuto che desideri.

Nome persona divi

Elimina immagine

Quindi elimina l'immagine. Usiamo invece l'immagine di sfondo della colonna.

Rimuovi immagine divi

Immagine di sfondo

Aggiungeremo quindi un'immagine in sovrimpressione come immagine di sfondo del modulo. Puoi trovare quello che stiamo utilizzando scaricando la cartella all'inizio di questo tutorial.

  • Dimensione dell'immagine di sfondo: copertina
  • Posizione dell'immagine di sfondo: al centro
Configurazione in background del modulo Persona

Impostazioni del testo del titolo

Vai alla scheda di progettazione del modulo e modifica le impostazioni del testo del titolo come segue:

  • Livello del titolo: H3
  • Carattere del titolo: Quicksand
  • Peso carattere titolo: grassetto
  • Colore del testo del titolo: #ffffff
  • Dimensione del testo del titolo: 230%
Personalizzazione del titolo del modulo Divi

Impostazioni del testo del corpo

Modifica anche le impostazioni del testo del corpo.

  • Carattere del corpo: Apri Sans
  • Colore del testo del corpo: #ffffff
  • Altezza della linea del corpo: 2,2 em
Personalizzazione carrozzeria Divi

Posiziona le impostazioni del testo

Quindi apportare alcune modifiche alle impostazioni del testo di posizione.

  • Posizione carattere: Apri Sans
  • Posiziona colore testo: # edf000
Posizione Divi

spaziatura

E completa le impostazioni del modulo aggiungendo valori di riempimento personalizzati alle impostazioni di spaziatura.

  • Imbottitura superiore: 70%
  • Imbottitura inferiore: 10%
  • Imbottitura sinistra: 10%
  • Imbottitura destra: 10%
Spaziatura modulo Divi persona

Duplica il modulo Persona 4 volte

Una volta completato il modulo Persona, è possibile clonare l'intero modulo quattro volte.

Posiziona i duplicati nelle colonne rimanenti

Posiziona i moduli duplicati nelle restanti quattro colonne della riga. Assicurati di modificare anche il contenuto.

Trasforma la riga in un carosello a scorrimento automatico

Cambia la dimensione della linea # 2

Ora, per trasformare questa riga in un carosello di membri del team a scorrimento automatico, dobbiamo riaprire le impostazioni della riga e modificare la larghezza e la larghezza massima nelle impostazioni di dimensionamento.

  • Larghezza: 180%
  • Larghezza massima: 220% (scrivania), 100% (tablet e telefono)
Spaziatura modifica line divi

Aggiungi il movimento orizzontale della linea # 2

Completa le impostazioni della linea aggiungendo il movimento orizzontale alle impostazioni dell'effetto di scorrimento nella scheda avanzata e il gioco è fatto!

  • Attiva movimento orizzontale: Sì
  • Inizia offset:
    • Ufficio: 2,5
    • Tablet e telefono: 0
  • Offset medio: 0 (al 40%)
  • Fine offset:
    • Ufficio: -25 (al 62%)
    • Tablet e telefono: 0
  • Attivare l'effetto di movimento: metà dell'elemento
Configurazione dell'animazione di scorrimento Divi

Panoramica

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

ufficio

Scroll divi membro del team

Considerazioni finali

In questo tutorial, ti abbiamo mostrato come diventare creativo con gli effetti di scorrimento integrati di Divi. Nello specifico, abbiamo ricreato un bellissimo carosello a scorrimento automatico dei membri del team. Mentre i visitatori scorrono la pagina verso il basso, viene visualizzata un'altra parte del carosello.

Come aggiungere altre icone di social media a Divi

Come aggiungere altre icone di social media a Divi

Divi ti consente di controllare e progettare ogni dettaglio del tuo sito web, dall'intestazione al piè di pagina. Uno degli elementi più cliccati di qualsiasi sito web sono le icone dei social media. Un pubblico impegnato vuole trovarti altrove e conoscerti. Ovviamente, vorrai renderlo il più semplice possibile. 

Quindi ti mostreremo come attivare ulteriori icone di social media nelle opzioni del tema di Divi, come utilizzare Divi Builder per inserire icone di social media ovunque su una pagina o un post e come sfruttare il potere. del tema Divi Builder per aggiungere icone di social media in ogni angolo del tuo sito.

Come attivare facilmente altre icone di social media nel piè di pagina Divi

Il modo più semplice per aggiungere altre icone di social media al tuo sito Divi è accedere al pannello Opzioni del tema , attivando le opzioni per Facebook, Twitter, Instagram e RSS. Quindi tutto ciò che devi fare è inserire gli URL del tuo profilo nei campi. Quando lo fai, li vedrai apparire come collegamenti a icone nel piè di pagina del tuo sito:

Icone social divi

Nel menu del pannello di WordPress, vai a Divi: opzioni del tema e fare clic sulla scheda generale . Scorri verso il basso per vedere lo switch di rete. Inoltre, proprio sotto questi interruttori, assicurati di inserire gli URL per ciascuna icona social Divi che attivi. Altrimenti apparirà l'icona, ma cliccando su di essa l'utente non sarà da nessuna parte. Usare un # invece di un URL manterrà l'utente sulla pagina invece di reindirizzarlo potenzialmente a un file pagina 404 .

Opzioni del tema Divi

Scorri fino alla fine delle opzioni del tema e fai clic Salva modifiche . Ora puoi andare al piè di pagina del tuo sito e fare clic sulle icone social per provarle!

Se non vedi le icone nel tuo piè di pagina, assicurati di controllare il personalizzatore del tema in Aspetto: personalizza e assicurati che Mostra icone social è selezionato nelle opzioni piè di pagina.

Divi wordpress

Se, tuttavia, desideri ancora più opzioni per le icone del piè di pagina social, continua a scorrere verso il basso fino alla nostra sezione su Divi Theme Builder, dove discutiamo sia dei modelli personalizzati che delle impostazioni predefinite generali.

Come utilizzare Divi Builder per aggiungere tracker di social media a una pagina o pubblicare contenuti

A volte l'inserimento di icone di social media aggiuntive tra blocchi di testo, immagini o altri contenuti nel corpo di pagine o post può avere molto senso. La tua pagina di destinazione o la pagina Informazioni, ad esempio, sarebbe un buon posto per aggiungere ulteriori icone social per far sapere ai visitatori come connettersi con te. Si distingueranno sicuramente più del semplice collegamento ai tuoi profili social utilizzando un testo normale. Inoltre, le persone cercano icone riconoscibili.

Puoi utilizzare Divi Builder per inserire le icone dei social media direttamente nelle tue pagine o post utilizzando il file monitoraggio dei social media .

Ogni volta che crei o apri una pagina o un articolo esistente nella tua dashboard di WordPress, vedrai un grande pulsante viola che ti chiede se vuoi usare Divi Builder o meno.

Creazione di articoli Divi

E ovviamente lo fa. Basta fare clic Usa Divi Builder per iniziare a costruire la tua pagina o pubblicare da zero (o da uno dei nostri layout predefiniti ). Inoltre, puoi includere le icone dei social media Divi se utilizzi l'editor predefinito di WordPress. Tutto quello che devi fare è inserire un blocco di Layout Divi e segui gli stessi passaggi che seguiamo di seguito.

Layout di Divi Gutenberg

Puoi utilizzare lo strumento per progettare la tua pagina o pubblicare come desideri utilizzando i moduli di creazione di pagine disponibili. Se è la prima volta che utilizzi Divi Builder, potresti voler controllare prima questa panoramica per avere una chiara comprensione di come funziona.

Quando sei pronto per aggiungere icone di social media alla tua pagina, fai clic su il cerchio nero + nella sezione in cui desideri posizionare le icone dei social media e scorri fino alla casella monitoraggio dei social media appare.

Segue l'inserimento del modulo sui social media

Ti verrà chiesto di scegliere i social network che desideri prima di poter iniziare a personalizzarli. Clicca su Aggiungi un nuovo social network .

Aggiungi social network social module divi

Quindi selezionane uno dall'elenco a discesa.

Aggiungi un nuovo social network

Con quello scelto, aggiungi l'URL del tuo profilo. Facoltativamente, puoi selezionare un colore, una sfumatura, uno sfondo, ecc. specifico per la sua icona.

Personalizza il pulsante del social network

Dopo aver aggiunto il tuo primo social network, puoi continuare ad aggiungere altri network seguendo questi stessi passaggi. Saranno tutti elencati nella scheda Contenuto della impostazioni di tracciamento dei social media . Puoi modificarli, copiarli o riorganizzarli trascinandoli e rilasciandoli in posizione.

Personalizza le icone social

Dopo aver aggiunto i tuoi social network, passa alle schede Contenuto et Design per giocare con altre opzioni di personalizzazione. Puoi cambiare tutto dall'ombra della scatola, il raggio del bordo, la spaziatura, i filtri e persino l'animazione introduttiva per il modulo icona. Hai anche la possibilità di includere un pulsante Seguire affinché tutte le tue icone attirino più attenzione su di esse. Quando hai finito, fai clic su il segno di spunta verde .

Seguici button divi

È quindi possibile spostare le icone sulla pagina, lavorando sulla loro spaziatura e layout come meglio credi. (Il Opzioni di trasformazione Divi sono incredibili per questo, comunque.) Quando sei soddisfatto di tutte le tue decisioni, premi il tasto pulsante verde Salva (o Pubblica) nell'angolo in basso a destra per registrare il nuovo modulo dell'icona dei social media. Se non vedi il pulsante Pubblica / Salva, tocca il pulsante ellissi viola (tre punti) in basso al centro dello schermo per espandere il menu.

Pulsante Divi seguici

Successivamente, le icone dei social media saranno attive sul tuo sito.

Utilizzo di Divi Theme Builder per aggiungere icone di social media

Come accennato in precedenza, Divi Theme Builder è uno strumento potente che ti dà il controllo completo su quasi ogni aspetto del tuo sito. Quindi, se stai cercando di aggiungere icone di social media ovunque, il generatore di temi ti copre.

Per iniziare con il generatore di temi, vai a Divi - Generatore di temi nella dashboard di WordPress.

Costruttore Divi

Si tratta principalmente di aggiungere icone di social media a un layout di generatore di temi Divi esistente. O a uno nuovo! Non importa se aggiungi all'intestazione, al piè di pagina o al corpo generale del tuo sito, o anche a determinate categorie o altri tipi di pagina specializzati. Seguirai lo stesso processo.

Per prima cosa troveremo la sezione che vogliamo aggiungere. Anche in questo caso, può essere globale o personalizzato. Se non hai mai usato il generatore di temi prima, è facile. Aggiungeremo le icone dei social media ai singoli post. È quindi possibile iniziare facendo clic su Aggiungi un nuovo modello e selezionando tutti i messaggi ou Messaggi in categorie specifiche . Quindi controlla le categorie che desideri includere. Quindi fare clic su Crea un modello .

Aggiungi un modello divi

Se hai già impostato modelli, fai clic su Modifica matita oppure fai doppio clic sulla sezione che desideri modificare.

Layout Divi

Il processo di aggiunta delle icone dei social media qui è lo stesso descritto sopra nel generatore. Tuttavia, poiché stai utilizzando il generatore di temi invece di modificare solo una singola pagina, le icone non verranno visualizzate solo dove scegli. I modelli possono essere aggiunti a intestazioni, piè di pagina e modelli globali. E puoi scegliere come e quando appaiono senza doverli configurare una volta. Non pagina per pagina, come faresti sopra.

Ad esempio, se vogliamo includere le icone dei social media sotto il titolo del post, ma sopra il contenuto del post in ogni post del blog che pubblichiamo, aggiungeremo semplicemente un modulo a suivi social networks. Fare clic sul cerchio Noir + e selezionalo nella finestra di dialogo Inserisci un modulo .

Scegli il modulo social

Quindi trascina il modulo nel punto in cui desideri che appaiano le icone dei social media. (Stiamo usando la modalità wireframe per questo posizionamento). Quindi devi solo aggiungere i social network che desideri visualizzare. Quindi personalizzi il dimensionamento e la colorazione come hai fatto sopra.

Modulo social icona media divi

E proprio così, hai aggiunto alcune icone di social media al generatore di temi Divi. Appariranno su qualsiasi post del blog che crei (in questo esempio).

Aspetto su divi con pulsante di condivisione

E se non ti piace come appaiono, il generatore di temi è facile da personalizzare. Basta trascinarli in una posizione diversa, come la parte superiore della barra laterale.

Divi social sharing module move

Assicurati di fare clic sul pulsante verde Enregistrer all'angolo. Ora ogni post del blog con questo modello sul sito verrà caricato con le icone dei social media nella parte superiore della barra laterale.

icone della barra laterale

Aggiunta di icone di social media all'intestazione e al piè di pagina con Divi Theme Builder

Forse le icone dei social media predefinite nelle impostazioni di Divi non funzionavano per te o non offrivano una personalizzazione sufficiente. In tal caso, puoi sempre utilizzare il generatore di temi per personalizzarlo in modo più completo. 

In qualsiasi modello puoi aggiungere un piè di pagina personalizzato. Questo sostituirà il Divi predefinito. Qualsiasi modello senza un modello personalizzato visualizzerà l'elemento del tema predefinito. Le icone dei social media possono differire da post a archivio di pagina, a seconda delle esigenze degli utenti.

Personalizzazione layout divi tema

Puoi anche aggiungere un piè di pagina globale che sostituirà tutto altri piè di pagina che hai creato. (Questo vale anche per gli organi e le intestazioni globali). 

Se hai progettato 4 piè di pagina personalizzati per articoli, pagine, progetti e categorie, ma poi crei un piè di pagina globale, verrà visualizzato solo il piè di pagina globale. 

I modelli globali sono ottimi per le icone dei social media a livello di sito per, forse, un giornale o un marchio. Mentre i modelli personalizzati con icone social possono essere i migliori per i singoli creatori che fanno parte di una rete.

Aggiungi un piè di pagina divi globale

Utilizzando Divi Builder per intestazioni, piè di pagina e modelli di corpo personalizzati, puoi aggiungere icone di social media a quasi tutte le parti di Divi che desideri. Non sei limitato ai design predefiniti o devi scavare nel file system di WordPress. Inoltre, con il generatore di temi, puoi utilizzare qualsiasi opzione di design di Divi per abbellire le icone dei social media e farle risaltare nel modo giusto per ogni particolare pubblico.

Conclusione

Quando hai le opzioni predefinite del piè di pagina Divi, lo strumento Divi Builder per post e pagine, la potenza del Divi Theme Builder, non c'è motivo per cui devi installarlo un plugin per aggiungere le icone dei social media al tuo sito web. Divi ti dà il pieno controllo su come appaiono le tue icone social e dove si trovano. 

Che tu abbia bisogno di promuovere un marchio, un autore ospite, una scuderia di creatori di contenuti o solo i luoghi in cui puoi essere trovato online, Divi ha un modo per farlo. Siamo unilaterali, ma pensiamo che sia il modo più semplice, semplice ed elegante per aggiungere le icone dei social media al tuo sito web.

Creazione di una griglia di vantaggi dinamici per i prodotti WooCommerce

Creazione di una griglia di vantaggi dinamici per i prodotti WooCommerce

Il modo in cui progetti la pagina del prodotto ha un impatto immediato sul comportamento dei tuoi visitatori. Un design ben realizzato e personalizzato della pagina del prodotto può rendere più facile per i visitatori decidere se vogliono acquistare il tuo prodotto. Se stai cercando un modo per rendere la pagina del tuo prodotto più accattivante, probabilmente ti piacerà questo tutorial. 

Ti mostreremo come includere una griglia dinamica dei vantaggi del prodotto nel tuo progetto utilizzando Divi e il plug-in Advanced Custom Fields. Inizieremo creando un gruppo di campi per i vantaggi. Completeremo quindi i campi personalizzati sulla nostra pagina del prodotto e includeremo il contenuto dinamico nel nostro modello di pagina del prodotto. 

Possibile risultato

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di dimensioni diverse.

Possibile risultato divi

1. Installare il plug-in ACF e il plug-in del gruppo di campi relativi ai vantaggi del prodotto

Installa il plug-in Campi personalizzati avanzati

Per visualizzare i vari vantaggi del prodotto nel back-end dei nostri prodotti, utilizzeremo il plug-in Advanced Custom Fields gratuito. Accedi al tuo Backend di WordPress> Plugin> Aggiungi nuovo> Trova plugin ACF> Installa> Attiva .

Installa un plug-in avanzato per campi personalizzati

Vai a campi personalizzati e aggiungi un nuovo gruppo di campi

Dopo aver installato e attivato il plug-in ACF, sarai in grado di accedere ai tuoi campi personalizzati e aggiungere un nuovo gruppo di campi.

Crea campi acf

Impostazioni del gruppo di campi

Assegna un titolo al tuo nuovo gruppo di campi e consenti che venga visualizzato solo sulle pagine dei prodotti.

  • "Tipo di messaggio" equivale a "Prodotto"
Aggiungi regole

Aggiungi un primo campo

Continua aggiungendo un nuovo campo per il titolo del tuo primo vantaggio di prodotto.

  • Etichetta del campo: titolo del vantaggio 1
  • Tipo di campo: testo
Aggiungi campo ac
Personalizzazione del campo Divi

Ripeti il ​​passaggio per i campi rimanenti

Fai lo stesso per gli altri vantaggi del prodotto e le loro descrizioni. Tutti questi campi richiedono il tipo di campo "Testo" loro assegnato.

  • Titolo del servizio 1
  • Descrizione dei vantaggi 1
  • Titolo del servizio 2
  • Descrizione dei vantaggi 2
  • Titolo del servizio 3
  • Descrizione dei vantaggi 3
  • Titolo del servizio 4
  • Descrizione dei vantaggi 4
Configura i campi acf

2. Aggiungi vantaggi ai prodotti

Apri o aggiungi un nuovo prodotto

Dopo aver creato il gruppo di campi e i campi, è possibile aggiungere i vantaggi del prodotto ai prodotti a livello individuale. Apri un prodotto a tua scelta o creane uno nuovo.

Creazione del prodotto Divi

Completa i campi Vantaggi del prodotto

E soddisfare i vantaggi del prodotto.

Compila i campi divi vantaggi

3. Creare un modello di pagina del prodotto in Divi Theme Builder

Vai a Divi Theme Builder e aggiungi un nuovo modello

È ora di iniziare con Divi! Per creare un nuovo modello, vai al Divi Theme Builder e fai clic su "Aggiungi un nuovo modello".

Costruttore di temi Divi

Usa un modello su tutti i prodotti

Usiamo questo modello su tutti i prodotti, ma sentiti libero di selezionare i prodotti con una categoria o un'etichetta specifica.

Aggiungi tutti i prodotti woocommerce

Accedi all'editor del modello del corpo del modello

Quindi inserire il corpo del modello facendo clic su "Aggiungi un corpo personalizzato" e selezionando "Crea un corpo personalizzato".

Costruzione corpo divi

Modifica la sezione n. 1

Colore di sfondo

Una volta all'interno dell'editor del modello, noterai una sezione. Apri quella sezione e cambia il colore di sfondo in nero.

  • Colore di sfondo: # 000000
Configurazione dello sfondo della sezione Divi

spaziatura

Passa alla scheda di progettazione della sezione e aggiungi alcune imbottiture superiori e inferiori personalizzate.

  • Imbottitura superiore: 10px
  • Imbottitura inferiore: 10px
Configurazione della spaziatura delle sezioni Divi

Aggiungi una nuova linea

Struttura a colonna

Continuiamo aggiungendo una nuova riga alla sezione che ha la seguente struttura:

Configurazione layout modulo di linea

spaziatura

Senza aggiungere alcuna modifica, apriamo le impostazioni delle righe e apportiamo alcune regolazioni della spaziatura.

  • Usa grondaia personalizzata: Sì
  • Larghezza della grondaia: 1
  • Larghezza: 90%
  • Larghezza massima: 100%
Impostazioni spaziatura modulo linea

spaziatura

Rimuovere tutta la spaziatura interna superiore e inferiore.

  • Margine interno elevato: 0px
  • Margine interno basso: 0px
Impostazioni spaziatura modulo linea Divi

Aggiungi il modulo Woo Cart Notice alla colonna

Contenuto dinamico

L'unico modulo di cui abbiamo bisogno in questa riga e sezione è il modulo Avviso carrello Woo. Assicurati che "Questo prodotto" sia selezionato nella sezione dinamica.

  • Prodotto: questo prodotto
Impostazioni woo cart notice module divi

Colore di sfondo

Quindi aprire le impostazioni del modulo e utilizzare uno sfondo trasparente.

  • Colore di sfondo: rgba (0,0,0,0)
Impostazioni divi del modulo carrello Woo

Impostazioni del testo

Passa alla scheda "Design" e cambia il carattere del testo.

  • Carattere testo: Karla
Impostazioni dei caratteri del modulo Divi

Impostazione pulsante

Termina le impostazioni del plugin definendo le impostazioni di stile:

  • Usa stili personalizzati per il pulsante: Sì
  • Dimensione testo pulsante: 20 px
  • Colore testo pulsante: # 000000
  • Sfondo del pulsante: # ffd623
  • Larghezza bordo pulsante: 0px
  • Pulsante bordo arrotondato: 0px
Impostazioni colore modulo avviso carrello Woo
  • Carattere pulsante: Oswald
  • Stile carattere pulsante: Maiusc
Regolazione del design del colore del modulo di avviso del carrello Woo
  • Margine interno elevato: 20px
  • Margine interno basso: 20px
  • Margine interno sinistro: 50px
  • Margine interno destro: 50px
Avviso del carrello di corteggiamento del modulo di progettazione della configurazione

Aggiungi la sezione # 2

Sfondo sfumato

Aggiungi un'altra sezione regolare sotto quella precedente. Quindi aprire le impostazioni e utilizzare uno sfondo sfumato come segue:

  • Colore 1: # 000000
  • Colore 2: #ffffff
  • Posizione di partenza:
    • Desktop: 30%
    • Compressa: 57%
    • Telefono: 54%
  • Posizione finale:
    • Desktop: 30%
    • Compressa: 57%
    • Telefono: 54%
Regolazione posteriore modulo Divi line

spaziatura

Andiamo alla scheda Design e aggiungiamo un margine interno alto.

  • Imbottitura superiore: 150px
Configurazione spaziatura moduli linea Divi

Aggiungi una nuova linea

Struttura a colonna

Continua aggiungendo una nuova linea con la stessa struttura mostrata di seguito:

Configurazione stile linea Divi

dimensionamento

Senza aggiungere ancora alcuna mod, apriremo le impostazioni e cambieremo la spaziatura come segue:

  • Usa grondaie personalizzate: Sì
  • Spazio della grondaia: 1
  • Larghezza: 95%
  • Larghezza massima: 2560 px
  • Allineamento linea: centro
Modulo divi di configurazione grondaia

Spaziatura

Rimuoveremo anche il margine interno superiore.

  • Imbottitura superiore: 0px
Configurazione della spaziatura dei moduli Divi

Elemento principale

E per centrare il contenuto della colonna sul desktop, useremo due righe di codice CSS nell'elemento principale del modulo riga.

Desktop:

display: flex; align-items: center;

Tablet e telefono:

blocco di visualizzazione;
Impostazioni dello stile del modulo della linea Divi

Aggiungi il modulo Woo Image alla colonna 1

Contenuto dinamico

È ora di aggiungere i moduli, inizieremo con il modulo Woo Images nella colonna 1. Assicurati che "Questo prodotto" sia selezionato.

  • Prodotto: questo prodotto
Impostazioni del modulo immagine del prodotto Woocommerce

Effetto di animazione di scorrimento verticale

Aggiungiamo un leggero movimento all'immagine utilizzando l'effetto di scorrimento del movimento orizzontale nella scheda avanzata.

  • Attiva movimento verticale: Sì
  • Inizia offset:
    • Ufficio: -4
    • Tablet e telefono: 0
  • Offset medio: 0
  • Scostamento finale: 0
  • Attivare l'effetto di movimento: metà dell'elemento
Regolazione del modulo immagine Divi

Aggiungi il modulo del titolo Woo alla colonna 2

Contenuto dinamico

Nella colonna 2, la prima mod di cui abbiamo bisogno è una mod del titolo Woo. Assicurati che "Questo prodotto" sia selezionato nell'area del contenuto dinamico.

  • Prodotto: questo prodotto
griglia dei vantaggi del prodotto

Impostazioni del testo del titolo

Quindi vai alla scheda Progettazione e applica uno stile al testo del titolo come segue:

  • Carattere del titolo: Oswald
  • Stile del carattere del titolo: maiuscolo
  • Colore del testo del titolo: # ffd623
  • Dimensione del testo del titolo: 80px
Regolazione del design del modulo del titolo Divi

spaziatura

Completa il modulo del titolo Woo aggiungendo i margini sinistro e destro.

  • Margine sinistro: 5%
  • Margine destro: 5%
Impostazione del modulo del titolo Divi

Aggiungi il modulo di descrizione Woo alla colonna 2

Contenuto dinamico

Passiamo al modulo successivo, che è un modulo di descrizione di Woo. Usiamo il seguente contenuto dinamico per questo:

  • Prodotto: questo prodotto
  • Tipo di descrizione: breve descrizione
Impostazioni del modulo di descrizione del prodotto

Impostazioni del testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

  • Carattere testo: Karla
  • Colore del testo: #dbdbdb
  • Dimensioni del testo: 17 px (desktop e tablet), 15 px (telefono)
  • Altezza della riga di testo: 1,9 em
Descrizione modulo regolazione colore divi

dimensionamento

Quindi modificare la larghezza su diverse dimensioni dello schermo.

  • Larghezza: 59% (desktop), 82% (tablet e telefono)
Regolazione della larghezza del modulo di riepilogo Divi

spaziatura

Completa il modulo di descrizione di Woo aggiungendo valori di margine personalizzati nelle impostazioni di spaziatura.

  • Margine superiore: 50px
  • Margine inferiore: 100px
  • Margine sinistro: 5%
  • Margine destro: 5%
Modulo di descrizione del prodotto Divi

Aggiungi il modulo Blurb alla colonna 2

Contenuto dinamico

Per visualizzare i vantaggi del prodotto che abbiamo aggiunto nella prima parte di questo tutorial, utilizzeremo i moduli Blurb. Aggiungi un primo modulo Blurb e usa il contenuto dinamico del primo vantaggio prodotto per il titolo e il corpo.

  • Titolo: Benefit Title 1
  • Corpo: Descrizione del vantaggio 1
Impostazione del testo del modulo di riepilogo Divi

Carica immagine

Carica un'immagine o utilizza successivamente un'icona a tua scelta. Puoi trovare quelli che abbiamo usato in questo tutorial nella cartella di download che sei riuscito a scaricare all'inizio di questo tutorial.

Configurazione divi di riepilogo del modulo immagine

Impostazioni immagine / icona

Passa alla scheda di progettazione del modulo e modifica le impostazioni dell'immagine / icona come segue:

  • Posizionamento immagine / icona: in alto
  • Allineamento immagine / icona: a sinistra
Modulo di regolazione Divi

Impostazioni del testo del titolo

Successivamente modificheremo le impostazioni del testo del titolo.

  • Carattere del titolo: Oswald
  • Stile carattere titolo: Maiuscolo
  • Dimensione del testo del titolo: 25px
Configura il carattere del modulo di riepilogo divi

Impostazioni del corpo del testo

Insieme alle impostazioni del testo del corpo.

  • Carattere del corpo: Karla
  • Dimensioni del testo: 17 px (desktop e tablet), 15 px (telefono)
  • Altezza della linea del corpo: 1,9 em
Configura div i di riepilogo del modulo di testo

dimensionamento

Quindi vai alle impostazioni di dimensionamento e modifica le larghezze. È importante utilizzare una larghezza principale inferiore al 50%, questo ci permetterà di mostrare due moduli Blurb affiancati nei passaggi successivi.

  • Larghezza immagine: 25%
  • Larghezza: 49%
Configurare il dimensionamento del modulo di riepilogo divi

spaziatura

Aggiungeremo anche spazi attorno al modulo Blurb utilizzando valori di riempimento personalizzati su diverse dimensioni dello schermo.

  • Imbottitura superiore: 8%
  • Imbottitura inferiore: 8%
  • Imbottitura sinistra: 8% (desktop e tablet), 2% (telefono)
  • Imbottitura destra: 8% (desktop e tablet) 2% (telefono)
Configurare la spaziatura del modulo di riepilogo divi

Elemento principale

Ora ci assicureremo che il modulo Riepilogo visualizzi il testo uno accanto all'altro, in due passaggi. Innanzitutto, ci assicureremo che la larghezza del modulo sia inferiore al 50% (come abbiamo fatto nel passaggio precedente). Successivamente, useremo la proprietà sulla riga. Aggiungeremo questa proprietà CSS sull'elemento principale nella sezione avanzata.

display: inline-block;
Aggiungi il modulo divi del codice css

Clonare il modulo di riepilogo 3 volte

Una volta completata la prima mod Blurb, puoi clonarla tre volte. Noterai automaticamente che i moduli Blurb appaiono in una griglia.

Sezione divi del nome del prodotto

Modifica le immagini del modulo Blurb

Modifica l'immagine in ogni pod Blurb duplicato. Puoi trovarli nella cartella dei download che potresti aver scaricato all'inizio di questo articolo.

Immagine del modulo di riepilogo Divi

Modifica il contenuto dinamico del modulo Blurb

Modifica anche il contenuto dinamico di ciascun modulo Blurb duplicato.

  • Titolo: titolo del servizio (2,3 o 4)
  • Corpo: descrizione dei vantaggi (2,3 o 4)
Regole del modulo di riepilogo Divi

Aggiungi bordi ai moduli Blurb individualmente

Blurb module 1 border settings

Ora, per finire di progettare la nostra griglia, aggiungeremo bordi ai moduli Blurb a livello individuale. Apri la prima mod Blurb e usa un bordo dritto.

  • Larghezza del bordo destro: 1px
  • Colore bordo destro: # ffd623
Modulo riepilogo divi configurazione bordo arrotondato

Aggiungi anche un bordo inferiore al primo modulo Blurb.

  • Larghezza del bordo inferiore: 1px
  • Colore bordo inferiore: # 000000
Configura il margine inferiore del divi
Blurb module 2 border settings

Quindi apri il secondo modulo Blurb e usa un bordo inferiore.

  • Larghezza del bordo inferiore: 1px
  • Colore bordo inferiore: # 000000
Riepilogo modulo bordo configurazione divi
Blurb module 3 border settings

Completa il design della griglia aggiungendo un bordo dritto al terzo modulo Blurb.

  • Larghezza del bordo destro: 1px
  • Colore bordo destro: # ffd623
griglia dei vantaggi del prodotto

Aggiungi Woo Aggiungi al carrello Modulo nella colonna 2

Contenuto dinamico

L'ultimo modulo di cui abbiamo bisogno nel nostro design è un modulo Woo Add to Cart. Assicurati che "Questo prodotto" sia selezionato nell'area del contenuto dinamico.

  • Prodotto: questo prodotto
Aggiungi alle impostazioni del modulo divi della scheda

Impostazioni sul campo

Vai alla scheda di progettazione successiva e modifica le impostazioni del campo.

  • Colore di sfondo dei campi: #ffffff
  • Colore del testo del campo: # 000000
Configura lo stile del modulo colore aggiungi al carrello divi
  • Campi arrotondati: 0px (tutti gli angoli)
  • Larghezza del bordo inferiore dei campi: 1px
  • Colore del bordo inferiore dei campi: # 000000
Configurare la spaziatura delle sezioni Div

Impostazioni dei pulsanti

Quindi, stile il pulsante di conseguenza:

  • Usa stili personalizzati per il pulsante: Sì
  • Dimensione del testo del pulsante: 20 pixel
  • Colore testo pulsante: # 000000
  • Colore di sfondo del pulsante: # ffd623
  • Larghezza bordo pulsante: 0px
  • Raggio bordo pulsante: 0px
Configura il design del pulsante divi
  • Carattere pulsante: Oswald
  • Stile carattere pulsante: maiuscolo
Configura il pulsante divi
  • Imbottitura superiore: 20px
  • Imbottitura inferiore: 20px
  • Padding sinistro: 50px
  • Imbottitura destra: 50px
Configurare il dimensionamento del modulo divi

spaziatura

E completa i parametri del modulo aggiungendo valori di margine personalizzati.

  • Margine superiore: 100px
  • Margine sinistro: 5%
Configurare la spaziatura divi

3. Salvare le modifiche del generatore di temi e visualizzare l'anteprima del risultato

Una volta terminata la progettazione del modello di pagina del prodotto, puoi salvare tutte le modifiche di Theme Builder e visualizzare i risultati sui tuoi prodotti!

Salva design divi
Salva modifiche divi

Panoramica

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

Risultato demo

Considerazioni finali

In questo articolo, ti abbiamo mostrato come essere creativo con il tuo prossimo modello di pagina prodotto Divi. Nello specifico, ti abbiamo mostrato come includere una griglia dinamica dei vantaggi del prodotto per aggiungere ulteriori vantaggi alla tua pagina prodotto. Abbiamo creato questo tutorial utilizzando Divi in ​​combinazione con il plug-in Advanced Custom Fields. Puoi anche scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.

Come implementare la modalità dark sul tuo sito con Divi

Come implementare la modalità dark sul tuo sito con Divi

La modalità oscura continua a guadagnare popolarità come comoda opzione per consentire agli utenti di sperimentare il Web con meno affaticamento degli occhi. Ammettiamolo, tendiamo tutti a passare più tempo a fissare gli schermi di quanto probabilmente dovremmo, quindi qualsiasi ulteriore comodità per l'esperienza utente (come la modalità oscura) può fare molto. 

I sistemi operativi, i programmi e i browser in genere includono funzionalità integrate in modalità oscura, ma alcuni sviluppatori la portano a un altro livello includendo un'esperienza in modalità oscura personalizzata per il loro sito web. L'idea è di avere un maggiore controllo sull'aspetto del loro sito Web in modalità oscura senza dover scendere a compromessi sul marchio e / o sul design.

In questo tutorial, ti mostreremo come creare una modalità oscura personalizzata in Divi da zero senza un plug-in. Con questa funzione di attivazione / disattivazione della modalità oscura, avrai il controllo sul design della modalità oscura e avrai una migliore esperienza utente su misura per il tuo marchio.

Cominciamo!

Panoramica

Ecco un'anteprima del design che costruiremo in questo tutorial.

Ecco la modalità oscura personalizzata che stiamo per creare.

Attiva la modalità oscura

Ed ecco il prima e il dopo per la modalità oscura applicata a uno dei nostri layout predefiniti.

Ed ecco l'interruttore della modalità oscura aggiunto a un'intestazione globale. Nota come la modalità chiaro / scuro rimane quando navighi nel sito.

Parte 1: creazione dell'interruttore dalla modalità oscura

In questa prima parte del tutorial, creeremo un interruttore della modalità oscura con una pagina in Divi. Una volta che l'interruttore è stato creato con il codice, sarai in grado di salvarlo nella libreria Divi e aggiungerlo in qualsiasi punto del tuo sito web.

Per iniziare, aggiungi una riga di una colonna alla sezione predefinita quando crei da zero con Divi sul front-end.

Sezione Divi

Aggiungi modulo di riepilogo

Per creare l'interruttore personalizzato, progetteremo un modulo Blurb con un po 'di CSS personalizzato.

Aggiungi un nuovo modulo di testo di presentazione alla riga.

Contenuto

Rimuovi il contenuto fittizio predefinito per il titolo e il corpo. Quindi aggiungi l'icona quadrata al posto dell'immagine.

Modulo di riepilogo Divi

Design

Vai alle impostazioni di progettazione e aggiorna quanto segue:

  • Colore icona: # 666666
  • Allineamento immagine / icona: a sinistra
  • Dimensione carattere icona: 22 pixel
Configurazione dell'icona Divi
  • Larghezza: 50px
  • Allineamento del modulo: centro
  • Altezza: 25px
Configurazione del dimensionamento Divi
  • Margine: 0px basso
  • Angoli arrotondati: 4px
  • Larghezza del bordo: 2px
  • Colore bordo: # 666666
Configurazione bordo Divi

CSS personalizzato

Una volta che il design è a posto, passa alla scheda avanzata. In CSS personalizzato, aggiungi il seguente CSS personalizzato all'elemento principale per assicurarti che l'overflow non sia oscurato dallo stile degli angoli arrotondati.

overflow: visibile! importante;

Quindi aggiungi il seguente CSS personalizzato all'elemento After:

contenuto: "luce"; posizione: assoluta; a sinistra: -35px; in alto: 0px;

Questo aggiunge un'etichetta al modulo Blurb che cambieremo da "chiaro" a "scuro" al clic.

Pulsante di attivazione / disattivazione Divi

Disegno del testo del corpo

Poiché il testo pseudo-elemento del post eredita gli stili del testo del corpo, possiamo aggiungere gli stili del testo del corpo utilizzando le opzioni Divi come segue:

  • Carattere del corpo: Roboto
  • Colore del testo del corpo: # 666666
  • Dimensione del testo del corpo: 13px
  • Spaziatura delle lettere del corpo: 1px
Pulsante di commutazione dei caratteri

Aggiunta di codice personalizzato con un modulo di codice

Per aggiungere il codice necessario (CSS / JQuery) per attivare / disattivare la modalità oscura, useremo un modulo di codice.

Crea un nuovo modulo di codice sotto il modulo Blurb nella stessa colonna.

Aggiungi modulo codice

Quindi incollare il seguente codice nell'area del codice:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

Aggiunta di classi CSS personalizzate

Il codice personalizzato richiede l'aggiunta di una classe CSS personalizzata al modulo o interruttore Blurb. Ciò consentirà al blurb di attivare la modalità oscura e la funzionalità al clic.

Classe del modulo Blurb

Apri le impostazioni del modulo Blurb e aggiungi una classe CSS personalizzata come segue:

  • Classe CSS: et-dark-toggle
Codice css divi

Classe in grado di modalità oscura

Abbiamo anche bisogno di aggiungere una classe CSS personalizzata a ciascun elemento Divi che vogliamo avere la capacità della modalità oscura. Una volta che l'elemento ha la classe CSS, quell'elemento erediterà il CSS personalizzato "modalità oscura" nel codice che abbiamo aggiunto dopo che la modalità oscura è stata abilitata. Questo metodo ci offre un maggiore controllo sul nostro design in modalità oscura, poiché alcuni elementi potrebbero non richiedere uno stile in modalità oscura.

Per iniziare, possiamo aggiungere la modalità oscura alla sezione contenente il nostro interruttore di modalità oscura.

Apri i parametri della sezione e aggiungi la seguente classe CSS:

  • Classe CSS: compatibile con et-dark-mode
Sezione divi selettore CSS

Parte 2: Aggiunta di funzionalità in modalità oscura a una pagina Divi

Ora che abbiamo il codice CSS e le classi in atto, siamo pronti per applicare la funzionalità e il design della modalità oscura a un'intera pagina in Divi. Per fare ciò, utilizzeremo il nostro layout Premade della pagina di destinazione dell'app mobile.

Per aggiungere il layout, apri il menu delle impostazioni nella parte inferiore del visual builder e fai clic sull'icona Aggiungi nuovo layout.

Quindi seleziona il layout della pagina di destinazione dell'app mobile dalla scheda Layout predefiniti.

Assicurati che l'opzione "Sostituisci contenuto esistente" NON sia selezionata. Non vuoi cancellare la sezione con l'interruttore della modalità oscura.

Scegli il layout Divi 1

Poiché lo stile della modalità oscura si applicherà solo agli elementi con la classe CSS "capace e modalità oscura", possiamo scegliere di aggiungere alla pagina in modi diversi.

  1. Possiamo aggiungere la classe CSS a ciascun elemento della pagina singolarmente.
  2. Potremmo estendere la classe CSS agli elementi in tutta la pagina (sarebbe più veloce che farlo manualmente). Ad esempio, potremmo aprire le impostazioni della sezione per la sezione superiore ed estendere la classe CSS per quella sezione a tutte le sezioni della pagina.
  3. Possiamo aggiungere la classe CSS ai valori predefiniti globali dell'elemento. Questo applicherà la classe CSS a tutti gli elementi del sito, aggiungendo funzionalità in modalità oscura in tutto il sito. Ad esempio, potremmo aprire le impostazioni della sezione e fare clic sull'icona predefinita globale per modificare le impostazioni predefinite della sezione globale. Quindi possiamo aggiungere la classe CSS e registrarla come classe CSS per tutte le sezioni del sito.

Aggiunta della classe CSS agli elementi della pagina

Per questo esempio, aggiorneremo gli elementi della pagina aggiungendo la classe CSS ai valori predefiniti globali di sezioni e moduli di testo. Inoltre, man mano che procediamo, faremo alcune aggiunte ad altri elementi della pagina.

Tutte le sezioni

Per aggiungere la classe CSS a tutte le sezioni, apri le impostazioni della sezione superiore che contiene l'interruttore della modalità oscura. Quindi modificare i valori predefiniti globali della sezione e aggiungere la seguente classe CSS ai valori predefiniti globali della sezione:

  • Classe CSS: compatibile con et-dark-mode

Tutte le sezioni specializzate

Aggiungi anche la classe CSS ai valori predefiniti globali nella sezione specializzata.

Aggiungi a tutte le sezioni specializzate

Moduli di testo

Quindi apri le impostazioni per uno dei moduli di testo sulla pagina e aggiungi la stessa classe CSS alle impostazioni di testo globali.

Aggiungi ai moduli di testo

Per testare il risultato, vai alla pagina live e fai clic sulla modalità scura attiva o disattiva nella parte superiore della pagina.

Ecco come dovrebbe apparire la pagina in modalità chiara.

Modalità Clear

Ed ecco come dovrebbe apparire la pagina in modalità oscura.

Modalità oscura

Risorse aggiuntive

Ecco alcune altre risorse che potrebbero interessarti.

Considerazioni finali

Dotare il tuo sito Divi di un interruttore personalizzato della modalità oscura può essere un ottimo modo per migliorare l'esperienza dell'utente e creare un design completamente nuovo che sia piacevole e al tempo stesso allevia l'occhio. Spero che questo ti sia utile.