Divi ti consente di posizionare i cursori in sezioni a larghezza intera, in modo che i tuoi cursori si estendano su tutta la larghezza del browser. I cursori Divi supportano sfondi parallasse e sfondi video!
Come aggiungere un modulo Diapo a tutta larghezza da Divi
Prima di poter aggiungere un modulo di scorrimento a larghezza intera alla tua pagina, devi prima passare a Divi Builder. Una volta che il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Buildersopra 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.
Una volta che sei nel Visual Builder, puoi fare clic sul pulsante più 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 di scorrimento a larghezza intera 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 "Slide" e quindi fare clic su Invio per trovare e aggiungere automaticamente il modulo di scorrimento a larghezza intera! 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 .
Esempio di caso d'uso: aggiunta di una sezione Hero del dispositivo di scorrimento a larghezza intera alla tua home page
Un cursore a larghezza intera è un ottimo modo per mostrare più CTA al di sopra della soglia della tua home page. La combinazione di immagini e contenuti può davvero dare alla tua sezione un aspetto professionale che si distingue.
Per questo esempio, aggiungerò una diapositiva a larghezza intera per fungere da sezione principale in una home page.
Utilizzando Visual Builder, aggiungi una sezione Fullwidth nella parte superiore della tua pagina web. Quindi inserire il modulo Slider a larghezza intera nella nuova sezione. Nella scheda Contenuto delle impostazioni della diapositiva a larghezza intera, fare clic su + Aggiungi un nuovo elemento per creare la tua prima diapositiva.
Nelle impostazioni della diapositiva della prima diapositiva, aggiorna le seguenti opzioni:
Opzioni di contenuto
En-tête : [inserisci il titolo della diapositiva]
Pulsante di testo : [inserire il testo del pulsante]
Contenuto : [inserisci il testo del contenuto della diapositiva]
URL del pulsante : [inserisci l'URL di destinazione del pulsante Slide]
Immagine di sfondo : [inserisci l'immagine che servirà da sfondo per la diapositiva]
Opzioni di design
Usa la sovrapposizione di sfondo : SÌ
Colore della sovrapposizione di sfondo : rgba (0,0,0,0.2) questa sovrapposizione scurisce leggermente l'immagine di sfondo per rendere il testo più leggibile.
Salva le impostazioni della diapositiva
Ora duplica la diapositiva appena creata e aggiorna la nuova diapositiva con il nuovo contenuto secondo necessità. Ripeti l'operazione per tutte le diapositive che desideri aggiungere.
È tutto. Per questo esempio, includo solo due diapositive, ma il risultato è un efficace slider a tutta larghezza con più inviti all'azione che invita l'utente a fare clic sul pulsante per ottenere ulteriori informazioni. Poiché questo è il tuo principale invito all'azione per il tuo sito web, suggerisco di eseguire test suddivisi sulla diapositiva a larghezza intera utilizzando Divi Leads e vedere quale converte meglio.
Slide Full Content Options
Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo si troverà sempre in questa scheda.
frecce
Scegli se visualizzare o meno le frecce di navigazione sinistra e destra.
Contrôles
Scegliere se visualizzare o meno i pulsanti del cerchio / gli indicatori delle diapositive nella parte inferiore del cursore.
Etichetta dell'amministratore
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 del modulo di scorrimento
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.
Rimuovi l'ombra interna
Per impostazione predefinita, nel cursore viene visualizzata un'ombra interna. Se vuoi disattivare questa ombra, puoi farlo usando questa impostazione.
effetto di parallasse
Abilitare questa opzione darà alle immagini di sfondo una posizione fissa durante lo scorrimento. Tieni presente che quando questa impostazione è abilitata, le tue immagini ridimensioneranno le tue immagini all'altezza del browser.
Carattere dell'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, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione 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 tipo di unità.
Polizia 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 dell'intervallo per aumentare o diminuire la dimensione del testo oppure immettere direttamente il valore della dimensione del testo desiderato 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à.
Imbottitura superiore
Questo parametro controlla lo spazio interno tra la parte superiore del modulo e il contenuto di testo nel modulo. Se desideri aumentare o diminuire questo spazio, inserisci qui il valore desiderato. Ad esempio, per ridurre lo spazio e le dimensioni complessive del cursore, è possibile immettere un valore di 100 px. Puoi anche inserire un valore percentuale, ad esempio 10%, per rendere l'altezza più dinamica.
Imbottitura inferiore
Questo parametro controlla lo spazio interno tra la parte inferiore del modulo e il contenuto del testo nel modulo. Se desideri aumentare o diminuire questo spazio, inserisci qui il valore desiderato. Ad esempio, per ridurre lo spazio e le dimensioni complessive del cursore, è possibile immettere un valore di 100 px. Puoi anche inserire un valore percentuale, ad esempio 10%, per rendere l'altezza più dinamica.
Usa stili personalizzati per il pulsante
L'attivazione di questa opzione rivela varie impostazioni di personalizzazione dei pulsanti che puoi utilizzare per modificare l'aspetto del pulsante del tuo modulo.
Dimensione del testo del pulsante
Questa impostazione può essere utilizzata per aumentare o diminuire la dimensione del testo nel pulsante. Il pulsante si adatta all'aumentare e diminuire della dimensione del testo.
Colore del testo del pulsante
Per impostazione predefinita, i pulsanti adottano il colore accento del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore di testo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del pulsante.
Colore di sfondo del pulsante
Per impostazione predefinita, i pulsanti hanno un colore di sfondo trasparente. Questo può essere modificato selezionando il colore di sfondo desiderato dal selettore dei colori.
Larghezza del bordo del pulsante
Tutti i pulsanti Divi hanno un bordo 2px per impostazione predefinita. Questo bordo può essere aumentato o diminuito utilizzando questa impostazione. I bordi possono essere rimossi inserendo un valore di 0.
Colore del bordo del pulsante
Per impostazione predefinita, i bordi dei pulsanti adottano il colore principale del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore del bordo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del bordo del pulsante.
Raggio del bordo del pulsante
Il raggio del bordo influisce sulla rotondità degli angoli dei pulsanti. Per impostazione predefinita, i pulsanti in Divi hanno un piccolo raggio del bordo che arrotonda gli angoli di 3 pixel. È possibile ridurre questo valore a 0 per creare un pulsante quadrato o aumentarlo in modo significativo per creare pulsanti con bordi circolari.
Spaziatura delle lettere del pulsante
La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo del pulsante, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere 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 suo tipo di unità.
Carattere pulsante
È possibile modificare il carattere del testo del pulsante 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.
Aggiungi un'icona a pulsante
Disattivata, questa impostazione rimuoverà le icone dal pulsante. Per impostazione predefinita, tutti i pulsanti Divi visualizzano un'icona a forma di freccia al passaggio del mouse.
Icona del pulsante
Se le icone sono abilitate, puoi usare questa impostazione per scegliere quale icona usare nel tuo pulsante. Divi ha diverse icone tra cui scegliere.
Pulsante icona colore
La regolazione di questa impostazione cambierà il colore dell'icona che appare sul tuo pulsante. Per impostazione predefinita, il colore dell'icona è lo stesso del colore del testo del pulsante, ma questa impostazione consente di regolare il colore in modo indipendente.
Pulsante di posizionamento delle icone
Puoi scegliere di visualizzare l'icona del tuo pulsante a sinistra o a destra del tuo pulsante.
Mostra solo l'icona quando si passa con il mouse sopra il pulsante
Per impostazione predefinita, le icone dei pulsanti vengono visualizzate solo quando si passa con il mouse. Se vuoi che l'icona appaia sempre, disattiva questa impostazione.
Passa il colore del testo al passaggio del mouse
Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.
Colore di sfondo del pulsante al passaggio del mouse
Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.
Pulsante del bordo di passaggio del colore
Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.
Pulsante del bordo del passaggio del mouse
Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.
Pulsante di spaziatura delle note di puntamento
Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.
Modulo di scorrimento a larghezza intera per opzioni avanzate
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.
Animazione automatica
Se vuoi che il cursore scorra automaticamente, senza che il visitatore debba fare clic sul pulsante successivo, attiva questa opzione, quindi regola la velocità di rotazione sotto se lo desideri.
Velocità di animazione automatica (in ms)
Qui puoi indicare la velocità con cui il cursore si dissolve tra ogni diapositiva, se l'opzione "Animazione automatica" è abilitata sopra. Più alto è il numero, più lunga è la pausa tra ogni rotazione.
Continua Auto slide on Hover
L'attivazione consentirà l'esecuzione della diapositiva automatica al passaggio del mouse.
Nascondi i contenuti sui dispositivi mobili
Man mano che le dimensioni dello schermo si riducono sui dispositivi mobili, lo spazio sullo schermo diventa più prezioso. A volte è una buona idea disattivare alcuni elementi del cursore meno importanti per ridurre la dimensione del cursore e renderlo più leggibile. L'attivazione di questa impostazione nasconde il contenuto del testo del cursore sul cellulare.
Nascondi CTA sul cellulare
Man mano che le dimensioni dello schermo si riducono sui dispositivi mobili, lo spazio sullo schermo diventa più prezioso. A volte è una buona idea disattivare alcuni elementi del cursore meno importanti per ridurre la dimensione del cursore e renderlo più leggibile. L'attivazione di questa impostazione nasconderà i pulsanti di chiamata all'azione del cursore sui dispositivi mobili.
Visualizza immagine / video su dispositivo mobile
Man mano che le dimensioni dello schermo si riducono sui dispositivi mobili, lo spazio sullo schermo diventa più prezioso. A volte è una buona idea disattivare alcuni elementi del cursore meno importanti per ridurre la dimensione del cursore e renderlo più leggibile. Abilitando questa impostazione vengono visualizzate le immagini delle diapositive e i video sui dispositivi mobili (sono disabilitati per impostazione predefinita).
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.
Opzioni di contenuto per elementi del modulo diapositiva a larghezza intera
titolo
Imposta qui il testo del titolo del cursore.
Pulsante di testo
Se desideri visualizzare un pulsante sotto il contenuto della diapositiva, inserisci qui il testo del pulsante. Lascia vuoto questo campo se non desideri visualizzare un pulsante.
Contenuto
Inserisci qui il contenuto del corpo del cursore. Nota che la quantità di testo che inserisci qui determinerà l'altezza delle diapositive.
URL del pulsante
Se si visualizza un pulsante, inserire un URL Web valido in questo campo per impostare il collegamento di destinazione.
Trascina l'immagine
Se aggiungi un'immagine della diapositiva, apparirà a sinistra del testo della diapositiva sopra lo sfondo della diapositiva. Se non specifichi un'immagine di diapositiva, rimarrà con una diapositiva centrata di solo testo. Poiché l'altezza di ogni diapositiva è determinata dal testo, se l'immagine della diapositiva è sufficientemente alta, cadrà sotto la parte inferiore della diapositiva, creando un'immagine allineata nella parte inferiore.
Notare che l'altezza di una diapositiva con un'immagine di diapositiva può essere determinata da una diapositiva più alta nel dispositivo di scorrimento. Assicurati che l'immagine della diapositiva sia abbastanza grande da adattarsi se vuoi avere un'immagine allineata in basso. Per motivi di leggibilità, le immagini delle diapositive vengono visualizzate solo nei dispositivi di scorrimento della larghezza di colonna, colonna o 1 colonna. Allo stesso modo, le immagini delle diapositive non verranno visualizzate su larghezze del browser inferiori a 768 pixel. Le larghezze dell'immagine della diapositiva sono definite di seguito. Consigliamo che le immagini delle diapositive siano almeno altrettanto larghe.
Diapositiva video
Se aggiungi un video di diapositiva, apparirà a sinistra del testo della diapositiva sopra lo sfondo della diapositiva. Se non specifichi una diapositiva video, ti troverai a sinistra con una diapositiva centrata di solo testo. Poiché l'altezza di ciascuna diapositiva è determinata dal testo, se l'immagine della diapositiva è sufficientemente alta, cadrà sotto la parte inferiore della diapositiva, creando un'immagine allineata nella parte inferiore.
Metti in pausa il video
Consenti agli altri giocatori di mettere in pausa il video quando iniziano la riproduzione
Immagine di sfondo
Se impostata, questa immagine verrà utilizzata come sfondo per questo modulo. Per rimuovere un'immagine di sfondo, è sufficiente rimuovere l'URL dal campo delle impostazioni.
L'altezza di una diapositiva è determinata dalla quantità di testo che aggiungi. Se hai più diapositive, il cursore prenderà l'altezza della diapositiva più alta.
La larghezza del cursore è determinata dalla larghezza del browser. In base alle dimensioni dello schermo standard, consigliamo di utilizzare immagini di almeno 1280 px per 768 px.
Posizione dell'immagine di sfondo
Per impostazione predefinita, le immagini di sfondo vengono visualizzate al centro della diapositiva. È possibile utilizzare questa impostazione per modificare la posizione in alto, in basso, a sinistra, a destra o in uno qualsiasi dei quattro angoli della diapositiva.
Dimensione dell'immagine di sfondo
Per impostazione predefinita, le immagini di sfondo verranno ingrandite proporzionalmente per garantire che riempiano l'intera diapositiva. Tuttavia, puoi utilizzare questa opzione per modificare il comportamento predefinito. "Copertura" è il comportamento predefinito, che ridimensiona l'immagine per coprire l'intera area della diapositiva. "Adatta" costringerà anche l'immagine a coprire l'intera area, tuttavia, forzerà l'altezza e la larghezza dell'immagine affinché corrispondano all'altezza e alla larghezza del cursore. Ciò potrebbe provocare un'immagine distorta, ma impedirà il ritaglio dell'immagine. "Dimensioni reali" non ridimensiona l'immagine e la visualizza nella sua dimensione originale.
Colore di sfondo
Se desideri utilizzare solo uno sfondo a tinta unita per la diapositiva, utilizza il selettore di colori per impostare un colore di sfondo.
Video di sfondo MP4
Tutti i video devono essere scaricati in entrambi i formati .MP4 .WEBM per garantire la massima compatibilità con tutti i browser. Scarica la versione .MP4 qui. Nota importante: gli sfondi video sono disabilitati dai dispositivi mobili. Verrà invece utilizzata la tua immagine bkacground. Per questo motivo, è necessario impostare sia un'immagine di sfondo che un video di sfondo per garantire risultati migliori.
Video di sfondo WEBM
Tutti i video devono essere scaricati in entrambi i formati .MP4 .WEBM per garantire la massima compatibilità con tutti i browser. Scarica le versioni .WEBM qui. Nota importante: gli sfondi video sono disabilitati dai dispositivi mobili. Verrà invece utilizzata la tua immagine bkacground. Per questo motivo, è necessario impostare sia un'immagine di sfondo che un video di sfondo per garantire risultati migliori.
Larghezza del video di sfondo
Affinché i video siano dimensionati correttamente, è necessario inserire qui la larghezza esatta (in pixel) del video.
Altezza video sullo sfondo
Affinché i video siano dimensionati correttamente, è necessario immettere qui l'altezza esatta (in pixel) del video.
Opzioni di progettazione degli elementi dell'elemento scorrevole
Usa la sovrapposizione di sfondo
Quando abilitato, un colore di sovrapposizione personalizzato verrà aggiunto sopra l'immagine di sfondo e dietro il contenuto del dispositivo di scorrimento.
Colore di sfondo di sovrapposizione
Usa il selettore di colori per scegliere un colore per lo sfondo.
Usa la sovrapposizione del testo
Quando questa opzione è abilitata, viene aggiunto un colore di sfondo dietro il testo del cursore per renderlo più leggibile sulle immagini di sfondo.
Colore di sovrapposizione del testo
Utilizzare il selettore colore per scegliere un colore per la sovrapposizione di testo.
Raggio di bordo di sovrapposizione del testo
Il raggio del bordo influisce sulla rotondità degli angoli dell'area di sovrapposizione del testo. Per impostazione predefinita, gli angoli hanno un bordo leggermente arrotondato di 3 pixel. È possibile ridurre questo valore a 0 per creare un riquadro rettangolare o aumentare il valore per rendere gli angoli ancora più arrotondati.
Frecce colorate personalizzate
Quando passi il mouse su un modulo di scorrimento, vengono visualizzate delle frecce per consentire al visitatore di navigare attraverso ciascuna diapositiva. Per impostazione predefinita, queste frecce ereditano il colore del testo principale della diapositiva. Tuttavia, puoi definire un colore personalizzato per queste frecce utilizzando questa impostazione.
Dot Nav Colore personalizzato
In ogni cursore, gli elementi di navigazione per punti vengono visualizzati sotto il contenuto del cursore. Questi elementi consentono all'utente di navigare nel cursore. È possibile definire un colore personalizzato da utilizzare per questi elementi utilizzando il selettore di colori in questa impostazione.
Allineamento verticale dell'immagine della diapositiva
Questa impostazione determina l'allineamento verticale dell'immagine della diapositiva. L'immagine può essere centrata verticalmente o allineata nella parte inferiore della diapositiva.
Colore del testo
Se lo sfondo della diapositiva è scuro, il colore del testo dovrebbe essere impostato su "Chiaro". Viceversa, se lo sfondo della diapositiva è chiaro, il colore del testo dovrebbe essere impostato su "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, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione 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 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 dell'intervallo per aumentare o diminuire la dimensione del testo oppure immettere direttamente il valore della dimensione del testo desiderato 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à.
Usa stili personalizzati per il pulsante
L'attivazione di questa opzione rivela varie impostazioni di personalizzazione dei pulsanti che puoi utilizzare per modificare l'aspetto del pulsante del tuo modulo.
Dimensione del testo del pulsante
Questa impostazione può essere utilizzata per aumentare o diminuire la dimensione del testo nel pulsante. Il pulsante si adatta all'aumentare e diminuire della dimensione del testo.
Colore del testo del pulsante
Per impostazione predefinita, i pulsanti adottano il colore accento del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore di testo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del pulsante.
Colore di sfondo del pulsante
Per impostazione predefinita, i pulsanti hanno un colore di sfondo trasparente. Questo può essere modificato selezionando il colore di sfondo desiderato dal selettore dei colori.
Pulsante Larghezza bordo
Tutti i pulsanti Divi hanno un bordo 2px per impostazione predefinita. Questo bordo può essere aumentato o diminuito utilizzando questa impostazione. I bordi possono essere rimossi inserendo un valore di 0.
Colore del bordo del pulsante
Per impostazione predefinita, i bordi dei pulsanti adottano il colore principale del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore del bordo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del bordo del pulsante.
Raggio del bordo del pulsante
Il raggio del bordo influisce sulla rotondità degli angoli dei pulsanti. Per impostazione predefinita, i pulsanti in Divi hanno un piccolo raggio del bordo che arrotonda gli angoli di 3 pixel. È possibile ridurre questo valore a 0 per creare un pulsante quadrato o aumentarlo in modo significativo per creare pulsanti con bordi circolari.
Spaziatura delle lettere del pulsante
La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo del pulsante, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere 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 suo tipo di unità.
Carattere pulsante
È possibile modificare il carattere del testo del pulsante 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.
Aggiungi un'icona a pulsante
Disattivata, questa impostazione rimuoverà le icone dal pulsante. Per impostazione predefinita, tutti i pulsanti Divi visualizzano un'icona a forma di freccia al passaggio del mouse.
Icona del pulsante
Se le icone sono abilitate, puoi usare questa impostazione per scegliere quale icona usare nel tuo pulsante. Divi ha diverse icone tra cui scegliere.
Pulsante icona colore
La regolazione di questa impostazione cambierà il colore dell'icona che appare sul tuo pulsante. Per impostazione predefinita, il colore dell'icona è lo stesso del colore del testo del pulsante, ma questa impostazione consente di regolare il colore in modo indipendente.
Pulsante di posizionamento delle icone
Puoi scegliere di visualizzare l'icona del tuo pulsante a sinistra o a destra del tuo pulsante.
Mostra solo l'icona quando si passa con il mouse sopra il pulsante
Per impostazione predefinita, le icone dei pulsanti vengono visualizzate solo quando si passa con il mouse. Se vuoi che l'icona appaia sempre, disattiva questa impostazione.
Passa il colore del testo al passaggio del mouse
Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.
Colore di sfondo del pulsante al passaggio del mouse
Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.
Pulsante del bordo di passaggio del colore
Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.
Pulsante del bordo del passaggio del mouse
Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.
Pulsante di spaziatura delle note di puntamento
Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.
Opzioni cursore avanzate Larghezza intera
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.
Testo immagine alternativo
Il testo alternativo fornisce tutte le informazioni necessarie se l'immagine non viene caricata, visualizzata correttamente o in qualsiasi altra situazione in cui un utente non può visualizzare l'immagine. Permette inoltre di leggere e riconoscere l'immagine dai motori di ricerca.
[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
Buongiorno,
Grazie mille per questo tutorial. Confesso di essere completamente perso e di non aver fatto qualcosa che dovrebbe essere di semplicità biblica:
elimina una (o più) diapositive in più nella mia presentazione divi
Ovviamente ho visto che nell'elenco delle diapositive di una presentazione creata, a destra di ogni riga corrispondente a una diapositiva troviamo l'icona di un "cestino" e tre puntini: ma cliccando sul cestino... aggiunge una copia della diapositiva corrente! e il menu contestuale non contiene alcuna riga che ne consenta la cancellazione.
Ho portato alla luce da qualche parte (non ricordo dove) che dovevo “posizionarmi sulla diapositiva da eliminare” (assicurarsi che fosse sullo schermo) ma non è cambiato nulla.
Lavoro su Mac nel sistema Mojave. E ho provato a connettermi a WordPress in Firefox come in Chrome
Grazie mille per l'aiuto che puoi... e scusa per la domanda così stupida
Ciao
Grazie per questo tutorial, è davvero completo!
Sai se è possibile modificare o addirittura rimuovere l'animazione dal testo? perchè non di default va dal basso verso l'alto sulle immagini di sfondo e non è molto bella credo.
grazie
Bonjour Olivier,
Cerchi le impostazioni del testo in questione?
Buongiorno,
È possibile che facendo clic su un pulsante di diapositiva reindirizzi il collegamento URL a una nuova scheda?
Grazie in anticipo per le tue luci!
Ciao ! grazie per il tuo articolo. il mio problema è che il video di sfondo non viene mostrato sui dispositivi mobili, il mio cliente lo voleva assolutamente. Pensavo di aver trovato la mia risposta perché secondo il tuo articolo, in "Avanzate" c'è la possibilità di attivare i video su mobile che sono disattivati di default. ma non ho trovato questa possibilità sul mio divi. La ringrazio per la risposta…
Yanis
Ciao Yanis,
La tua Divi è aggiornata?