Come progettare una sezione di relatori ospiti con un CTA efficace in Divi

Sia che tu abbia un podcast o che stia ospitando un WordCamp (o qualsiasi evento di relatore), è sempre una buona idea avere una sezione di relatore ospite per il tuo sito web. Come le testimonianze, la presentazione di relatori ospiti è un modo efficace per promuovere valore e stabilire credibilità con il pubblico. Una sezione di relatori ospiti è anche un punto chiave per raccogliere nuovi candidati per il tuo prossimo evento o episodio. Questo tutorial mostra come progettare una sezione di relatori ospiti che non solo mostri gli oratori in modo elegante, ma incoraggi anche i nuovi oratori a candidarsi con un invito all'azione efficace.

Ma prima di iniziare, ecco un'anteprima del design finale.

Sbirciata

Ed ecco un effetto hover bonus che ti mostrerò anche.

Iniziamo!

Iscriviti al nostro canale Youtube

Costruire la struttura di base e il contenuto

Se non lo hai già fatto, crea una nuova pagina e distribuisci Divi Builder per costruire sul front-end.

Il, aggiungi una nuova sezione con una riga di una colonna.

Aggiungi un modulo di testo alla riga con il seguente contenuto:

<h2>Guest Speaker</h2>

Quindi, aggiungi un modulo divisore direttamente sotto il modulo di testo.

Ora aggiungeremo una nuova riga con una struttura a quattro colonne per contenere i nostri relatori ospiti.

Nella prima colonna della riga, aggiungi un modulo persona.

Aggiorna il contenuto del modulo Persona come segue:

Nome: [vuoto]
URL profilo Facebook: [aggiungi "#" per ora]
URL profilo Twitter: [aggiungi "#" per ora]
URL del profilo LinkedIn: [aggiungi "#" per ora]

Per la descrizione, aggiungi quanto segue:

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

Nota: il tag hr genera una linea di divisione che ha uno stile in linea da rendere è larga 90 px e fluttua a sinistra. Il tag forte che è avvolto attorno al cognome lo rende audace per un elemento di design unico.

Ora che hai il contenuto a posto, salva le impostazioni del modulo persona.

Copia il modulo persona appena creato e incollalo in ciascuna delle colonne rimanenti in modo da avere lo stesso modulo persona in ciascuna delle quattro colonne. Per copiare e incollare puoi utilizzare le opzioni del menu di scelta rapida o i tasti di scelta rapida cmd+c cmd+v (mac) o ctrl+c ctrl+v (win).

Apri le impostazioni del modulo persona nella colonna 4 e aggiorna il contenuto in modo che contenga solo quanto segue:

Nome: "Questo potresti essere tu!"
Descrizione: "Usa il pulsante qui sotto per richiedere di parlare al nostro evento."

Salva le tue impostazioni.

Quindi, aggiungi un modulo pulsante direttamente sotto il modulo persona nella colonna 4 e aggiorna il contenuto del testo del pulsante su "Applica ora". E salva le tue impostazioni.

Torna ai primi moduli delle tre persone nelle colonne 1-3 e aggiungi le immagini per ciascuno dei ritratti degli oratori ospiti. Assicurati che abbiano le stesse dimensioni con le stesse dimensioni di altezza e larghezza e che siano abbastanza grandi da tenere conto delle larghezze delle colonne su tutte le dimensioni del browser (idealmente 600 px per 600 px).

Questo è l'aspetto che dovrebbe avere il layout di Guest Speak a questo punto.

Disegnare il layout del relatore ospite

Disegnare la sezione

Apri le impostazioni della sezione e aggiorna quanto segue:

Immagine di sfondo: [Ne sto usando uno dal nostro layout di agenzia]

Colore sfondo sfumato sinistro: #293039
Colore di sfondo sfumato a destra: rgba (41,48,57,0.89)
Stile divisore superiore: vedi screenshot
Colore divisore superiore: #293039
Altezza divisore superiore: 30vw

Modifica delle larghezze delle righe

Poiché vogliamo che entrambe le nostre righe abbiano la stessa larghezza, usa la selezione multipla per selezionare entrambe le righe e fai clic su una delle icone delle impostazioni per aprire le impostazioni dell'elemento.

Quindi aggiorna quanto segue:

Larghezza personalizzata: 80%

Ora entrambe le righe avranno la stessa larghezza personalizzata.

Disegnare il titolo

Apri le impostazioni del modulo di testo contenente il titolo della sezione "Oratori ospiti" e aggiorna quanto segue:

Intestazione 2 Carattere: Montserrat
Intestazione 2 Peso del carattere: grassetto
Stile carattere titolo 2: TT
titolo 2 Allineamento del testo: a destra
Colore testo titolo 2: #74bf46
Titolo 2: Dimensione testo: 70 px (desktop), 50 px (smartphone)

Salva le impostazioni.

Ora apri le impostazioni del divisore e aggiorna quanto segue:

Colore: #ffffff
Altezza: 0px
Larghezza: 90 px
Allineamento del modulo: a destra

Moduli per lo styling della persona

Dal momento che vogliamo dare lo stesso stile iniziale a tutti i nostri moduli persona, usa multiselect per selezionarli e quindi fai clic sull'icona delle impostazioni di uno dei moduli per distribuire la modale delle impostazioni dell'elemento.

Aggiorna le seguenti impostazioni dell'elemento:

Colore icona: #74bf46
Carattere del titolo: Montserrat
Peso del carattere del titolo: leggero
Colore del testo del titolo: #ffffff
Dimensione del testo del titolo: 20px
Carattere del corpo: Montserrat
Colore del corpo del testo: #ffffff
Spaziatura delle lettere del corpo: 2px
Altezza della linea del corpo: 1,8 em

Disegnare il modulo CTA Person

Utilizziamo questo modulo persona come un invito all'azione che attira nuovi oratori ospiti per richiedere un impegno a parlare. Quindi, possiamo lasciare attiva l'immagine predefinita (silhouette) come modo creativo per visualizzare uno spazio vuoto. Ma ci sono alcune modifiche di stile che dobbiamo aggiungere per completare il design. Apri le impostazioni del modulo persona nella colonna 4 e aggiorna quanto segue.

Larghezza bordo immagine: 18 px
Colore bordo immagine: #d2d2d2
Opacità immagine: 50%

Peso del carattere del titolo: grassetto
Altezza della riga del titolo: 1,5 em

Ora non resta che modellare il nostro pulsante. Apri le impostazioni del modulo pulsanti e aggiorna quanto segue:

Colore del testo del pulsante: #293039
Colore di sfondo del pulsante: #74bf46
Raggio del bordo del pulsante: 50 px
Carattere pulsante: Montserrat
Peso del carattere: grassetto

Ora diamo un'occhiata al risultato finale.

Suggerimento bonus: effetto al passaggio dello zoom dell'immagine

Non dimenticare tutte le opzioni di passaggio del mouse integrate disponibili in Divi. In effetti, puoi visualizzare alcuni tutorial stimolanti su questi effetti al passaggio del mouse sul nostro blog. Ma per questo design, ho pensato di pensare un po' fuori dagli schemi e darti alcuni frammenti di CSS che faranno ingrandire (o ridimensionare) leggermente l'immagine della tua persona al passaggio del mouse.

Se stai cercando un sottile effetto hover per distinguere i tuoi moduli persona, ecco come farlo.

Utilizzare la selezione multipla per selezionare i moduli persona nelle colonne 1, 2 e 3. Aprire le impostazioni dell'elemento. Nella scheda Avanzate inserisci il seguente CSS sotto l' Elemento Principale :

overflow: hidden;

Questo codice impedirà all'immagine in espansione di estendersi all'esterno del contenitore del modulo.

Quindi aggiungi il seguente CSS sotto Immagine membro :

transition: all 0.3s; 

Ciò aggiunge una transizione graduale quando l'immagine si ridimensiona.

Per aggiungere il css al passaggio del mouse, fai clic sull'icona al passaggio del mouse e seleziona la scheda al passaggio del mouse e inserisci il seguente CSS:

transform: scale(1.1) translateY(-4.5%);

Questo ridimensiona (o espande) l'immagine a una dimensione leggermente più grande e la sposta leggermente verso l'alto.

Ora le immagini avranno un sottile effetto di zoom al passaggio del mouse.

Pensieri finali

Bene, spero che questo tutorial ti sia piaciuto o almeno che ti sia rimasto qualche utile consiglio di progettazione. Questo layout della sezione dell'oratore ospite può essere utilizzato in vari modi. Un'altra applicazione perfetta sarebbe quella di una pagina dei dipendenti per elencare contemporaneamente i dipendenti attuali e incoraggiare altri a candidarsi per una posizione. Sentiti libero di condividere alcune idee con noi.

Non vedo l'ora di sentirti nei commenti qui sotto.

Saluti!