Come creare un carosello in Divi 5 (senza plugin aggiuntivi)

I caroselli sono un componente di design che praticamente ogni sito web online desidera, indipendentemente dal fatto che si tratti di merce, testimonianze o simboli di acquirenti. Prima di ora, i clienti Divi si affidavano continuamente a plugin di terze parti o codice personalizzato per ottenere gli effetti desiderati.

Con Divi 5, ora non è più così. Il nuovissimo modulo Group Carousel ti consente di costruire caroselli totalmente personalizzabili senza ritardi in tutto il builder, eliminando la necessità di plug-in aggiuntivi.

Perché costruire caroselli senza plugin

Anche i plugin Slider saranno robusti, tuttavia ogni ulteriore inserito porta codice aggiuntivo da caricare e aumenterà le probabilità che qualcosa si rompa. Con la giostra ora integrata in Divi, ottieni immediatamente 4 grandi vincite:

• Più veloce da caricare: Nessun ulteriore script di plugin appesantisce i problemi. Le tue pagine rimangono più leggere e più scattanti, il che è massimo sul cellulare dove fanno affidamento i secondi.
• Gli aggiornamenti sono facili: Non devi preoccuparti degli aggiornamenti ogni volta che wordpress si aggiorna. Poiché la giostra vive all’interno di Divi, il tutto si aggiorna contemporaneamente, rendendolo molto meno incline a rompersi.
• Design adatto a: I plugin esterni mettono continuamente in difficoltà il dispositivo di progettazione del tuo tema. Con il modulo locale di Divi, utilizzi gli strumenti simili che già usi per caratteri, colori e spaziatura, quindi il carosello sembra una parte del tuo sito web online, ora non un componente aggiuntivo.
• Prove a lungo termine: I plugin possono scomparire in un solo giorno. Poiché questo modulo fa parte di Divi stesso, sai che continuerà a essere supportato e continuerà ad evolversi insieme allo sviluppatore.

Scopri il modulo Carousel della forza lavoro in Divi 5

Il modulo Workforce Carousel di Divi 5 ti fornisce una soluzione per costruire caroselli puliti e versatili all’interno del costruttore.

Il vantaggio reale è che ogni diapositiva funziona come un contenitore per diversi moduli Divi, in modo da non ritrovarti con un unico modello. Potrai progettarli d’altra parte che desideri avere.

Ogni diapositiva è più grande di un segnaposto per un’immagine. Potrai accedere a una galleria per esporre la merce, abbinare un titolo a un contenuto testuale per concentrarti su una testimonianza o caricare pulsanti e icone per inviti all’azione. Per layout più interessati, le diapositive penzoleranno anche moduli completi equivalenti a trafiletti, carte da gioco, o tabelle dei prezzi.

Le Impostazioni carosello mettono i controlli chiave a portata di mano.

• Scelte di navigazione: Visualizza frecce, punti, ciascuno o mantienilo vuoto senza nessuno.
• Diapositive da visualizzare: Decidi immediatamente il numero di diapositive da visualizzare, con valori separati per desktop, pillola e cellulare.
• Impostazioni di transizione: Consenti la rotazione computerizzata, imposta la velocità di transizione e ottimizza le animazioni.

Si collega inoltre immediatamente con Loop Builder di Divi 5, quindi potrai inserire post, articoli o campi personalizzati. Nuovi contenuti appaiono regolarmente nel carosello, rendendolo ideale per blog, negozi o portfolio che richiedono aggiornamenti continui senza modifiche al manuale.

Lo stile rimane invariato poiché il modulo utilizza gli stessi controlli di progettazione del resto di Divi. Colori, tipografia, spaziatura e risultati utilizzano tutti lo stesso dispositivo di variabili e preimpostazioni, quindi le regolazioni si propagano in tutto il tuo sito web online con una sola modifica. E poiché è costruito sulla nuova base di Divi 5, il carosello funziona in modo snello: veloce da caricare, pulito sul cellulare e libero dalla resistenza che ottieni continuamente con plug-in di terze parti.

Scopri tutto sul modulo Carosello di gruppo di Divi 5

Sviluppare un carosello senza plugin in Divi 5 (passo dopo passo)

Prima di salire le scale, ecco cosa costruiremo: un carosello di prodotti progettato interamente con i controlli locali di Divi. Ogni diapositiva presenta un’immagine, contenuto testuale e un pulsante, mostrando i pezzi in una struttura vuota e scorrevole.

1. Carica il modulo Carousel della forza lavoro

Inizia includendo una nuova riga nella tua struttura. Per un carosello di prodotti in stile eroe, imposta Row’s Larghezza A 75% E Larghezza massima A nessuno in modo che non si estenda troppo attorno allo schermo del display.

Successivamente, filtra il riempimento predefinito che Divi fornisce alle colonne. Rimandare quell’area lungo i bordi ti fornisce una base vuota su cui costruire.

Una volta terminato, apri l’elenco dei moduli e inserisci il file Carosello della forza lavoro modulo.

2. Regola le impostazioni del carosello della forza lavoro

Successivamente, personalizziamo il comportamento del nostro carosello. Apri il Impostazioni del carosello nella scheda Materiale contenuto.

Ecco come formarlo per l’esposizione di un prodotto:

• Riproduzione automatica: Consentire a questo metodo di far scorrere regolarmente la merce nel carosello.
• Pausa al passaggio del mouse: Consenti agli ospiti di mettere in pausa il movimento semplicemente sorvolando uno scivolo.
• Modalità media: Rimani concentrato sul prodotto energetico, con uno sguardo alle diapositive successive e precedenti su ogni singolo aspetto.
• Diapositive da visualizzare: Impostalo su pochi in modo che vengano visualizzate 3 carte da gioco del prodotto alla volta.
• Diapositive da scorrere: Rimani su 1 in modo che le carte da gioco vadano avanti un passo alla volta.

Per i monitor più piccoli, modifica le impostazioni di risposta per accendere una scheda su capsule e telefoni. Passa il mouse sopra Diapositive per scorrere casella e fare clic su Modifica modalità reattive per mettere a punto.

3. Progetta la prima diapositiva

Con il set di conduzione del carosello, è il momento di progettare la diapositiva del prodotto principale. Le diapositive possono contenere qualsiasi combinazione di moduli Divi, ma inizieremo facilmente con un’immagine, un titolo e un pulsante.

Fare clic su icona più nera (+). all’interno di una forza lavoro e caricare i 3 moduli: simbolo, intestazione e pulsante.

Inizia con l’immagine. Imposta il Allineamento al cuore.

E modificare il Larghezza A 70% quindi non sembra davvero fuori misura.

Successivamente, dai uno sfondo alla diapositiva per far risaltare l’intestazione e il pulsante. Nelle impostazioni del carosello della forza lavoro, scegli Diapositiva carosello e fai clic sull’icona della matita.

Sotto Sfondo > Gradienteseleziona i tuoi colori. Per questo disegno, il gradiente utilizza #2B010D e #820002 con a Girare ordinare.

Ora trasferisciti all’intestazione. Ho impostato il carattere su Nuovo liberoPeso semi audace, 50px misurazione e 3px spaziatura delle lettere per uno sguardo potente e vuoto.

Alla fine, personalizza il pulsante. Mantieni lo sfondo bianco, usa Nuovo libero ancora una volta a 26px, e il cuore lo allinea.

Carica i valori di riempimento di 15px E 38px, di più ha 75px margine posteriore per presentarlo spazio respiratorio.

Per completare, carica 50px della migliore imbottitura per la forza lavoro in modo che ci sia un’area sopra l’immagine.

4. Progetta diapositive diverse

Non appena viene disegnata la scheda del prodotto principale, riproduci la diapositiva per tutta la merce che desideri esporre.

Dopo la duplicazione, cambia le immagini e i colori di sfondo per ciascuna diapositiva per mantenere il design diverso.

Fai lo stesso con il materiale contenuto; modificare il contenuto testuale e i pulsanti in modo che ogni scheda visualizzi il prodotto corretto.

A questo livello, le diapositive potrebbero sembrare un po’ anguste. Per aprire i problemi, carica un file 40px rimasti margine per ogni singola diapositiva di Workforce. Ciò crea uno spazio di respirazione sufficiente tra di loro.

Potrai inoltre dare a ogni diapositiva un aspetto più morbido includendo a 20px Raggio del confine. Gli angoli arrotondati aiutano a ripulire l’intero sguardo.

5. Personalizza le impostazioni di navigazione con frecce e punti

La navigazione rende il carosello più semplice da utilizzare, quindi è utile personalizzare il tuo design. Su questo costrutto, il Frecce sono cresciuti fino a spegnersi mentre Navigazione punti rimane acceso. Sarai in grado di regolare tali scelte all’interno del Componenti scheda.

Per una maggiore visibilità, aumentando la misurazione del punto. Vai a Design > Navigazione punto e modificare il dimensionamento finché non risulta equilibrato con il resto della struttura.

6. Personalizza le impostazioni reattive

Abbiamo già impostato altri valori per Diapositive da visualizzare l’utilizzo dell’editor Responsive, tuttavia è giusto affinare il design per i monitor più piccoli. Utilizza ancora una volta l’editor Responsive per testare come appare il carosello su capsule e telefoni, quindi modifica la spaziatura e le dimensioni come desiderato.

Quando tutto sembra essere perfetto, visualizza l’anteprima del design. Per la demo qui, la larghezza della riga è pronta al 100% e le diapositive da visualizzare sono aumentate fino a 5, quindi vedrai l’intero set di diapositive in movimento.

Esempi internazionali reali che puoi costruire

Non è necessario prevenire i caroselli di prodotti. Il modulo simile sarà inoltre personalizzato in diverse tattiche a seconda di ciò su cui desideri concentrarti. Di seguito sono elencati un paio di concetti da prendere in considerazione:

1. Barra del logo del marchio per costruire credibilità

Un carosello di loghi è probabilmente il caso d’uso più semplice, ma anche uno dei più efficienti. Rilascia gli emblemi dell’acquirente o del coniuge direttamente in una riga a scorrimento e mostrerai subito agli ospiti che sono nella giusta azienda.

Occupa poca o nessuna area, ma crea una quantità eccessiva di costruzione della fiducia. Più semplice per home page o pagine di operatori.

2. Carosello di testimonianze per mostrare prove sociali

Le opinioni impilate in una colonna vengono continuamente scremate o passano inosservate. Un carosello di testimonianze fa sentire ognuno di loro come il suo riflettore personale.

Carica una breve citazione, una reputazione e magari una fotografia e organizzali in una struttura vuota. Posizionalo su una home page o su una pagina Web touchdown e supporta la tua offerta con voci reali adeguate al luogo in cui vengono effettuate le scelte.

Hai bisogno di qualcosa di audace? Attraversa lo schermo intero. Ogni diapositiva può sollevare un simbolo di sfondo, un titolo e un pulsante di invito all’azione.

È una soluzione potente per aprire un sito web online o per lanciare promozioni stagionali e campagne di marketing nel luogo in cui desideri che il design attiri l’attenzione fin dal primo scorrimento.

4. Collaboratori della forza lavoro nella pagina Web di una professione

Questo funziona perfettamente sulle pagine delle occupazioni. Ogni diapositiva può contenere una fotografia, un nome, una funzione e una breve biografia o una verità divertente.

In sostituzione di una griglia statica, un carosello mobile conferisce alla pagina web un aspetto più amichevole ed extra privato. È un contatto facile che rende visiva la tradizione aziendale e mostra come sia possibile assumere le persone dietro il logo.

Costruisci caroselli personalizzati con Divi 5 oggigiorno

Il modulo Group Carousel di Divi 5 ti offre la libertà di progettare slider senza ritardi all’interno del builder: senza plugin, senza ulteriore codice. Dalle carte da gioco dei prodotti alle testimonianze, agli emblemi e persino alle intestazioni a larghezza intera, i passaggi simili possono adattarsi a qualsiasi cosa tu voglia.

Poiché fa parte di Divi, i tuoi caroselli rimangono veloci, al passo con il tuo dispositivo di progettazione e facili da sostituire man mano che i tuoi contenuti crescono. Costruiscilo non appena, modifica lo stile per adattarlo al tuo logo e lascia che il modulo si prenda cura del resto.

Il post Come creare un carosello in Divi 5 (senza plug-in extra) è apparso per la prima volta sul blog di Elegant Themes.

Piani di manutenzione wordpress | hosting wordpress

Per saperne di più