Come combinare le opzioni di sfondo immagine e ombra scatola con Divi

In questo post Divi, ti mostreremo come combinare le opzioni di sfondo e ombra di un modulo immagine. Questo post ha lo scopo di stimolare la tua immaginazione e mostrarti come le nuove funzionalità Divi possono funzionare con quelle esistenti, portando a risultati creativi. Per aiutarti nel processo creativo, abbiamo creato 4 combinazioni che ti mostreremo come ricreare passo dopo passo. Diamo un'occhiata agli esempi.

Primo esempio

Desktop

Mobile

Secondo esempio

Desktop

Mobile

Terzo esempio

Desktop

Mobile

Quarto esempio

Desktop

Mobile

Come combinare le opzioni di sfondo immagine e ombra scatola con Divi

Iscriviti al nostro canale Youtube

Primo esempio

Ora che ti abbiamo mostrato cosa puoi aspettarti da questo post, diamo un'occhiata a come puoi ricreare il seguente esempio con solo pochi passaggi all'interno di Divi e senza codice CSS aggiuntivo:

Aggiungi riga a due colonne

Colore di sfondo della colonna 1

Aggiungi una riga a due colonne a una sezione standard e scegli "rgba (12,113,195,0.11)" come Colore di sfondo della colonna 1.

Spaziatura

Quindi, passa alla scheda Progettazione. Aggiungi "200 px" al margine superiore e "150 px" al riempimento inferiore della prima colonna.

Aggiungi modulo immagine alla prima colonna (desktop e tablet)

Dimensionamento

Quindi, aggiungi un modulo immagine alla prima colonna della riga che hai creato. Questo modulo immagine si applica solo a desktop e tablet. La prima cosa che devi fare è cambiare la Larghezza in '94%'.

Spaziatura

Quindi, apri la sottocategoria Spaziatura, abilita l'opzione "Mostra spazio sotto l'immagine", aggiungi "-150 px" al margine superiore e "-110 px" al margine sinistro dell'immagine.

Scatola ombra

Scorri più in basso la scheda e applica la seguente ombra di casella all'immagine:

• Posizione orizzontale dell'ombra del riquadro: 80 px
• Posizione verticale dell'ombra del riquadro: 80 px
• Forza sfocatura ombra scatola: 0px
• Forza di diffusione dell'ombra della scatola: 6px
• Colore ombra: rgba (173,173,173,0.79)
• Posizione ombra scatola: Ombra esterna

Visibilità

Infine, vai alla scheda Avanzate e disabilita il Modulo immagine sul cellulare.

Modulo clone immagine (telefono)

La maggior parte delle impostazioni che abbiamo utilizzato per la versione desktop e tablet di Image Module sono le stesse anche per la versione mobile. Ecco perché cloneremo il modulo immagine e apporteremo alcune modifiche aggiuntive che si adatteranno allo schermo mobile.

Cambia ombra scatola

La prima cosa che dovremo cambiare è l'ombra della scatola. Invece di utilizzare le impostazioni del desktop, utilizza le seguenti impostazioni:

• Posizione orizzontale dell'ombra del riquadro: 33 px
• Posizione verticale dell'ombra del riquadro: 78 px
• Forza sfocatura ombra scatola: 0px
• Forza di diffusione dell'ombra della scatola: 6px
• Colore ombra: rgba (173,173,173,0.79)
• Posizione ombra scatola: Ombra esterna
  

Visibilità

La prossima e ultima cosa che dovremo fare è cambiare la visibilità di questo secondo modulo immagine. Invece di disabilitarlo sul telefono, vai avanti e disabilitalo sia su tablet che su desktop.

Secondo esempio

Successivamente, abbiamo il secondo esempio che assomiglia a questo sul desktop:

Aggiungi riga a due colonne

Sfondo sfumato riga

Aggiungi una nuova riga a due colonne alla sezione su cui stai lavorando e usa il seguente sfondo sfumato per essa:

• Primo colore: rgba (237,240,0,0,55)
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 50,8%
• Posizione finale: 50,8%

Dimensionamento

Passa alla scheda Design e abilita l'opzione "Rendi questa riga a larghezza intera".

Spaziatura

Infine, aggiungi un'imbottitura superiore di "200 px" alla seconda colonna.

Aggiungi modulo immagine alla prima colonna

Spaziatura

Una volta terminato con le impostazioni della riga, vai avanti e aggiungi un modulo immagine alla prima colonna. Apri la sottocategoria Spaziatura nella scheda Progettazione e aggiungi "30px" al padding superiore, destro, inferiore e sinistro.

Scatola ombra

Scorri verso il basso la stessa scheda e utilizza le seguenti impostazioni per la sottocategoria Box Shadow:

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 2px
• Intensità sfocatura ombra scatola: 56px
• Forza di diffusione dell'ombra della scatola: 12px
• Colore ombra: rgba(0,0,0,0.3)
• Posizione ombra scatola: Ombra esterna

Clona modulo immagine e posiziona nella seconda colonna

Le impostazioni per il modulo immagine all'interno della seconda colonna sono le stesse. Vai avanti, clona il modulo immagine e posizionalo nella seconda colonna.

Terzo esempio

Andando avanti, ti mostreremo come ottenere il seguente risultato:

Aggiungi riga a una colonna

Colore di sfondo della colonna 1

Aggiungi una riga a una colonna e scegli "rgba(193,145,163,0.6)" come colore di sfondo della prima colonna.

Aggiungi modulo immagine

Immagine di sfondo sfumata

Quindi, aggiungi un modulo immagine alla colonna e utilizza il seguente sfondo sfumato per esso:

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

Frontiera

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

• Usa bordo: Sì
• Colore bordo: #000000
• Larghezza bordo: 3px
• Stile bordo: solido

Dimensionamento

Quindi, aggiungi la seguente larghezza al modulo immagine:

• Scrivania: 85%
• Tablet e telefono: 100%

Spaziatura

Quindi, apri la sottocategoria Spaziatura e applica il seguente riempimento e margine al Modulo immagine:

• Margine sinistro: 80 pixel (desktop), 0 pixel (tablet e telefono)
• Imbottitura superiore, destra, inferiore e sinistra: 30 px

Scatola ombra

Infine, aggiungi un'ombra di scatola con le seguenti impostazioni:

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

Quarto esempio

E infine; l'ultimo esempio che ti mostreremo come ricreare assomiglia a questo:

Aggiungi riga a due colonne

Inizia aggiungendo una riga a due colonne. Questa riga, a differenza degli esempi precedenti che abbiamo trattato in questo post, non necessita di impostazioni aggiuntive.

Aggiungi modulo immagine alla prima colonna

Sfondo sfumato

Aggiungi un modulo immagine alla prima colonna della riga che hai appena creato e usa il seguente sfondo sfumato per questo:

• Primo colore: rgba (255,255,255,0)
• Secondo colore: rgba (92,0,158,0.46)
• Tipo di gradiente: lineare
• Direzione del gradiente: 138 gradi
• Posizione di partenza: 55%
• Posizione finale: 55%

Spaziatura

Quindi, passa alla scheda Progettazione e utilizza le seguenti impostazioni per la sottocategoria Spaziatura:

• Mostra spazio sotto l'immagine: Sì
• Imbottitura destra: 30px
• Imbottitura inferiore: 30px

Aggiungi il secondo modulo immagine alla prima colonna

Colore di sfondo

Continua aggiungendo un altro modulo immagine proprio sotto il precedente e usa 'rgba(96,96,96,0.42)' come colore di sfondo.

Spaziatura

Quindi, vai alla scheda Progettazione e utilizza le seguenti impostazioni per la sottocategoria Spaziatura:

• Mostra spazio sotto l'immagine: Sì
• Margine superiore: -250 px (desktop), -150 (tablet), -100 (telefono)
• Margine destro: -150 px (desktop), 0 px (tablet e telefono)
• Margine sinistro: 150 px
• Imbottitura superiore: 30px
• Imbottitura sinistra: 30px

Scatola ombra

Infine, apri la sottocategoria Box Shadow e utilizza le seguenti impostazioni:

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 2px
• Forza sfocatura ombra scatola: 0px
• Forza di diffusione dell'ombra della scatola: 24 px
• Colore ombra: #e2e2e2
• Posizione ombra scatola: Ombra esterna

Pensieri finali

Gli esempi che abbiamo condiviso in questo post sono solo una frazione di quanto puoi spingerti lontano con l'ombra della scatola di Divi e le opzioni di sfondo. Puoi creare design unici utilizzando il modulo immagine che migliorerà l'aspetto generale del tuo sito web. 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 Creative Stall / shutterstock.com