Scarica GRATUITAMENTE un modello di post sul blog della barra laterale a due lati con Divi

Sebbene le barre laterali siano in circolazione da molto tempo, sono ancora utilizzate frequentemente in tutto il Web. Aiutano a mostrare diversi elementi che sono collegati al post, come i post consigliati e i moduli di opt-in e-mail, senza trascurare l'obiettivo principale, che è il contenuto effettivo del post. Ora, con Divi's Theme Builder, ci sono tantissimi modi per creare il tuo modello di post sul blog. In questo tutorial, ti mostreremo come aggiungere una barra laterale a due lati al tuo modello di post. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Iscriviti al nostro canale Youtube

Scarica il modello di post del blog GRATUITAMENTE

Per mettere le mani sul modello di post del blog gratuito, devi 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ì! 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!

1. Vai a Divi Theme Builder e aggiungi un nuovo modello

Vai a Divi Theme Builder e aggiungi un nuovo modello

Inizia andando al tuo Divi Theme Builder. Una volta lì, aggiungi un nuovo modello.

Usa il modello su tutti i post

Stiamo utilizzando questo nuovo modello su tutti i post.

• Usa su: tutti i post

Inizia a costruire il corpo del modello

Bene, allora inizia a costruire il corpo del modello.

2. Inizia a costruire il corpo del post sul blog

Aggiungi nuova sezione

Colore di sfondo

Una volta all'interno del Divi Theme Builder, noterai una sezione. Apri quella sezione e cambia il colore di sfondo.

• Colore di sfondo: #f4f4f4

Spaziatura

Modifica anche i valori di spaziatura della sezione tra le diverse dimensioni dello schermo.

• Imbottitura superiore: 50 pixel (desktop), 20 pixel (tablet), 10 pixel (telefono)
• Imbottitura inferiore: 50 pixel (desktop), 20 pixel (tablet), 10 pixel (telefono)

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento di conseguenza:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 2
• Larghezza: 100%
• Larghezza massima: 95%

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Colonna 2

Colore di sfondo

Quindi, apri le impostazioni della colonna 2 e cambia il colore di sfondo in bianco.

• Colore di sfondo: #ffffff

Scatola ombra

Aggiungi anche un'ombra di casella alla colonna.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -21px
• Colore ombra: rgba (0,0,0,0.08)

Aggiungi modulo immagine alla colonna 2

Contenuto dinamico

È ora di iniziare ad aggiungere moduli! Nella seconda colonna, posizioneremo tutti i moduli rilevanti per il post del blog stesso, iniziando con un modulo immagine. Utilizza il contenuto dinamico dell'immagine in primo piano.

• Immagine: immagine in primo piano

Dimensionamento

Quindi, passa alla scheda di progettazione del modulo e forza l'intera larghezza sul modulo immagine.

• Forza intera larghezza: Sì

Aggiungi il modulo del titolo del post alla colonna 2

Elementi

Al secondo modulo, che è il Post Title Module. Disabilita l'immagine in primo piano nelle impostazioni degli elementi.

• Mostra immagine in primo piano: No

Impostazioni del testo del titolo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo del titolo di conseguenza:

• Carattere del titolo: Oxygen
• Dimensione del testo del titolo: 2vw (desktop), 4vw (tablet), 6vw (telefono)
• Altezza della riga del titolo: 1.2em

Impostazioni meta testo

Successivamente, apporta alcune modifiche alle impostazioni del meta testo.

• Meta font: Open Sans
• Colore meta testo: #ffc023
• Dimensioni del meta testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)

Spaziatura

Modifica anche i valori di spaziatura.

• Margine superiore: 100 px
• Margine sinistro: 4vw
• Margine destro: 4vw

Titolo CSS

E completa le impostazioni del modulo aggiungendo un margine inferiore all'elemento CSS del titolo nella scheda Avanzate.

margin-bottom: 20px;

Aggiungi modulo contenuto post alla colonna 2

Impostazioni testo

Passa al modulo successivo, ovvero il modulo dei contenuti dei post che contiene tutti i contenuti dei post del tuo blog dinamico. Modifica di conseguenza le impostazioni del testo del modulo:

• Carattere del testo: Open Sans
• Dimensione del testo: 0.9vw (desktop), 1.8vw (tablet), 3vw (telefono)
• Altezza riga di testo: 2,2 em

Impostazioni del testo dell'intestazione

Quindi, apporta anche alcune modifiche alle impostazioni del testo dell'intestazione.

• Carattere dell'intestazione: ossigeno
• Dimensioni testo H2: 1.5vw (desktop), 3vw (tablet), 4vw (telefono)
• Dimensioni testo H3, H4, H5 e H6: 1.3vw (desktop), 2.5vw (tablet), 3.5vw (telefono)

Spaziatura

Utilizziamo anche margini personalizzati e valori di riempimento.

• Margine sinistro: 4vw
• Margine destro: 4vw
• Imbottitura superiore: 50px
• Imbottitura inferiore: 100 px

Classe CSS

Completa le impostazioni del modulo aggiungendo una classe CSS. Nella parte successiva di questo tutorial, useremo questa classe CSS per aggiungere un po' di spazio ai titoli e ai paragrafi.

• spaziatura post-contenuto

Aggiungi modulo codice alla colonna 2

Inserisci codice CSS

Come accennato nel passaggio precedente di questo post, utilizzeremo alcuni CSS personalizzati per aggiungere spazio tra titoli e paragrafi. Per questo, utilizzeremo un modulo di codice nella colonna 2. Inserisci le seguenti righe di codice CSS:

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

Aggiungi il modulo di attivazione della posta elettronica alla colonna 3

Aggiungi contenuto

È ora di iniziare ad aggiungere gli elementi della barra laterale! Puoi aggiungere qualsiasi modulo desideri. Inizieremo con un modulo di attivazione della posta elettronica nella colonna 3. Usa una copia a tua scelta.

Account email

Continua collegando un account e-mail al modulo.

Campi

Quindi, disabilita il campo del cognome nelle impostazioni dei campi.

• Mostra campo cognome: No

Colore di sfondo

Cambia il colore di sfondo di conseguenza:

• Colore di sfondo: #ffc023

Impostazioni dei campi

Passa alla scheda di progettazione del modulo e modifica le impostazioni dei campi come segue:

• Carattere dei campi: Open Sans
• Dimensioni del testo dei campi: 0.8vw (desktop), 1.8vw (tablet), 3vw (telefono)

Impostazioni del testo del titolo

Apporta anche alcune modifiche alle impostazioni del testo del titolo.

• Carattere del titolo: Oxygen
• Peso del carattere del titolo: grassetto
• Dimensione del testo del titolo: 1vw (desktop), 3vw (tablet), 5vw (telefono)
• Altezza della riga del titolo: 1,5 em

Impostazioni dei pulsanti

Continua stilizzando il pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 0.9vw (desktop), 1.8vw (tablet), 3vw (telefono)
• Colore del testo del pulsante: #ffc023
• Colore di sfondo del pulsante: #f4f4f4
• Larghezza bordo pulsante: 0px

• Raggio bordo pulsante: 0px
• Carattere pulsante: ossigeno

• Imbottitura superiore del pulsante: 15 px
• Imbottitura fondo pulsante: 15px

Scatola ombra

E completa le impostazioni del modulo aggiungendo un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -21px
• Colore ombra: rgba (0,0,0,0.08)

Aggiungi il modulo Segui social media alla colonna 3

Aggiungi social network di scelta

Il modulo successivo di cui abbiamo bisogno nella colonna 3 è un modulo di follow sui social media. Aggiungi alcuni social network a tua scelta.

Ripristina individualmente gli stili dei social network

Continua reimpostando gli stili degli elementi per ogni social network individualmente.

Impostazioni icona

Quindi, torna alle impostazioni generali del modulo e cambia il colore dell'icona.

• Colore icona: #ffc023

Aggiungi modulo blog alla colonna 1

Elementi

Nella colonna 1, l'unico modulo che stiamo aggiungendo è un modulo Blog. Disabilita l'autore nelle impostazioni degli elementi.

• Mostra Autore: No

Disposizione

Quindi, passa alla scheda di progettazione del modulo e modifica il layout.

• Layout: Griglia

Impostazioni del testo del titolo

Modifica le impostazioni del testo del titolo in seguito.

• Carattere del titolo: Oxygen
• Peso del carattere del titolo: grassetto
• Dimensione del testo del titolo: 1vw (desktop), 3vw (tablet), 5vw (telefono)
• Altezza della riga del titolo: 1,5 em

Impostazioni del corpo del testo

Apporta anche alcune modifiche alle impostazioni del testo del corpo.

• Carattere del corpo: Open Sans
• Dimensioni del corpo del testo: 0.7vw (desktop), 1.8vw (tablet), 3vw (telefono)
• Altezza della linea del corpo: 2.2em

Impostazioni meta testo

Quindi, modella le impostazioni del meta testo di conseguenza:

• Meta font: Open Sans
• Colore meta testo: #ffc023
• Dimensioni del meta testo: 0.8vw (desktop), 1.8vw (tablet), 3vw (telefono)

Frontiera

Rimuovi anche il bordo predefinito del modulo.

• Larghezza bordo layout griglia: 0px

Scatola ombra

E usa un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -21px
• Colore ombra: rgba (0,0,0,0.08)

Visibilità

Ora, vogliamo che il modulo blog venga visualizzato nella colonna 1 quando qualcuno sta visualizzando il post sul desktop. Su schermi di dimensioni più piccole, tuttavia, vogliamo che il contenuto del post venga prima. Ecco perché nasconderemo l'intero modulo su tablet e telefono.

Clona modulo blog e posiziona duplicato nella colonna 3

Quindi cloneremo il Modulo Blog e posizioneremo il duplicato nella terza colonna.

Modifica visibilità

Vogliamo che questo modulo appaia nella colonna 3 solo su dispositivi più piccoli, ecco perché nasconderemo l'intero modulo sul desktop.

3. Salva tutte le modifiche del generatore di temi e visualizza l'anteprima dei risultati

Una volta completato il modello di post del blog (assicurati di aggiungere anche un modulo di commento!), puoi salvare tutte le modifiche al Theme Builder e visualizzare il risultato sul tuo sito web!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come aggiungere una barra laterale a due lati al modello di post del tuo blog utilizzando Divi's Theme Builder. Inoltre, abbiamo condiviso gratuitamente il file JSON del layout in modo da poterlo tenere a portata di mano nel caso ne avessi bisogno per eventuali progetti futuri! Se hai domande, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.