Come utilizzare in modo creativo le ombre della casella di riga con Divi

Uno degli aggiornamenti Divi più recenti era tanto atteso; l'integrazione delle ombre scatolari in sezioni, righe e moduli. In questo post, ci concentreremo su come le ombre della casella di riga possono migliorare l'aspetto generale del tuo sito web.

Per illustrare la profondità delle ombre che possono portare al tuo sito web, abbiamo creato un esempio che ti mostreremo come ricreare passo dopo passo.

Risultato

Desktop

Il layout che ti mostreremo come ricreare assomiglia a questo sul desktop:

Mobile

E così sul cellulare:

Come utilizzare in modo creativo le ombre della casella di riga con Divi

Iscriviti al nostro canale Youtube

Formato intestazione

La prima cosa che devi fare è scegliere il giusto formato di intestazione. Vai alla dashboard di WordPress > Personalizza > Intestazione e navigazione > Formato intestazione > E scegli "Centrato" come Stile dell'intestazione .

Barra dei menu principale

Torna a Intestazione e navigazione > Barra dei menu principale > E apporta le seguenti modifiche:

• Nascondi immagine logo: Abilita
• Altezza del menu: 211
• Altezza massima del logo: 30
• Dimensione del testo: 16
• Spaziatura lettere: 2
• Carattere: Lato Light
• Stile carattere: maiuscolo
• Colore del testo: #FFFFFF
• Colore collegamento attivo: #FFFFFF
• Colore di sfondo: rgba (255,255,255,0)
• Colore di sfondo del menu a discesa: rgba (255,255,255,0)

Prima Sezione

Dopo aver apportato le modifiche all'interno di Theme Customizer, è il momento di iniziare con il layout. Crea una nuova pagina, abilita Divi Builder e passa a Visual Builder. Quindi, aggiungi una prima sezione standard alla pagina.

Sfondo sfumato di sezione

Questa sezione avrà bisogno del seguente sfondo sfumato:

• Primo colore: #ea2e7d
• Secondo colore: #edd900
• Tipo di gradiente: lineare
• Direzione del gradiente: 110 gradi
• Posizione di partenza: 0%
• Posizione finale: 100%

Spaziatura

Passa alla scheda Progettazione. All'interno della sottocategoria Spaziatura, usa "100px" per il padding superiore e "200px" per il padding inferiore.

Riga a una colonna

Sfondo sfumato riga

Continua aggiungendo una riga a una colonna alla sezione e utilizza il seguente sfondo sfumato:

• Primo colore: rgba (255,255,255,0)
• Secondo colore: #ea2e7d
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 56%
• Posizione finale: 100%

Sfondo sfumato di colonna

Scorri verso il basso e usa il seguente sfondo sfumato per la colonna di quella riga:

• Primo colore: rgba (237,217,0,0,77)
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente di colonna: lineare
• Direzione gradiente colonna: 180 gradi
• Posizione iniziale della colonna: 0
• Posizione finale della colonna: 100

Dimensionamento

Vai alla scheda Progettazione e applica le seguenti modifiche alla sottocategoria Dimensionamento:

• Usa larghezza personalizzata: Sì
• Larghezza personalizzata: 27%

Spaziatura

Quindi, usa "20px" per il riempimento personalizzato in alto, a destra, in basso e a sinistra della riga.

Modulo di testo

Una volta che hai finito con le impostazioni di riga, aggiungi un modulo di testo e usa le seguenti impostazioni per la sottocategoria di testo:

• Carattere del testo: Arvo
• Dimensione carattere del testo: 98 px
• Colore del testo: #FFFFFF
• Spaziatura delle lettere del testo: 32px
• Altezza riga di testo: 1,4 em
• Orientamento del testo: al centro

Seconda Sezione

Aggiungi un'altra sezione proprio sotto la prima sezione. Questa sezione conterrà tutte le altre righe presenti nel layout.

Sfondo sfumato di sezione

Innanzitutto, usa il seguente sfondo sfumato per questa sezione:

• Primo colore: rgba (255,255,255,0)
• Secondo colore: #592851
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 80%
• Posizione finale: 80%

Spaziatura

Quindi, vai alla scheda Design e aggiungi "100px" al padding inferiore.

Prima riga a due colonne

Colore di sfondo della riga

Aggiungi la prima riga a due colonne a questa nuova sezione e usa '#dddddd' come colore di sfondo.

Sfondo sfumato colonna 1

La prima colonna avrà bisogno del seguente sfondo sfumato:

• Primo colore: #6ac922
• Secondo colore: #b6c1b2
• Tipo di gradiente colonna 1: lineare
• Colonna 1 Direzione gradiente: 136 gradi
• Colonna 1 Posizione iniziale: 23%
• Posizione finale della colonna 1: 100%

Colore di sfondo della colonna 2

Scorri verso il basso e usa "#dddddd" come colore di sfondo della colonna 2.

Dimensionamento

Passa alla scheda Progettazione e utilizza le seguenti impostazioni per la sottocategoria Dimensionamento:

• Usa larghezza personalizzata: Abilita
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

La sottocategoria Spaziatura avrà bisogno del seguente riempimento e margine:

• Imbottitura superiore, destra, inferiore e sinistra: 0px
• Margine superiore: -150 px
• Imbottitura superiore della colonna 1: 235 px (desktop), 0 px (tablet e telefono)
• Imbottitura inferiore della colonna 1: 235 px (desktop), 0 px (tablet e telefono)
• Imbottitura superiore colonna 2: 150 px
• Imbottitura inferiore colonna 2: 150 px

Scatola ombra

Apri la sottocategoria Box Shadow e utilizza le seguenti impostazioni:

• Posizione orizzontale dell'ombra del riquadro: -3px
• Posizione verticale dell'ombra del riquadro: -18px
• Intensità della sfocatura dell'ombra della scatola: 77 px
• Forza di diffusione dell'ombra della scatola: 23 px
• Colore ombra: rgba(0,0,0,0.3)

Primo modulo di testo

Quindi, aggiungi il primo modulo di testo alla seconda colonna e utilizza le seguenti impostazioni per la sottocategoria Testo:

• Carattere del testo: Arvo
• Dimensione carattere del testo: 34px
• Colore del testo: #7a7a7a
• Orientamento del testo: al centro

Secondo modulo di testo

Aggiungi un altro modulo di testo ma utilizza invece le seguenti impostazioni:

• Carattere del testo: Lato Light
• Orientamento del testo: al centro

Apri la sottocategoria Dimensionamento, usa a Larghezza di "75%" e seleziona l'allineamento del modulo centrale.

Infine, aggiungi un margine superiore di "50 px".

Seconda riga a due colonne

Colore di sfondo della riga

Aggiungi un'altra riga a due colonne alla sezione e scegli "# b99bc1" come colore di sfondo.

Colore di sfondo della colonna 1

Scorri verso il basso e scegli "#dddddd" per il colore di sfondo della colonna 1.

Dimensionamento

Passa alla scheda Progettazione e applica le seguenti impostazioni alla sottocategoria Dimensionamento:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Quindi, usa il seguente riempimento:

• Imbottitura superiore, destra, inferiore e sinistra: 0px
• Imbottitura superiore della colonna 1: 150 px (desktop), 0 px (tablet e telefono)
• Imbottitura inferiore della colonna 1: 50 px (desktop), 0 px (tablet e telefono)
• Imbottitura superiore colonna 2: 150 px
• Imbottitura inferiore colonna 2: 150 px

Scatola ombra

Apri la sottocategoria Box Shadow e utilizza le seguenti impostazioni:

• Posizione orizzontale dell'ombra del riquadro: -4px
• Posizione verticale dell'ombra del riquadro: 24 px
• Intensità della sfocatura dell'ombra della scatola: 77 px
• Forza di diffusione dell'ombra della scatola: 23 px
• Colore ombra: rgba(0,0,0,0.3)
• Posizione ombra scatola: Ombra esterna

Primo modulo immagine nella prima colonna

Continua aggiungendo un modulo immagine alla prima colonna. Dopo aver caricato l'immagine, applicare le seguenti impostazioni alla sottocategoria Spaziatura:

• Mostra spazio sotto l'immagine: Sì
• Margine superiore: -500 px (desktop), 0 px (tablet e telefono)
• Margine destro: -50 px (desktop), 0 px (tablet e telefono)
• Margine sinistro: 200 px (desktop), 0 px (tablet e telefono)

Apri la sottocategoria Box Shadow e usa la seguente box shadow:

• Posizione orizzontale dell'ombra del riquadro: 2px
• Posizione verticale dell'ombra del riquadro: 2px
• Forza sfocatura ombra scatola: 0px
• Forza di diffusione dell'ombra della scatola: 30px
• Colore ombra: rgba (255,255,255,0.68)
• Posizione ombra scatola: Ombra esterna

Seconda colonna immagine nella prima colonna

Aggiungi un altro modulo immagine alla stessa colonna e utilizza il seguente margine:

• Margine superiore: -50 px (desktop), 0 px (tablet e telefono)
• Margine destro: 100 px (desktop), 0 px (tablet e telefono)
• Margine inferiore: 30 px
• Margine sinistro: 100 px (desktop), 0 px (tablet e telefono)

Quindi, scorri verso il basso e utilizza la seguente ombra della casella:

• Posizione orizzontale dell'ombra del riquadro: 2px
• Posizione verticale dell'ombra del riquadro: 2px
• Forza sfocatura ombra scatola: 0px
• Forza di diffusione dell'ombra della scatola: 30px
• Colore ombra: rgba (255,255,255,0.68)
• Posizione ombra scatola: Ombra esterna

Clona moduli di testo e posiziona nella seconda colonna

Infine, clona i due moduli di testo della riga precedente e posizionali nella seconda colonna di questa riga. C'è solo una cosa che dovrai cambiare; il colore del testo. Apri le impostazioni di ciascun modulo di testo e cambia il colore del testo in '#FFFFFF'.

Risultato

Desktop

Tutti i passaggi all'interno di questo post porteranno al seguente risultato sul desktop:

Mobile

E il seguente risultato sul cellulare:

Pensieri finali

In questo post, ti abbiamo mostrato come puoi utilizzare in modo creativo le ombre dei riquadri sulle righe. Abbiamo creato un esempio colorato in cui puoi notare chiaramente la profondità che le ombre del riquadro danno a un layout. Se hai domande o suggerimenti; assicurati 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!

Immagine in primo piano di Dmitry Guzhanin / shutterstock.com