Le immagini dei bordi e dello sfondo continuano ad essere elementi di design popolari durante la creazione di siti Web. Utilizzando le giuste immagini di sfondo puoi aggiungere personalità e stile al tuo sito senza spendere tempo e denaro in grafica personalizzata. E i bordi sono utili per aggiungere struttura al tuo contenuto.
Oggi uniremo questi due progettando immagini di sfondo come bordi. Divi ha una serie di opzioni utili per personalizzare le immagini di sfondo, semplificando la progettazione di immagini di sfondo per disegni di bordi unici. Questo ci consente di combinare colori, gradienti, ombre dei riquadri e metodi di fusione in tutti i modi creativi.
Cominciamo.
Cosa ti serve per iniziare
Per iniziare, è necessario quanto segue:
- Le Tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (costruttore visivo)
- Immagini da utilizzare contenuto fittizio
Dopodiché avrai una tela bianca su cui iniziare a progettare 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 a volte possono essere un ottimo confine per il tuo contenuto. Ma nella maggior parte dei casi vorrai aggiungere sovrapposizioni all'immagine di sfondo per ottenere colori o rendere gli sfondi più scuri o più chiari. Le sfumature di sfondo sono un ottimo modo per aggiungere livelli alle immagini di sfondo e creare disegni di bordi 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
Non tutti i bordi devono avere bordi dritti. Mescola un po'! Opzioni di angoli arrotondati Divi ti permettono 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.
