Sezione Cronologia

Questa sezione della sequenza temporale consente agli utenti di visualizzare le tappe fondamentali e le attività del progetto in sequenza cronologica.

Ciò è particolarmente utile per evidenziare i progressi del progetto, illustrare i processi di candidatura, mostrare risultati come premi e offrire altre opzioni personalizzabili.

Fornisce un modo strutturato e visivamente accattivante per presentare le informazioni in un formato temporale, migliorando l'esperienza e il coinvolgimento dell'utente.

Aggiungi una sezione alla tua pagina

È 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.
Clicca sul timeline scheda (1) da cui è possibile scegliere diversi layout della sezione timeline (2).
La sezione verrà ora aggiunta alla pagina. Clicca su Salva (3) pulsante per mantenere le modifiche.

Aggiungi e modifica voci di elenco

Aggiungi voce di elenco

Dopo aver aggiunto la sezione:

Clicca sul Modifica sequenza temporale (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 Duplica o Elimina (3) le voci dell'elenco.
Specifica un file Titolo (4) per la sezione timeline.

Modifica voce elenco

Fare clic sulla voce dell'elenco che si desidera modificare. Aprirà le opzioni di modifica di quel particolare 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.

Note:

Prima di aggiungere la descrizione, controlla questo articolo.

5. Azione al clic – Titolo e immagine

È possibile personalizzare il comportamento del clic sui singoli elementi in timeline 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 collegamenti: 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 Cronologia. Questo ti permette 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 Timeline, 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.

Elementi dell'elenco di sequenza

Gestisci gli elementi della sezione Cronologia

La sezione Cronologia 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 sequenza temporale 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 Cronologia.
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.

Modifica il layout della sezione

Fare clic su Modifica sequenza temporale pulsante per aprire il pannello di modifica della sezione.
Scegliere il disposizione scheda.
Da qui puoi facilmente modificare il layout della sezione anche dopo averla aggiunta alla pagina.

Mentre modifichi il layout, vedrai i layout relativi alle sezioni in alto.

Oltre a questi, hai anche la possibilità di scegliere un layout da altre sezioni sotto il Più layout intestazione.

Opzioni di stile

Fare clic su Modifica elenco immagini pulsante.
Scegliere il Stile (1) scheda.
Cambia lo stile per gli elementi della sezione e Salva (2) le tue modifiche.

Avrai più opzioni di stile per la sezione:

Opzioni di visualizzazione
allineamento
Dimensione del testo
Spaziatura
Titolo della sezione
Opzioni di stile della sequenza temporale
Opzioni immagini
Maschera di forma
Opzioni al passaggio del mouse sull'immagine
Bordo dell'immagine
Opzioni della carta
Opzioni ombra
Pulsanti e collegamenti

Opzione di visualizzazione

specificare la Spazio tra le righe degli elementi della lista.

allineamento

Allineare il testo orizzontalmente nella sezione. Puoi impostarli per l'allineamento a sinistra, a destra o al centro.
Allineare il contenuto in verticale nella sezione. 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 Spazio sotto il titolo della sezione nel px.
specificare la Immagini dello spazio sopra delle voci dell'elenco (in %).
specificare la Spazio attorno al divisorio orizzontalmente degli elementi 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%.

Opzioni di stile della sequenza temporale

Abilita questa opzione se preferisci che ogni secondo elemento nella sezione sia presente in Alternato (lato opposto.
Seleziona il Tipo di viaggio degli articoli.
specificare la Larghezza della linea di divisione per la sezione.
specificare la Linea di base (sfondo) Colore per il divisore.
specificare la Serie ACTIVE LINE (evidenziato) Colore per il divisore.

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ù .

Maschera di forma

Maschera di forma: Abilita questo interruttore per applicare una maschera di forma all'immagine nella sezione Timeline. Una volta abilitato, la forma selezionata ritaglierà visivamente l'immagine in quella forma.
Seleziona forma: Scegli tra varie forme predefinite da applicare alla tua immagine. Ciò ti consente di stilizzare creativamente il tuo contenuto visualizzando l'immagine in una forma unica come arrotondata, a diamante, a goccia, ecc.

Note

L'opzione Maschera forma dipende dal layout – Potrebbe non apparire nei layout in cui il testo, come il titolo o il sottotitolo, viene visualizzato sopra l'immagine.
L'impostazione Stretch dipende da più fattori – comprese le impostazioni relative a dimensione immagine, allineamento e ritaglio definite nella scheda Stile.
Se Ritaglia immagine è impostato su Originalele dimensioni effettive dell'immagine determineranno se verrà allungata verticalmente o orizzontalmente.

Hover 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à.
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.

Non trovi quello che cerchi?

Mettiti in contatto con un esperto Pixpa.

Contattaci