Scarica 5 immagini di bordo GRATUITE per Divi

È sempre bello avere risorse extra che puoi usare quando crei un nuovo sito web per te o per un cliente. Ecco perché ci assicuriamo che tu riceva nuovi pacchetti di layout ogni settimana. Ma ci sono anche altre risorse che possono tornare utili, come "immagini di bordo" o immagini che puoi usare lungo un lato o l'altro di un elemento di design Divi per aggiungere un tocco stilistico. L'utilizzo delle opzioni integrate di Divi insieme a queste immagini dei bordi può portare a risultati sorprendenti. In questo post, ti abbiamo fornito 5 diverse immagini dei bordi che puoi scaricare gratuitamente di seguito. Spiegheremo come puoi utilizzare queste immagini di bordo a tuo vantaggio e creare un risultato finale sorprendente.

Arriviamo ad esso!

Anteprima

Diamo un'occhiata alle diverse immagini dei bordi che potrai scaricare più avanti in questo post. Per ognuna delle forme troverai 4 versioni: una in alto, una in basso, una a sinistra e una a destra. Queste immagini ti permetteranno di ottenere lo stesso identico risultato mostrato nelle prime quattro immagini qui sotto:

Scarica i file immagine GRATUITAMENTE

Per mettere le mani sulle immagini di bordo gratuite, dovrai prima scaricarle 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 i file

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.

SCARICA

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!

Approccio

• Una volta scaricata e decompressa la cartella contenente tutte e 5 le immagini del bordo, troverai 4 sottocartelle: bordo superiore, bordo inferiore, bordo sinistro e bordo destro
• Ciò significa che ci sono un totale di 20 file di immagini disponibili per l'uso
• Più avanti in questo post, troverai le impostazioni di accompagnamento che corrispondono a ciascuno dei lati del bordo
• Per finire, puoi combinare le immagini del bordo con sovrapposizioni sfumate
• Queste sovrapposizioni di colore ti aiuteranno a far apparire le immagini vibranti o sottili come desideri
• Sei libero di utilizzare queste immagini di confine senza alcuna restrizione, anche per scopi commerciali

Creare il design generale

Aggiungi nuova sezione

Spaziatura

Iniziamo creando il design generale che abbiamo usato per mostrare le immagini dei bordi. Apri una pagina nuova o esistente, aggiungi una nuova sezione regolare e aggiungi del riempimento personalizzato:

• Imbottitura superiore: 300 px
• Imbottitura inferiore: 300 px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla tua sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni di riga, vai alle impostazioni di ridimensionamento e imposta la larghezza della riga.

• Rendi questa riga a larghezza intera: Sì

Aggiungi il modulo di testo del titolo alla colonna 1

Aggiungi casella di contenuto H2

Iniziamo ad aggiungere alcuni moduli! Il primo modulo necessario è un modulo di testo. Aggiungine uno alla prima colonna e aggiungi la tua copia H2 preferita alla casella del contenuto.

Impostazioni del testo dell'intestazione

Quindi, apporta alcune modifiche alle impostazioni del testo H2 nella scheda Design.

• Carattere titolo 2: Abril Fatface
• Titolo 2: Dimensioni testo: 80 px (desktop), 70 px (tablet), 50 px (telefono)

Spaziatura

Continua aggiungendo un margine nella parte superiore di questo modulo di testo.

• Margine superiore: 150 px

Aggiungi il modulo di testo del collegamento alla colonna 1

Aggiungi collegamento alla casella dei contenuti

Proprio sotto il titolo Modulo di testo che hai appena aggiunto, vai avanti e aggiungi un nuovo modulo di testo. Stiamo utilizzando questo modulo di testo come un pulsante, quindi assicurati di aggiungere un collegamento al CTA.

Link alle impostazioni del testo

Successivamente, modifica le impostazioni del testo del collegamento nella scheda Progettazione.

• Peso del carattere del collegamento: Ultra grassetto
• Stile del carattere del collegamento: maiuscolo
• Colore del testo del collegamento: #000000
• Dimensione del testo del collegamento: 21 px

Spaziatura

Aggiungi un margine superiore per creare spazio anche tra questo modulo di testo e quello precedente.

• Margine superiore: 100 px

Frontiera

Infine, aggiungi un sottile bordo inferiore al link Modulo di testo.

• Larghezza bordo inferiore: 1px
• Colore bordo inferiore: #333333

Aggiungi il modulo di testo descrittivo alla colonna 2

Impostazioni testo

La seconda colonna necessita solo di una descrizione Modulo di testo. Dopo aver aggiunto il contenuto alla casella del contenuto, applica le seguenti impostazioni di testo:

• Dimensioni del testo: 22 px (desktop), 20 px (tablet), 18 px (telefono)
• Altezza riga di testo: 2,6 em
• Orientamento del testo: giustifica

Dimensionamento

Fai in modo che le impostazioni di ridimensionamento corrispondano anche a diverse dimensioni dello schermo:

• Larghezza: 82% (desktop), 100% (tablet e telefono)

Spaziatura

E infine, aggiungi un margine superiore e inferiore.

• Margine superiore: 100 px
• Margine inferiore: 100 px

Aggiungere le forme del bordo

Impostazioni sfondo bordo sinistro

Ora che abbiamo completato il design generale, possiamo iniziare ad aggiungere le immagini dei bordi! Inizieremo con il lato sinistro del bordo. Trova l'immagine del bordo che preferisci nella cartella "Bordo sinistro" e caricala come immagine di sfondo della sezione. Quindi, applica le seguenti impostazioni dell'immagine di sfondo:

• Dimensione dell'immagine di sfondo: dimensione reale
• Posizione immagine di sfondo: centro sinistra
• Ripetizione immagine di sfondo: nessuna ripetizione

Impostazioni sfondo bordo destro

In alternativa, puoi trovare l'immagine del bordo che preferisci nella cartella "Bordo destro" e aggiungerla come sfondo della sezione utilizzando le seguenti impostazioni:

• Dimensione dell'immagine di sfondo: dimensione reale
• Posizione immagine di sfondo: Centro a destra
• Ripetizione immagine di sfondo: nessuna ripetizione

Impostazioni sfondo bordo superiore

La stessa cosa vale per l'immagine del bordo superiore, ma usa invece le seguenti impostazioni di sfondo:

• Dimensione dell'immagine di sfondo: dimensione reale
• Posizione immagine di sfondo: in alto al centro
• Ripetizione immagine di sfondo: nessuna ripetizione

Impostazioni dello sfondo del bordo inferiore

Oppure, ultimo ma non meno importante, puoi trovare le immagini del bordo inferiore nella cartella "Bordo inferiore" e combinarle con queste impostazioni di sfondo della sezione:

• Dimensione dell'immagine di sfondo: dimensione reale
• Posizione immagine di sfondo: in basso al centro
• Ripetizione immagine di sfondo: nessuna ripetizione

Miscela i colori usando la sovrapposizione semitrasparente

Per ciascuna delle forme del bordo incluse, puoi decidere di aggiungere anche una sovrapposizione di colore. Questa sovrapposizione ti aiuta a rendere le immagini dei bordi più sottili. Per aggiungere una sovrapposizione, vai alle impostazioni della sezione e aggiungi uno sfondo sfumato sopra l'immagine di sfondo del bordo.

• Colore 1: #ffffff
• Colore 2: RGB (255,255,255,0.36)
• Direzione gradiente: 141°
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata ad alcuni potenziali progetti che puoi ottenere utilizzando queste immagini di bordo gratuite.

Pensieri finali

In questo post, abbiamo condiviso 5 diverse immagini dei bordi che puoi scaricare gratuitamente. Puoi utilizzare queste immagini di bordo per qualsiasi sito Web su cui stai lavorando senza alcuna restrizione. Ti invitiamo a provarli tutti e a creare fantastici design. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!