Come costruire un cursore a schermo intero personalizzato con Divi 5 (download gratuito)

Una delle ultime uscite di Divi 5 introduce il modulo di carosello di gruppo, una funzionalità per la creazione di cursori e caroselli personalizzati e coinvolgenti per il tuo sito WordPress. Puoi facilmente mostrare il tuo portafoglio, prodotti, un eroe coinvolgente o un cursore a schermo intero e portare il design del tuo sito a nuove altezze.

In questo post, forniremo una guida passo-passo per la creazione di un cursore a schermo intero utilizzando il modulo di carosello di gruppo. Immergiamoci!

Comprensione del modulo di carosello di gruppo

Il modulo di carosello di gruppo è un'aggiunta versatile a Divi 5, che consente di creare cursori e caroselli dinamici.

A differenza dei moduli tradizionali, supporta una vasta gamma di layout, dalle semplici giostre di immagine a cursori complessi e basati su post basati sul costruttore di loop. Questa flessibilità lo rende perfetto per mostrare contenuti come portafogli, testimonianze o gallerie di prodotti in modo convincente.

Caratteristiche chiave del modulo di carosello di gruppo

Il modulo di carosello di gruppo brilla con funzionalità robuste. Supporta i loop di contenuti dinamici, consentendo di inserire post, pagine o tipi di post personalizzati direttamente nel cursore utilizzando il costruttore di loop.

Il modulo consente inoltre di utilizzare qualsiasi modulo Divi per costruire cursori belli e coinvolgenti usando righe e gruppi di moduli nidificati. Puoi personalizzare la navigazione con frecce e punti di paginazione, personalizzando la loro posizione, il colore e altri stili per abbinare il tuo sito.

Le opzioni di autoplay, velocità regolabili e funzionalità di pausa-in-hover offrono un'esperienza accattivante per i tuoi visitatori, assicurando che rimangono sul tuo sito più a lungo. Inoltre, il modulo è completamente personalizzabile, consentendo di creare layout a schermo intero e a larghezza completa, rendendolo ideale per sezioni di eroi, servizi o funzionalità sul tuo sito Web.

Come costruire un cursore a schermo intero con il modulo carosel di gruppo di Divi 5

In questo tutorial, ti mostreremo come utilizzare il modulo Carousel di gruppo per costruire un cursore a schermo intero per i tuoi prossimi siti Web Divi 5. Alla fine, avrai l'abilità impostata per costruire cursori accattivanti per incoraggiare i tuoi visitatori ad agire.

Passaggio 1: impostare una nuova pagina

Crea una nuova pagina, aggiungi un titolo e fai clic su Usa Divi Builder per iniziare.

Quando si apre il Visual Builder, scegli Build da zero sotto le opzioni Crea la tua pagina .

Passa il mouse sopra la sezione nella nuova pagina per rivelare l' icona delle impostazioni . Fai clic su di esso per rivelare le impostazioni della sezione.

Passare alla scheda Design . Fai clic sul menu a discesa layout . In base al contenuto di giustifica , seleziona Center . Nel campo Allinea degli elementi , selezionare Centro . Ciò consentirà al contenuto della nostra sezione di essere centrati in orizzontale e in verticale.

Successivamente, regoleremo le impostazioni di spaziatura per la sezione. Espandi il menu a discesa spaziatura . Imposta il margine su 0px , in alto e in basso. Sotto l'imbottitura , impostare la parte superiore e inferiore su 0px .

Con le impostazioni della sezione in posizione, fare clic sull'icona Green + per aggiungere una nuova riga.

Seleziona la riga a colonna singola in colonne uguali .

Quindi, aggiungi il modulo di carosello di gruppo alla riga.

Prima di aggiungere contenuto, dobbiamo impostare il modulo di giostra e raggruppa con i controlli Flexbox e di spaziatura.

Passaggio 2: configurare le impostazioni della riga

La creazione di un cursore a schermo intero richiede di impostare la riga e il modulo di carosello di gruppo alla larghezza del 100% . Fai clic sull'icona dei livelli per regolare facilmente le sezioni. Questo è cruciale quando si lavora con sezioni e righe a larghezza fullidth, specialmente quando l'imbottitura e il margine sono stati impostati su 0. Rende più facile vedere la struttura del layout della tua pagina

Nella vista Layer, fare clic per selezionare la riga a colonna singola che ospita il modulo di carosello di gruppo. Passare alle impostazioni del design. Nel menu a discesa del layout, regolare lo spazio orizzontale su 0 .

Inoltre, imposta gli articoli allineati su Center per la riga.

Impostare la larghezza e la larghezza massima nella scheda Dimensione al 100%.

Nella scheda Spaziatura , impostare il margine superiore e inferiore e l'imbottitura su 0px .

Passaggio 3: configurare le impostazioni della giostra del gruppo

Successivamente, configureremo le impostazioni del carosello del gruppo. Espandi il menu a discesa Impostazioni della giostra nella scheda Contenuto. È possibile attivare la rotazione automatica , scegliere la velocità di rotazione automatica all'impostazione predefinita di 2000 ms e abilitare la pausa su Hover .

Nella scheda Elements , disabilita la navigazione dot e lasciano le frecce di spettacolo abilitate. Puoi anche scegliere un'icona personalizzata per le frecce sinistro e destro.

Fare clic per espandere la scheda frecce nella scheda Design. Assegnare #ffffff come colore della freccia , lasciare la dimensione della freccia al 48px predefinito e lasciare la posizione della freccia impostata all'interno .

Espandi la scheda Sfondo e assegna #000000 come colore di sfondo .

Passaggio 4: modella il primo gruppo

Possiamo aggiungere contenuti alla prima diapositiva con le impostazioni della sezione, della riga e del carosello di gruppo. Fare clic sulla scheda Contenuto nel modulo Carousel Group e fare clic sull'icona Impostazioni per il gruppo.

Espandi il menu a discesa in background e seleziona la scheda Gradiente .

Fai clic sul primo cursore gradiente per assegnare un nuovo colore. Immettere #EFB648 nel campo colore .

Quindi, fai clic nel cursore del 2 ° gradiente e assegna #F28F52 come colore.

Nel campo Tipo di gradiente , seleziona Circolare .

Quindi, vai alla scheda Design . Espandi la scheda di spaziatura e assegna l'imbottitura del 5% in alto e in basso del gruppo.

Passaggio 5: aggiungi contenuto al primo gruppo

Ora che le impostazioni del nostro gruppo sono configurate, possiamo iniziare ad aggiungere contenuti al gruppo. Fai clic sull'icona Black + per aggiungere un modulo.

Quando viene visualizzata la finestra di dialogo Inserisci modulo o riga, fare clic sulla scheda nuova riga . Nella sezione colonne uguali , selezionare la riga della colonna singola .

Aggiungi un modulo di intestazione

Selezionare e inserire il modulo di intestazione .

Espandi il menu a discesa di testo e immettere il succo arancione come titolo .

Passare alla scheda Design . Espandi il menu a discesa di testo . Seleziona H1 come livello di intestazione , usa Bebas neue come carattere di intestazione , imposta lo stile del carattere di intestazione su maiuscolo , l' allineamento del testo della rotta al centro , il colore del testo di intestazione a #ffffff e la dimensione del testo di intestazione a 20em .

Utilizzare i controlli reattivi di Divi 5 per regolare la dimensione del testo dell'intestazione a 15em su tablet e 8em su dispositivi mobili.

Aggiungi una nuova riga

Successivamente, aggiungeremo una nuova riga sotto la riga a colonna singola contenente il modulo di intestazione. Fai clic sull'icona Black + per aggiungere un nuovo modulo.

Fai clic sulla scheda nuova riga . Sotto colonne offset , scegli l'opzione 1/4 + 1/2 + 1/4.

Nella scheda Design , espandere la scheda Dimensizzazione e immettere il 70% per la larghezza e la larghezza massima . Imposta l' allineamento al centro .

Aggiungi un modulo di intestazione

Seleziona il modulo di intestazione e aggiungilo alla prima colonna .

Dai un titolo e vai alla scheda Design . Espandi il menu a discesa di testo . Seleziona H2 per il livello di intestazione , bebas neue come carattere di intestazione , maiuscolo come stile del carattere intestazione , #ffffff come colore di testo di intestazione e 6em come dimensione del testo dell'intestazione .

Utilizzare i controlli reattivi di Divi per regolare la dimensione del testo dell'intestazione su 4em .

Aggiungi un modulo di testo

Aggiungi un modulo di testo sotto l'intestazione nella prima colonna. Immettere un po 'di testo del corpo e passare alla scheda Design . Seleziona Poppins come carattere di testo , imposta il colore di testo su #ffffff e la dimensione del testo su 16px .

Aggiungi un modulo pulsante

Aggiungi un modulo pulsante sotto il modulo di testo nella prima colonna. Assegna il testo al pulsante nella scheda Contenuto e scambia la scheda Design. Espandi il menu a discesa del pulsante e abilita utilizzare gli stili personalizzati per il pulsante . Quindi espandere il menu di sfondo del pulsante . Nella scheda Colore di sfondo , aggiungi #528bf2 come colore del pulsante.

Usa i controlli del mouse di Divi 5 per assegnare #6a7c9d come colore hover per il pulsante.

Torna alla vista desktop. Espandi la scheda a discesa bordo del pulsante . Aggiungi 100px sotto il raggio del bordo del pulsante e imposta la larghezza del bordo del pulsante su 0px .

Espandi il menu a discesa del testo del pulsante . Assegna Poppins come carattere pulsante , #ffffff come colore del testo del pulsante e 16px come dimensione del testo del pulsante .

Espandi le impostazioni dell'icona del pulsante e disabilita l' icona del pulsante Show .

Infine, espandi il menu a discesa spaziatura . Aggiungi l'imbottitura 15px in alto e in basso e 35px a sinistra e a destra.

Aggiungi un modulo immagine

Posizionare un modulo immagine nella seconda colonna. Quando vengono visualizzate le impostazioni, passare il mouse sul campo dell'immagine per rivelare le impostazioni. Fare clic sull'icona Impostazioni per caricare la libreria multimediale e caricare un'immagine nel modulo.

Successivamente, aggiungeremo un'interazione all'immagine per creare un effetto mouse-over. Passare alla scheda avanzata . Espandi il menu delle interazioni per rivelare le sue impostazioni. Fai clic sul pulsante +Aggiungi interazione .

Seleziona il mouse Immettere quando vengono visualizzate le opzioni.

Immettere l'inclinazione dell'immagine nel campo dell'etichetta di amministrazione , selezionare il mouse Invio come evento trigger, il movimento del mouse mirror come azione dell'effetto, selezionare l'immagine come modulo target, inclinazione come tipo di movimento e 15 per la sensibilità. Infine, fai clic sul pulsante Salva interazione per abilitare l'interazione.

Aggiungi un modulo di contatori a barre

Fare clic per aggiungere il modulo dei contatori a barre nella terza colonna. Nella scheda Contenuto. Nella scheda Elements , disabilita la percentuale di mostra .

Quindi, espandi la scheda Sfondo. Aggiungi #ffffff come colore di sfondo.

Scambiare alla scheda Design ed espandere il menu a discesa della barra . Nel campo del colore di sfondo della barra , aggiungi #528bf2 come colore.

Espandi il menu a discesa del testo del titolo . Nel campo del carattere del titolo , seleziona Bebas Neue . Seleziona #FFFFFF come colore del testo del titolo e 22px come dimensione del testo del titolo .

Scambia indietro alla scheda Contenuto. Questa volta, fai clic sull'icona Impostazioni per l'elemento del contatore del primo bar.

Immettere il testo nel campo del titolo e impostare il campo percentuale su 75 .

Fare clic per tornare alla scheda Contenuto principale per il modulo dei contatori a barre.

Ora che le nostre impostazioni di progettazione sono impostate, è possibile copiare facilmente l'elemento del contatore del primo bar per preservare le impostazioni.

Duplica il contatore a barre e modifica il titolo e la percentuale nelle impostazioni desiderate.

Passaggio 6: Aggiungi animazioni

Per rendere il gruppo più coinvolgente, aggiungeremo alcuni effetti di animazione. Innanzitutto, aggiungeremo un effetto zoom alla nostra intestazione principale. Fare clic per selezionare l'intestazione principale per il gruppo. Passare alla scheda Design e scorrere verso il basso per espandere la scheda Animazione. Seleziona Zoom per l'animazione. Lascia tutte le impostazioni così com'è.

Quindi, fare clic per espandere la seconda riga (riga a tre colonne). Fai clic nelle impostazioni della prima colonna.

Fai clic sulla scheda Design e scorri verso il basso per rivelare la scheda Animazione. Scegli Slide per lo stile di animazione e a destra per la direzione dell'animazione. Lascia tutte le altre impostazioni così com'è.

Fai clic sulla scheda Contenuto principale per la riga. Questa volta, selezionare la terza colonna. Passa alla scheda Design, espandi la scheda Animazione e scegli Slide> Sinistra per l'animazione. Lascia le altre impostazioni ai loro valori predefiniti.

Passaggio 7: righe sovrapposte

Per aggiungere un piccolo tocco in più al layout, regoleremo il margine sulla seconda riga per creare un effetto sovrapposizione. Ciò spingerà la riga verso l'alto, permettendogli di sovrapporre la voce principale per un bell'effetto. Selezionare la seconda riga nel layout e passare alla scheda Design. Espandi la scheda spaziatura per rivelare le impostazioni. A margine superiore, impostare il valore al -8%.

Successivamente, applicheremo un valore dell'indice Z per posizionare la seconda riga sopra il 1 °. Passare alla scheda avanzata, espandere le impostazioni di posizione e applicare 999999 al campo indice Z.

Quando verrà visualizzato in anteprima il cursore, vedrai che la seconda riga è stata spinta per sovrapporsi leggermente alla prima fila, creando un bel effetto sovrapposizione.

Passaggio 8: test reattività

Prima di copiare il primo gruppo, è una buona idea testare la reattività del layout. Utilizzare i punti di interruzione personalizzabili di Divi 5 per apportare eventuali modifiche.

In Divi 5, ora ci sono 7 punti di interruzione invece di Divi 4's 3. Puoi usare questi punti di interruzione per assicurarti che il tuo layout appaia incredibile su qualsiasi dimensione dello schermo. Passare attraverso i punti di interruzione e apportare le modifiche necessarie prima di copiare il primo gruppo.

Una delle migliori nuove funzionalità in Divi 5 è la possibilità di modificare l'ordine delle colonne per i dispositivi mobili. Questo è un ottimo modo per mantenere il design funzionale ed efficace su tutte le dimensioni dello schermo. Durante la vista mobile, selezionare la seconda colonna della seconda riga nel nostro layout (riga a 3 colonne).

Nella scheda Contenuto , espandi la scheda Ordine . Da lì, imposta l' ordine di visualizzazione su -1 . Ciò posizionerà la colonna con l'immagine nella parte superiore, consentendo all'immagine di sovrapporre l'intestazione come fa sulle viste desktop e tablet.

Passaggio 9: gruppi duplicati

Una volta che abbiamo tutto squadrato, possiamo facilmente copiare il primo gruppo e cambiare il gradiente di sfondo, il testo e l'immagine senza ripetere tutti i passaggi. Nella scheda Contenuto del gruppo di giostra principale, fare clic per duplicare il primo gruppo.

Prima di copiare, assegnare un'etichetta di amministrazione al gruppo per semplificarlo.

Da lì, cambia il titolo, scambia l'immagine e assegna un nuovo gradiente di sfondo al gruppo. Usa #FC6A3C per il primo cursore gradiente e #C52F00 per il secondo.

Ti consigliamo anche di modificare i colori del bancone e del contatore a barre in #3DFCCA e #C52F00 su Hover.

Dovremo anche regolare i tempi di animazione per il 2 ° gruppo. Ciò garantisce che le animazioni non si caricano per altre diapositive fino a quando il cursore non avanza. Nel modulo di intestazione principale, vai alla scheda Design , espandi il menu di animazione e imposta il ritardo di animazione su 2000ms .

Fai lo stesso per la fila a 3 colonne. Nella prima e terza colonne , imposta il ritardo di animazione su 2000ms .

Modifiche al terzo gruppo

Per il terzo gruppo, utilizzare #71b953 e #617a56 per il gradiente di fondo .

Per i moduli di bottoni e barili , utilizzare #BA54B3 e #654F64 per il colore del mouse.

Dovrai anche cambiare il ritardo di animazione sul modulo di intestazione e la prima e la terza colonne della seconda riga a 4000 ms .

Modifiche al quarto gruppo

Per il gradiente di fondo , utilizzare #Ad52B7 e #Ad52B7 .

Utilizzare #83B853 e #83B853 per il contatore a barra e i moduli pulsanti.

Infine, imposta il ritardo di animazione su 6000 ms sulla voce principale nel gruppo, insieme alla prima e alla terza colonne della riga a 3 colonne.

Passaggio 10: anteprima e salva il cursore

L'ultimo passo è salvare il layout e visualizzare in anteprima per garantire che non siano stati persi alcun passaggio. Nel Visual Builder, fai clic sul pulsante Salva nell'angolo in alto a destra.

Fare clic sul pulsante Anteprima per aprire il layout in una nuova scheda.

Una volta completato, il tuo cursore dovrebbe apparire così:

Questo è tutto! Il modulo di carosello di gruppo è una nuova aggiunta versatile a Divi 5. Ti consente di creare cursori e giostre per qualsiasi progetto e offre opzioni di personalizzazione illimitate.

Scarica il layout della giostra a schermo intero

Se vuoi utilizzare il layout che abbiamo ricreato in questo post, puoi accedervi attraverso il modulo sottostante. Una volta scaricata e decompressa la cartella, troverai un file JSON. Passa alla libreria Divi per caricare il file in modo da poter accedervi e utilizzarlo per qualsiasi pagina che crei.

Scarica i file

Scarica gratuitamente

Unisciti alla newsletter Divi e ti invieremo una copia del pacchetto di layout della pagina di destinazione di Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi di Divi straordinari e gratuiti. Segui e sarai un Master Divi in ​​pochissimo tempo. Se sei già sottoscritto, digita semplicemente il tuo indirizzo email di seguito e fai clic su Download per accedere al pacchetto di layout.

SCARICAMENTO

Ti sei iscritto con successo. Controlla il tuo indirizzo email per confermare l'abbonamento e accedere ai pacchetti di layout Divi settimanali gratuiti!

Costruisci la tua prima giostra in Divi 5 oggi

La creazione di un cursore a schermo intero personalizzato con il modulo carosel di gruppo di Divi 5 apre un mondo di possibilità di creare esperienze coinvolgenti sui tuoi siti Web. Seguendo i passaggi di questo post, hai imparato come utilizzare le funzionalità del modulo, da opzioni di personalizzazione avanzate come animazioni, punti di interruzione reattive ed effetti interattivi. La flessibilità del modulo Carousel di gruppo ti consente di creare diapositive per qualsiasi cosa tu possa immaginare, il tutto mantenendo un aspetto senza soluzione di continuità e professionale in tutte le dimensioni dello schermo.

Scarica l'ultimo alfa pubblica Divi 5, sperimenta il modulo di carosello di gruppo e facci sapere cosa ne pensi nei commenti o sui nostri canali di social media.