La condivisione di una raccolta di immagini su Divi è sempre un ottimo modo per coinvolgere visivamente gli utenti con i tuoi contenuti. Il modulo Galleria di Divi ti consente di creare e organizzare gallerie ovunque sul tuo sito web. Il modulo galleria su Divi Builder è disponibile in formato griglia e cursore e supporta gallerie di grandi dimensioni con impaginazione.
Come aggiungere un modulo galleria alla tua pagina
Prima di poter aggiungere un modulo galleria 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 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 navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.
Dopo essere entrato in 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. Abbiamo ottimi tutorial sull'utilizzo degli elementi di Linee e tanta tanta sezioni di Divi.
Individua il modulo galleria 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 "galleria" e quindi fare clic su Invio per trovare e aggiungere automaticamente il modulo della galleria! 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 galleria di immagini a larghezza intera per mostrare la fotografia.
Aggiungere una galleria alla tua pagina fotografica è un ottimo modo per farlo promuovere il tuo lavoro e aumentare la tua credibilità presso i clienti. In questo esempio, ti mostrerò come utilizzare il modulo Galleria per aggiungere una galleria di immagini con un layout a griglia che si estende per l'intera larghezza della pagina. Le immagini non hanno spazio tra loro, il che conferisce una presentazione pratica ed estetica.
E non dimentichiamo che ogni immagine apre un popup per scorrere le versioni più grandi delle immagini nella galleria.
Utilizzando Visual Builder, aggiungi una nuova sezione sotto la sezione dell'intestazione con una riga a larghezza intera o a larghezza intera (1 colonna). Quindi aggiungi il modulo Galleria alla riga.
Aggiorna le impostazioni del modulo Galleria come segue:
Opzioni di contenuto
Immagini della galleria: fai clic sulla galleria aggiornata e seleziona le immagini che desideri includere nella galleria. Numero di immagini: 12 Visualizza titolo e didascalia: NO Visualizza impaginazione: NO
Opzioni di design
Layout: griglia Orientamento miniatura: icona Zoom orizzontale Colore: #ffffff Colore del passaggio del mouse: rgba (0,0,0,0.48) Selettore icona al passaggio del mouse: predefinito
Salva le impostazioni
Ora non resta che sbarazzarsi di tutto lo spazio intorno alle immagini. Torna indietro e seleziona le impostazioni della riga. Nella scheda Progettazione aggiornare quanto segue:
Rendi questa riga a tutta larghezza: SÌ
Utilizzare la larghezza della grondaia personalizzata: SÌ
Larghezza della grondaia: 1
È importante ricordare che il valore numerico "1" per la larghezza della grondaia è in realtà zero (nessuna larghezza).
Salva le impostazioni
Questo è tutto!
Opzioni di contenuto del modulo Galleria
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.
Immagini della galleria
Fare clic sul pulsante Aggiorna giorno la galleria per avviare la libreria multimediale di WordPress in cui è possibile scegliere le immagini che si desidera visualizzare nella galleria.
Numero di immagini
Imposta il numero di immagini da visualizzare per pagina. Quando nella tua galleria sono incluse più immagini di quelle consentite in ciascuna pagina, l'impaginazione apparirà sotto le immagini.
Mostra titolo e didascalia:
Se è stato aggiunto un titolo o una didascalia dell'immagine, verranno visualizzati sotto l'immagine nella galleria. Se vuoi disabilitare questi elementi di testo, puoi farlo usando questa opzione.
Visualizza l'impaginazione
Quando nella tua galleria sono incluse più immagini di quelle consentite in ciascuna pagina, l'impaginazione apparirà sotto le immagini. Se desideri rimuovere la paginazione, puoi disattivare questa impostazione.
Etichetta 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 galleria
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.
Fornitura
Per impostazione predefinita, le gallerie vengono visualizzate come una griglia di immagini. Puoi anche scegliere di visualizzare la tua galleria come un cursore di immagine.
Orientamento delle miniature
Puoi scegliere di avere le immagini dalla tua galleria in formato verticale o orizzontale. Se si modifica la modalità, potrebbe essere necessario rigenera le tue miniature .
Icona colore zoom
Quando passi il mouse su un elemento nel contenitore Galleria, viene visualizzata un'icona in sovrimpressione. È possibile regolare il colore utilizzato da questa icona utilizzando il selettore di colori in questa impostazione.
Colore sovrapposizione al passaggio del mouse
Quando passi il mouse su un elemento nel contenitore Galleria, viene visualizzato un colore di sovrapposizione nella parte superiore dell'immagine e sotto il testo e l'icona del titolo del portfolio. Per impostazione predefinita, viene utilizzato un colore bianco semitrasparente. Se desideri utilizzare un colore diverso, puoi regolare il colore utilizzando il selettore di colori in questa impostazione
Icona del selettore di sorvolo (Hover)
Qui puoi scegliere un'icona personalizzata da visualizzare quando un visitatore passa con il mouse sugli elementi della galleria nel modulo.
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 del titolo
È possibile modificare il carattere del testo del titolo 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 titolo
Qui puoi regolare la dimensione del testo del titolo. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo o 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 suo tipo di unità.
Colore del testo del titolo
Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo del titolo, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.
Spaziatura delle lettere del titolo
La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel testo del titolo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione di 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 suo tipo di unità.
Altezza della riga del titolo
L'altezza della linea influisce sullo spazio tra ogni riga del testo del titolo.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 input 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à.
Carattere legenda
È possibile modificare il carattere del testo della didascalia 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 della didascalia
Qui puoi regolare la dimensione del testo della didascalia. È 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 della legenda
Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo della didascalia, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.
Spaziatura delle lettere della leggenda
La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se desideri aumentare lo spazio tra ogni lettera nel testo della didascalia, 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 suo tipo di unità.
Altezza della linea della leggenda
L'altezza della riga influisce sullo spazio tra ogni riga del testo della didascalia.Se si desidera aumentare lo spazio tra ogni riga, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere 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 il bordo
Abilitando questa opzione verrà posizionato un bordo attorno al modulo. Questo bordo può essere personalizzato utilizzando i seguenti parametri condizionali.
Colore del bordo
Questa opzione influisce sul colore del bordo. Seleziona un colore personalizzato dal selettore di colori per applicarlo al bordo.
Larghezza del confine
Per impostazione predefinita, i bordi sono larghi 1 pixel. È possibile aumentare questo valore trascinando il dispositivo di scorrimento dell'intervallo o immettendo un valore personalizzato nel campo di immissione a destra del dispositivo di scorrimento. Sono supportate unità di misura personalizzate, il che significa che puoi cambiare l'unità predefinita da "px" a qualcos'altro come em, vh, vw ecc.
Border Style
I bordi supportano otto diversi stili: solido, punteggiato, punteggiato, doppio, scanalatura, cresta, sovrapposizione e inizio. Seleziona lo stile desiderato dal menu a discesa per applicarlo al bordo.
Opzioni avanzate del modulo galleria
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, l'opzione galleria, sembra interessante. Detto questo, come seleziono le mie immagini in modo casuale da un determinato gruppo? Sto cercando di sostituire una pagina html/php sul mio sito per avere solo wp/divi. Un'idea ? php injection... altro... Grazie in anticipo. Indirizzo del mio sito qui sotto, un click su una miniatura ritorna a questa pagina html/php di cui parlo. Un clic su un'immagine della presentazione html/php per tornare alle miniature (pagina wordpress). E così via, le immagini dello slideshow vengono memorizzate in un database, con un codice che limita a 5 il campo random select, ogni volta rinnovato.
Per avere su un altro sito WP iniettato il codice per selezionare le informazioni direttamente nel database WP, ricordo che non era facile prima che funzionasse… Grazie per il tuo sito!
Buonasera,
Sto cercando di centrare verticalmente immagini di dimensioni diverse in una galleria DIVI.
Non importa quanto guardo, non riesco a trovarlo. Hai un consiglio??
Grazie in anticipo.
Cdt
Ciao, ma come posso avere 5 immagini sulla stessa linea?
Non posso averne più di 4!
Merci.
hi,
È necessario utilizzare un plug-in come Visual Composer o Elementor. Offrono più possibilità.
Ciao, trovo i tuoi articoli molto interessanti.
Ho creato una galleria sotto Divi seguendo i tuoi consigli e tutto funziona bene tranne che non so come rimuovere il clic destro del mouse per evitare di salvare sotto le mie immagini. Hai la soluzione, grazie in anticipo. Cordiali saluti
Buona sera Bernard,
Per bloccare il clic destro, è necessario installare un plug-in. Vi invito a fare una ricerca nella directory di WordPress.