Divi ti consente di creare al volo un numero illimitato di aree pronte all'uso. Le barre laterali possono quindi essere aggiunte a qualsiasi pagina, consentendoti di creare barre laterali uniche per diverse sezioni del tuo sito web.
Come aggiungere un modulo widget Zonde da Divi
Prima di poter aggiungere un modulo della barra laterale alla tua pagina, devi prima passare a Divi Builder. Una volta il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando sfogli il tuo sito web in primo piano se hai effettuato l'accesso alla dashboard di WordPress.
Dopo aver utilizzato Visual Builder, puoi fare clic sul pulsante grigio (+) per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, ricordati di aggiungere prima una riga alla tua pagina.
Individua il modulo della barra laterale nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "barra laterale" e quindi fare clic su "Invio" per trovare e aggiungere automaticamente il modulo della barra laterale! Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .
Caso di utilizzo di esempio: aggiunta di una barra laterale alla pagina del blog
Il modulo della barra laterale ti consente di inserire una barra laterale (e tutti i suoi widget integrati) ovunque sulla tua pagina. In realtà, puoi aggiungere qualsiasi area widget utilizzando il modulo della barra laterale. Per questo esempio, ti mostrerò come inserire una barra laterale personalizzata nella pagina del tuo blog utilizzando la sezione specializzata per visualizzare il widget Cerca e Articoli recenti su WordPress.
Questa pagina del blog ha un'intestazione a larghezza intera per visualizzare il titolo del blog nella parte superiore della pagina. Sotto il modulo di intestazione a larghezza intera c'è un layout speciale con un modulo blog a sinistra e un'area della barra laterale verticale destra a destra.
L'utilizzo della sezione specializzata consente di aggiungere complesse variazioni di colonna accanto alle barre laterali verticali, senza aggiungere interruzioni indesiderate alla pagina. Questo è perfetto per un blog con una barra laterale.
Per prima cosa devi assicurarti di avere i widget impostati nella pagina Widget della dashboard di WordPress. Per questo esempio, sto aggiungendo il widget Cerca e il widget Articoli recenti al widget Sidebar.
Quindi distribuire Visual Builder per modificare la pagina del blog. Aggiungi una sezione specializzata alla tua pagina (appena sotto l'intestazione) con il seguente layout:
Dopo aver aggiunto una sezione specializzata alla pagina, noterai che un'area (a sinistra) ha un pulsante "Aggiungi modulo". In questo esempio, è qui che è stato aggiunto il modulo Blog con un layout a griglia per visualizzare i post del blog.
L'altro (a destra) ha un pulsante "Inserisci riga". L'area "Inserisci modulo" rappresenta la barra laterale verticale. Qui è dove entrerai nel modulo della barra laterale. Puoi aggiungere tanti moduli qui, in una singola riga, e si estenderanno sulla larghezza verticale della sezione, adiacente alla struttura della colonna che costruisci accanto ad essa. In effetti, per questo esempio, la pagina del blog ha già un modulo Email Optin e un modulo Persona in quell'area della barra laterale verticale del layout Specialty.
Ora, aggiungi il modulo della barra laterale nella parte superiore degli altri moduli nell'area della barra laterale verticale.
Nell'impostazione del modulo della barra laterale, aggiorna quanto segue:
Scheda Contenuto
Area widget: selezionare la barra laterale
Scheda di progettazione
Orientamento: a destra (perché la barra laterale si trova sulla destra)
Elimina separatore bordi: SÌ
Colore del testo:
Dimensione carattere intestazione scura: 26 px
Spaziatura di lettere di
intestazione: 3px Altezza riga di intestazione: 1.1em
Scheda Avanzate
Nella sezione CSS personalizzato, aggiungi il seguente CSS alla casella di testo Widget. In questo modo il design dei widget della barra laterale corrisponderà al design del sito:
sfondo: #fff; padding: 20px; -webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1);
Salva le impostazioni
Ora puoi vedere che il modulo della barra laterale mostra gli elementi del widget della barra laterale (Cerca e articoli recenti) e li visualizza nell'area della barra laterale verticale della sezione specialità.
Opzioni di contenuto per la barra laterale
Nella scheda Contenuto, troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla ciò che appare nel tuo modulo sarà sempre trovato in questa scheda.
Area dei widget
Il modulo Sidebar utilizza aree di creazione widget che puoi creare nella scheda Aspetti> Widget. È possibile selezionare una delle aree widget personalizzate da questo menu a discesa.
Etichetta amministrativa
Questo cambierà l'etichetta del modulo nel costruttore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette vengono visualizzate nel blocco del modulo dell'interfaccia di Divi Builder.
Opzioni di progettazione della barra laterale
Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa è la scheda che utilizzerai per modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare qualsiasi cosa.
Orientamento
Qui puoi scegliere su quale lato della pagina verrà visualizzata la barra laterale. Questo parametro controlla l'orientamento del testo e la posizione del bordo.
Elimina il separatore dei bordi
Qui puoi rimuovere il sottile bordo grigio che separa la barra laterale dal contenuto della tua pagina.
Colore del testo
Qui puoi scegliere se il tuo testo deve essere chiaro o scuro. Se stai lavorando su uno sfondo scuro, il tuo testo dovrebbe essere chiaro. Se lo sfondo è chiaro, il testo dovrebbe essere scuro.
Carattere intestazione
È possibile modificare il carattere del testo dell'intestazione selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, lettere maiuscole e sottolineato.
Dimensione del carattere dell'intestazione
Qui puoi regolare la dimensione del testo dell'intestazione. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo oppure immettere direttamente il valore della dimensione del testo desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.
Colore del testo dell'intestazione
Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo dell'intestazione, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.
Spaziatura delle lettere di intestazione
La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se desideri aumentare lo spazio tra ogni lettera nel testo dell'intestazione, utilizza il dispositivo di scorrimento dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.
Altezza riga di intestazione
L'altezza della riga influisce sullo spazio tra ogni riga del testo dell'intestazione. Se desideri aumentare lo spazio tra ogni riga, utilizza il cursore per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo. voce situata a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.
Carattere del corpo
È possibile modificare il carattere del corpo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.
Dimensione del carattere del corpo
Qui puoi regolare la dimensione del testo del tuo corpo. È possibile trascinare il dispositivo di scorrimento per aumentare o diminuire la dimensione del testo o immettere direttamente il valore della dimensione del testo desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.
Colore del testo del corpo
Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del tuo testo, scegli il colore desiderato dal selettore di colori usando questa opzione.
Spaziatura delle lettere del corpo
La spaziatura tra le lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel tuo testo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.
Altezza della linea del corpo
L'altezza della riga influisce sullo spazio tra ogni riga di testo nel tuo corpo Se vuoi aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione situato a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.
Opzioni avanzate della barra laterale
Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.
ID CSS
Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.
Classe CSS
Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tema figlio Divi o nel foglio di stile CSS personalizzato che aggiungi alla tua pagina o al tuo sito Web utilizzando le opzioni del tema Divi o le impostazioni nella pagina Divi Builder.
CSS personalizzato
Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le regole CSS separate da punto e virgola.
visibilità
Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare diverse mod su diversi dispositivi, o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA IL MODELLI DIVI[/vcex_button][/vc_column][/vc_row]
Altri tutorial di Divi
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere testo su un prodotto Divi WooCommerce
- Come cambiare il colore del menu tra le pagine Divi
- Come personalizzare le griglie di un blog con Divi
- Come utilizzare il ruolo di Editor Divi su WordPress
- Come creare un dispositivo di scorrimento Divi a schermo intero
- Come cambiare il colore dei menu tra le pagine di Divi
- Funzionalità che probabilmente non conosci su Divi
- Come usare Divi Builder su WordPress
- Come usare il modulo di scorrimento video Divi
- Come utilizzare il modulo Divi Builder Flip
- Come aggiungere un modulo di testimonianza su Divi Builder
- Come usare il modulo di testo Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente Divi
- Come usare il modulo Divi Social Media
- Come utilizzare il modulo negozio sul tema WordPress Divi
- Come utilizzare il modulo barra laterale Divi
- Come utilizzare il modulo Tabella prezzi Divi
- Come utilizzare il modulo del titolo delle pubblicazioni Divi
- Come aggiungere un modulo video di Divi
- Come utilizzare il modulo di navigazione dell'articolo
- Come usare il modulo di ricerca Divi
- Come utilizzare il modulo portafoglio Divi
- Come usare il modulo persona su Divi Builder
- Come usare il modulo portafoglio con filtro Divi
- Come utilizzare il modulo di scorrimento a larghezza piena
- Come utilizzare il modulo immagine Divi Builder
- Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
- Come utilizzare il modulo della galleria di immagini
- Come utilizzare il modulo Divi Builder Full-Width Card
- Come utilizzare il modulo Divi Full Width Portfolio
- Come utilizzare il modulo di intestazione a tutta larghezza Divi
- Come utilizzare il modulo contatore Divi
- Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
- Come utilizzare il modulo Divi Email Optin
Ciao
A differenza di te, sto cercando di rimuovere la barra laterale nelle pagine degli articoli del mio blog e non so come farlo sulla nuova versione di Divi 4
Hai un consiglio?
grazie
Aurélie
Ciao e grazie per questi tutorial.
In questo esempio hai iniziato con una pagina a larghezza intera o con un modello con una barra laterale originale?
Ciao Cess, non ricordo davvero.