Come includere una barra laterale fissa a tutta altezza nel modello di post del blog

La scelta di aggiungere una barra laterale ai post del tuo blog dipende interamente da te. Alcuni blogger scelgono di non utilizzare affatto una barra laterale. Questo tutorial è per quelli di voi che preferiscono utilizzare una barra laterale ma vogliono renderlo un po' diverso. Di solito, le barre laterali sono posizionate in modo statico, ma se il contenuto del post è lungo, significa che il lettore dovrà scorrere di nuovo verso l'alto per vedere la barra laterale.

In questo modello di post del blog, abbiamo creato una barra laterale fissa a tutta altezza che rimane in posizione mentre si scorre il contenuto del post. Durante la ricreazione del tutorial, tieni aperte due schede all'interno del browser: una per il generatore di temi e un'altra per l'anteprima di un post sul blog. In questo modo puoi vedere i cambiamenti mentre procedi.

Iniziamo!

Anteprima

Prima di iniziare, diamo un'occhiata alla barra laterale fissa a tutta altezza.

Desktop

Mobile

Scarica GRATUITAMENTE il modello di barra laterale fissa a tutta altezza

Per mettere le mani sul template gratuito della barra laterale fissa a tutta altezza, dovrai prima scaricarlo utilizzando il pulsante qui sotto. 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!

Crea widget barra laterale

Prima di iniziare con il modello della barra laterale fissa a tutta altezza, crea un widget della barra laterale personalizzato. In seguito lo includeremo nella nostra barra laterale all'interno del modello.

Apri il generatore di widget

Fare clic su "Aspetto" e selezionare "Widget".

Aggiungi elementi al widget della barra laterale

Trascina gli elementi "Post recenti" e "Categorie" nel widget della barra laterale.

Regola le impostazioni degli elementi nel widget

Scegli di mostrare solo 3 post recenti e aggiungi un titolo. Aggiungi anche un titolo al widget delle categorie e non dimenticare di fare clic su "Salva" su entrambe le caselle quando hai finito.

• Titolo dei post recenti: Leggi di più:
• Titolo categorie: Sfoglia

2. Inizia con Theme Builder

Apri il generatore di temi / Aggiungi nuovo modello

È ora di iniziare a ricreare il modello della barra laterale fissa a tutta altezza! Innanzitutto, apri il tuo generatore di temi e aggiungi un nuovo modello.

Imposta le impostazioni del modello

Nelle impostazioni del modello, seleziona "Tutti i post del blog". Se desideri utilizzare il modello per una categoria o un tag specifico, modifica le impostazioni del modello di conseguenza.

Aggiungi corpo personalizzato

Quindi, fai clic su "Aggiungi corpo personalizzato".

Seleziona Crea corpo personalizzato

Ricreeremo questo modello da zero, quindi vai avanti e scegli "Costruisci corpo personalizzato".

Costruisci da zero

Una volta all'interno del visual builder, seleziona l'opzione per creare nuovamente da zero.

Ricrea il modello con la barra laterale fissa a tutta altezza

Impostazioni della sezione

Sfondo

Apri la sezione esistente all'interno del tuo editor di modelli e aggiungi uno sfondo sfumato.

• Gradiente di sfondo
  • Colore 1: Bianco #ffffff
  • Colore 2: grigio chiaro #eaeaea

Spaziatura

Aggiungi anche un po' di imbottitura.

• Imbottitura superiore: 55px

Aggiungi nuova riga

Struttura della colonna

Ora aggiungi una riga con una struttura di colonne da 3/4 a 1/4.

Dimensionamento

Regolare le dimensioni della riga come segue.

• Larghezza grondaia personalizzata: 2
• Larghezza:
  • Desktop e Tablet: 90%
  • Telefono: 100%
• Larghezza massima:
  • Desktop: 1920 px
• Altezza minima: 100 vh

Impostazioni colonna 1

Spaziatura

Prima di aggiungere moduli, regolare le impostazioni della colonna. Prima la colonna 1.

• Imbottitura sinistra e destra
  • Compressa: 2%
  • Telefono: 8%

Impostazioni colonna 2

Sfondo

Quindi, aggiungi un colore di sfondo alla colonna 2.

• Colore di sfondo: bianco #ffffff

Spaziatura

Includi anche un po' di spazio.

• Imbottitura sinistra e destra
  • Scrivania: 3%
  • Tablet e telefono: 14%

Frontiera

Dai alla colonna gli angoli arrotondati dopo.

• Angoli arrotondati
  • Tablet e desktop: 15px

CSS personalizzato

Passa alla scheda Avanzate e aggiungi alcune righe di codice CSS all'elemento principale. Questo ci aiuterà a creare la barra laterale a tutta altezza sul desktop.

• Elemento principale
  • altezza minima: 100%

min-height: 100%;

Posizione

Ultimo ma non meno importante, per creare l'effetto barra laterale fissa, aggiungi una posizione fissa alla colonna.

• Posizione
  • Desktop: fisso
  • Tablet e telefono: impostazione predefinita
• Posizione: in alto a destra

Aggiungi il titolo del post Modulo n. 1

Elementi

È ora di aggiungere moduli! Inizia con un primo modulo del titolo del post nella colonna 1 e abilita solo il titolo.

• Titolo spettacolo: Sì

Immagine di sfondo dinamica

Quindi, vai alle impostazioni dello sfondo e usa l'immagine in primo piano come immagine di sfondo dinamica.

Testo del titolo

Stile le impostazioni del testo del titolo.

• Carattere del titolo: Bai Jamjuree
• Stile carattere del titolo: maiuscolo
• Colore del testo del titolo: #e98074
• Dimensione del testo del titolo:
  • Desktop: 45px
  • Tablet: 35px
  • Telefono: 25px
• Spaziatura delle lettere del titolo: 3px
• Altezza della riga del titolo: 1,3 em

Spaziatura

Quindi, aggiungi un'imbottitura personalizzata superiore e inferiore.

• Imbottitura superiore: 20%
• Imbottitura inferiore: 20%

Frontiera

Includi anche alcuni angoli arrotondati.

• Tutti gli angoli: 15px

Titolo CSS

E completa le impostazioni del modulo aggiungendo tre righe di codice CSS all'elemento titolo del modulo nella scheda Avanzate.

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

Aggiungi il titolo del post Modulo #2

Elementi

Ora aggiungi un altro modulo per il titolo del post. Seleziona i seguenti elementi.

• meta
• Autore
• Categorie di post

Meta testo

Apri la scheda design e modella il meta testo.

• Carattere: Bai Jamjuree
• Peso: Medio
• Colore: grigio # 8e8d8a
• Taglia
  • Desktop: 20px
  • Tablet e telefono: 15px
• Spaziatura lettere: 2px

Dimensionamento

Regola anche la taglia.

• Larghezza: 90%
• Allineamento del modulo: Centro

Spaziatura

Completa le impostazioni di questo modulo con un po' di spazio.

• Imbottitura superiore: 15px

Modulo Aggiungi contenuto post

Sfondo

Aggiungi poi un modulo di contenuto del post con uno sfondo bianco.

• Colore di sfondo: bianco #ffffff

Testo

Ora, dai uno stile al testo del corpo.

• Carattere: Lato
• Colore: grigio # 8e8d8a
• Dimensioni: 16px

Testo dell'intestazione

Continua applicando uno stile a tutti gli stili di testo dell'intestazione.

• H1
  • Carattere: Bai Jamjuree
  • Peso: Medio
  • Colore: Corallo #e98074
  • Taglia
    • Desktop: 45px
    • Tablet: 33px
    • Telefono: 30px
  • Spaziatura lettere: 1px
• H2
  • Carattere: Bai Jamjuree
  • Peso: Medio
  • Colore: Corallo #e98074
  • Taglia
    • Desktop: 35px
    • Tablet e telefono: 25px
  • Spaziatura lettere: 1px
• H3
  • Carattere: Bai Jamjuree
  • Peso: Normale
  • Colore: grigio scuro #606060
  • Taglia
    • Desktop: 25px
    • Tablet e telefono: 22px
  • Spaziatura lettere: 1px
• H4
  • Carattere: Bai Jamjuree
  • Peso: Normale
  • Colore: grigio scuro #606060
  • Taglia
    • Desktop: 22px
    • Tablet: 20px
    • Telefono: 18px
  • Spaziatura lettere: 1px
• H5
  • Carattere: Bai Jamjuree
  • Peso: Medio
  • Colore: grigio scuro #606060
  • Dimensioni: 16px
  • Spaziatura lettere: 1px
• H6
  • Carattere: Bai Jamjuree
  • Peso: Normale
  • Colore: grigio scuro #606060
  • Dimensioni: 16px
  • Spaziatura lettere: 1px

Spaziatura

Aggiungi anche alcune impostazioni di spaziatura.

• Margine superiore: 40 px
• Imbottitura superiore: 10%
• Imbottitura fondo: 10%
• Imbottitura sinistra: 10%
• Imbottitura destra: 10%

Frontiera

Ultimo ma non meno importante, aggiungi alcuni angoli arrotondati.

• Bordo arrotondato: 15px

Modulo Aggiungi commenti

Elementi

Per completare la prima colonna, aggiungi un modulo commenti. Abilita i seguenti elementi:

• Pulsante Rispondi
• Conteggio commenti

Campi

Nella scheda Progettazione, dai uno stile ai campi.

• Colore di sfondo: grigio chiaro #f7f7f7
• Colore del testo: grigio # 8e8d8a
• Carattere: Bai Jamjuree
• Dimensione del testo: 17px
• Angoli arrotondati: 15px

Testo conteggio commenti

Stile anche il testo del conteggio dei commenti.

• Livello di intestazione: H3
• Carattere: Bai Jamjuree
• Colore: Corallo #e98074
• Dimensioni: 22px
• Spaziatura lettere: 1px

Testo del titolo del modulo

Quindi il titolo del modulo.

• Livello di intestazione: H3
• Carattere: Bai Jamjuree
• Colore: Corallo #e98074
• Dimensioni: 18px
• Spaziatura lettere: 1px

Meta testo

Stile anche il meta testo.

• Carattere: Bai Jamjuree
• Colore: #606060
• Dimensioni: 14px
• Spaziatura lettere: 1px

Testo del commento

Non dimenticare il testo del commento.

• Carattere: Bai Jamjuree
• Dimensioni: 1px

Pulsante

Ora modella i pulsanti.

• Stili personalizzati
• Dimensione del testo: 18px
• Colore del testo: bianco #ffffff
• Colore di sfondo: Corallo #e98074
• Raggio del bordo del pulsante: 15 px
• Carattere pulsante: Bai Jamjuree

Dimensionamento

Regola anche le dimensioni della riga.

• Larghezza: 90%

Spaziatura

Così come le impostazioni di spaziatura.

• Imbottitura superiore: 8%
• Imbottitura sinistra e destra: 4%

Modulo Aggiungi persona

Testo

Passa alla colonna della barra laterale fissa e aggiungi un modulo persona.

• Nome: Autore articolo dinamico
• Prima: Scritto da:

Testo del titolo

Nella scheda Design, modella il testo dell'intestazione come segue:

• Livello di intestazione: H4
• Carattere: Bai Jamjuree
• Colore: Corallo #e98074
• Dimensioni: 2vh
• Spaziatura lettere: 2px

Dimensionamento

Regolare il dimensionamento successivo.

• Altezza minima:
  • Desktop: 3vh
  • Tablet e telefono: automatico
• Altezza massima:
  • Desktop: 3vh
  • Tablet e telefono: automatico

Spaziatura

Aggiungi anche una spaziatura personalizzata.

• Margine superiore
  • Desktop: 6vh
  • Tablet e telefono: 10vh

Aggiungi modulo immagine

Immagine

Ora aggiungi un modulo immagine. Seleziona il contenuto dinamico per l'immagine dell'autore.

• Immagine: immagine del profilo dell'autore dinamico

Allineamento

Passa alla scheda Progettazione e scegli il seguente allineamento:

• Allineamento immagine: a sinistra

Dimensionamento

Successivamente, regolare le dimensioni del modulo.

• Larghezza massima: 15vh
• Allineamento del modulo: a sinistra
• Altezza massima
  • Desktop: 15vh

Frontiera

Infine, aggiungi alcuni angoli arrotondati alle impostazioni del bordo.

• Angoli più arrotondati: 15px

Aggiungi modulo barra laterale

Contenuto

Ora è il momento di aggiungere i widget della barra laterale utilizzando il modulo della barra laterale.

• Area widget: barra laterale

Disposizione

Regola prima il layout.

• Mostra separatore bordo: No

Testo del titolo

Modifica le impostazioni del testo del titolo in seguito.

• Carattere: Bai Jamjuree
• Peso: Medio
• Colore: Corallo #e98074
• Dimensioni: 2vh
• Spaziatura lettere: 2px

Corpo del testo

Continua con il corpo del testo.

• Carattere: Bai Jamjuree
• Peso: Leggero
• Colore: grigio scuro #7f7f7f
• Colore al passaggio del mouse: Corallo #e98074
• Dimensioni: 1,5 vh
• Spaziatura lettere: 1px
• Altezza della linea: 1,8 em

Dimensionamento

Regola anche il dimensionamento del modulo.

• Altezza minima
  • Desktop: 12vh
  • Tablet e telefono: automatico
• Altezza massima
  • Desktop: 12vh
  • Tablet e telefono: automatico

Spaziatura

Non dimenticare di aggiungere un po' di spazio.

• Imbottitura superiore
  • Desktop: 1vh
  • Tablet e telefono: 3vh

CSS personalizzato

Ultimo ma non meno importante, includi alcune righe di codice CSS nella scheda Avanzate.

• Widget: padding-bottom: 0vh;

padding-bottom: 0vh;

• Titolo: imbottitura-fondo: 2vh;

padding-bottom: 2vh;

Aggiungi attivazione email

Testo

Il modulo successivo di cui abbiamo bisogno nella nostra barra laterale è un modulo di attivazione della posta elettronica. Aggiungi alcuni contenuti a tua scelta.

• Titolo: Aggiornamenti
• Pulsante: Iscriviti

Account email

Collega la tua email al modulo successivo.

• Provider di servizi: il tuo provider di posta elettronica
• Lista: la tua lista scelta

Campi

Utilizziamo solo il campo del nome nelle impostazioni dei campi.

• Mostra campo nome

Sfondo

Quindi, disattiva lo sfondo predefinito.

• Usa colore di sfondo: No

Disposizione

Passa alla scheda Design e modifica le impostazioni del layout.

• Layout: corpo in alto, forma in basso
• Nome Larghezza intera: No
• Larghezza intera e-mail: No

Campi

Quindi, modella i campi come segue:

• Colore di sfondo: Gre chiaro #f7f7f7
• Colore del testo: #606060
• Imbottitura superiore e inferiore: 1vh
• Imbottitura sinistra: 1vh
• Carattere: Bai Jamjuree
• Dimensione del testo: 1,5 vh
• Spaziatura lettere: 1px
• Angoli arrotondati: 15px

Testo del titolo

Stile anche il testo del titolo.

• Livello di intestazione: H4
• Carattere: Bai Jamjuree
• Colore: Corallo #e98074
• Dimensioni: 2vh
• Spaziatura lettere: 2px
• Altezza della linea: 1em

Pulsante

Poi, il pulsante.

• Stili personalizzati
• Dimensione del testo: 1,5 vh
• Colore del testo: bianco #ffffff
• Colore di sfondo: Corallo #e98074
• Raggio del bordo: 15px
• Spaziatura lettere: 2px
• Carattere: Bai Jamjuree
• Imbottitura superiore e inferiore: 1vh

Spaziatura

E completa le impostazioni del modulo e il tutorial aggiungendo alcuni valori di spaziatura personalizzati al modulo. Questo è tutto! Assicurati di salvare tutte le modifiche al generatore di temi una volta che hai finito di creare il corpo del modello.

• Imbottitura superiore
  • Desktop e Tablet: 0vh
• Imbottitura inferiore
  • Desktop: 2vh
  • Tablet e telefono: 6vh
• Imbottitura sinistra e destra
  • Desktop e Tablet: 0vh

Anteprima

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

Desktop

Mobile

Questo è un involucro!

Abbiamo finito di ricreare la barra laterale fissa a tutta altezza per i modelli di post del tuo blog. Se hai scaricato il modello dal link sopra, non dimenticare di impostare i widget della barra laterale come mostrato nella prima parte di questo tutorial.

Sei un tipo di persona con sidebar o senza sidebar? Fateci sapere nei commenti se avete pensieri o domande!