Come creare disegni di bordi per immagini di sfondo in Divi
Pubblicato: 2019-08-18I bordi e le immagini di sfondo continuano a essere risorse di design popolari durante la creazione di siti Web. L'utilizzo delle giuste immagini di sfondo può aggiungere personalità e stile al tuo sito senza dover spendere tempo e denaro per la grafica personalizzata. E i bordi sono utili per aggiungere struttura ai tuoi contenuti.
Oggi riuniremo queste due risorse progettando immagini di sfondo come bordi. Divi ha un utile set di opzioni per personalizzare le immagini di sfondo che semplifica la progettazione di immagini di sfondo per design di bordi unici. Questo ci consente di combinare colori, sfumature, ombre scatolate e metodi di fusione in tutti i modi creativi.
Iniziamo.
Sbirciata
Ecco i disegni dei bordi dell'immagine di sfondo che costruiremo insieme.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Iscriviti al nostro canale Youtube
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai avere quanto segue:
- Il tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
- Immagini da utilizzare per contenuti fittizi
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Suggerimenti generali per la creazione di disegni di bordi dell'immagine di sfondo
Prima di iniziare a costruire, ecco alcuni suggerimenti generali da tenere a mente quando si creano progetti di bordi dell'immagine di sfondo.
#1 Scegli immagini con un sacco di texture
La maggior parte delle volte, vorrai che i tuoi confini siano più stretti. Ciò significa che non sarai in grado di vedere gran parte dell'immagine. Quindi aiuta a usare immagini che hanno molta consistenza. Ad esempio, puoi usare una foto di un paesaggio, un mazzo di fiori o un grattacielo di una città. Ecco alcune immagini che sto usando per questo tutorial.
#2 Usa sfumature e trasparenza con i bordi dell'immagine di sfondo
Le immagini di sfondo a volte possono rappresentare un ottimo bordo per i tuoi contenuti. Ma la maggior parte delle volte, vorrai aggiungere alcune sovrapposizioni all'immagine di sfondo per un po' di colore o per rendere gli sfondi più scuri o più chiari. I gradienti di sfondo sono un ottimo modo per aggiungere sovrapposizioni alle immagini di sfondo e creare design di bordi unici.
#3 Usa le modalità di fusione
L'uso dei metodi di fusione sulle immagini di sfondo può implementare colori e trame unici per i disegni dei bordi. Tutto quello che devi fare è aggiungere un colore di sfondo o una sfumatura insieme all'immagine di sfondo e quindi selezionare una modalità di fusione per l'immagine di sfondo. Alcune ottime modalità di fusione per i bordi dell'immagine di sfondo sono colore, luminosità, moltiplicazione e schermo.
Usa opzioni angoli arrotondati per forme uniche
Non tutti i bordi devono avere bordi dritti. Mescola un po'! Le opzioni per gli angoli arrotondati di Divi ti consentono di modellare quegli angoli in modi creativi.
Usa immagini di sfondo parallasse come bordi
La cosa grandiosa della parallasse è che dà vita al design con il movimento. Inoltre, se utilizzi immagini di sfondo con parallasse per i tuoi progetti di bordi, puoi creare movimenti sottili che risaltano e fanno risaltare i tuoi contenuti.
Progettare i bordi dell'immagine di sfondo in Divi
Ora che abbiamo compreso l'idea generale alla base della creazione di disegni di bordi dell'immagine di sfondo, progettiamone alcuni insieme. Stiamo per costruire 4 diversi modelli. Ciascuno avrà un modulo blurb di base che fungerà da contenuto fittizio. E useremo le impostazioni della colonna per aggiungere il bordo dell'immagine di sfondo per il modulo.
Iniziamo con il nostro primo design.
Disegno del bordo dell'immagine di sfondo #1
Questo primo design presenta un bordo stretto dell'immagine di sfondo con un'ombra di riquadro per farlo sembrare più una cornice per il contenuto.
Ecco come progettarlo.
Innanzitutto, aggiungi una riga di due colonne a una sezione normale.
Aggiungi il modulo Blurb
Quindi aggiungi un modulo blurb alla colonna di sinistra.
Una volta che il blurb è a posto, apri le impostazioni del blurb ed elimina l'immagine predefinita in modo che siano visibili solo il titolo e il contenuto del corpo.
Quindi, dai al tuo blurb un colore di sfondo bianco.
Quindi aggiorna le impostazioni del design del blurb come segue:
- Carattere del titolo: Oswald
- Carattere del corpo: Lato
- Margine 5% superiore, 5% inferiore, 5% sinistro, 5% destro
- Imbottitura: 7% sopra, 7% sotto, 10% sinistra, 10% destra
- Angoli arrotondati: 20 px in alto a destra, 20 px in basso a sinistra
- Box Shadow: vedi screenshot
Aggiungi l'immagine di sfondo alla colonna
Questo si occupa del nostro modulo blurb. Ora aggiungiamo il nostro bordo dell'immagine di sfondo. Per fare ciò, aggiungeremo un'immagine di sfondo alla colonna che contiene il modulo blurb. Apri le impostazioni della riga, quindi apri le impostazioni per la colonna 1 e aggiungi il seguente sfondo:
- Immagine di sfondo: [carica un'immagine a tua scelta]
- Colore di sfondo: #303a7a
- Miscela immagine di sfondo: luminosità
Quindi aggiorna gli angoli arrotondati e l'ombra della scatola come segue:
- Angoli arrotondati: 20 px in alto a destra, 20 px in basso a sinistra
- Box Shadow: vedi screenshot
Risultato finale
Ora controlla il progetto finale.
Disegno del bordo dell'immagine di sfondo #2
Questo prossimo design evidenzia come l'utilizzo di immagini con molte trame possa davvero creare bellissimi bordi, specialmente quando li combini con le modalità di fusione delle immagini.
Ecco come progettarlo.
Aggiungi il modulo Blurb
Per creare il disegno, aggiungeremo il contrassegno alla colonna 2 della stessa riga che contiene il disegno n. Vai avanti e copia il modulo blurb dal disegno n. 1 e incollalo nella colonna 2. Quindi aggiorna le impostazioni del modulo blurb come segue:
- Angoli arrotondati: ripristina i valori predefiniti
- Margine: 10% in alto, 10% in basso, 10% a sinistra, 10% a destra
- Imbottitura: 15% in alto, 15% in basso, 10% a sinistra, 10% a destra
- Larghezza bordo: 1px
- Colore bordo: #ffffff
Aggiungi l'immagine di sfondo alla colonna
Con il nostro modulo in posizione, apri le impostazioni della riga e aggiungi un gradiente di sfondo alla colonna 2.
- Colore sfondo sfumato sinistro: #f7e0a5
- Colore di sfondo sfumato a destra: rgba (237,240,0,0,79)
- Direzione gradiente: 90 gradi
- Posizione di partenza: 50%
- Posizione finale: 0%
Quindi aggiungi un'immagine di sfondo con un bel effetto di fusione dei colori.
- Immagine di sfondo: [carica immagine]
- Miscela immagine di sfondo: Colore
Come puoi vedere, la modalità di fusione dei colori preserva la luminosità dei due colori sfumati dietro l'immagine per creare un bel design del bordo dell'immagine con colori tenui.
Risultato finale
Scopri il risultato finale del progetto.
Disegno del bordo dell'immagine di sfondo n. 3
Questo prossimo progetto mette in evidenza l'uso di immagini di parallasse in un disegno di bordo. Utilizzeremo anche un trucco dell'ombra della scatola per creare una sovrapposizione di colori per l'immagine di parallasse.
Ecco come progettarlo.
Per cominciare, aggiungi una nuova riga di due colonne sotto la prima riga e copia il modulo blurb dalla descrizione nella colonna 1 della riga superiore e incollalo nella colonna 1 della nuova riga.
Quindi aggiorna il modulo blurb come segue.
- Colore di sfondo: #333344
- Colore del testo: chiaro
- Margine: 10% in alto, 10% in basso, 10% a sinistra, 10% a destra
- Imbottitura: 10% sopra, 10% sotto
- Angoli arrotondati: 20px
- Ombra scatola: nessuna
Quando il blurb è a posto, apri le impostazioni della riga e aggiorna le impostazioni per la colonna 1 come segue:
- Immagine di sfondo: [carica immagine]
- Usa effetto parallasse: S
- Metodo di parallasse: vero parallasse
- Angoli arrotondati: 20px
- Box Shadow: vedi screenshot
In questo momento il bordo dell'immagine di sfondo con parallasse è un po' prepotente per impostazione predefinita e potrebbe distrarre dal contenuto.
Per rendere l'immagine di sfondo con la parallasse più chiara, possiamo aggiungere un'ombra di riquadro al blurb che fungerà da sovrapposizione leggera.
Apri di nuovo le impostazioni del blurb e aggiungi quanto segue:
- Box Shadow: vedi screenshot
- Forza sfocatura ombra scatola: 0px
- Forza di diffusione dell'ombra della scatola: 200 px
- Colore ombra: #ffffff
Progetto definitivo
Ora diamo un'occhiata al progetto finale.
Disegno del bordo dell'immagine di sfondo #4
Per questo prossimo progetto, combineremo un'immagine di sfondo con sfumature per fungere da bordo superiore e inferiore per il contenuto del blurb.
Aggiungi il modulo Blurb
Per iniziare, copia il modulo blurb nella colonna 2 della riga superiore e incollalo nella colonna 2 della seconda riga.
Al termine, aggiorna le impostazioni del modulo blurb come segue:
- Bordo: [Elimina il bordo ripristinando le impostazioni predefinite del bordo]
- Ombra scatola: nessuna
- Margine: 5% in alto, 5% in basso, 0% a sinistra, 0% a destra
Aggiungi il bordo dell'immagine di sfondo
Per aggiungere il bordo dell'immagine di sfondo per questo disegno, apri le impostazioni della riga e aggiorna le impostazioni per la colonna 2 come segue:
- Immagine di sfondo: [carica immagine]
- Colore sfondo sfumato sinistro: #141777
- Colore di sfondo sfumato a destra: #ffb7eb
- Direzione gradiente: 90 gradi
- Posizione di partenza: 50%
- Posizione finale: 0%
- Immagine di sfondo: [carica immagine]
- Miscela immagine di sfondo: luminosità
Progetto definitivo
Guarda il progetto definitivo.
Pensieri finali
Creare bordi dell'immagine di sfondo con Divi è un modo semplice per aggiungere bellezza e personalità al tuo design. I design presenti in questo tutorial hanno lo scopo di mostrare le opzioni chiave disponibili in Divi per creare design di bordi unici. Tuttavia, con tutte le diverse combinazioni di colori e modalità di fusione disponibili, il tuo unico limite è la tua immaginazione. Quindi, prendi alcune tue immagini ed esplora nuovi ed entusiasmanti design di bordi per il tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!