Scarica 6 modelli di sfondo ripetitivi GRATUITI per Divi
Pubblicato: 2018-09-06Dare al tuo sito web quell'attenzione in più ai dettagli può influenzare il tuo stile generale di web design più di quanto pensi. Di solito sono i piccoli dettagli che aiutano le persone a distinguere un tipo di sito web modello da uno personalizzato.
Esistono diversi modi per avvicinarsi al raggiungimento di progetti elevati. Una delle cose che puoi fare è utilizzare sottili modelli di ripetizione dello sfondo per qualsiasi elemento di design sulla tua pagina. Questo non solo ti aiuta a ridurre le dimensioni dell'immagine di sfondo, ma ti aiuta anche a riempire gli sfondi vuoti senza sopraffarli.
In questo post, sarai in grado di scaricare 6 modelli di sfondo di base ma versatili che puoi utilizzare durante la creazione di qualsiasi tipo di sito Web con Divi. Questi modelli sono fantastici da tenere in tasca quando hai bisogno di ravvivare il tuo web design.
Anteprima
Diamo un'occhiata al tipo di risultato che puoi ottenere sul tuo sito web utilizzando questi modelli di sfondo:
Scarica i modelli di sfondo GRATUITAMENTE
Per mettere le mani sui modelli di sfondo gratuiti, 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ì e venerdì! 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!
Approccio
- Una volta scaricata la cartella e decompressa, troverai 5 cartelle diverse
- Ognuna di queste cartelle rappresenta un diverso set di dimensioni: 1000×1000, 500×500, 100×100, 50×50 e 25×25
- Sebbene questi siano tecnicamente gli stessi modelli, il risultato finale sul tuo sito web apparirà diverso a seconda del set di dimensioni che decidi di utilizzare
- Stiamo combinando questi modelli con le opzioni di sfondo di Divi per creare l'effetto di ripetizione dello sfondo
- Ciò non solo manterrà l'immagine di sfondo coerente, ma ridurrà anche la necessità di immagini di sfondo ad alta risoluzione
Come funziona
Scegli una sezione sulla tua pagina
Puoi applicare questi motivi di sfondo a qualsiasi elemento di design sulla tua pagina. Lo dimostreremo aggiungendo come sfondo della sezione. Ma sentiti libero di aggiungere questi stessi modelli anche ad altri elementi di design come righe, colonne e moduli. Più piccolo è il tuo elemento di design, più piccola sarà la dimensione del tuo modello, a seconda di come vuoi che l'aspetto e la sensazione risultino.
Scegli le tue dimensioni preferite
Modello 1: 1000×1000
Impostazioni sfondo
Per ottenere il risultato che abbiamo condiviso sopra, vai avanti e individua il modello n. 1 nella cartella 1000 × 1000 del tuo download. Quindi, caricalo nelle impostazioni di sfondo della tua sezione e utilizza le seguenti impostazioni insieme ad esso:
- Dimensione dell'immagine di sfondo: dimensione reale
- Posizione immagine di sfondo: Centro
- Ripetizione immagine di sfondo: Ripeti
Con sovrapposizione sfumatura
Vuoi fondere il motivo usando sfondi sfumati? Puoi farlo anche tu. Nell'esempio seguente, abbiamo utilizzato un colore solido e uno semitrasparente in combinazione con il posizionamento del gradiente sopra l'immagine di sfondo per creare l'effetto di fusione.
- Colore 1: #E2E2E2
- Colore 2: RGB (255,255,255,0.37)
- Tipo di gradiente: lineare
- Direzione del gradiente: 181°
- Posizione di partenza: 7%
- Posizione finale: 35%
Modello #1 : 500×500
Impostazioni sfondo
Puoi anche far apparire il motivo solo orizzontalmente o verticalmente usando le opzioni di sfondo integrate di Divi. Per l'esempio sopra, abbiamo utilizzato il file immagine modello n. 1 di dimensioni 500×500. Dopo averlo caricato, combinalo con le seguenti impostazioni di sfondo:
- Dimensione dell'immagine di sfondo: dimensione reale
- Posizione immagine di sfondo: in alto al centro
- Ripeti immagine di sfondo: Ripeti X (orizzontale)
Modello n. 2 : 500 × 500
Impostazioni sfondo
Abbiamo fatto lo stesso usando il secondo modello nella tua cartella 500×500.
- Dimensione dell'immagine di sfondo: dimensione reale
- Posizione immagine di sfondo: in alto al centro
- Ripeti immagine di sfondo: Ripeti X (orizzontale)
Modello n. 3 : 100 × 100
Impostazioni sfondo
Per il prossimo esempio, individua il motivo n. 3 nella cartella delle dimensioni 100×100 e combinalo con le seguenti opzioni di sfondo che faranno sì che il motivo occupi l'intera sezione:
- Dimensione dell'immagine di sfondo: dimensione reale
- Posizione immagine di sfondo: Centro
- Ripetizione immagine di sfondo: Ripeti
Modello #4 : 50×50
Impostazioni sfondo
Più piccole sono le dimensioni, maggiore è la frequenza del pattern. Individua lo sfondo n. 4 nella cartella delle dimensioni 50×50 e combinalo con le seguenti impostazioni di sfondo:
- Dimensione dell'immagine di sfondo: dimensione reale
- Posizione immagine di sfondo: in alto al centro
- Ripetizione immagine di sfondo: Ripeti
Modello n. 5 : 100×100
Impostazioni sfondo
Il quinto modello offre un design sorprendente e sottile quando si utilizza il set di dimensioni 100×100 con le seguenti impostazioni di sfondo:
- Dimensione dell'immagine di sfondo: dimensione reale
- Posizione immagine di sfondo: in alto al centro
- Ripetizione immagine di sfondo: Ripeti
Modello #6 : 25×25
Impostazioni sfondo
Ultimo ma non meno importante, individua il motivo n. 6 nella cartella delle dimensioni 25 × 25 e caricalo sullo sfondo della sezione insieme alle seguenti impostazioni di sfondo:
- Dimensione dell'immagine di sfondo: dimensione reale
- Posizione immagine di sfondo: in alto al centro
- Ripetizione immagine di sfondo: Ripeti
Usa anche i modelli per gli sfondi di righe, colonne e moduli
Gli esempi che abbiamo trattato sopra sono solo alcune delle opzioni che hai. Otterrai un risultato diverso per ogni motivo se sperimenterai le diverse dimensioni incluse. Inoltre, puoi anche utilizzare le opzioni di sfondo di Divi per creare vari risultati. Non sei limitato a utilizzare questi modelli di sfondo solo per le sezioni. Puoi usarli per ogni elemento di design in Visual Builder di Divi. La dimensione del tuo modello deve corrispondere alla dimensione del tuo elemento. Usa i modelli per gli sfondi di righe, colonne e moduli per creare design personalizzati e unici.
Anteprima
Ora che hai gestito alcuni risultati finali diversi che puoi ottenere con i modelli di sfondo, diamo un'occhiata finale al risultato finale:
Pensieri finali
Nel web design, è importante prestare attenzione ai dettagli. Esistono molti modi per farlo, ma in questo post abbiamo trattato specificamente l'utilizzo di motivi di sfondo per ottenere sfondi sottili per elementi di design utilizzando Divi. Ti abbiamo fornito 6 diversi modelli che puoi scaricare e utilizzare gratuitamente. Per ciascuno dei modelli, abbiamo anche fornito dimensioni diverse che portano a risultati diversi una volta utilizzati su una pagina. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!