Come creare uno slider personalizzato per la galleria fotografica in Divi
Pubblicato: 2019-06-10Sappiamo tutti che gli slider sono ottimi per attirare gli utenti con servizi, prodotti o pagine in primo piano in una comoda posizione above the fold. Alcuni siti (penso ai fotografi) devono presentare una o più delle loro gallerie fotografiche nella home page. L'uso di un dispositivo di scorrimento per questo può essere una buona opzione. Tuttavia potresti non aver considerato di inserire la tua galleria fotografica in uno slider come questo.
In questo tutorial, ti mostrerò un modo semplice per incorporare gallerie di immagini Divi nelle tue diapositive per creare uno slider per gallerie fotografiche completamente personalizzato in Divi. Il trucco è creare una galleria di immagini di WordPress nell'area del contenuto del tuo dispositivo di scorrimento. Quindi devi solo assicurarti e selezionare l'opzione per utilizzare la Galleria Divi invece dello stile predefinito della Galleria di WordPress. È super facile e divertente da implementare.
Iniziamo.
Sbirciata
Ecco un'anteprima dello slider della galleria fotografica che creeremo in questo tutorial.
Scarica GRATUITAMENTE il layout del cursore della galleria fotografica personalizzata
Per mettere le mani sui disegni di questo tutorial, dovrai 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?
Cosa ti serve per iniziare
Per iniziare, dovrai avere la seguente configurazione:
- Il tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
- Circa 6-8 immagini da utilizzare per l'immagine del dispositivo di scorrimento e la galleria fotografica
Dopodiché, avrai una tela bianca per iniziare a creare alcune schede al passaggio del mouse in Divi.
Abilita l'opzione Divi Gallery in Divi Theme Options
Divi ti consente di sostituire la visualizzazione predefinita della Galleria di WordPress con una visualizzazione della Galleria Divi. Quindi, ogni volta che crei una galleria WordPress e la incorpori all'interno di un modulo, la galleria viene visualizzata come una galleria utilizzando il modulo Galleria Divi. In pratica, questo ti consente di aggiungere gallerie di immagini Divi a qualsiasi modulo in Divi Builder. Nel nostro caso, aggiungeremo una Divi Gallery al modulo slider.
Per modificare l'impostazione, vai a Divi > Opzioni tema. Quindi, nella scheda Generale, fai clic per abilitare l'opzione Galleria Divi.
Questo è tutto! Ora lo shortcode predefinito di WordPress Gallery mostrerà una galleria fotografica in stile Divi.
Creazione dello slider personalizzato della galleria fotografica in Divi
La sezione e la riga
Per iniziare, vai avanti e crea una sezione normale con una riga di una colonna.
Quindi aggiorna le impostazioni della riga come segue:
- Larghezza: 100% (quindi lo slider sarà a tutta larghezza sui dispositivi mobili)
- Imbottitura: 0px in alto, 0px in basso
- Angoli arrotondati: 20px
Costruire il contenuto dello slider
Quindi, aggiungi un modulo di scorrimento alla riga.
Apri le impostazioni del dispositivo di scorrimento ed elimina una delle diapositive che è stata aggiunta per impostazione predefinita. Quindi fare clic sull'icona a forma di ingranaggio sulla diapositiva per aprire le impostazioni della diapositiva per quella diapositiva.
Quindi aggiorna il contenuto della diapositiva con quanto segue:
- Titolo: La nostra galleria
- Pulsante: Visualizza tutto
- Corpo: questa è la nostra galleria. Controlla.
Sotto l'area del contenuto del corpo, fai clic sul pulsante Aggiungi media.
Nel popup Libreria multimediale, seleziona la scheda Crea galleria in alto a sinistra. Quindi seleziona 6 immagini che desideri utilizzare per la galleria e fai clic sul pulsante "Crea una nuova galleria" in basso a destra.
Questo ti porterà alla pagina di modifica della categoria all'interno del popup. Ignora le impostazioni della galleria in alto a destra perché gli stili della Galleria Divi sovrascriveranno queste impostazioni della Galleria di WordPress.
Quindi fare clic sul pulsante "Inserisci galleria".
Questo inserisce uno shortcode della galleria all'interno del contenuto del modulo slider. Se vuoi che la galleria venga visualizzata dopo il corpo del testo corrente, assicurati di posizionare lo shortcode dopo il contenuto.
Ora hai una galleria in stile Divi incorporata visualizzata nell'area del contenuto del tuo modulo di scorrimento. Roba piuttosto interessante!
Continuiamo ad aggiornare il nostro contenuto della diapositiva aggiungendo un'immagine di diapositiva principale.
Ora che abbiamo pronto il nostro contenuto del dispositivo di scorrimento, salva le impostazioni per la diapositiva 1.
Impostazioni dispositivo di scorrimento
Assicurati di salvare le impostazioni per la singola diapositiva. Quindi aggiorna le seguenti impostazioni di progettazione per il dispositivo di scorrimento principale. Ciò assicurerà che gli aggiornamenti del design influiranno su tutte le singole diapositive che aggiungerai.
Bordo dell'immagine e ombra del riquadro
- Angoli arrotondati immagine: 20 px
- Larghezza bordo immagine: 40 px (desktop), 0 px (tablet)
- Colore bordo immagine: rgba(0,0,0,0)
- Image Box Shadow: vedi screenshot
- Posizione orizzontale dell'ombra del riquadro: -170 px
- Posizione verticale dell'ombra del riquadro: -220px
- Forza di diffusione dell'ombra della scatola: -60px
- Colore ombra: rgba (255,255,255,0.2)
Titolo e corpo del testo
- Carattere del titolo: Karla
- Allineamento del testo del titolo: a destra
- Dimensione del testo del titolo: 48px
- Altezza della riga del titolo: 1,3 em
- Dimensione del testo del corpo: 16px
- Spaziatura delle lettere del corpo: 2px
- Altezza della linea del corpo: 2em
Stili dei pulsanti
- Dimensione del testo del pulsante: 16 px
- Colore di sfondo del pulsante: #333333
- Larghezza bordo pulsante: 0px
- Raggio del bordo del pulsante: 20 px
- Spaziatura delle lettere dei pulsanti: 2px
- Carattere pulsante: Karla
- Carattere pulsante Peso: grassetto
- Icona del pulsante: vedi screenshot
- Allineamento dei pulsanti: a destra
- Margine pulsante: -5em a destra
- Button Padding (desktop): 3em a sinistra, 5em a destra
- Button Padding (telefono): 2em a sinistra, 6em a destra
- Ombra della scatola dei pulsanti: vedi screenshot
- Posizione verticale dell'ombra del riquadro: 0px
- Box Shadow Spread Strength: 20px (desktop), 10px (telefono)
- Colore ombra: #ffffff
Imbottitura cursore
- Imbottitura: 10% sopra, 10% sotto
Aggiunta di un gradiente di sfondo alla diapositiva 1
Ora che abbiamo lo stile del cursore in atto, possiamo aggiungere un gradiente di sfondo personalizzato alla nostra diapositiva individuale. Apri le impostazioni della diapositiva per la diapositiva 1 e aggiorna quanto segue:
- Colore sfondo sfumato sinistro: #6d0066
- Colore di sfondo sfumato a destra: #000000
- Tipo di gradiente: radiale
- Direzione radiale: in alto a sinistra
Creazione diapositiva 2
Per creare la seconda diapositiva, possiamo semplicemente duplicare la diapositiva 1 utilizzando l'icona duplicata. Quindi apri le impostazioni della diapositiva duplicata (diapositiva 2).
A questo punto puoi aggiornare il contenuto della nuova diapositiva secondo necessità. Ad esempio, puoi aggiungere una nuova immagine di diapositiva e generare un altro shortcode di incorporamento della galleria per aggiungere una nuova galleria di foto alla diapositiva.
Quindi aggiorna il gradiente di sfondo come segue:
- Colore sfondo sfumato sinistro: #0c71c3
Risultato finale
Questo è il risultato finale.
Ed ecco come appare il dispositivo di scorrimento su tablet e telefono.
Ed ecco il dispositivo di scorrimento se elimini le immagini della diapositiva in modo che vengano visualizzati solo il contenuto della diapositiva e la galleria.
Pensieri finali
La possibilità di incorporare una galleria divi all'interno del modulo Slider di Divi apre l'opportunità di creare fantastici slider per gallerie fotografiche con poco sforzo. Si spera che questo tutorial ti dia qualche ispirazione per creare dei bellissimi cursori per gallerie fotografiche.
Per ulteriori informazioni su questa tecnica di incorporamento della galleria divi (inclusi suggerimenti sullo stile della galleria di incorporamento divi), consulta il post su come incorporare le gallerie divi in interruttori.
Non vedo l'ora di sentirti nei commenti.
Saluti!