Come creare bordi con sfondi su Divi

Le immagini di bordi e di sfondo continuano ad essere elementi di design popolari durante la creazione di siti Web. L'uso delle giuste immagini di sfondo può aggiungere personalità e stile al tuo sito senza sprecare tempo e denaro per la grafica personalizzata. E i bordi sono utili per aggiungere struttura ai tuoi contenuti.

Oggi uniremo questi due punti di forza progettando immagini di sfondo come i bordi. Divi ha una serie di opzioni utili per personalizzare le immagini di sfondo, il che semplifica la progettazione di immagini di sfondo per disegni di bordi unici. Questo ci consente di combinare colori, sfumature, ombreggiature e modalità di fusione in tutti i tipi di modi creativi.

Cominciamo.

Cosa ti serve per iniziare

Per iniziare, è necessario quanto segue:

1. Tema Divi installato e attivo
2. Una nuova pagina creata per costruire da zero sul front-end (costruttore visivo)
3. Immagini da utilizzare per contenuti di fantasia

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Suggerimenti generali per la creazione di motivi per bordi di immagini di sfondo

Prima di iniziare a creare, ecco alcuni suggerimenti generali da tenere a mente quando si creano modelli di bordi di immagini di sfondo.

# 1 Scegli immagini con molta trama

Il più delle volte, vorrai che i tuoi confini siano più stretti. Ciò significa che non sarai in grado di vedere gran parte dell'immagine. È quindi utile utilizzare immagini che abbiano molta consistenza. Ad esempio, puoi utilizzare una foto di un paesaggio, un mazzo di fiori o un'alta torre. Ecco alcune immagini che sto usando per questo tutorial.

# 2 usa gradienti e trasparenza con i bordi dell'immagine di sfondo

Le immagini di sfondo da sole a volte possono essere un ottimo confine per i tuoi contenuti. Ma la maggior parte delle volte, ti consigliamo di aggiungere sovrapposizioni all'immagine di sfondo per ottenere un po 'di colore o per rendere gli sfondi più scuri o più chiari. Le sfumature di sfondo sono un ottimo modo per aggiungere una sovrapposizione alle immagini di sfondo e creare motivi di bordo unici.

# 3 Utilizza le modalità di unione

Utilizzando i metodi di fusione sulle immagini di sfondo è possibile applicare colori e trame unici ai motivi dei bordi. Tutto quello che devi fare è aggiungere un colore di sfondo o un gradiente con l'immagine di sfondo e quindi selezionare una modalità di fusione per l'immagine di sfondo. Colore, Luminosità, Moltiplicazione e Schermo sono alcuni ottimi metodi di fusione per i bordi dell'immagine di sfondo.

Usa le opzioni degli angoli arrotondati per forme uniche

Tutti i bordi non devono avere bordi diritti. Mescola un po '! Le opzioni degli angoli arrotondati di Divi ti consentono di modellare questi angoli in modo creativo.

Usa immagini di sfondo parallasse come bordi

Il bello della parallasse è che dà vita al design con il movimento. Inoltre, se usi immagini di sfondo con parallasse per i tuoi bordi, puoi creare un movimento sottile che risalta e fa risaltare il tuo contenuto.

Disegno del bordo di immagine di sfondo in Divi

Ora che comprendiamo l'idea generale alla base della creazione di modelli di bordi di immagini di sfondo, immaginiamone alcuni insieme. Costruiremo 2 diversi modelli. Ognuno avrà un modulo di presentazione di base che fungerà da contenuto di fantasia. E useremo i parametri della colonna per aggiungere il bordo dell'immagine di sfondo del modulo.

Cominciamo con il nostro primo design.

#1 immagine di sfondo del bordo

Questo primo disegno presenta uno stretto bordo dell'immagine di sfondo con un'ombra dell'area per farlo sembrare più simile a una cornice per il contenuto.

Ecco come progettarlo.

Innanzitutto, aggiungi una riga di due colonne a una sezione normale.

Aggiungi modulo di riepilogo

Quindi aggiungi un modulo blurb nella colonna di sinistra.

Una volta posizionato il blurb, apri le impostazioni del testo esploso ed estrai l'immagine predefinita in modo che siano visibili solo il titolo e il contenuto del corpo.

Quindi dai al tuo testo uno sfondo bianco.

Quindi aggiornare i parametri di progettazione della presentazione come segue:

• Titolo del testo: Oswald
• Polizia del corpo: Lato
• Margine 5% nella parte superiore, 5% nella parte inferiore, 5% a sinistra, 5% a destra
• Tappezzeria: 7% nella parte superiore, 7% nella parte inferiore, 10% a sinistra, 10% a destra
• Angoli arrotondati: 20px in alto a destra, 20px in basso a sinistra
• Box Shadow: vedi screenshot

Aggiungi un'immagine di sfondo alla colonna

Questo si occupa del nostro modulo di presentazione. Ora aggiungiamo il nostro bordo dell'immagine di sfondo. Per fare ciò aggiungeremo un'immagine di sfondo alla colonna contenente il modulo Blurb. Apri le impostazioni della riga, quindi le impostazioni per la colonna 1 e aggiungi il seguente sfondo:

• Immagine di sfondo: [carica l'immagine di tua scelta]
• Colore di sfondo: #303a7a
• Immagine di sfondo della miscela: luminosità

Quindi aggiorna gli angoli arrotondati e l'ombra della scatola come segue:

• Angoli arrotondati: 20px in alto a destra, 20px in basso a sinistra
• Box Shadow: vedi screenshot

Risultato finale

Ora controlla il progetto finale.

Immagine di sfondo del bordo # 2

Il prossimo progetto evidenzia il fatto che l'uso di immagini altamente strutturate può creare bellissimi bordi, specialmente quando li combini con i metodi di fusione delle immagini.

Ecco come progettarlo.

Aggiungi il modulo Blurb

Per creare il design, aggiungeremo il testo blurb alla colonna 2 della stessa riga che contiene il design n. 1. Vai avanti e copia il modulo di layout del design n. 1 e incollalo nella colonna 2. Quindi, aggiorna le impostazioni del modulo di presentazione come segue:

• Angoli arrotondati: ripristina le impostazioni predefinite
• Margine: 10% nella parte superiore, 10% nella parte inferiore, 10% a sinistra, 10% a destra
• Tappezzeria: 15% nella parte superiore, 15% nella parte inferiore, 10% a sinistra, 10% a destra
• Larghezza del bordo: 1px
• Colore del bordo: #ffffff

Aggiungi un'immagine di sfondo alla colonna

Con il nostro modulo attivo, apri le impostazioni della linea e aggiungi un gradiente di sfondo alla colonna 2.

• Sfumatura dello sfondo a sinistra: #f7e0a5
• Gradiente di sfondo destro Colore: rgba (237,240,0,0.79)
• Direzione sfumatura: 90deg
• Posizione iniziale: 50%
• Posizione finale: 0%

Quindi aggiungi un'immagine di sfondo con un piacevole effetto sfumato.

• Immagine di sfondo: [scarica immagine]
• Mix di immagini di sfondo: colore

Come puoi vedere, la modalità di fusione del colore preserva la luminosità dei due gradienti di colore dietro l'immagine per creare un bel motivo del bordo dell'immagine con colori tenui.

Risultato finale

Scopri il risultato finale del design.

Ultimi pensieri

Creare bordi con immagini è un modo semplice per aggiungere bellezza e personalità al tuo design. Il design evidenziato in questo tutorial è fatto per evidenziare le possibilità disponibili con Divi nella progettazione di bordi unici. Pertanto, con le diverse combinazioni di colori, i design sono illimitati. Quindi, prendi alcune immagini ed esplora di più il design dei bordi con le immagini su Divi.

Alla tua salute.