Divi semplifica l'aggiunta di immagini ovunque sul tuo blog. Tutte le immagini supportano il caricamento progressivo e sono dotate di 4 diversi stili di animazione che rendono la navigazione nel tuo sito divertente e coinvolgente. I moduli immagine possono essere posizionati in qualsiasi colonna creata e le loro dimensioni verranno regolate per adattarsi.
Come aggiungere un modulo immagine da Divi
Prima di poter aggiungere un modulo immagine alla tua pagina, devi prima passare a Divi Builder. Una volta 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 sfogli il tuo sito web in primo piano se hai effettuato l'accesso alla dashboard di WordPress.
Dopo aver attivato Visual Builder, puoi fare clic sul pulsante 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 immagine nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco delle mod è ricercabile, il che significa che puoi anche digitare la parola "immagine" e quindi fare clic su Invio per trovare e aggiungere automaticamente la mod dell'immagine! 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 .
Caso d'uso di esempio: aggiunta di immagini sovrapposte per illustrare i servizi su una pagina dei servizi
Esistono innumerevoli modi per utilizzare il modulo immagine. Per questo esempio, ti mostrerò come aggiungere immagini a una pagina di servizi per un sito Web di piccole imprese. Qui è dove aggiungerò le immagini. Ogni cerchio rosso rappresenta un'immagine.
Poiché l'aggiunta di un'immagine a una pagina è un processo abbastanza semplice e diretto, aggiungerò uno stile personalizzato per posizionare le mie immagini in modo che si sovrappongano, creando un effetto impilato.
Cominciamo.
Usa il visual builder per aggiungere una sezione standard con un layout 1/4 1/4 1/2. Quindi aggiungi un modulo di testo alla colonna di destra 1/2 della tua riga. Immettere un'intestazione e una descrizione per il servizio.
Quindi aggiungi un modulo immagine all'estrema sinistra della colonna 1/4.
Aggiorna le impostazioni del modulo Immagine come segue:
Opzioni di contenuto
URL immagine: [inserisci l'URL o scarica l'immagine con dimensioni 500 × 625]
Opzioni di design
Margine personalizzato: a sinistra -60px
Opzioni avanzate
Animazione: da sinistra a destra
Salva le impostazioni
Aggiungi un altro modulo immagine nella seconda colonna 1/4 (o colonna centrale) e aggiorna le impostazioni dell'immagine come segue:
Opzioni di contenuto
URL immagine: [inserisci l'URL o scarica l'immagine con dimensioni 500 × 625]
Opzioni di design
Margine personalizzato: in alto 100px, -60px a sinistra
Opzioni avanzate
Animazione: da destra a sinistra
Salva le impostazioni
Questo si occupa della prima sezione. Ora per la prossima sezione di servizio possiamo duplicare la sezione che abbiamo appena creato per la prima sezione di servizio. Una volta che la sezione è stata duplicata, cambia la struttura della colonna in un layout di 1/2 1/4 1/4 di colonna (l'opposto del precedente).
Quindi trascina il modulo di testo con l'intestazione e la descrizione del servizio nella colonna 1/2 all'estrema sinistra. Assicurati di far scorrere i due moduli immagine per riempire ogni 1/4 di colonna (ora a destra).
Poiché i moduli immagine sono duplicati, dobbiamo caricare le nuove immagini per quella particolare sezione del servizio. Inoltre, i moduli hanno sempre impostazioni dei margini personalizzate come i primi due moduli immagine creati. Cambiamolo.
A partire dal modulo Immagine nella colonna 1 / 4 destra, aggiorna le seguenti impostazioni dell'immagine:
Opzioni di contenuto
URL immagine: [inserisci l'URL o scarica l'immagine con dimensioni 500 × 625]
Opzioni di design
Margine personalizzato: -60px a sinistra (solo)
Scheda Avanzate
Animazione: da destra a sinistra
Infine, aggiorna le impostazioni dell'immagine per il modulo immagine a 1/4 di colonna centrale con quanto segue:
Opzioni di contenuto
URL immagine: [inserisci l'URL o scarica l'immagine con dimensioni 500 × 625]
Opzioni di design
Margine personalizzato: 100px in su, -60px a destra
Scheda Avanzate
Animazione: da sinistra a destra
Salva le impostazioni
Ora controlla la pagina!
Opzioni di contenuto del modulo immagine
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.
URL dell'immagine
Inserisci qui un URL di immagine valido o scegli / carica un'immagine tramite la libreria multimediale di WordPress. Le immagini appariranno sempre giustificate a sinistra nelle loro colonne e copriranno l'intera larghezza della colonna. Tuttavia, la tua immagine non sarà mai più grande della sua dimensione originale. L'altezza dell'immagine è determinata dalle proporzioni dell'immagine originale.
Apri nel visualizzatore
Qui puoi scegliere se la tua immagine si aprirà o meno in un visualizzatore quando fai clic su di essa. Se questa opzione è abilitata, la tua immagine "ingrandirà" alla sua dimensione massima quando fai clic in una finestra modale. È un'ottima funzionalità per i portafogli.
Link URL
Inserisci un URL web valido in questo campo per trasformare la tua immagine in un link. Lasciare vuoto questo campo lascerà la tua immagine come elemento statico.
URL di apertura
Puoi scegliere qui se il tuo link si aprirà in una nuova finestra.
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 immagine
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.
Sovrapposizione di immagini
Se questa opzione è abilitata, quando un visitatore passa con il mouse sull'immagine verranno visualizzati un colore e un'icona in sovrimpressione.
Sovrapposizione di icone a colori
Qui puoi impostare un colore personalizzato per l'icona di sovrapposizione
Coprire il colore di sovrapposizione
Qui puoi definire un colore personalizzato per la sovrapposizione.
Icona di sorvolo
Qui puoi definire un'icona personalizzata per l'overlay.
Rimuovi lo spazio sotto l'immagine
Questa opzione ha effetto solo sulle immagini quando sono l'ultimo modulo in una colonna. Quando questa opzione è abilitata, la distanza tra la parte inferiore dell'immagine e la sezione successiva viene rimossa, consentendo all'immagine di inquadrare la parte superiore della sezione successiva della pagina.
Allineamento dell'immagine
Qui scegli la direzione in cui la tua immagine galleggia nella colonna. Puoi spostare l'immagine a sinistra, a destra o mantenerla centrata.
Centra sempre l'immagine sul cellulare
Spesso, le immagini piccole sono più piacevoli alla vista sui dispositivi mobili quando sono centrate. Quando le colonne falliscono, le immagini allineate a sinistra oa destra in colonne più piccole diventano orfane quando le colonne falliscono e raggiungono la larghezza del 100%. Abilitazione di questa colonna con immagini forzate per l'allineamento al centro della colonna sui dispositivi mobili senza influire sull'allineamento delle immagini sui desktop.
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. Supporta unità di misura personalizzate, il che significa che puoi cambiare l'unità predefinita da "px" a qualcos'altro come em, vh, vw ecc.
Stile del bordo
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.
Larghezza massima dell'immagine
Per impostazione predefinita, la larghezza massima dell'immagine è impostata al 100%. Ciò significa che l'immagine verrà visualizzata alla sua larghezza naturale a meno che la larghezza dell'immagine non superi la larghezza della colonna padre, nel qual caso l'immagine sarà limitata al 100% della larghezza della colonna. Se vuoi limitare ulteriormente la larghezza massima dell'immagine, puoi farlo inserendo qui il valore di larghezza massima desiderato. Ad esempio, un valore del 50% limiterebbe la larghezza dell'immagine al 50% della larghezza della colonna principale.
Forza a tutta larghezza
Per impostazione predefinita, le immagini vengono visualizzate alla loro larghezza nativa. Tuttavia, è possibile scegliere di forzare l'immagine in modo che si estenda per l'intera larghezza della colonna principale abilitando questa opzione.
Margine personalizzato
Il margine è lo spazio aggiunto all'esterno del modulo, tra il modulo e l'elemento successivo sopra, sotto o a sinistra ea destra di esso. È possibile aggiungere valori di margine personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.
Opzioni avanzate del modulo immagine
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
Usa questo menu a discesa per specificare l'animazione di caricamento lento per la tua immagine. Puoi scegliere di far apparire la tua immagine da destra, sinistra, in basso o in alto.
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.
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
