Come creare una sequenza temporale in WordPress con Element

Le tempistiche forniscono un modo visivo per visualizzare eventi, pietre miliari o passi in un ordine cronologico. Aiutano a presentare informazioni in un flusso lineare che rende più facile per i visitatori e gli utenti comprendere la sequenza di eventi o processi. Usandoli, puoi mostrare il viaggio della tua azienda, una tabella di marcia del progetto o una storia personale con chiarezza.

L'aggiunta di una sequenza temporale a WordPress può migliorare l'esperienza dell'utente rendendo i contenuti più coinvolgenti e più facili da seguire. Questo è il motivo per cui l'uso di tempistiche è diventato una tendenza su molti siti Web. Elementor è un plug-in così intuitivo che puoi utilizzare per creare e aggiungere tempistiche ai tuoi post e pagine WordPress con un livello estremo di personalizzazione.

In questo articolo, ti mostreremo una guida passo-passo su come creare una sequenza temporale in WordPress con Element. Prima di allora, tratteremo alcune parti teoriche sull'argomento di oggi.

Tipi di tempistiche e i loro casi d'uso

Esistono due tipi di tempistiche: orizzontale e verticale. Ognuno ha casi d'uso specifici che aggiungono valore a un sito Web in modo diverso. Esploriamo loro e i loro casi d'uso nella discussione qui sotto.

1. Cronologia verticale

Una sequenza temporale verticale visualizza eventi e informazioni dall'alto verso il basso, di solito lungo la sinistra o il centro della pagina. È un formato adatto a scorrimento che funziona perfettamente sia su dispositivi desktop che mobili. Mentre gli utenti scorrono verso il basso la pagina, seguono l'ordine cronologico in un layout pulito e leggibile.

Casi d'uso per le tempistiche verticali:

• Storia dell'azienda o viaggio di crescita
• Riprendere o momenti salienti della carriera
• Serie di post sul blog o progressione dell'articolo
• Spiegazioni del processo passo-passo
• Pietre miliari dello sviluppo del prodotto

2. Cronologia orizzontale

Una sequenza temporale orizzontale mostra eventi da sinistra a destra, seguendo un formato a scorrimento laterale o scorrevole. Viene in genere usato dove lo spazio è più ampio di quanto non sia alto. Questo formato è il migliore per le tempistiche più brevi o quando si desidera mostrare solo alcuni eventi importanti in un layout ampio e facile da vedere.

Casi d'uso per le linee temporali orizzontali:

• Roadmaps o fasi di pianificazione del progetto
• Orari degli eventi
• Campagne di marketing o lancio di prodotti
• Presentazioni di portafoglio
• Timeline educative o panoramiche storiche

Come creare una sequenza temporale in WordPress con Element

Come già detto, Element è un plug-in per il costruttore di pagine di trascinamento. Ma la triste notizia è che non include alcun widget per creare tempistiche. Tuttavia, il plug -in ha molti componenti componenti tra cui è possibile espandere le funzionalità del plug -in Core Element.

HappyAddons è uno di questi. Viene fornito con 130+ widget e 22+ funzionalità che possono superare molte carenze di Element. Quindi, installando il plug -in HappyAddons, è possibile abilitare più funzionalità di design sul tuo sito. In molti casi, non avrai nemmeno bisogno di Elementar Pro se hai HappyAddons.

Ora esploriamo come creare tempistiche in WordPress con Elementor e HappyAddons.

Come creare una sequenza temporale orizzontale in WordPress

Spero che tu sappia già qual è la sequenza temporale orizzontale. HappyAddons ha un widget della sequenza temporale orizzontale , che è completamente libero da usare. Quindi, è necessario installare e attivare prima i seguenti plugin sul tuo sito Web.

• Elemento
• HappyAddons

Dopo aver installato e attivato i plugin sul tuo sito, inizia a seguire i passaggi spiegati nel tutorial di seguito.

Passaggio 01: Crea una sezione sulla tela Element

Apri un post o una pagina con Element. Crea una sezione con la struttura della colonna Flexbox desiderata per creare una sequenza temporale.

Passaggio 02: Aggiungi il widget della sequenza temporale orizzontale alla tela

Trova il widget della sequenza temporale orizzontale sul pannello Element. Una volta trovato, trascina e trascina il widget sulla tela.

Vedrai che il widget della sequenza temporale orizzontale è stato aggiunto alla tela con un layout predefinito.

Passaggio 03: selezionare un preimpostazione per il widget

Un preimpostazione è uno stile di design o un layout predefinito che è possibile applicare istantaneamente a un widget per una rapida personalizzazione. Se non vuoi progettare il widget da zero, puoi selezionare un preimpostazione. Il widget della sequenza temporale orizzontale viene fornito con sei preset.

Seleziona un preimpostazione che ti piace per il widget.

Passaggio 04: Aggiungi contenuto al widget della sequenza temporale orizzontale

Espandi la sezione della sequenza temporale . Qui, otterrai le opzioni per aggiungere contenuti al widget. Per impostazione predefinita, otterrai quattro schede. Fai clic su qualsiasi scheda per espanderlo. Questo aprirà molti campi in cui puoi posizionare e aggiungere le informazioni desiderate.

Una volta ampliata una scheda, è possibile aggiungere la data dell'evento, l'icona, l'immagine, la risoluzione delle immagini, il titolo e la descrizione della rispettiva scheda.

Puoi vedere che abbiamo aggiunto contenuto alla rispettiva sezione del widget orizzontale.

Allo stesso modo, aggiungi contenuto a tutte le schede della sequenza temporale. Puoi vedere che l'abbiamo fatto nell'immagine allegata di seguito.

Per aggiungere altre schede al widget, fare clic sul pulsante + Aggiungi elemento nella scheda Cronologia.

Passaggio 05: configurare le impostazioni per il widget della sequenza temporale orizzontale

Una volta terminata la parte del contenuto, espandere la sezione Impostazioni nella scheda Contenuto. È possibile configurare la scheda HTML del titolo, l'allineamento dei contenuti, nascondere la freccia di contenuto, abilitare la velocità di luce, la velocità di animazione, il numero di diapositive da mostrare, icona e altro ancora.

Questi sono così facili da configurare. Speriamo che tu possa farli da soli.

Passaggio 06: stilizzare il widget della sequenza temporale orizzontale

Per stilizzare il widget, vai alla scheda Style sul pannello Element.

Innanzitutto, espandere la sezione della sequenza temporale .

Otterrai le opzioni per personalizzare lo spessore della linea, il colore della linea, la spaziatura della data, la tipografia della data, il colore, l'icona, il raggio del bordo, il tipo di bordo, la larghezza del bordo, il colore di sfondo, ecc.

Esplorali e fai le personalizzazioni necessarie richieste.

Puoi vedere che abbiamo apportato alcune modifiche alla sequenza temporale orizzontale.

Quindi, espandi la sezione frecce . Da qui puoi personalizzare le icone della freccia, le loro posizioni, dimensioni, larghezza del bordo, raggio e altro ancora .

Allo stesso modo, espandi la sezione Contenuto della scheda Stile. È possibile personalizzare il raggio del bordo, l'imbottitura, lo spazio tra i contenuti, il tipo di bordo, la larghezza del bordo, il colore, l'ombra, la tipografia e più del widget.

Fai i cambiamenti necessari.

Passaggio 07: Anteprima il widget orizzontale della sequenza temporale

Vai alla pagina di anteprima e controlla se tutto funziona bene o no. Puoi vedere che la nostra cronologia orizzontale demo funziona bene senza problemi.

Come creare una sequenza temporale verticale in WordPress

Mentre HappyAddons ti consente di creare una sequenza temporale orizzontale gratuitamente, è necessario eseguire l'aggiornamento alla versione premium del plug -in per creare una sequenza temporale verticale. Quindi, assicurati che i seguenti plugin siano disponibili sul tuo sito.

• Elemento
• HappyAddons
• HappyAddons Pro

Una volta disponibili sul tuo sito, inizia a seguire il tutorial spiegato di seguito.

Passaggio 01: trascinare e drop il widget della sequenza temporale sulla tela Element

Digitare la sequenza temporale nella casella di ricerca. Seleziona il widget della sequenza temporale diversa dalla sequenza temporale orizzontale. Trascintlo sulla tela Element.

Una sequenza temporale verticale verrà creata sulla tela con un layout predefinito.

Passaggio 02: selezionare un preimpostazione per il widget della sequenza temporale verticale

Spero che tu sappia già cos'è un preimpostazione, come abbiamo già discusso sopra. Seleziona un preimpostazione se non si desidera progettare la sequenza temporale verticale da zero.

Passaggio 03: Aggiungi contenuto alla sequenza temporale verticale

Espandi la sezione della sequenza temporale . Per impostazione predefinita, vedrai due schede. Espandi qualsiasi scheda facendo clic su di essa come ti abbiamo mostrato sopra.

Spero che tu non abbia bisogno di parlare molto qui. Poiché puoi aggiungere quasi lo stesso tipo di contenuto alla sequenza temporale verticale che si potrebbe fare nel caso della sequenza temporale orizzontale.

È possibile aggiungere un'icona, modificare il tipo di icona, definire il tempo, impostare un titolo, aggiungere un'immagine, ecc., Per ogni sezione della sequenza temporale. Fai tu stesso le cose nee.

Completa l'aggiunta di contenuti alla sequenza temporale. Puoi anche aggiungere più elementi alla sequenza temporale facendo clic sull'elemento Aggiungi + come mostrato sopra.

Passaggio 04: configurare le impostazioni per il widget della sequenza temporale verticale

Espandere la sezione Impostazioni . È possibile configurare se mostrare la data, l'ora, la freccia di contenuto e l'albero a scorrimento . Puoi anche cambiare il tag del titolo, l'allineamento della scatola icon, l'allineamento degli alberi e il colore di sfondo .

Fai tu stesso le impostazioni nee. Ma per noi, l'allineamento predefinito sembra buono. Quindi, ci atterremo ad esso per il tutorial.

Passaggio 05: stilizzare il widget della sequenza temporale verticale

Vieni alla scheda Style sul pannello Element. È possibile personalizzare tutti i tipi di contenuti ed elementi visivi sul widget da questa scheda.

Innanzitutto, espandi la scatola dei contenuti . Da qui puoi personalizzare la tipografia, il colore, il colore della freccia, il tipo di sfondo, il tipo di bordo e la larghezza del bordo . Fallo.

Allo stesso modo, espandi la sezione della casella Icon . È possibile modificare la larghezza, l'altezza, lo spazio della scatola e altre opzioni relative alle icone sul widget da qui. Se sei soddisfatto della stilizzazione predefinita, non toccare nulla.

Stilizzare il titolo del widget se sembra necessario. Puoi vedere che abbiamo cambiato la nostra tipografia.

Allo stesso modo, personalizza l'aspetto dell'ora e della data . Abbiamo cambiato il suo colore, peso e tipografia.

Infine, espandi la sezione pulsante . Puoi stilizzare il colore di sfondo, la tipografia di copia e altri .

Passaggio 06: Anteprima il widget della sequenza temporale verticale

Vieni alla pagina di anteprima e controlla se la sequenza temporale verticale funziona bene o meno. Fallo scorrendo il widget. Speriamo che funzioni bene dalla tua fine come nostro.

Pertanto, è possibile creare diversi tipi di sezioni della sequenza temporale sul tuo sito Web per presentare vari contenuti meravigliosamente.

Cose che puoi fare di più con HappyAddons

HappyAddons è onestamente un plug -in completo. Sei sicuro di innamorarti di questo plugin subito dopo averlo usato per una volta. Dai un'occhiata alle seguenti cose che puoi fare con il plugin.

UN. Usa un costruttore di temi gratuito

Elementor ha anche un costruttore di temi. Ma è riservato solo agli utenti premium. Ma nel caso di HappyAddons, è completamente libero da usare. Usando il costruttore di temi HappyAddons, puoi creare intestazioni, piè di pagina, modelli di post sul blog e pagine di archivio. Controlla come creare un modello di post sul blog con HappyAddon gratuitamente.

B. WooCommerce-friendly

HappyAddons viene fornito con nove potenti widget friendly WooCommerce per migliorare il tuo sito di e-commerce. Questi widget sono griglia di prodotto, carosello di prodotto, griglia della categoria del prodotto, carosello della categoria del prodotto, prodotto singolo, mini carrello, carrello, cassa e bar di spedizione.

C. Copia incollata a dominio

Con questa funzione, è possibile copiare direttamente gli stessi widget, sezioni e pagine da un sito Web a un altro dominio. Questo può farti risparmiare tempo prezioso in quanto non devi sempre iniziare da zero. Il seguente video spiega la funzionalità di copia incollata del plug-in.

D. Progetta contenuti creativi

Con i suoi widget come l'immagine hover, il collegamento animato, il fattore divertente, il gruppo di stack di immagini, lo stack fotografico, il pulsante creativo, la scorrimento del testo e l'icona Lord, puoi creare contenuti creativi coinvolgenti per agganciare gli utenti.

e. Mostra informazioni statistiche

A differenza di molti altri componenti aggiuntivi di Element, questo plug-in offre diversi widget grafici attraverso i quali è possibile mostrare informazioni statistiche e creare post e pagine infografiche. Scopri come creare una pagina infografica con Elementor.

Oltre a tutti questi, ci sono molte altre cose che puoi fare con il plugin HappyAddons.

Pensieri finali!

La creazione di tempistiche non è una cosa obbligatoria per tutti i siti Web. Ma possono diventare necessari in quanto potrebbero essere un'opzione ideale per mostrare determinate informazioni e contenuti. Quindi, ogni volta che senti il ​​bisogno di creare una sequenza temporale, speriamo che questo post tutorial venga al tuo utilizzo.

Se hai adorato questo post, ti chiediamo di farci sapere attraverso la casella dei commenti qui sotto. Inoltre, se hai domande sul plugin HappyAddons, puoi lasciare un messaggio nella casella di chat. Il nostro agente di supporto dal vivo verrà a risponderti il ​​prima possibile.

Grazie per essere stato con noi fino alla fine. Ti auguriamo una giornata felice davanti.