Come utilizzare in modo creativo le nuove opzioni di allineamento delle righe di Divi

Nel tutorial Divi di oggi, ti mostreremo come utilizzare le nuove opzioni di allineamento delle righe in Divi a tuo vantaggio. Combineremo le opzioni di allineamento delle righe con altre opzioni di progettazione integrate per darti un'idea di ciò che è possibile con le opzioni di progettazione avanzate di Divi. L'esempio che ti mostreremo come ricreare non contiene assolutamente codice aggiuntivo, il che significa che chiunque di qualsiasi livello di abilità può ottenere questo design.

Iniziamo!

Anteprima del progetto

Ecco una rapida occhiata a ciò che creeremo oggi (sul desktop):

Ed ecco come apparirà il design sui dispositivi mobili:

Come utilizzare in modo creativo le nuove opzioni di allineamento delle righe di Divi

Iscriviti al nostro canale Youtube

Impostazioni di personalizzazione del tema

Barra dei menu principale

Come puoi notare, abbiamo anche abbinato il menu principale al layout. Per modificare la barra dei menu principale, vai alla dashboard di WordPress > Aspetto > Personalizza > Intestazione e navigazione > Barra dei menu principale > E apporta le seguenti modifiche:

• Nascondi immagine logo: Abilita
• Altezza del menu: 30
• Dimensione del testo: 17
• Spaziatura lettere: -1
• Stile carattere: maiuscolo
• Colore del testo: #FFFFFF
• Colore collegamento attivo: #FFFFFF
• Colore di sfondo: rgba (255, 255, 255, 0)
• Colore di sfondo a discesa: rgba (255, 255, 255, 0)

Sezione Eroi

Dopo aver modificato il menu principale, è il momento di iniziare con il layout. La prima cosa che devi fare è aggiungere una nuova pagina, passare a Visual Builder e aggiungere una nuova sezione standard. Questa prima sezione sarà la nostra sezione degli eroi e avrà il seguente aspetto:

Impostazioni della sezione

Sfondo sfumato

Dopo aver aggiunto la sezione standard, puoi aggiungere uno sfondo sfumato:

• Primo colore: #9e5555
• Secondo colore: #000000
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 50%
• Posizione finale: 50%

Impostazioni riga

Sovrapposizione colore

Quindi, aggiungi una riga a una colonna a quella sezione e apri le sue impostazioni. La prima cosa che dobbiamo fare è aggiungere una sovrapposizione di colori. Puoi scegliere quanto vuoi che sia scura la tua immagine selezionando un colore grigio scuro. In questo caso, abbiamo usato '#595959'.

Immagine di sfondo

La prossima cosa che dovremo fare è aggiungere un'immagine di sfondo alla riga a una colonna e applicare la sovrapposizione del colore. Per mescolare la sovrapposizione di colori e l'immagine di sfondo, scegli "Moltiplica" come Miscela immagine di sfondo.

Allineamento riga centrale

Come la maggior parte dei siti Web, sceglieremo un allineamento della riga centrale per la sezione degli eroi.

Crea riga a larghezza intera

Vogliamo anche che la nostra riga sia a larghezza intera, quindi abiliteremo quell'opzione nella sottocategoria Ridimensionamento della scheda Progettazione.

Imbottitura personalizzata

L'ultima cosa che dovremo fare all'interno delle impostazioni di riga è aggiungere un riempimento personalizzato di "300 px" in alto e in basso.

Primo modulo di testo

Una volta impostate tutte le impostazioni, aggiungeremo il primo modulo di testo alla riga. Scegli il testo che vuoi che appaia nella scheda Contenuto e passa alla scheda Design. All'interno della scheda Progettazione, assicurati che le seguenti impostazioni si applichino alla sottocategoria Testo:

• Carattere del testo: Arvo
• Dimensione carattere testo: 64 (desktop), 47 (tablet), 33 (telefono)
• Colore del testo: #FFFFFF
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Secondo modulo di testo

Quindi, aggiungi un altro modulo di testo. Il secondo Modulo Testo contiene, invece, le seguenti impostazioni:

• Carattere del testo: Lato
• Dimensione carattere testo: 25 (desktop), 18 (tablet), 16 (telefono)
• Colore del testo: #FFFFFF
• Altezza riga di testo: 1,7 em
• Orientamento del testo: al centro

Seconda Sezione

Una volta terminata la sezione degli eroi, possiamo passare alla seconda sezione. Per questa sezione, utilizzeremo l'allineamento della riga a destra anziché quello centrale in combinazione con margini personalizzati e sfondi delle colonne per creare un bellissimo effetto. Dovremo creare due versioni di righe all'interno di questa sezione: la versione desktop e la versione tablet/telefono. Ciò garantirà che il design appaia sbalorditivo su tutti i tipi di schermi.

Impostazioni della sezione

Sfondo sfumato

Dopo aver aggiunto una seconda sezione, aggiungi il seguente sfondo sfumato:

• Primo colore: #000000
• Secondo colore: #d6d6d6
• Tipo di gradiente: lineare
• Direzione del gradiente: 184 gradi
• Posizione di partenza: 20%
• Posizione finale: 20%

Aggiungi riga desktop

Quindi, puoi andare avanti e aggiungere una prima riga a due colonne; questa riga sarà la versione desktop. Fortunatamente, saremo in grado di riutilizzarne la maggior parte anche per la versione tablet/mobile.

Impostazioni riga

Sfondo della colonna

Nella scheda Contenuto, aggiungi "#FFFFFF" come colore di sfondo della seconda colonna.

Allineamento riga a destra

Passa alla scheda Progettazione e seleziona un allineamento di riga a destra.

Crea riga a larghezza intera

Quindi, apri la sottocategoria Ridimensionamento e abilita l'opzione "Crea questa riga a larghezza intera".

Imbottitura personalizzata

L'ultima cosa che devi fare nelle impostazioni della riga è aggiungere un riempimento superiore di "300 px" alla riga e il seguente riempimento alla seconda colonna:

• In alto: 35px
• A destra: 35px
• In basso: 150 px
• Sinistra: 35px

Colonna 1

Primo modulo divisore

Per la prima colonna, inizieremo aggiungendo un modulo divisore. Nella sottocategoria Visibilità della scheda Contenuto, abilita l'opzione "Mostra divisore".

Passa alla scheda Design e seleziona "#FFFFFF" come colore del divisore.

Quindi, scegli "Solido" come Stile divisore e "In alto" come Posizione divisore all'interno della sottocategoria Stili.

L'ultima cosa che devi fare nella scheda Progettazione del Modulo divisore è apportare le seguenti modifiche alla sottocategoria Dimensionamento:

• Peso del divisore: 3
• Altezza: 0px
• Larghezza: 20%
• Allineamento del modulo: a destra

Primo modulo di testo

Proprio sotto il modulo divisore, aggiungi il primo modulo di testo e utilizza le seguenti impostazioni nella sottocategoria Testo della scheda Progettazione:

• Carattere del testo: Arvo
• Dimensione carattere del testo: 30px
• Colore del testo: #000000
• Altezza riga di testo: 1,6 em
• Orientamento del testo: al centro

Clona primo modulo divisore e cambia allineamento

Clona il modulo divisore che abbiamo creato e posizionalo proprio sotto il primo modulo di testo. L'unica cosa che deve essere cambiata è l'allineamento del modulo nella sottocategoria Dimensionamento. Invece di averlo sul lato destro, scegli il sinistro.

Secondo modulo di testo

L'ultima cosa che devi aggiungere alla prima colonna è un altro modulo di testo con le seguenti impostazioni:

• Carattere del testo: Lato
• Dimensione carattere del testo: 14
• Altezza riga di testo: 1,7 em
• Orientamento del testo: al centro

Colonna 2

Modulo immagine

La prima cosa che devi aggiungere alla seconda colonna è un modulo immagine con le seguenti impostazioni nella sottocategoria Spaziatura della scheda Progettazione:

• Mostra spazio sotto l'immagine: Sì
• Margine superiore: -300 px
• Sinistra: -80px

Modulo di testo

Quindi, aggiungi un modulo di testo proprio sotto il modulo immagine e scegli le seguenti impostazioni nella sottocategoria Testo della scheda Progettazione:

• Carattere del testo: Lato
• Dimensione carattere del testo: 14
• Altezza riga di testo: 1,7 em
• Orientamento del testo: al centro

Modulo Segui sui social media

L'ultima cosa che devi aggiungere alla seconda colonna è un modulo di follow sui social media. Aggiungi tutte le icone social che desideri e assicurati di selezionare "Centro" come Allineamento elemento nella scheda Progettazione.

Disattiva su tablet e telefono

Una volta fatto tutto, puoi andare avanti e disabilitare la riga su Telefono e tablet.

Aggiungi riga mobile

Clona riga desktop

Ora che abbiamo già realizzato la versione desktop, realizzare la versione mobile sarà molto più veloce. Clona la riga del desktop e segui i passaggi successivi.

Cambia colonna

Inizia cambiando i moduli che si trovano in entrambe le colonne.

Colore di sfondo della colonna

Successivamente, rimuovi il colore di sfondo della seconda colonna e posizionalo invece nella prima colonna.

Imbottitura colonna

Invece di avere il riempimento personalizzato nella seconda colonna, dovremo averlo nella prima colonna. Inoltre, il padding inferiore non è "150px" ma "35px" come il padding superiore, destro e sinistro.

Usa allineamento riga centrale

Quindi, dovremo anche cambiare l'allineamento delle righe in 'Centro'.

Disabilita sul desktop

Ultimo ma non meno importante, assicurati che la riga sia disabilitata sul desktop.

Terza Sezione

La terza sezione sarà molto simile alla seconda. La creazione di questa sezione sarà facile poiché possiamo assumere la maggior parte delle impostazioni della seconda sezione e apportare alcune modifiche. Una volta completati tutti i passaggi, sarai in grado di assistere al seguente risultato:

Impostazioni della sezione

Sfondo sfumato

Aggiungi una nuova sezione standard e usa il seguente sfondo sfumato:

• Primo colore: #d6d6d6
• Secondo colore: #9e5555
• Tipo di gradiente: lineare
• Direzione gradiente: 184 gradi
• Posizione di partenza: 30%
• Posizione finale: 30%

Margine personalizzato

Quindi, aggiungi anche un margine personalizzato di "-200 px".

Riga del desktop

Stesso modo di lavorare vale per la terza sezione; faremo una versione desktop e tablet/telefono.

Clona riga desktop della seconda sezione

Inizia clonando la riga Desktop della sezione precedente. La maggior parte delle impostazioni sono le stesse e esamineremo le modifiche che devono essere apportate.

Cambia colonna

Una delle modifiche che dobbiamo fare è cambiare i moduli che si trovano in entrambe le colonne.

Colore di sfondo della colonna

Quindi, dovremo anche rimuovere il colore di sfondo della seconda colonna e aggiungere '# 000000' come colore di sfondo della prima colonna.

Imbottitura colonna

Elimina il riempimento personalizzato della colonna 2 e usa "35px" per il riempimento personalizzato in alto, a destra, in basso e a sinistra della prima colonna.

Usa allineamento riga a sinistra

Inoltre, cambia l'allineamento delle righe da destra a sinistra.

Modulo immagine Margine personalizzato

Anche la sottocategoria di spaziatura del modulo immagine richiederà alcune modifiche:

• In alto: -150px
• A destra: -80px

Margine personalizzato del primo modulo divisore

Quindi, aggiungi un margine superiore di "200 px" al primo modulo divisore all'interno della seconda colonna.

Usa colori opposti

Come puoi notare; l'uso dei colori è l'opposto della seconda sezione. Vai avanti e cambia tutti i colori dei caratteri in "#FFFFFF" e i colori del divisore in "#000000".

Disattiva su tablet e telefono

Sebbene la riga sia già disabilitata su tablet e telefono (a causa del clone), puoi andare alla sottocategoria Visibilità se vuoi essere sicuro.

Riga mobile

Clona riga desktop precedente

Per la versione Mobile, clona la riga Desktop che hai appena creato e apporta le modifiche che seguono nella parte successiva di questo post.

Usa allineamento riga centrale

Apri le impostazioni della riga e modifica l'allineamento delle righe al centro.

Modulo immagine Margine personalizzato

Un'altra cosa che devi fare è cambiare il margine superiore del modulo immagine in '-20%'.

Disabilita sul desktop

Ultimo ma non meno importante, assicurati che quest'ultima riga sia disabilitata sul desktop.

Risultato

Seguendo questo tutorial passo dopo passo, dovresti essere in grado di ottenere il seguente risultato sul desktop:

E il seguente risultato sul cellulare:

Pensieri finali

In questo post, ti abbiamo mostrato come puoi utilizzare in modo creativo le diverse opzioni di allineamento delle righe all'interno di Divi Builder. Le persone imparano di più facendo, ecco perché ti abbiamo fornito un esempio che ti abbiamo mostrato passo dopo passo come creare. Se hai domande o suggerimenti; sentiti libero di lasciare un commento nella sezione commenti qui sotto.

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!