Scarica 5 vivaci stili di sfondo per i tuoi post sul blog Divi
Pubblicato: 2018-10-25Siamo qui con un altro download gratuito di Divi! Questa volta, ti diamo un assaggio di 5 diversi stili di sfondo vibranti che puoi utilizzare per i post del blog sul tuo sito web. Puoi facilmente combinare questi stili di sfondo sullo stesso sito Web per dare un aspetto diverso ai vari post del blog che pubblichi. Oltre a offrirti tutti questi vivaci stili di sfondo gratuitamente, ti guideremo anche nella creazione del modello di post del blog che puoi riutilizzare per qualsiasi post del blog che crei e pubblichi sul tuo sito web.
Arriviamo ad esso!
Anteprima
Iniziamo dando un'occhiata ai 5 diversi risultati e alla visualizzazione su schermi di diverse dimensioni.
Scarica GRATUITAMENTE gli stili di sfondo vibranti
Per mettere le mani sui vivaci stili di sfondo, dovrai prima scaricarli 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!
Tavolozze dei colori
Per ciascuno degli stili di sfondo, puoi trovare una tavolozza di colori di seguito. Faremo riferimento al numero del colore in tutto il tutorial, quindi scegli lo stile di sfondo e la tavolozza che desideri creare e parti da lì.
Tavolozza #1
- Colore #1: #886DFC
- Colore #2: #7C56BD
- Colore #3: #372C66
Tavolozza #2
- Colore #1: #42bcb2
- Colore #2: #9CFEF0
- Colore #3: #a8baf7
Tavolozza #3
- Colore #1: #96b2ff
- Colore #2: #d999ff
- Colore #3: #357ff4
Tavolozza #4
- Colore #1: #B981FF
- Colore #2: #24EEFA
- Colore #3: #be7bf2
Tavolozza #5
- Colore #1: #e02b20
- Colore #2: #f6ff56
- Colore #3: #db241e
Crea nuovo messaggio
Aggiungi dettagli e abilita Divi Builder
Cominciamo dall'inizio! Aggiungi una nuova pagina al tuo sito Web WordPress, aggiungi il titolo della pagina, carica un'immagine in primo piano e abilita Divi Builder.
Impostazioni pagina Divi
Prima di passare a Visual Builder, apporta alcune modifiche alla casella Impostazioni pagina Divi in alto a destra nella pagina in cui ti trovi. Ciò assicurerà che stai lavorando interamente con Divi per creare il layout del post del blog. Se hai intenzione di riutilizzare il modello sul tuo sito web, dovrai ricordarti di modificare queste impostazioni ogni volta che crei un nuovo post sul blog.
- Layout di pagina: a tutta larghezza
- Titolo del messaggio: Nascondi
Passa a Visual Builder
Ora puoi passare a Visual Builder.
Una volta fatto, sullo schermo appariranno tre opzioni. Fare clic sul pulsante blu per iniziare a costruire da zero.
Crea un design per post sul blog
Aggiungi la sezione n. 1
Immagine di sfondo
Iniziamo a creare il modello! Inizia con una sezione vuota in alto. Apri le impostazioni della sezione, vai alle impostazioni dello sfondo e carica uno stile di sfondo a tua scelta. Puoi trovare tutte e 5 le varianti andando nella cartella scaricata > Hero .
- Dimensione immagine di sfondo: copertina
- Posizione immagine di sfondo: in alto al centro
Spaziatura
Per consentire all'immagine di sfondo di apparire completamente, gioca con l'imbottitura superiore della sezione.
- Imbottitura superiore: 660 px
Aggiungi sezione #2
Spaziatura
Proprio sotto la sezione che hai appena aggiunto, vai avanti e aggiungine un'altra. Apri le impostazioni, vai alle impostazioni di spaziatura e rimuovi tutto il riempimento personalizzato predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Spaziatura
Rimuovi tutto il riempimento predefinito nella parte inferiore della sezione successiva.
- Imbottitura inferiore: 0px
Aggiungi modulo titolo post
Elementi
È ora di iniziare ad aggiungere moduli! In questa riga, avremo solo bisogno di un modulo Post Title. Dopo averne aggiunto uno, scegli gli elementi che vuoi mostrare.
Impostazioni del testo del titolo
Quindi, vai alle impostazioni del testo del titolo e apporta alcune modifiche.
- Carattere del titolo: Abril Fatface
- Allineamento del testo del titolo: al centro
- Dimensione del testo del titolo: 73 px (desktop), 50 px (tablet), 40 px (telefono)
Impostazioni meta testo
Anche le impostazioni del meta testo devono essere modificate.
- Allineamento del meta testo: al centro
- Colore meta testo: Colore n. 1 (Trova nella tavolozza)
- Dimensione del metatesto: 18px
- Altezza linea meta: 3em
Aggiungi sezione #3
Immagine di sfondo
L'ultima sezione di questa pagina conterrà il contenuto del post del blog e CTA. Inizia caricando lo stile di sfondo che preferisci. Puoi trovare le varianti andando nella cartella scaricata > Corpo . Una volta caricata l'immagine di sfondo, apporta alcune modifiche alle impostazioni di sfondo.
- Dimensione dell'immagine di sfondo: dimensione reale
- Posizione immagine di sfondo: in alto al centro
- Ripetizione immagine di sfondo: spazio
Spaziatura
Rimuovi tutto il riempimento superiore predefinito di questa sezione per eliminare tutti gli spazi bianchi tra questa sezione e la precedente.
- Imbottitura superiore: 0px
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Colore di sfondo
Aggiungi un colore di sfondo leggermente trasparente alla riga successiva.
- Colore di sfondo: rgba (255,255,255,0.86)
Spaziatura
Rimuovi anche qui il riempimento personalizzato predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Modulo Aggiungi testo
Aggiungi contenuto
Procedi aggiungendo un modulo di testo alla riga che hai aggiunto. Qui puoi aggiungere tutto il contenuto del post del blog che desideri e utilizzare i diversi stili di testo per ottenere il risultato desiderato. Nella schermata di stampa di seguito, stiamo utilizzando intestazioni e paragrafi.
Impostazioni testo
Vai alle impostazioni del testo e apporta alcune modifiche lì.
- Dimensione del testo: 21 px (desktop), 18 px (tablet), 15 px (telefono)
- Altezza riga di testo: 2em
Impostazioni intestazione
Anche le impostazioni del testo dell'intestazione devono essere modificate.
- Carattere dell'intestazione: Abril Fatface
- Dimensione del testo dell'intestazione: 46 px (desktop), 40 px (tablet), 30 px (telefono)
- Altezza della linea di prua: 1,5 em
Spaziatura
Aggiungi successivamente alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 80px
- Imbottitura inferiore: 80 px
- Imbottitura sinistra: 80 pixel (desktop), 40 pixel (tablet), 30 pixel (telefono)
- Imbottitura destra: 80 pixel (desktop), 40 pixel (tablet), 30 pixel (telefono)
Scatola ombra
Per finire, aggiungi un'ombra sottile al modulo di testo. Ciò porterà una certa profondità al modello di post del blog.
- Intensità della sfocatura dell'ombra della scatola: 80 px
- Forza di diffusione dell'ombra della scatola: -14px
Aggiungi riga #2
Struttura della colonna
Continua aggiungendo una nuova riga subito sotto la precedente utilizzando una colonna.
Spaziatura
Rimuovi anche tutto il riempimento personalizzato predefinito di questa riga.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi modulo di attivazione e-mail
Aggiungi contenuto
Quindi, aggiungi il tuo invito all'azione. Stiamo utilizzando un modulo di attivazione della posta elettronica. Dopo averlo aggiunto, modifica il contenuto.
Campi
Usiamo solo l'indirizzo email in questo modulo, quindi vai avanti e disabilita il nome e il cognome nelle impostazioni dei campi.
Sfondo sfumato
Continua aggiungendo uno sfondo sfumato al modulo di attivazione della posta elettronica.
- Colore 1: Colore #2 (Trova nella tavolozza)
- Colore 2: Colore #3 (Trova nella tavolozza)
- Direzione gradiente: 144 gradi
Disposizione
Quindi, modificare il layout del modulo.
- Layout: corpo in alto, forma in basso
Impostazioni testo
Modifica anche le impostazioni del testo.
- Orientamento del testo: al centro
- Colore del testo: chiaro
Impostazioni del testo del titolo
Quindi, apri le impostazioni del testo del titolo e apporta alcune modifiche.
- Carattere del titolo: Abril Fatface
- Dimensione del testo del titolo: 54 px (desktop), 40 px (tablet), 35 px (telefono)
Impostazioni dei pulsanti
Modifica anche l'aspetto del pulsante.
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Stile carattere: sottolineato
- Stile sottolineato: doppio
Spaziatura
Infine, utilizza diversi valori di riempimento personalizzati nelle impostazioni di spaziatura del modulo Email Optin.
- Imbottitura superiore: 100 px
- Imbottitura inferiore: 100 px
- Imbottitura sinistra: 300 px (desktop), 50 px (tablet e telefono)
- Imbottitura destra: 300 px (desktop), 50 px (tablet e telefono)
Salva layout nella libreria Divi per il riutilizzo
L'unica cosa che resta da fare è salvare il layout nella libreria Divi. In questo modo, puoi riutilizzarlo anche per altre pagine! Puoi anche accedere ai post del blog come pagine esistenti quando crei una nuova pagina.
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato che abbiamo creato.
Pensieri finali
In questo post, abbiamo condiviso con te alcuni stili di sfondo straordinari e vivaci che puoi scaricare gratuitamente. Inoltre, ti abbiamo anche guidato nella creazione del modello di post del blog da zero. Sentiti libero di utilizzare questi stili di sfondo per i modelli di post del blog che progetti tu stesso. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!