Come progettare un'area widget scorrevole per i post recenti in Divi
Pubblicato: 2019-05-02Il modulo della barra laterale di Divi è uno strumento estremamente utile per l'integrazione di aree widget personalizzate nel tuo design. Ciò ti consente di visualizzare qualsiasi widget WordPress all'interno di un layout Divi. In questo tutorial, ti mostrerò come creare un'area widget scorrevole per i post recenti in Divi. Progetterò una sezione "Dal nostro blog" con l'area widget dei post recenti sul lato destro di un modulo blog. Questo sarà perfetto per mostrare alcuni dei tuoi post più recenti sul blog su una home page o una pagina di destinazione.
Iniziamo!
Sbirciata
Ecco una piccola anticipazione del design che costruiremo in questo tutorial.
Scarica GRATUITAMENTE il layout scorrevole dei post recenti
Per mettere le mani sul design scorrevole del layout dei post recenti di questo tutorial, 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 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!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Iscriviti al nostro canale Youtube
Creazione dell'area widget dei post recenti
Poiché aggiungeremo un widget dei post recenti al nostro layout Divi, la prima cosa che dobbiamo fare è creare una nuova area widget (con il widget dei post recenti) da utilizzare con il modulo Sidebar di Divi.
Per creare l'area widget dei post recenti, vai su Aspetto > Widget. Quindi crea una nuova area widget assegnando un nome all'area widget (chiamala "post recenti" se vuoi) e facendo clic sul pulsante Crea. Aggiorna la pagina per vedere la nuova area widget disponibile.
Apri l'interruttore del widget Post recenti fornito con WordPress a sinistra della pagina. Quindi scegli l'area widget "Post recenti" dall'elenco e fai clic su Aggiungi widget per aggiungere il widget all'area widget.
Quindi apri l'area del widget dei post recenti e aggiorna il widget dei post recenti con un titolo. Imposta il numero di post da mostrare su un numero elevato in modo da avere abbastanza post da scorrere quando il nostro progetto sarà completo.
Ora che abbiamo posizionato la nostra area widget, possiamo iniziare con il nostro design Divi.
Creazione della sezione "Dal nostro blog" con l'area Widget Post recenti scorrevoli
Progettare la sezione di intestazione
Crea una nuova sezione regolare con una riga di una colonna.
Prima di aggiungere un modulo, aggiorna la sezione con quanto segue:
Colore di sfondo: #333333
Imbottitura personalizzata: 0px in basso
Quindi rimuovi anche l'imbottitura inferiore della riga aggiornando le impostazioni della riga:
Imbottitura personalizzata: 0px in basso
Quindi aggiungi un modulo di testo alla riga.
Quindi aggiorna le seguenti impostazioni di testo:
Per il contenuto, aggiungi la seguente intestazione h2 html:
<h2>From our Blog</h2>
Quindi aggiorna le seguenti impostazioni di testo:
Intestazione 2 Carattere: Roboto
Stile carattere titolo 2: TT
Colore testo titolo 2: #ffffff
Intestazione 2 Dimensioni del testo: 40 px
Intestazione 2 Spaziatura lettere: 2px
Questo si occupa dell'intestazione per il nostro layout. Ora è il momento di creare il resto del layout utilizzando una sezione speciale.
Creazione della sezione specialità
L'utilizzo di una sezione speciale separata per il resto del layout ci consentirà di avere una barra laterale dedicata a destra per l'area del widget scorrevole. Inoltre, ci consentirà di ridimensionare e modellare le nostre righe sul lato sinistro della sezione separatamente dall'area della barra laterale.
Vai avanti e aggiungi una sezione speciale con un layout di colonna della barra laterale destra come segue:
Quindi aggiungi una riga di una colonna alla sezione.
Prima di aggiungere un modulo, aggiorniamo le nostre impostazioni di sezione e riga.
Personalizzazione delle impostazioni della sezione
Apri le impostazioni per la sezione specialità e aggiorna quanto segue:
Colore di sfondo: #333333
Larghezza grondaia: 2
Imbottitura personalizzata: 0px in alto
Imbottitura personalizzata della colonna 2: 0px in alto, 0px in basso
Personalizza le impostazioni della riga
Quindi apri le impostazioni della riga e aggiorna quanto segue:
Altezza: 640 px
Larghezza bordo superiore: 8px
Colore bordo superiore: #444444
Larghezza bordo inferiore: 8px
Colore bordo inferiore: #444444
L'altezza personalizzata di 640 px viene assegnata per corrispondere all'altezza dell'area del widget dei post recenti scorrevoli che aggiungeremo alla barra laterale della nostra sezione specializzata. questo assicurerà che i due abbiano la stessa altezza per un design esteticamente più gradevole.
Aggiunta del modulo blog
Nella riga a una colonna a sinistra, aggiungi un modulo blog.
Quindi aggiorna le impostazioni del modulo blog come segue:
Numero messaggi: 2
Layout: Griglia
Carattere del titolo: Roboto
Meta font: Roboto
Peso del carattere meta: leggero
Stile carattere meta: TT
Carattere di impaginazione: Roboto
Stile carattere di impaginazione: TT
Colore del testo dell'impaginazione: #ffffff
Dimensione del testo dell'impaginazione: 18px
Spaziatura delle lettere di impaginazione: 2px
Aggiunta dell'area widget scorrevole dei post recenti
Infine, è il momento di aggiungere i post recenti scorrevoli al nostro layout. Per fare ciò, aggiungi un modulo della barra laterale all'area della barra laterale della sezione delle specialità a destra.
Quindi seleziona l'area widget "Post recenti" che hai creato in precedenza selezionandola dal menu a discesa Area widget sotto la scheda contenuto.
Quindi aggiorna il design del testo del titolo e del corpo come segue:
Carattere del titolo: Roboto
Stile carattere titolo: TT
Colore del testo del titolo: #ffffff
Spaziatura delle lettere del titolo: 2px
Carattere del corpo: Roboto
Stile del carattere del corpo: sottolineato
Quindi, nascondi il separatore di bordo come segue:
Mostra separatore di confine: NO
Quindi assegna al modulo della barra laterale un'altezza massima e un'imbottitura personalizzata come segue:
Altezza massima: 640 px
Imbottitura personalizzata: 30px in alto, 30px in basso, 5% a destra
L'altezza massima di 640 px corrisponde all'altezza personalizzata di 640 px data alla riga adiacente.
Ora che abbiamo assegnato al modulo della barra laterale un'altezza massima di 640 px, dobbiamo impostare l'overflow verticale per lo scorrimento per ottenere la nostra funzionalità di scorrimento. Per fare ciò, vai alla scheda Avanzate e aggiorna quanto segue:
Overflow verticale: scorrimento
Risultato finale
Questo è tutto! Ora diamo un'occhiata al risultato finale.
Opzione bonus: aggiunta di CSS personalizzati alla barra di scorrimento del design (non supportata da tutti i browser)
Lo stile di una barra di scorrimento in WordPress è una specie di problema se si desidera il supporto per browser incrociati. Quindi, nella maggior parte dei casi, vorrai lasciarlo agli stili predefiniti del browser e chiamarlo un giorno. Ma se vuoi personalizzare la barra di scorrimento in modo che corrisponda al design della tua pagina, puoi aggiungere del CSS personalizzato. Sfortunatamente, il supporto del browser è limitato ai browser che supportano le proprietà CSS con prefisso ::webkit (fondamentalmente solo Safari e Chrome). Ecco come farlo.
Apri le impostazioni della sezione specialità e aggiungi la seguente Classe CSS:
Classe CSS: scorrimento personalizzato
Quindi apri il modal delle impostazioni della pagina e aggiungi il seguente CSS personalizzato alla pagina.
/* width */
.cust-scroll ::-webkit-scrollbar {
width: 8px;
}
/* Track */
.cust-scroll ::-webkit-scrollbar-track {
background: #444444;
}
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
background: #888888;
}
/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
Questo cambia la larghezza della barra di scorrimento a 8px e regola i colori per la traccia e la maniglia. Sentiti libero di sperimentare più disegni e colori da solo.
E nel caso ve lo stiate chiedendo, il fallback per altri browser sarà lo stile predefinito del browser per le barre di scorrimento.
Pensieri finali
L'aggiunta di scorrimento verticale al contenuto è utile ogni volta che si desidera offrire agli utenti la possibilità di visualizzare più contenuti in uno spazio ristretto. Un'area widget scorrevole per i post recenti è un ottimo esempio di come lo scorrimento verticale possa funzionare davvero bene. Naturalmente, puoi sostituire il modulo della barra laterale utilizzato in questo tutorial con un modulo di testo e aggiungere lo scorrimento verticale a qualsiasi contenuto desideri. La stessa personalizzazione si applicherà a qualsiasi modulo.
Per quanto riguarda lo stile della barra di scorrimento, sono sicuro che ci sono altri plugin o soluzioni Javascript che darebbero una soluzione più cross browser. Se ne conosci di buoni, non esitare a condividerli con noi.
Non vedo l'ora di sentirti nei commenti qui sotto.
Saluti!