Come creare una sequenza temporale per il programma del tuo matrimonio con Divi e il plug-in del modulo Divi Timeline

Questo post fa parte 5 di 5 nella nostra miniserie Come creare un sito Web di matrimonio elegante con Divi. In questa serie, ti guideremo attraverso le parti più importanti della creazione di un sito Web per matrimoni per te o per un cliente con Divi.

Nelle prime quattro parti della miniserie, vi abbiamo mostrato come creare:

• un'elegante pagina di annuncio di matrimonio
• una pagina della galleria
• una pagina della lista dei regali
• e come utilizzare il plug-in Automatic Divi Testimonials sul sito Web del tuo matrimonio.

I layout che abbiamo creato erano coerenti nello stile e facili da creare.

In quest'ultima parte della miniserie, ti mostreremo come creare una timeline per il sito Web del tuo matrimonio con il plug-in Divi Timeline Module di Elegant Marketplace. Ti forniremo un esempio su come creare una sequenza temporale verticale di bell'aspetto che manterrà i tuoi invitati al matrimonio aggiornati su ciò che accadrà durante il grande giorno degli sposi.

Esempio di timeline verticale

Il layout che stiamo creando sarà simile all'esempio mostrato di seguito. Parleremo dei passaggi più importanti che ti aiuteranno a trovare la tua strada con la timeline. Dopo aver letto questo post, puoi iniziare rapidamente, crearne uno tuo e dare quel tocco in più al sito web del tuo matrimonio.

Acquistare il Plugin

Se non possiedi ancora il plug-in Divi Timeline Module, dovrai acquistarlo sul sito Web di Elegant Marketplace. Il plugin costa $ 11. Dopo aver acquistato il plugin sul loro sito web, riceverai il file ZIP che contiene il nuovo modulo che aggiungerai al tuo sito web.

Installazione del plugin

Accedi al tuo sito Web WordPress e vai su "Aggiungi nuovo" nella sezione Plugin.

Carica il file ZIP che hai ricevuto dall'acquisto.

Attiva il plugin e sei a posto. Il plugin ora aggiungerà automaticamente i moduli Timeline al tuo Divi builder.

Due modi diversi per utilizzare il modulo Divi Timeline sul tuo sito web

Mostrando il programma del matrimonio

Una cronologia sul sito web del tuo matrimonio può davvero dare quel valore aggiunto in più al tuo sito web. Puoi utilizzare la cronologia per mostrare come sarà il giorno del matrimonio. Questa trasparenza online aiuta i tuoi ospiti a orientarsi nel fitto programma del matrimonio.

Dovrai solo ricordarti di condividere in anticipo il link al sito web del tuo matrimonio con i tuoi ospiti. In questo modo, potranno accedere alle informazioni ovunque e in qualsiasi momento.

Puoi creare una pagina separata per la timeline o decidere di includerla in una delle tue altre pagine. Poiché una sequenza temporale occupa molto spazio su uno schermo, ti consigliamo di dedicare una pagina completamente nuova alla sequenza temporale.

Mostrare la cronologia della relazione della coppia di sposi

Oltre a creare un programma del matrimonio con il plug-in, puoi anche utilizzare il modulo della cronologia per mostrare la cronologia della relazione della coppia di sposi. Includendo il modo in cui la coppia si è incontrata e le diverse fasi che hanno vissuto nella loro relazione, puoi impegnarti un po' di più con gli ospiti e far conoscere la storia.

I diversi tipi di moduli di testimonianza

Quando scarichi il plugin, noterai che quattro moduli extra appaiono nel tuo elenco di moduli. Sono tutte linee temporali ma con un focus diverso.

Ne hai uno per i post, i contenuti, le immagini in primo piano, i titoli dei post e solo uno verticale normale. Per l'esempio della timeline che creeremo in questo post, utilizzeremo solo la Timeline – Vertical. Questo modulo ci consente di annotare immediatamente le informazioni nella casella del contenuto, senza essere collegati a nient'altro sul sito Web come i tuoi post.

Iniziare

Ti mostriamo passo dopo passo come creare la seguente sequenza temporale:

Il modulo è reattivo e avrà un bell'aspetto sia sul desktop che sul telefono o tablet. Iniziamo!

Aggiungi gli elementi Timeline e Timeline

Poiché il modulo Timeline è un plug-in di terze parti, non saremo in grado di apportare modifiche visive con Visual Builder. Ecco perché rimarremo nella parte di backend del sito Web per apportare le modifiche necessarie.

Inizia aggiungendo una nuova pagina che dedicherai al tuo diario. All'interno di quella pagina, ovviamente, avrai bisogno di una sezione degli eroi. Tuttavia, a parte questo, avrai solo bisogno di una sezione standard per la timeline. Aggiungi una nuova sezione standard con una riga a larghezza intera alla pagina. Quindi, posiziona il Timeline - Modulo verticale in quella riga a larghezza intera.

Ora, all'interno delle impostazioni della Timeline - Modulo verticale, sarai in grado di aggiungere diversi elementi della timeline alla timeline che stai creando.

C'è un flusso standard che di solito viene seguito durante un matrimonio. Creeremo nuovi elementi della sequenza temporale per ciascuno dei seguenti eventi:

• Capelli e trucco della sposa
• Servizio fotografico di matrimonio
• Pre-cerimonia
• Cerimonia
• L'ora dell'aperitivo
• Inizio della cena
• brindisi
• Primo ballo
• tempo di ballo
• Deserto
• L'ultima parola di ringraziamento

Naturalmente, tutto dipende da come hai pianificato il giorno del tuo matrimonio. Puoi aggiungere tutti gli elementi della sequenza temporale che desideri.

Modifiche del modulo Timeline

Ma prima di aggiungere gli Elementi della Timeline, apportiamo le modifiche che dovranno essere applicate a tutti gli Elementi della Timeline attraverso il Modulo Timeline – Vertical. Vai alla scheda Contenuto della tua Timeline - Modulo verticale e cambia il Colore della linea centrale in "#fae4de" nella sottocategoria Sfondo. Questo colore verrà applicato a tutte le linee all'interno del modulo Timeline che consentono ai diversi elementi della Timeline di interagire tra loro.

Quindi, vai alla scheda Design. Prima di tutto, apri la sottocategoria Testo e apporta le seguenti modifiche:

• Carattere del testo: Raleway Light
• Stile del carattere del testo: grassetto
• Dimensione carattere del testo: 14px
• Colore del testo: #9b857b
• Altezza riga di testo: 1em

Scorri verso il basso la stessa scheda e apporta le seguenti modifiche alla sottocategoria Testo etichetta articolo:

• Carattere etichetta articolo: Raleway Light
• Stile carattere etichetta articolo: grassetto
• Dimensione carattere etichetta articolo: 39px
• Colore testo etichetta articolo: #9b857b
• Altezza riga etichetta articolo: 1,5 em

Inoltre, apporta le seguenti modifiche alla sottocategoria Testo intestazioni:

• Carattere delle intestazioni: mandarino
• Dimensione carattere intestazioni: 70 px (desktop e tablet), 60 px (tablet)
• Colore del testo delle intestazioni: #9b857b
• Altezza riga intestazioni: 1,5 em

Tutte le modifiche sopra menzionate si applicheranno a ciascun elemento della cronologia. Fare clic su Salva ed esci.

Modifiche agli elementi della sequenza temporale

Quando guardi il risultato finora, puoi notare che le modifiche sono state apportate all'immagine totale. Ora, dobbiamo apportare modifiche individuali agli elementi della sequenza temporale. Inizia aggiungendo un solo elemento della sequenza temporale. Quindi, vai alla scheda Contenuto di quell'elemento della sequenza temporale. Continua aggiungendo un titolo al tuo elemento della sequenza temporale nella sottocategoria Sfondo.

Quindi, aggiungi il contenuto che desideri visualizzare nella casella del contenuto (inclusa l'ora in corsivo) e scrivi l'ora del giorno nel campo Etichetta cronologia. Se lo desideri, puoi anche aggiungere la posizione nello stesso campo.

Contenuto dell'elemento della sequenza temporale

Il contenuto che è scritto nel campo apparirà sul lato opposto della timeline quando qualcuno visita il tuo sito web con un desktop. Questa etichetta non viene visualizzata quando qualcuno guarda la tua cronologia sul proprio telefono. Ecco perché ti consigliamo di inserire le informazioni pratiche che desideri condividere anche nell'Etichetta articolo nella casella del contenuto. In questo modo, anche le persone che visitano il sito Web tramite telefono possono visualizzare le informazioni.

Scorri verso il basso la stessa scheda e cerca l'icona del cuore nell'elenco delle icone degli oggetti, cambia il colore dell'icona in "#9b857b" e il colore di sfondo dell'icona in "#fae4de".

Fare clic su Salva e l'elemento della sequenza temporale verrà aggiunto alla sequenza temporale. Nell'esempio che abbiamo fatto, abbiamo usato le stesse impostazioni per tutti gli elementi della Timeline. Pertanto, perché ti consigliamo di clonare il primo elemento della sequenza temporale e apportare ulteriori modifiche di conseguenza.

Crea tutti gli elementi della sequenza temporale di cui hai bisogno per rendere il programma del tuo matrimonio il più chiaro possibile per gli invitati. Ogni volta che aggiungi un nuovo elemento della sequenza temporale, verrà automaticamente posizionato sul lato opposto dell'elemento precedente della sequenza temporale senza che tu debba apportare modifiche manuali.

Avvolgendo

Questa è stata l'ultima parte della miniserie Come creare un sito Web di matrimonio elegante con Divi . Ci auguriamo che questa sia stata una preziosa serie di post che ti aiuteranno a creare un sito web per matrimoni elegante e sorprendente per te o per i tuoi clienti. Se hai domande su questo tutorial o se hai richieste per futuri tutorial/miniserie; assicurati di lasciare un commento nella sezione commenti di questo post del blog in modo che possiamo risponderti con le risposte!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!