Utilizzare la sezione Elenco immagini quando si desidera visualizzare una serie di immagini e testo pertinente.
Utilizzando questa sezione è possibile collegare facilmente diverse pagine all'interno del sito Web o aggiungere qualsiasi collegamento in cui si desidera aggiungere anche un'immagine e una descrizione per ciascun collegamento.
In questo articolo:
- Cos'è la sezione Immagini?
- Adding Images section
- Aggiungere e modificare elementi dell'elenco
- Sequenza degli elementi dell'elenco
- Eliminazione di elementi dell'elenco
- Gestisci elementi
- Modifica del layout della sezione
- Opzioni di stile
- Lo stile del carosello
- Esempio dal vivo
Elenco immagini
Un elenco di immagini è una raccolta di immagini in cui è possibile aggiungere una descrizione per l'immagine e aggiungere un collegamento o un pulsante per collegarla a qualsiasi altra pagina del sito Web o qualsiasi altro collegamento.
Add Images section
- È possibile aggiungere una sezione a una pagina. Puoi aggiungere una sezione a una pagina già esistente oppure crea una nuova pagina all'interno del tuo sito web.
- Sulla tua pagina, Fare clic sul blu + icona per aggiungere a Nuova sezione alla tua pagina.
- Ora vedrai il categorie di sezione sul lato sinistro.
- Scegliere il Contenuti (1) categoria e clicca su Immagini scheda (2) da cui è possibile scegliere diversi layout di Elenco immagini (3).
- Scegli qualsiasi layout di sezione e fai clic su di esso per aggiungerlo alla tua pagina.
- Puoi gestire la larghezza della sezione dal file sezione delle impostazioni e la larghezza del contenuto da stile dei contenuti.
- La dimensione ideale dell'immagine che devi caricare in questa sezione dipenderà dal numero di colonne. Vedi qui per saperne di più .
- Mantieni i titoli, i sottotitoli e le descrizioni brevi e nitidi.
- Nel campo della descrizione, premi il entra pulsante per dare un'interruzione di riga e il Maiusc + Invio pulsante per iniziare dalla riga successiva.
Aggiungere e modificare elementi dell'elenco
Aggiungi voce di elenco
Dopo aver aggiunto la sezione:
- Clicca sul Modifica contenuto (1) pulsante per aprire il pannello delle voci di elenco.
- Clicca sul Aggiungi articolo (2) pulsante per aggiungere una nuova voce di elenco.
- È possibile scegliere di Dduplicare o eliminare (3) le voci dell'elenco.
Modifica elemento elenco
Fare clic sulla voce dell'elenco che si desidera modificare. Si apriranno le particolari opzioni di modifica dell'elemento dell'elenco.
Da qui puoi:
- Carica/Rimuovi Immagine Primaria e Secondaria (1)
Puoi caricare un file Immagine secondaria insieme a Immagine primaria per ogni elemento dell'elenco. Quando un utente passa il mouse sull'elemento, verrà visualizzata l'immagine secondaria, che sostituirà l'immagine primaria. Inoltre, puoi impostare Colore dell'accento dell'immagine, che verrà visualizzato passando il mouse sull'immagine. - Aggiungere un Titolo (2), Sottotitolo (3)e Descrizione (4) della voce di elenco.
- Potresti non trovare l'opzione del sottotitolo e della descrizione in particolari elementi dell'elenco a seconda del layout scelto.
Prima di aggiungere la descrizione, controlla questo articolo.
5. Azione al clic
È possibile personalizzare il comportamento del clic sui singoli elementi in Elenco immagini sezione. Di seguito sono riportate le opzioni disponibili:
- Vai a un collegamento
Selezionando questa opzione si apre la Generatore di link, consentendoti di aggiungere un collegamento ipertestuale a questo elemento. Il collegamento può indirizzare gli utenti a un'altra pagina all'interno del tuo sito Web o a un URL esterno. Vedi qui per saperne di più informazioni Generatore di link. - Apri in Lightbox
Questa opzione visualizza l'elemento in una versione ingrandita Lightbox visualizza quando cliccato. In questa modalità, il Sottotitolo e Descrizione associati all'elemento non appariranno nella vista griglia ma saranno visibili in modalità Lightbox. - Nessuna azione
Scegli questa opzione per rendere l'elemento non cliccabile. Quando è selezionata, cliccare sull'elemento non attiverà alcuna azione.
6. Apri collegamento in una nuova finestra: Impostare il collegamento in modo che si apra in a nuova scheda o nella stessa scheda. Questo sarà visibile solo quando Vai a un collegamento l'opzione è selezionata sotto Azione al clic menu.
7. Pulsanti e icone: Aggiungi qualsiasi tipo di vetro all'elemento della lista. Puoi aggiungere un Pulsante/Link Immagine/Icona Social/Link di Testo. Scopri di più.
8. Sostituzione dello stile della carta
È possibile sovrascrivere le impostazioni globali dello stile della scheda dalla sezione Impostazioni di stile e personalizza la scheda di ogni elemento singolarmente nella sezione Elenco immagini. Ciò ti consente di applicare stili unici a diversi elementi dell'elenco per una migliore personalizzazione.
Scopri di più Informazioni sull'opzione Carte nella sezione dinamica.
9. Sostituzione dello stile della forma
Utilizza l'opzione Sostituisci per assegnare una forma diversa a ciascuna immagine singolarmente nella sezione Elenco immagini, ottenendo così un maggiore controllo sullo stile visivo di ogni elemento. Scopri di più Informazioni su Shape Mask.
10. Salva: Dopo aver effettuato le personalizzazioni, salvare le modifiche.
- Consentire a tutti Carte opzione da Impostazioni di stile per sovrascrivere e personalizzare le carte per singoli articoli.
- Consentire a tutti Maschera di forma opzione da Impostazioni di stile per definire forme separatamente per ogni elemento.
Guarda la modifica di un elemento dell'elenco di immagini in azione:
Elementi dell'elenco di sequenza
- Puoi facilmente trascinare e rilasciare gli elementi dell'elenco per modificare la sequenza.
Guarda la sequenza degli elementi dell'elenco di immagini in azione:
Elimina un elemento dell'elenco
Una volta aggiunto un elemento dell'elenco, è possibile modificarlo ed eliminarlo.
- Clicca sul Elimina icona accanto alla voce dell'elenco delle immagini.
- Bene, clicca sul Elimina pulsante nel popup di conferma.
- Infine, il salvare le tue modifiche.
Vedere l'eliminazione di un elemento dell'elenco di immagini in azione:
Gli elementi dell'elenco una volta eliminati non possono essere recuperati.
Gestisci gli elementi dell'elenco delle immagini
La sezione Elenco immagini include un Scheda Elementi che ti consente di gestire la visibilità di vari elementi all'interno della sezione con facilità. Utilizzando semplici interruttori a levetta, puoi abilitare o disabilitare elementi specifici senza dover eliminare o modificare gli elementi stessi.
- Clicca sul Modifica contenuto Pulsante (1).
- Scegliere il Elementi (2) scheda.
- Dopo aver apportato le modifiche, premi il pulsante Salva Pulsante (3).
Opzioni della sezione
- Mostra titolo: Abilita o disabilita la visibilità del titolo per la sezione Elenco immagini.
- Mostra i pulsanti: Controlla se i pulsanti vengono visualizzati a livello di sezione.
Opzioni degli elementi
- Mostra immagine: Attiva/disattiva la visibilità delle immagini.
- Mostra Titolo: Controlla se il titolo viene visualizzato.
- Mostra Sottotitolo: Abilita o disabilita i sottotitoli.
- Mostra descrizione: Gestisci la visibilità delle descrizioni degli articoli.
- Mostra i pulsanti: Decidere se visualizzare i pulsanti per i singoli elementi.
Disposizione della sezione
- Clicca sul Modifica contenuto Pulsante (1).
- Scegliere il disposizione (2) scheda.
- Seleziona un layout per la tua sezione e Salva (3) le modifiche.
Per creare una sezione a larghezza intera/sezione con elenco a schede, scegli un layout compreso tra 25 e 29.
- Puoi aggiungere facilmente un layout di elenco a schede alla tua pagina.
- Hai la possibilità di scegliere tra un layout a schede orizzontali/verticali.
- Aiuta a creare una sezione basata sul confronto.
Dai stile alla tua sezione
- Fare clic su Modifica contenuto (1) pulsante.
- Scegliere il Stile (2) scheda.
- Cambia lo stile per gli elementi della sezione e Salva (3) le tue modifiche.
Avrai più opzioni di stile per la sezione:
- Opzioni di visualizzazione
- Display mobile
- allineamento
- Dimensione del testo
- Spaziatura
- Titolo della sezione
- Opzioni immagini
- Maschera di forma
- Opzioni al passaggio del mouse sull'immagine
- Bordo dell'immagine
- Opzioni della carta
- Opzioni ombra
- Pulsanti e collegamenti
Display
- Scegli Mostra articoli in righe e colonne / carosello / vetrina
- Se hai scelto il file righe e colonne opzione, gli elementi dell'elenco verranno disposti in righe e colonne. In questo caso, è necessario specificare il numero di righe e colonne.
- Se hai scelto il file carosello opzione, gli elementi dell'elenco verranno presentati come una presentazione. Vedi qui per saperne di più .
-
Galleria Offre un layout elegante e interattivo in stile carosello per visualizzare le immagini una alla volta con transizioni ed effetti fluidi. Questo layout aggiunge un'esperienza moderna e immersiva al tuo sito. Scopri di più.
- Impostare il Numero di colonne per l'elenco delle immagini. Puoi scegliere da 1 a 10 colonne.
- specificare la Spazio tra le colonne degli elementi della lista.
- specificare la Spazio tra le righe degli elementi della lista.
Se l'opzione Carosello è selezionata nel passaggio 1, verranno visualizzate le seguenti opzioni aggiuntive:
- Abilita scorrimento fluido: Consente lo scorrimento continuo degli elementi all'interno del carosello per un'esperienza fluida e visivamente accattivante.
- Scorrimento automatico: Ruota automaticamente le diapositive senza interazione da parte dell'utente.
- Mostra avanzamento riproduzione automatica: Visualizza un indicatore di avanzamento mentre la riproduzione automatica è attiva per una migliore visibilità.
- Ritardo di riproduzione automatica: Imposta l'intervallo di tempo tra ogni transizione di diapositiva quando è abilitata la riproduzione automatica.
- Carosello in loop: Abilita il ciclo continuo delle diapositive, in modo che il carosello si riavvii senza interruzioni dopo l'ultima diapositiva.
- Controlli del carosello: Scegli il Controlli di navigazionePuoi scegliere tra Nessun controllo, Frecce - In basso al centro/In alto a destra/In basso a destra, Chevron, Punti e Scorrimento orizzontale.
- Sfumatura bordi: Applica un effetto di dissolvenza sottile ai bordi del carosello. Migliora l'esperienza utente miscelando delicatamente le immagini mentre entrano o escono dalla vista.
Se nel passaggio 1 è stata selezionata l'opzione Showcase, verranno visualizzate le seguenti opzioni aggiuntive:
- Effetti: Scegli tra cinque effetti di animazione: Dissolvenza, Capovolgimento, Carte, Coverflow (inclinato) o Coverflow (piatto) per controllare la transizione delle immagini.
- Abilita scorrimento fluido: Consente lo scorrimento continuo degli elementi all'interno della Vetrina, per un'esperienza fluida e visivamente accattivante.
- Scorrimento automatico: Passa automaticamente da un'immagine all'altra senza l'intervento dell'utente.
- Mostra avanzamento riproduzione automatica: Visualizza un indicatore di avanzamento mentre la riproduzione automatica è attiva per una migliore visibilità.
- Ritardo di riproduzione automatica: Imposta l'intervallo di tempo tra le diapositive quando la riproduzione automatica è attiva. Puoi scegliere un valore compreso tra 1 e 10 secondi.
- Carosello in loop: Abilitando questa opzione, il carosello verrà riprodotto in loop all'infinito, consentendone la riproduzione continua.
- Controlli carosello: L'impostazione Controlli carosello consente di scegliere come gli utenti navigano tra le diapositive, con opzioni come frecce (in basso al centro, in alto a destra, in basso a destra), punti o nessun controllo.
Display mobile
- Imposta il numero di Colonne della griglia per dispositivi mobili. Puoi impostarlo su un massimo di 3 colonne.
- Definire il Spaziatura tra le griglie (in pixel).
Layout della colonna specifico del dispositivo in base alle impostazioni di Studio:
allineamento
- Allineare il contenuto in orizzontale nell'Elenco immagini. Puoi impostarli per essere allineati a sinistra, a destra o al centro.
- Allineare il contenuto in verticale nell'elenco delle immagini. Puoi impostarli in modo che siano allineati in alto, al centro e in basso.
- Scegliere il Ordine dei contenuti cioè le immagini degli elementi dell'elenco da visualizzare per primi o il testo associato.
Dimensione del testo
- Clicca sul Cambia stile di testo pulsante per visitare il Design sezione e gestire le dimensioni e gli stili dei caratteri.
- Impostare il Titolo stile del carattere per gli elementi dell'elenco della sezione.
- Impostare il Sottotitolo stile del carattere per gli elementi dell'elenco della sezione.
- Imposta l'impostazione predefinita Descrizione stile del carattere per gli elementi dell'elenco della sezione.
- Abilita questa opzione per animare qualsiasi numero presente nel Titolo e Sottotitolo campi. Quando attivata, i valori numerici appariranno con un'animazione di conteggio dinamica, rendendoli più accattivanti dal punto di vista visivo.
Spaziatura
- specificare la Larghezza immagine per le voci dell'elenco.
- specificare la Larghezza contenuto per le voci dell'elenco.
- specificare la Spazio sotto il titolo della sezione nel px.
- specificare la Spazio sotto le immagini delle voci dell'elenco (in %).
- specificare la Spazio sotto i titoli delle voci dell'elenco (in %).
- specificare la Spazio sotto i sottotitoli delle voci dell'elenco (in %).
Titolo della sezione
- Allinea orizzontalmente il testo del titolo della sezione. Puoi impostarlo su Sinistra, Centro e Destra.
- Abilita/Disabilita il Divider tra il titolo della sezione e il contenuto della sezione.
- Impostare il spessore del divisore (in px).
- specificare la Colore del divisore dal selettore colori.
- Scegli un Stile divisorio dal menu a discesa.
- Impostare il Larghezza del titolo per definire la larghezza del titolo della sezione, partendo da un minimo del 50%.
Immagini
- Scegliere il Imago Ritaglia per le voci dell'elenco. È possibile impostare le immagini come Quadrato, Cerchio, Orizzontale, Ritratto e Originale.
- Scegliere di avere un raggio d'angolo comune o un raggio d'angolo diverso per ciascun lato degli elementi dell'elenco e impostare un numero (in px) per il Craggio orner delle immagini delle voci dell'elenco. Vedi qui per saperne di più .
Usando il raggio dell'angolo campo, è possibile creare diverse forme delle immagini degli elementi dell'elenco. Nel caso in cui specifichi 500 px qui, le immagini verranno visualizzate a forma di cerchio.
- Nel caso in cui tu abbia scelto gli angoli divisi, puoi impostare un raggio dell'angolo diverso per ogni angolo.
Maschera di forma
- Maschera di forma: Abilita questo interruttore per applicare una maschera di forma alle immagini nella sezione Elenco immagini. Una volta abilitato, la forma selezionata taglierà visivamente l'immagine in quella forma.
- Seleziona forma: Scegli tra varie forme predefinite da applicare alle tue immagini. Ciò ti consente di dare uno stile creativo al tuo contenuto visualizzando le immagini in forme uniche come arrotondate, a diamante, a goccia, ecc.
- Allungare: Abilita questa opzione per allungare la forma selezionata per adattarla meglio al contenitore dell'immagine. Ciò assicura che la forma riempia proporzionalmente lo spazio disponibile, migliorando l'allineamento visivo su diverse dimensioni dello schermo.
- L'opzione Stretch dipende dal layout – Potrebbe non apparire in alcuni layout. Nei layout in cui il testo come titolo o sottotitolo viene visualizzato sopra l'immagine, il l'intera opzione Maschera forma potrebbe non essere disponibile.
- L'impostazione Stretch dipende da più fattori - Compresi dimensione dell'immagine, allineamentoe impostazioni di ritaglio definito nella scheda Stile.
- Se Ritaglia immagine è impostato su Originalele dimensioni effettive dell'immagine determineranno se verrà allungata verticalmente o orizzontalmente.
Al passaggio del mouse sull'immagine
- Scegliere il Colore al passaggio del mouse dell'immagine essere la colore di accento o essere specificato. Se hai scelto il colore di accento, quindi specifica il file opacitàPuoi specificare il colore di accento per ogni elemento da Modifica elemento pannello.
- Se hai scelto il file specificare il colore opzione quindi impostare l' Sovrapposizione di colore e opacità.
- Impostare il Colore del testo sovrapposto che appare quando si passa il mouse sopra.
- Scegli Animare le immagini degli elementi dell'elenco al passaggio del mouse facendo clic su Sì. Controlla questa funzione su una pagina live.
- Scegli un Stile di animazione per le immagini quando il cursore passa sopra di esse.
- Scegli se vuoi consentire il transizione delle immagini con o senza passaggio del mouse.
- Selezionare un Stile di transizione per la transizione hover. Le opzioni disponibili sono Fade e Flip.
Bordo dell'immagine
- Abilita/Disabilita bordo intorno alle immagini spostando l'interruttore.
- Scegli di avere a confine comune su tutti i lati delle immagini oppure è possibile specificare il confini separatamente per ogni lato.
- specificare la larghezza del confine. Se è impostato su 0, il bordo non verrà visualizzato. Hai anche la possibilità di impostare la larghezza del bordo individualmente per ciascun lato dell'immagine.
- Seleziona il Colore bordo dal selettore colori.
- Seleziona un preferito Border Style dal menu a discesa.
- Determina il larghezza del bordo per dispositivi mobili dispositivi, allineandolo alla larghezza scelta per il desktop.
Carte
- Scopri come per gestire le carte.
Shadow
- Display – Scegli di mostrare l'ombra dietro gli elementi dell'elenco sempre o solo al passaggio del mouse.
- Style - Scegli tra i preset esistenti o crea un'ombra personalizzata.
Se hai scelto l'opzione Personalizzato, visita questo Generatore di ombre a scatola per creare un'ombra personalizzata. Infine, copia e incolla il file scatola ombra CSS. - Nel caso in cui tu abbia scelto l'opzione dei preset, allora Scegli Stili ombra dal menu a discesa.
Pulsanti e collegamenti
- Scopri come per gestire lo stile di Pulsanti e collegamenti.
- Salva tutto lo stile cambia.
Lo stile del carosello
Lo stile Carousel mostra gli elementi dell'elenco come una presentazione, ovvero gli elementi dell'elenco verranno visualizzati in sequenza uno dopo l'altro.
Guarda come funziona lo stile carosello:
Ecco un elenco di immagini dal vivo:
Visualizza un sito dimostrativo dal vivo.
Guarda come funziona il raggio d'angolo: