Creazione di fantastici modelli di post personalizzati per eventi con Divi

Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo.

Questa settimana, come parte della nostra iniziativa Divi design in corso, ti mostreremo come creare fantastici modelli di post personalizzati per eventi con Divi utilizzando il Meetup Layout Pack gratuito. Questo tutorial sui casi d'uso è reso possibile dalla funzione Divi Builder Custom Post Type Support, uno dei recenti aggiornamenti di Divi. Creeremo un modello che corrisponderà al pacchetto di layout Meetup. Dopo aver creato questo modello, potrai riutilizzarlo per tutti gli eventi che condividi sul tuo sito web.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato finale su schermi di diverse dimensioni.

Installa il plug-in del calendario degli eventi

Vai su Plugin e aggiungine uno nuovo

Per aggiungere tipi di post personalizzati per eventi al nostro sito Web, utilizzeremo il plug-in Calendario eventi. Questo è un plug-in gratuito che puoi trovare accedendo alla dashboard di WordPress> Plugin> Aggiungi nuovo> Cerca il plug-in Calendario eventi .

Attiva Plugin

Una volta installato il plugin, assicurati di attivarlo subito in modo da poter iniziare a usarlo.

Modifica le impostazioni di personalizzazione del tema

Cambia tipografia

Ora, prima di creare un evento, iniziamo con l'ottenere i fondamenti del nostro sito web nel modo giusto. Apri la personalizzazione del tema andando nella dashboard di WordPress > Aspetto > Personalizza . Passa alla tipografia del tuo sito web andando su Impostazioni generali > Tipografia successiva . Una volta che sei lì, applica le seguenti impostazioni:

• Dimensione del testo del corpo: 16
• Altezza della linea del corpo: 1,9
• Carattere intestazione: Roboto

Le impostazioni del calendario degli eventi

Il plug-in Calendario eventi ha anche alcune delle proprie impostazioni nella personalizzazione del tema. Torna al menu principale del tuo personalizzatore di temi > Il calendario degli eventi > Tema generale > E usa i seguenti colori:

• Colore accento: #06c8ff
• Colore evidenziatore in primo piano: #06c8ff

Torna alle impostazioni del Calendario degli eventi > Tema generale e usa lo stesso colore "#06c8ff" per tutte le opzioni che puoi trovare lì.

Aggiungi un nuovo evento

Aggiungi nuovo evento

Ora siamo pronti per creare un nuovo evento. Per farlo, vai alla dashboard di WordPress > Eventi > Aggiungi nuovo . Dopo aver aggiunto un nuovo evento, assicurati di assegnare anche un titolo.

Aggiungi dettagli evento

Continua inserendo i dettagli del tuo evento. Ciò comprende:

• Ora dell'appuntamento
• Posizione
• Organizzatori
• Sito Web dell'evento
• Costo dell'evento

Aggiungi immagine in primo piano

Aggiungi anche un'immagine in primo piano al tuo evento. Più avanti in questo post, lo rimuoveremo dal frontend, ma ne avremo ancora bisogno per la condivisione sui social.

Modifica le impostazioni della pagina Divi

Nell'angolo destro del tuo evento, vedrai le impostazioni della pagina Divi. Lì, rimuovi la barra laterale selezionando "Nessuna barra laterale" per il layout di pagina.

Pubblica evento

Ora siamo pronti per iniziare a lavorare sul frontend. Vai avanti e pubblica il tuo evento.

Questo è il design della pagina predefinito senza aver abilitato Visual Builder:

Apri la pagina di destinazione di Meetup e salva gli elementi di design

Individua e salva riga nella libreria Divi

Lavorare in modo efficiente è più importante che lavorare sodo. Ecco perché ci risparmieremo un po' di tempo e fatica riutilizzando gli elementi del Meetup Layout Pack. Inizia aprendo la pagina di destinazione utilizzando Visual Builder di Divi. Quindi, individua la seguente riga sulla tua pagina e salvala nella tua libreria Divi:

Individua e salva la sezione nella libreria Divi

Avremo anche bisogno della seguente sezione, quindi vai avanti e salva anche questa:

Inizia a creare un modello di tipo personalizzato per l'evento

Aggiungi righe di codice CSS personalizzate per abbinare il pacchetto di layout Meetup

Possiamo usare Visual Builder per le pagine degli eventi, ma sfortunatamente non possiamo usarlo ovunque. Per assicurarci che tutto sia in linea con il Meetup Layout Pack, aggiungeremo in anticipo alcune righe di codice CSS:

#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !important;
}
#tribe-events-content a {
font-family: Roboto !important;
font-weight: 300 !important;
}
.tribe-events-event-image{
display: none;
}

Passa a Visual Builder

Ora possiamo passare all'utilizzo del Visual Builder sul nostro evento!

Aggiungi una nuova sezione

Immagine di sfondo

Vedrai che c'è una sezione già presente nella pagina. Questo è il punto della pagina che possiamo modificare. Inizia aprendo le impostazioni della sezione e aggiungi l'immagine di sfondo ' bg-4.png '. Puoi trovare questa immagine nella tua libreria multimediale se hai già caricato il Meetup Layout Pack sul tuo sito web. Insieme all'immagine di sfondo, utilizza le seguenti impostazioni:

• Dimensione dell'immagine di sfondo: dimensione reale
• Posizione immagine di sfondo: in basso a destra

Spaziatura

Apri le impostazioni di spaziatura della tua sezione successiva e aggiungi "100 px" al margine superiore.

Frontiera

Stiamo anche creando questo tipo di effetto timeline per il nostro modello. Vai alle impostazioni del bordo e aggiungi il seguente bordo sinistro:

• Larghezza bordo sinistro: 7px
• Colore bordo sinistro: #8301e9

Aggiungi una nuova riga

Struttura della colonna

Ora che abbiamo finito di modificare le impostazioni della sezione, possiamo iniziare ad aggiungere le nostre righe. Aggiungi una nuova riga con la seguente struttura di colonne:

Dimensionamento

Apri le impostazioni della tua riga e abilita l'opzione 'Make This Row Fulliwdth' nelle impostazioni di dimensionamento. Questo è qualcosa che faremo per ciascuna delle righe all'interno di questo layout.

Aggiungi modulo di testo alla riga

Dimensionamento

Quindi, aggiungi un modulo di testo con una descrizione del tuo evento, passa alle impostazioni di dimensionamento e utilizza la seguente larghezza:

• Desktop: 47%
• Tablet e telefono: 100%

Importa riga salvata

Proprio sotto la riga che hai aggiunto, vai avanti e importa la riga che hai salvato nella tua libreria Divi.

Dimensionamento

Avremo bisogno di modificare alcune cose su questa riga, a partire dalle impostazioni di dimensionamento. Abilita l'opzione "Rendi questa riga a larghezza intera".

Rimuovi il modulo del corpo del testo e il modulo dei pulsanti

Quindi, rimuovi il paragrafo del modulo testo e il modulo pulsanti nella prima colonna.

Clona modulo testo e rimuovi dimensionamento

Vai avanti e clona il modulo di testo nella tua prima riga e posizionalo nella prima colonna della tua nuova riga. Apri quindi le impostazioni di ridimensionamento e rimuovi la larghezza personalizzata per il desktop.

Importa sezione salvata

Abbiamo finito di modificare la prima sezione! Vai avanti e importa la sezione successiva che hai salvato.

Aggiungi bordo

Stiamo aggiungendo anche un bordo sinistro a questa sezione:

• Larghezza bordo sinistro: 7px
• Colore bordo sinistro: #06c8ff

Modifica le dimensioni di ogni riga

Ci sono un paio di righe all'interno della sezione che hai appena importato. Abilita l'opzione "Rendi questa riga a larghezza intera" per ciascuna di queste righe.

Modifica allineamento pulsanti

Infine, cambia anche l'allineamento dei pulsanti a sinistra.

Salva modello nella libreria Divi

Aggiungi alla libreria

Il modello di layout è finito! Ora puoi salvarlo nella tua libreria Divi e riutilizzarlo anche per altri eventi.

Anteprima

Ora che abbiamo seguito tutti i diversi passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Pensieri finali

In questo post sul blog del caso d'uso, ti abbiamo mostrato come creare fantastici modelli di post personalizzati per eventi. Il modello che abbiamo creato corrisponde allo stile del Meetup Layout Pack. Dopo aver creato questo modello, lo abbiamo anche salvato nella libreria Divi in ​​modo da poterlo riutilizzare anche per altri eventi. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!