Come creare bellissimi bordi dell'immagine usando le nuove opzioni di Divi

Nel tutorial Divi di oggi, ti mostreremo come creare bellissimi bordi di immagini sul prossimo sito web che costruirai. Lo scopo di questo post è dimostrare come puoi creare bellissimi risultati che corrispondano alle immagini che stai utilizzando (e anche al resto del tuo sito web).

Con le nuove opzioni Divi, ottenere risultati sorprendenti è più facile che mai. Dovrai solo apportare alcune modifiche che ti mostreremo come fare e sarai pronto per portare il tuo web design al livello successivo. Tutti gli 8 esempi che condivideremo con te non utilizzeranno nient'altro che le opzioni integrate offerte da Divi Builder e Image Module.

Sbirciata

Diamo un'occhiata ai risultati che puoi aspettarti da questo post:

Come creare bellissimi bordi dell'immagine usando le nuove opzioni di Divi

Iscriviti al nostro canale Youtube

Sfondo sfumato

La prima possibilità che hai per ottenere bellissimi bordi dell'immagine è utilizzare solo uno sfondo sfumato. Sperimentando con le varie impostazioni di sfondo sfumato, puoi ottenere risultati semplici ma eleganti. Ti mostreremo tre esempi di bordi dell'immagine costituiti esclusivamente da uno sfondo sfumato.

Standard

Il primo esempio che tratteremo è il più semplice e modesto di tutti; un bordo dell'immagine a gradiente standard. Il risultato ti mostreremo come creare assomiglia a questo:

Scheda Contenuto

Inizia scegliendo uno sfondo sfumato nella scheda Contenuto. Per questo esempio, abbiamo utilizzato le seguenti impostazioni:

• Primo colore: #081e8c
• Secondo colore: #764f9b
• Tipo di gradiente: lineare
• Direzione gradiente: 269 gradi
• Posizione di partenza: 40%
• Posizione finale: 60%

Scheda Progettazione

La prossima e ultima cosa che devi fare è aggiungere un po' di riempimento all'immagine. È così semplice. Vai alla scheda Design e aggiungi "10px" all'imbottitura superiore, inferiore, destra e sinistra.

Lati

Successivamente, abbiamo un bordo dell'immagine che viene visualizzato solo sul lato sinistro e destro dell'immagine. L'uso di questo tipo di bordo dell'immagine dà un bel tocco in più all'immagine senza mettere troppo a fuoco il bordo stesso.

Scheda Contenuto

Per ottenere questo tipo di bordo dell'immagine, inizia aggiungendo il seguente sfondo sfumato all'immagine:

• Primo colore: rgba (255,255,255,0)
• Secondo colore: #0a8da8
• Tipo di gradiente: lineare
• Direzione gradiente: 166°
• Posizione di partenza: 29%
• Posizione finale: 52%

Scheda Progettazione

Nella scheda Design, l'unica cosa di cui avrai bisogno è "10px" di imbottitura per il lato destro e sinistro.

Un angolo

Andando avanti, puoi anche creare sfondi ad angolo per le immagini sul tuo sito web. Questo tipo di bordo è ottimo da usare quando vuoi enfatizzare un colore che viene utilizzato all'interno dell'immagine.

Scheda Contenuto

Per il terzo esempio di immagine, usa il seguente sfondo sfumato:

• Primo colore: rgba (58,8,1,0,58)
• Secondo colore: rgba (41,196,169,0)
• Direzione gradiente: 152 gradi
• Posizione di partenza: 34%
• Posizione finale: 28%

Scheda Progettazione

Quindi, aggiungi anche "20px" a ciascuna delle imbottiture.

Bordo immagine e sfondo sfumato

Un'altra possibilità che hai è combinare uno sfondo sfumato con un bordo dell'immagine. Anche questo può fornire risultati sorprendenti, come potrai vedere nei prossimi quattro esempi.

Gradiente sottile

La prima combinazione di sfondo sfumato e bordo dell'immagine è semplice ma bella. Usando gli stessi colori per lo sfondo sfumato e il bordo, il bordo dell'immagine sembra in qualche modo riempirsi di colore.

Scheda Contenuto

Inizia aggiungendo le seguenti impostazioni di sfondo sfumato alla tua immagine:

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

Scheda Progettazione

Passa alla scheda Progettazione e utilizza le seguenti impostazioni nella sottocategoria Bordo:

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

Infine, aggiungi un riempimento di "7px" a tutte le opzioni di riempimento.

Sagomato

Successivamente, abbiamo un esempio che è ottimo per attirare l'attenzione dei visitatori. L'immagine stessa contiene in questo caso per lo più colori più chiari, il che crea un buon equilibrio con il bordo più scuro.

Scheda Contenuto

Le impostazioni dello sfondo sfumato di cui avrai bisogno per questo bordo dell'immagine sono le seguenti:

• Primo colore: rgba (53,0,188,0.1)
• Secondo colore: #680061
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 80%
• Posizione finale: 80%

Scheda Progettazione

Procedi alla scheda Design e usa il seguente bordo:

• Usa bordo: Sì
• Colore bordo: #9a00bc
• Larghezza bordo: 1px
• Stile bordo: solido

Scorri verso il basso e aggiungi il seguente riempimento all'immagine:

• In alto: 7px
• A destra: 5px
• In basso: 7px
• Sinistra: 5px

Doppio bordo

Anche l'uso di un doppio bordo in combinazione con uno sfondo sfumato può fornire risultati sorprendenti. Guarda:

Scheda Contenuto

Il colore di sfondo sfumato che abbiamo usato in questo esempio è il seguente:

• Primo colore: rgba (224,43,32,0.61)
• Secondo colore: rgba (12,113,195,0.87)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 71%
• Posizione finale: 93%

Scheda Progettazione

Andando avanti, usa le seguenti impostazioni per la sottocategoria Border:

• Usa bordo: Sì
• Colore bordo: #f4f4f4 (corrisponde al colore di sfondo della sezione)
• Larghezza bordo: 8px
• Stile bordo: doppio

E aggiungi "10px" all'imbottitura superiore, inferiore, destra e sinistra dell'immagine.

Angoli triangolari

Andando avanti, puoi anche creare alcuni piccoli angoli nel tuo bordo usando l'opzione di sfondo sfumato in combinazione con un bordo tratteggiato.

Scheda Contenuto

Per ottenere il bordo dell'immagine che ti abbiamo mostrato sopra, usa le seguenti impostazioni di sfondo sfumato:

• Primo colore: rgba (163,103,6,0)
• Secondo colore: #e09900
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 97%
• Posizione finale: 97%

Scheda Progettazione

Nella scheda Design, dovremo avere anche le seguenti impostazioni del bordo:

• Usa bordo: Sì
• Colore bordo: #e09900
• Larghezza bordo: 2px
• Stile bordo: tratteggiato

Infine, avremo bisogno di un'imbottitura di "8px" per l'imbottitura superiore, inferiore, sinistra e destra.

Motivo e sfondo sfumato

L'ultima possibilità che vogliamo mettere sotto i riflettori è usare un motivo e uno sfondo sfumato allo stesso tempo. Ciò ti consente di giocare con l'aspetto delle tue immagini.

Giocoso

Questo bordo contiene uno sfondo sfumato di due colori che vengono utilizzati anche all'interno dell'immagine stessa. Aggiungendo anche un motivo di sfondo, l'immagine dona un po' più di atmosfera al tuo sito web.

Scheda Contenuto

Per l'ultimo esempio, utilizzeremo le seguenti impostazioni di sfondo sfumato:

• Primo colore: rgba (4,49,96,0,51)
• Secondo colore: rgba (119,74,15,0,51)
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 0%
• Posizione finale: 100%

Scheda Progettazione

Successivamente, aggiungiamo anche uno sfondo a motivo. Il modello che abbiamo usato in questo esempio proviene da Toptal. Puoi usare i loro modelli per tutti i tipi di scopi, assicurati solo di accreditarli nel tuo codice come menzionato nelle loro FAQ. Dopo aver aggiunto lo sfondo del motivo, utilizza anche le seguenti impostazioni:

• Dimensione immagine di sfondo: copertina
• Posizione immagine di sfondo: Centro
• Ripetizione immagine di sfondo: nessuna ripetizione
• Miscela immagine di sfondo: Moltiplica

L'ultima cosa che devi fare è aggiungere un riempimento di '12px' al riempimento superiore, inferiore, destro e sinistro dell'immagine.

Pensieri finali

In questo post, ti abbiamo mostrato alcuni modi diversi per creare bellissimi bordi delle immagini. Queste opzioni ti danno una prospettiva sulle cose che puoi fare con le nuove opzioni Divi senza usare alcun CSS aggiuntivo. 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 evidenza di Mr Aesthetics / shutterstock.com