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:
- Che cos'è un elenco di immagini?
- Aggiunta di una sezione Elenco immagini alla pagina
- Aggiungere e modificare elementi dell'elenco
- Sequenza degli elementi dell'elenco
- Eliminazione di elementi dell'elenco
- 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.
Aggiungi la sezione Elenco immagini
- È 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 Elenco (1) categoria e fare clic sul Elenco immagini scheda (2) da cui è possibile scegliere diversi layout dell'Elenco immagini (3).
- Scegli qualsiasi layout di sezione e fai clic su di esso per aggiungerlo alla tua pagina.
Nota:
- 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 entrare 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 elenco immagini (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 (1) per la voce di elenco. Puoi anche impostare il Colore dell'accento dell'immagine da qui che verrà visualizzato al passaggio del 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.
- Fare clic sull'icona Link Builder del Link del titolo (5) per aprire il generatore di collegamenti per collegare il titolo della voce dell'elenco a qualsiasi pagina. Vedi qui per saperne di più circa Generatore di link.
- Impostare il collegamento in modo che si apra in a nuova scheda o nella stessa scheda (6).
- Aggiungi qualsiasi tipo di Link (7) alla voce di elenco. È possibile aggiungere un pulsante/collegamento immagine/icona social/collegamento testuale. Scopri di più.
- Risparmi (8) le tue modifiche.
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, salvare le tue modifiche.
Vedere l'eliminazione di un elemento dell'elenco di immagini in azione:
Note:
L'elemento dell'elenco una volta eliminato non può essere recuperato.
Disposizione della sezione
- Clicca sul Gestisci elenco immagini Pulsante (1).
- Scegliere il disposizione (2) scheda.
- Seleziona (3) il layout della sezione e Risparmi (4) le modifiche.
Pro Tip
Per creare una sezione a larghezza intera/sezione con elenco a schede, scegli un layout compreso tra 25 e 29.
Note
- 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 Gestisci elenco immagini (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:
articoli
- Scegli Mostra articoli in righe e colonne or carosello
- 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ù .
- 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.
- Scegliere il Ordine dei contenuti cioè le immagini degli elementi dell'elenco da visualizzare per primi o il testo associato.
- 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.
Se l'opzione Carosello è selezionata nel passaggio 1, verranno visualizzate le seguenti opzioni aggiuntive:
- Scegli Fai il giro del carosello o non.
- Nel caso del carosello, scegli il Controlli di navigazione. Puoi scegliere tra Nessun controllo, Frecce – In basso al centro/In alto a destra/In basso a destra, Chevron o Punti.
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).
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ù .
Consiglio
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.
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à.
- Se hai scelto il file specificare il colore opzione quindi impostare l' Colore e opacità al passaggio del mouse di base per le voci dell'elenco.
- Impostare il Elementi colore per gli elementi dell'elenco della sezione.
- 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 è posizionato su di esse.
Dimensioni e spazio
- 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 %).
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.
Carte
- Scopri come per gestire le carte.
Shadow
- Dsiplay – 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.
- Risparmi 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: