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

da Blair Jersyer | Juin 10, 2020 | Divi

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.

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

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.

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

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.

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.

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.

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.

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).

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.

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 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.

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

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

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.

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%

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.

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!

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

da Blair Jersyer | Juin 9, 2020 | 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.

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

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

spaziatura

Quindi aggiungere un margine superiore e inferiore personalizzato.

• Margine superiore: 200px
• Margine inferiore: 200px

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.

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

spaziatura

Quindi aggiungi un margine inferiore sul tablet e sul telefono.

• Margine inferiore: 50 pixel (solo tablet e telefono)

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.

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

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ì

Linea

Quindi modificare il colore della linea del modulo.

• Colore della linea: # 000000

dimensionamento

Quindi apportare alcune modifiche ai parametri di dimensionamento.

• Peso del divisore: 3px
• Larghezza: 28%

spaziatura

Aggiungiamo anche un margine superiore.

• Margine superiore: 10px

Aggiungi la sezione # 2

spaziatura

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

• Imbottitura superiore: 0px

overflow

Nascondi anche gli overflow.

• Straripamento orizzontale: nascosto
• Straripamento verticale: nascosto

Aggiungi una nuova linea

Struttura a colonne

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

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

spaziatura

Quindi rimuovere tutte le imbottiture superiore e inferiore predefinite.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

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

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 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)

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ì

Linea

Quindi modificare il colore della linea del modulo.

• Colore della linea: # 000000

dimensionamento

Apportare anche modifiche ai parametri di dimensionamento.

• Peso del divisore: 3px
• Larghezza: 50%

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.

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.

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

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.

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

• Carattere pulsante: trimestrale
• Peso carattere pulsante: grassetto

spaziatura

Aggiungi anche un'imbottitura personalizzata.

• Imbottitura superiore: 50px
• Imbottitura inferiore: 50px
• Padding sinistro: 100px
• Imbottitura destra: 100px

Posizione

E riposiziona il pulsante di conseguenza:

• Posizione: assoluta
• Posizione: in basso a sinistra

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.

Cambia tutto il contenuto

Assicurati di modificare tutto il contenuto in righe duplicate.

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

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

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

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

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

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

Risultato finale

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

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

da Blair Jersyer | Juin 9, 2020 | 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.

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)

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

Aggiungi riga n. 1

Struttura a colonne

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

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

spaziatura

Aggiungiamo anche un'imbottitura superiore e inferiore personalizzata.

• Imbottitura superiore: 100px
• Imbottitura inferiore: 100px

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.

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)

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ì

Linea

Quindi apportare alcune modifiche alle impostazioni della linea.

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

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

Aggiungi una riga # 2

Struttura a colonne

Alla riga successiva! Utilizza la seguente struttura di colonne:

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%

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)

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.

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ì

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

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;

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.

Elimina immagine

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

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

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%

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

Posiziona le impostazioni del testo

Quindi apportare alcune modifiche alle impostazioni del testo di posizione.

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

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%

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)

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

Panoramica

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

ufficio

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

da Blair Jersyer | Juin 8, 2020 | 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:

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 .

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.

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.

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.

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.

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

Quindi selezionane uno dall'elenco a discesa.

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

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.

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 .

È 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.

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.

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 .

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

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 .

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.

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).

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.

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.

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.

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.

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

da Blair Jersyer | Juin 8, 2020 | Divi

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.

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 .

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.

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 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

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

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.

Completa i campi Vantaggi del prodotto

E soddisfare i vantaggi del prodotto.

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".

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.

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".

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

spaziatura

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

• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px

Aggiungi una nuova linea

Struttura a colonna

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

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%

spaziatura

Rimuovere tutta la spaziatura interna superiore e inferiore.

• Margine interno elevato: 0px
• Margine interno basso: 0px

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

Colore di sfondo

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

• Colore di sfondo: rgba (0,0,0,0)

Impostazioni del testo

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

• Carattere testo: Karla

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

• Carattere pulsante: Oswald
• Stile carattere pulsante: Maiusc

• Margine interno elevato: 20px
• Margine interno basso: 20px
• Margine interno sinistro: 50px
• Margine interno destro: 50px

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%

spaziatura

Andiamo alla scheda Design e aggiungiamo un margine interno alto.

• Imbottitura superiore: 150px

Aggiungi una nuova linea

Struttura a colonna

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

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

Spaziatura

Rimuoveremo anche il margine interno superiore.

• Imbottitura superiore: 0px

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;

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

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

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

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

spaziatura

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

• Margine sinistro: 5%
• Margine destro: 5%

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 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

dimensionamento

Quindi modificare la larghezza su diverse dimensioni dello schermo.

• Larghezza: 59% (desktop), 82% (tablet e telefono)

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%

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

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.

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

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

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

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%

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)

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;

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.

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.

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)

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

Aggiungi anche un bordo inferiore al primo modulo Blurb.

• Larghezza del bordo inferiore: 1px
• Colore bordo inferiore: # 000000

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

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

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

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

• Campi arrotondati: 0px (tutti gli angoli)
• Larghezza del bordo inferiore dei campi: 1px
• Colore del bordo inferiore dei campi: # 000000

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

• Carattere pulsante: Oswald
• Stile carattere pulsante: maiuscolo

• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px
• Padding sinistro: 50px
• Imbottitura destra: 50px

spaziatura

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

• Margine superiore: 100px
• Margine sinistro: 5%

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!

Panoramica

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

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

da Blair Jersyer | Juin 1, 2020 | 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.

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.

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.

Design

Vai alle impostazioni di progettazione e aggiorna quanto segue:

• Colore icona: # 666666
• Allineamento immagine / icona: a sinistra
• Dimensione carattere icona: 22 pixel

• Larghezza: 50px
• Allineamento del modulo: centro
• Altezza: 25px

• Margine: 0px basso
• Angoli arrotondati: 4px
• Larghezza del bordo: 2px
• Colore bordo: # 666666

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.

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

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.

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

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

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.

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.

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.

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.

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

Risorse aggiuntive

Ecco alcune altre risorse che potrebbero interessarti.

• Come personalizzare la tipografia e il layout su Divi
• Come aggiungere una chiamata scorrevole richiudibile all'azione su Divi
• Come allineare elementi sulla stessa linea su Divi
• Come creare sezioni animate facendo clic su Divi Builder

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.