Vuoi creare una pagina blog con il modulo Blog de Divi?
Di solito ogni pacchetto di layout Divi pubblicato su Temi eleganti offre un layout del blog, che ti aiuta a creare il tuo blog abbastanza veloce. Ma hai mai desiderato vedere come creare tu stesso una di queste pagine del blog?
In questo articolo vedremo come creare una pagina blog con il modulo Blog di Divi. Analizzeremo ogni impostazione passo dopo passo.
Cominciamo!
Panoramica
Prima di iniziare, vediamo prima una panoramica di ciò che creeremo.
Crea una nuova pagina del blog
Crea una nuova pagina
Per prima cosa, creeremo la nostra pagina. Nella dashboard di WordPress, fai clic su Pagine > aggiungere.
Assegna alla pagina un titolo che abbia senso per te.
- Titolo della pagina: Blog su Divi
Passa a Divi Builder
Fare clic sul pulsante viola al centro della pagina: Usa Divi Builder .
Aggiungi una sezione per il titolo della pagina del blog
Personalizza la sezione
Inizieremo con la prima sezione. Aprili parametri di sezione .
Scorri fino a Sfondo e cambia il colore in #f9f3fd. Inserisci Blog come etichetta amministratore. Chiudi le impostazioni della sezione.
- Sfondo: #f9f3fd
- Etichetta amministratore: Blog
Crea il titolo della pagina del blog
Quindi aggiungeremo a linea per il titolo. Seleziona l'icona verde e scegli la riga della singola colonna.
Quindi aggiungere un modulo di testo alla linea.
Personalizza il modulo Testo del titolo del blog
Aprili Impostazioni del modulo di testo e selezionare H1. Aggiungi il titolo Il nostro blog.
- Carattere: Titolo 1
- Testo: Il nostro blog
Allora vai suScheda Stile e imposta l'allineamento su Centrato. Per il testo del titolo H1, scegli Cormorant Infant per il carattere e rendilo in grassetto.
- Allineamento del testo: centrato
- Testo intestazione: H1
- Carattere intestazione: Cormorano neonato
- Intestazione a luce soffusa: testo in grassetto
Imposta Colore su # 442854, Dimensioni su 130 px e Altezza linea su 0,8 em.
- Colore: #442854
- Dimensione testo desktop: 130px
- Altezza della linea: 0,8 em
Crea l'ultimo articolo e la sezione Call to Action
La nostra sezione è composta dall'ultimo articolo e da un'e-mail di attivazione.
Aggiungi una nuova linea sotto la nostra prima riga e seleziona il design della colonna 2/3 a sinistra e 1/3 a destra.
Aprili parametri di linea cliccando sull'icona a forma di ingranaggio.
Seleziona ilScheda Stile, scorrere fino a spaziatura e aggiungi 0px al margine interno inferiore. Chiudi Impostazioni.
- Margine interno inferiore: 0px
Aggiungi e personalizza il modulo del post del blog in primo piano
Quindi aggiungeremo a modulo blog . Questo conterrà il nostro ultimo articolo. Fai clic sull'icona più grigia nella colonna di sinistra della nostra nuova riga e aggiungi il modulo Blog.
Contenuto
sotto Contenuto , inserisci 1 per il numero di post.
- Numero di posizioni: 1
elementi
Scorri fino a elementi e deseleziona Autore e impaginazione. Lasceremo il resto alle loro impostazioni predefinite.
- Mostra autore: no
- Mostra impaginazione: No
Fornitura
Quindi selezionare il Scheda Stile e scegli Schermo intero per il layout e disattiva la sovrapposizione di immagini in primo piano.
- Modello: schermo intero
- Sovrapposizione immagine selezionata: disabilitata
Titolo del testo
Scorri fino a Titolo del testo . Seleziona H2 e scegli Cormoran Infant. Seleziona Grassetto e cambia il colore in # 442854.
- Inserisci il titolo tre: H2
- Titolo del carattere: Cormorano neonato
- Titolo a luci soffuse: testo in grassetto
- Colore del testo del titolo: #442854
Imposta la dimensione del carattere su 30 pixel. Cambia l'altezza della linea a 1.1 em.
- Dimensioni: 30 pixel per desktop, 20 pixel per tablet, 18 pixel per telefono
- Altezza della riga del titolo: 1,1 em
Il corpo del testo
Quindi scorri verso il basso fino a Corpo del testo . Scegli Cabin per il carattere, cambia il colore in # 442854 e cambia l'altezza della linea in 1,8 em.
- Corpo di Polizia: Cabina
- Colore del testo del corpo: #442854
- Altezza della linea del corpo: 1,8 em
Metadati di testo
Quindi scorri verso il basso fino a Metadati di testo . Impostare i parametri come segue:
- Font dei metadati: Cormorano neonato
- Luce fioca dei metadati: regolare
- Stile di copia dei metadati: nessuno
- Colore del testo dei metadati: #442854
- Dimensioni del testo dei metadati: Desktop 16px, Tablet 15px, Telefono 14px
- Altezza della riga dei metadati: 1,8 em
spaziatura
Quindi scorri verso il basso fino a spaziatura e cambia il margine superiore in 0vw.
- Margine superiore: 0vw
Scatola delle ombre
Infine, scorri verso il basso fino a Scatola delle ombre e spegnilo.
- Shadow Box: disabilita
Aggiungi e personalizza il modulo di testo dell'e-mail del blog
Ora ci spostiamo nella colonna di destra e creare l'invito all'azione via e-mail . Innanzitutto, aggiungi un modulo Testo nella colonna di destra. Fare clic sull'icona più grigia e cercare Testo.
Contenuto
Seleziona l'Intestazione 2 e inserisci il testo Iscriviti alle nostre offerte.
- Carattere: Titolo 2
- Testo: Iscriviti alle nostre offerte
Titolo
per testi del titolo, seleziona Center Alignment, scegli H2, seleziona Cormorant Infant e impostalo su Grassetto.
- Allineamento del testo: centrato
- Testo intestazione: H2
- Carattere intestazione: Cormorano neonato
- Intestazione luce soffusa: grassetto
Cambia il colore in # 442854, la dimensione in 32px e l'altezza della linea in 0,95em.
- Colore del testo dell'intestazione: #442854
- Dimensione testo intestazione: 32 pixel
- Altezza della linea di intestazione: 0,95 em
spaziatura
Infine, scorri verso il basso fino a spaziatura e aggiungi 10 pixel al margine inferiore. Chiudi le impostazioni del modulo di testo.
- Margine inferiore: 10px
Aggiungi e personalizza il modulo Blog Email Optin
Allora andiamo creare il forma e-mail . Aggiungi un modulo Email Optin sotto il modulo Testo nella colonna di destra.
Contenuto
Innanzitutto, rimuovi il titolo e il corpo del testo.
- Titolo: Nessuno
- Testo del corpo: nessuno
Scorri fino a Account email e aggiungi il tuo fornitore di servizi.
Quindi scorri verso il basso fino a Sfondo e deseleziona il colore di sfondo.
- Usa colore di sfondo: no
i campi
Vai al Scheda Stile e cambia il Colore di sfondo dei campi in rgba(255,255,255,0) e il Colore del testo in #442854.
- Campi colore di sfondo: rgba(255,255,255,0)
- Campi colore testo: #442854
Scorri verso il basso fino a opzioni di carattere e cambia il carattere in cabina, la dimensione in 16px e l'altezza della linea in 1,8em.
- Campi dei caratteri: Cabina
- Campi Dimensione testo: 16 pixel
- Altezza della riga del campo: 1,8 em
Quindi, regola l'angolo arrotondato dei campi su 32px, la larghezza del bordo su 2px e cambia il colore del bordo su # 442854.
- Controlli rettangolo arrotondato: 32px
- Campi larghezza bordo: 2px
- Campi colore bordo: #442854
Pulsante
Scorri fino a Pulsante e seleziona Usa stili personalizzati per Button . Cambia la dimensione in 18ps, il colore del pulsante in bianco e il colore di sfondo del pulsante in #442854.
- Usa stili personalizzati per il pulsante: Sì
- Dimensione testo pulsante: 18 pixel
- Colore testo pulsante: #ffffff
- Pulsante Sfondo: #442854
Cambia il raggio del bordo su 50 pixel, il carattere su Cormorant Infant e rendi il peso in grassetto.
- Pulsante Raggio bordo: 50px
- Pulsante carattere: Cormorano neonato
- Pulsante Luce soffusa: testo in grassetto
Infine, aggiungiamo alcuni Margini. Immettere 20px per il margine superiore, 12px per il riempimento superiore e inferiore e 32px per il riempimento sinistro e destro. Chiudi le impostazioni di ottimizzazione e-mail.
- Pulsante Margine superiore: 20 px
- Pulsante di riempimento superiore e inferiore: 12 px
- Imbottitura pulsante sinistro e destro: 32px
Aggiungi una nuova riga per l'elenco dei post del blog
Ora stiamo andando creare un elenco di elementi della pagina. Innanzitutto, aggiungi una nuova riga a colonna singola sotto la nostra sezione precedente.
Impostazioni linea
Vai al Scheda Stile e aggiungi 0px al margine interno del vertice. Chiudi le impostazioni della linea.
- Vertice del margine interno: 0px
Aggiungi un modulo Blog alla tua linea
Aggiungere un modulo blog alla nuova riga facendo clic sull'icona più grigia e facendo clic su Blog.
Stile del feed del post del blog
Cambiamo il feed della Pagina del blog.
Contenuto del feed del blog
Aprili Impostazioni del modulo blog e inserisci 3 per il numero di post. Ciò ti consente di scegliere il numero di post da visualizzare sullo schermo.
Un numero più basso, come 3, ci consente di concentrarci sui post recenti e di ridurre le dimensioni della pagina. Questa è una buona scelta se non pubblichi spesso post o se vuoi mantenere la pagina più pulita. Mostrare più post, come 6-9, è una buona idea se vuoi concentrarti sul flusso del blog.
- Numero di posti: 3
Immettere 1 per l'offset. Questo dice a Divi di iniziare con il secondo post del blog, che ci impedisce di visualizzare lo stesso articolo che era già stato visualizzato nel post del blog mostrato sopra.
- Numero di offset postale: 1
elementi
Scorri fino a elementi . Abilita immagine in evidenza, data, snippet di categorie e impaginazione. Disattiva il resto.
- Mostra immagine in evidenza: Sì
- Dati: Sì
- Categorie: Sì
- Estratto: Sì
- Impaginazione: Sì
Sfondo
Accesso a Sfondo e imposta il colore di sfondo del riquadro della griglia su rgba(255,255,255,0)
- Colore di sfondo della piastrella della griglia della griglia: rgba (255,255,255,0)
Disposizione e sovrapposizione
Allora vai su Scheda Stile . Lascia il layout impostato su Griglia. Abbiamo scelto il layout a tutta larghezza per il post del blog presentato sopra questo. Utilizzeremo il layout della griglia per questo feed del blog, che è l'opzione predefinita. Disabilita la sovrapposizione di immagini in primo piano.
- Disposizione: griglia
- Sovrapposizione immagine selezionata: disabilitata
Titolo del testo
per testo del titolo , selezionare H2. Scegli Cormorant Infant, impostalo su Grassetto e inserisci #442854 per il colore.
- Inserisci il titolo tre: H2
- Titolo del carattere: Cormorano neonato
- Titolo a luci soffuse: testo in grassetto
- Colore del testo del titolo: #442854
Scegli 20px per la dimensione del testo. Imposta l'altezza della linea su 1,1 em.
- Dimensione del testo del titolo: Desktop 20px
- Altezza della riga del titolo: 1,1 em
Il corpo del testo
Scorri fino a Corpo del testo e scegli Cabina. Imposta il colore su # 442854.
- Corpo di Polizia: cabina
- Colore del testo del corpo: #442854
Impostare l'altezza della linea su 1,8 em.
- Altezza della linea: 1,8 em
Metadati di testo
Scorri fino a Metadati di testo e scegli Cormorano Neonato. Imposta il peso su normale, lo stile su nessuno e il colore su #442854.
- Font dei metadati: Cormorano neonato
- Luce fioca dei metadati: regolare
- Stile di copia dei metadati: nessuno
- Colore del testo dei metadati: #442854
- Dimensione testo metadati: desktop 16px, tablet 15px, telefono 14px
- Altezza della riga dei metadati: 1,8 em
Testo di impaginazione
Ora andiamo al Impaginazione . Per il carattere scegli Cormorant Infant, seleziona Grassetto e cambia il colore in # 442854.
- Carattere Mostra impaginazione: Cormorano neonato
- Mostra luce soffusa cercapersone: grassetto
- Colore del testo Mostra impaginazione: #442854
spaziatura
Poi si passerà al spaziatura e aggiungi il margine 0vw in alto. Ciò impedisce al nostro modulo di sovrapporsi al modulo precedente.
- Margine superiore: 0vw
confine
Scorri fino a confine e inserisci 0px per tutti e quattro gli angoli. Questo ci dà la nostra forma quadrata per la mappa.
- Layout griglia rettangolo arrotondato: 0px
Scatola delle ombre
Infine, scorri verso il basso fino a scatola di ombra e disabilitarlo. Chiudi le impostazioni del blog. La sezione blog è completa.
- Casella delle ombre: nessuna
Aggiungi una nuova sezione "Call to Action" alla pagina del blog
Allora andiamo creare la sezione "Invito all'azione". della pagina. Questa sezione include un'immagine di sfondo parallasse a schermo intero, contatti e link di seguito social.
Aggiungi una nuova sezione
Fare clic sull'icona blu per aggiungi una nuova sezione regolare in fondo alla pagina.
- Sezione: Regolare
Stile la sezione Call to Action
Aprili parametri di sezione facendo clic sulla sua icona a forma di ingranaggio.
Sfondo
Scorri fino a Sfondo e scegli la scheda Immagine. Fare clic sull'icona grigia denominata Immagine di sfondo.
Scegli un'immagine a schermo intero dalla tua libreria multimediale. Seleziona Usa effetto di parallasse, quindi scegli CSS per il metodo di parallasse.
- Immagine di sfondo
- Usa l'effetto di parallasse: Sì
- Metodo di parallasse: CSS
Scorri verso il basso fino a Etichetta amministratore e inserisci "Piè di pagina" nel campo. Questo ti aiuterà a tenere traccia delle sezioni.
- Tag amministratore: piè di pagina
Allora vai su Scheda Stile.
- Margine interno: 10vw (superiore e inferiore)
Aggiungi una nuova linea
Fare clic sull'icona più verde e aggiungi una riga a una singola colonna per i nostri contenuti.
dimensionamento
Aprili parametri di linea e vai alla scheda Stile.
- Larghezza massima: 320 pixel
Modulo di testo del titolo
La nostra sezione Call to Action è presentata con un titolo. Per creare questo, aggiungi un modulo di testo alla linea.
Personalizza il testo del titolo
Aggiungi il tuo titolo e cambia il carattere in Titolo 3.
- Carattere: Titolo 3
- Testo: Tutto su Divi
Titolo
Vai al Scheda Stile e scorri fino a Testo dei sottotitoli . Scegli il centro per l'allineamento, seleziona H3, scegli Cormorano neonato, impostalo su Grassetto e scegli il bianco per il colore.
- Allineamento del testo: centro
- Testo intestazione: H3
- Carattere intestazione: Cormorano neonato
- Intestazione luce soffusa: grassetto
- Colore del testo dell'intestazione: #ffffff
- Dimensione testo intestazione: 42 pixel per desktop, 20 pixel per tablet, 16 pixel per telefono
- Altezza della linea di intestazione: 1,1 em
spaziatura
Infine, scorri verso il basso fino a spaziatura e aggiungi 10 pixel al margine inferiore. Chiudere le impostazioni del modulo.
- Margine inferiore: 10px
Modulo di testo per l'indirizzo
Aggiungi un altro modulo di testo per il tuo indirizzo fisico.
Disegna lo stile del modulo Testo indirizzo fisico
Testo dell'indirizzo
Aggiungi il tuo indirizzo come testo del paragrafo.
- Stile: paragrafo
- Testo: il tuo indirizzo
Testo del paragrafo
Quindi vai su Testo in Scheda Stile e scegli Cormorant Infant, semigrassetto, e impostalo su bianco.
- Carattere: Cormorano Neonato
- Testo a luce soffusa: semigrassetto
- Colore del testo Testo: #ffffff
- Testo Dimensione testo: 28px per desktop, 20px per tablet, 16px per telefono
- Altezza della riga di testo: 1,2 em
Aggiungi il modulo seguici sui social network
Il nostro ultimo modulo è il modulo Suivez-nous sur les réseaux sociaux . Aggiungilo in fondo alla riga.
Stilizza Il modulo seguici sui social media
Inizieremo con il Scheda Stile questa volta. Seleziona Center for Module Alignment e cambia il colore dell'icona in #442854.
- Allineamento modulo: centro
- Colore icona: #442854
Scorri fino a Pannelli di segnalazioneura e aggiungi 23 pixel per gli angoli arrotondati.
- Rettangolo arrotondato: 32px
Aggiungi e personalizza i tuoi social network
Ora torna al Scheda Contenuto e aggiungi tutti i social network che desideri includere. Fare clic sull'icona più grigia.
Aprili impostazioni per ciascuno dei tuoi social network , scegli la rete e aggiungi il link al tuo account. Imposta il colore di sfondo su #f9f3fd. Chiudere le impostazioni del sottomodulo.
- Social network: a te la scelta
- URL collegamento account: il tuo collegamento
- Colore di sfondo: #f9f3fd
Salva la pagina del blog ed esci dal visual builder
Infine, salva la pagina nell'angolo in basso a destra e seleziona Esci da Visual Builder in cima alla pagina. Sei pronto per vedere il tuo lavoro.
Anteprima della pagina del blog
Ecco i nostri risultati.
Scarica DIVI ora!!!
Conclusione
Ecco ! Questo è il nostro sguardo su come creare una pagina del blog con Divi.
Divi Builder semplifica la creazione di layout interessanti e ci sono diversi modi per utilizzare ciascuno dei moduli. Come è stato esplorato in questo tutorial, è possibile utilizzare più versioni del modulo Blog sulla stessa pagina per visualizzare il feed del blog in modi diversi.
Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
