Come creare una pagina di destinazione del vertice virtuale con Divi

La promozione di un evento virtuale implica una serie di strategie promozionali. La creazione di una landing page invitante è uno di questi. Creare una landing page per il tuo summit virtuale è il modo perfetto per incuriosire il tuo pubblico. Con la giusta combinazione di sezioni, puoi invitare, informare e raccogliere i partecipanti registrati. Oggi ti mostreremo come creare una landing page virtuale per il summit con cinque sezioni. Il design include immagini bicromatiche e divisori di sezioni scorrevoli. Abbiamo anche incluso un file JSON scaricabile se vuoi saltare il tutorial passo passo. Nella cartella troverai anche la grafica dell'intestazione e del piè di pagina sia in PNG che in AI.

Arriviamo ad esso!

Anteprima

Diamo un'occhiata al design della pagina di destinazione su schermi di diverse dimensioni.

Desktop

Tavoletta

Mobile

Scarica GRATUITAMENTE la pagina di destinazione del Summit virtuale

Per mettere le mani sul layout della pagina di destinazione del summit virtuale gratuito, dovrai prima scaricarlo utilizzando il pulsante qui sotto. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Sezioni della pagina di destinazione del Summit virtuale

Affinché la tua pagina di destinazione possa svolgere il suo lavoro, ha bisogno di un insieme specifico di sezioni. Oltre a catturare l'attenzione dello spettatore, le pagine di destinazione devono anche convertire. Una pagina di destinazione del summit virtuale, ad esempio, deve includere informazioni pertinenti e un invito all'azione. Tutte le sezioni devono fluire dall'una all'altra senza soluzione di continuità affinché lo spettatore si senta ispirato ad agire e a registrarsi.

Abbiamo incluso le seguenti sezioni nella pagina di destinazione del Summit virtuale:

Intestazione

La sezione dell'intestazione include informazioni importanti come il titolo del summit e la data dell'evento. Questa è l'informazione più importante, ecco perché è in cima. Nessuna intestazione è completa senza un invito all'azione e una facile navigazione al resto della pagina.

Nel nostro design, abbiamo incluso due pulsanti con collegamenti di ancoraggio che consentono di accedere agli altoparlanti e alle sezioni di pianificazione. Ancora più importante, abbiamo incluso un pulsante con un collegamento alla sezione di registrazione. In tutta la pagina, tutti i pulsanti "registrati" hanno lo stesso aspetto, per avere unità visiva nel design.

Informazione

La seconda sezione è una sezione informativa che incita lo spettatore a considerare di partecipare al vertice virtuale. Nel design, abbiamo aggiunto quattro blurb e un'immagine che può essere facilmente trasformata in un video. I trafiletti elencano quattro motivi per partecipare al summit e l'immagine (o il video) è la visuale a supporto della decisione.

I relatori

Nella sezione successiva, troverai un set di sei moduli persona. Qui è dove presenti i relatori che parteciperanno al vertice. Ogni modulo include i seguenti elementi:

• Immagine
• Nome
• Posizione
• Descrizione
• Link ai social media

Assicurati di inserire tutte le informazioni rilevanti per ogni oratore. Inoltre, prova a utilizzare la stessa quantità di linee nel corpo del testo per mantenere il design nitido. Come puoi vedere, abbiamo utilizzato un effetto di colore a due tonalità su tutte le foto degli altoparlanti per conferire al design un aspetto e una sensazione interessanti. Di seguito è riportato un tutorial passo passo su come ottenere questo effetto in Photoshop.

Se hai più di sei altoparlanti, duplica semplicemente la riga o clona i moduli in righe con più o meno colonne.

Il programma

La sezione del programma è successiva. In quest'area, abbiamo condiviso elegantemente il programma del vertice e ci siamo assicurati che fosse strutturale. Per mantenere lo stile del design del testo, assicurati di modificare il contenuto ma non i livelli di intestazione. Cerca di mantenere il contenuto all'incirca della stessa lunghezza in modo che il design rimanga pulito.

Le righe sono organizzate per giorni con un'immagine del titolo e un gruppo di blurb. Nella parte inferiore dell'ultima colonna puoi trovare un pulsante di invito all'azione per consentire al pubblico di registrarsi.

Registrati

Ultimo ma non meno importante è la sezione di registrazione. Abbiamo incluso un conto alla rovescia per aggiungere un senso di urgenza. Il modulo di contatto dovrebbe essere collegato direttamente alla tua lista RSVP in modo che ogni invitato venga registrato automaticamente.

In tutto il design della pagina di destinazione del summit virtuale, troverai tre pulsanti che accedono a questa sezione per una generazione di lead ottimizzata.

Crea una mappa gradiente a due tonalità con Photoshop

Apri immagine in Adobe Photoshop

Se desideri imitare le immagini a due tonalità nel nostro design, segui i passaggi seguenti. Innanzitutto, apri un'immagine in Photoshop.

Apri Regolazioni e seleziona Mappa sfumatura

Apri la barra degli strumenti delle regolazioni e fai clic sulla mappa del gradiente. Nella scheda delle proprietà, fare doppio clic sulla barra del gradiente per aprire il popup delle impostazioni.

Regola i colori sfumati

Nelle impostazioni del gradiente, fare doppio clic su ciascun colore per personalizzare le impostazioni.

Per ottenere l'effetto del nostro design, regolare il gradiente come segue:

• Tipo di gradiente: solido
• Morbidezza: 100%
• Opacità Stop #1: 100%
• Colore Stop #2
  • Viola scuro #202060
  • Posizione: 19%
• Punto medio:
  • Opacità punto medio: 85%
  • Colore punto medio: 50%
• Opacità Stop #2: 55%
• Colore Stop #
  • Viola #f895f8
  • Posizione: 100%

Salva come mappa gradiente personalizzata

Aggiungi un nome per il tuo gradiente e fai clic su nuovo per salvarlo. Verrà quindi archiviato nella libreria dei gradienti. Salva l'immagine per il Web a 700 px di altezza. Ripeti il ​​processo con tutte le immagini di cui hai bisogno. Dopo aver applicato la mappa del gradiente, seleziona il gradiente salvato.

1. Crea sezione intestazione

Aggiungi nuova sezione

Sfondo

Iniziamo a ricreare la pagina di destinazione del summit virtuale. Crea una nuova pagina e aprila con Divi Builder. Prima di aggiungere righe, aggiungi un'immagine di sfondo e un gradiente a una nuova sezione. Troverai l'immagine di sfondo nella cartella scaricabile in alto.

• Gradiente di sfondo
  • Colore 1: #1f4068
  • Colore 2: #202040
• Immagine di sfondo: grafica intestazione

Dimensionamento

Successivamente regolare l'altezza minima.

• Altezza minima: 1050 px

Spaziatura

Anche il distanziamento.

• Imbottitura superiore e inferiore
  • Tavolo e telefono: 90px

Visibilità

Infine, regola le impostazioni di visibilità nella scheda Avanzate.

• Overflow orizzontale e verticale: nascosto

Aggiungi nuova riga

Struttura della colonna

Aggiungi una riga con tre colonne. Seleziona la struttura delle colonne 1/2, 1/4, 1/4.

Dimensionamento

Regola le dimensioni della riga come segue:

• Larghezza: 90%
• Larghezza massima: 1800 px
• Allineamento: Centro

Spaziatura

\Aggiungi anche un margine superiore.

• Margine superiore: 200 px

Colonna 2, 3 Impostazioni

Spaziatura

Regola le impostazioni per le colonne 2 e 3. Prima la spaziatura

• Margine superiore: 30px

Visibilità

Quindi, nascondi le colonne sul telefono.

• Disabilita su: Telefono

Aggiungi il primo modulo di testo alla colonna 1

Testo

Aggiungi un primo modulo di testo nella colonna 1. Inserisci il titolo come contenuto H1.

• Corpo: contenuto H1

Testo dell'intestazione

Nella scheda Design, modella il testo dell'intestazione in seguito.

• Livello di intestazione: H1
• Carattere: Alata
• Peso: grassetto
• Allineamento: Centro
• Colore: bianco sporco #eaeaea
• Taglia
  • Desktop: 85 px
  • Tablet: 70px
  • Telefono: 44px
• Spaziatura lettere: 2px
• Altezza della linea: 1.1em
• Ombra del testo: prima opzione
• Colore ombra: rgba(o,0,0,0.26)

Aggiungi il secondo modulo di testo alla colonna 1

Testo

Aggiungi un secondo modulo di testo. Inserisci la data come contenuto H2.

• Corpo: contenuto H2, 15+16 luglio 2020

Testo dell'intestazione

Modella il testo dell'intestazione in seguito.

• Livello di intestazione: H2
• Carattere: Alata
• Peso: Normale
• Allineamento: Centro
• Colore: Fucsia #b030b0
• Taglia
  • Desktop e tablet: 60 px
  • Telefono: 45 px
• Altezza della linea: 1.3 em

Spaziatura

Aggiungi anche un po' di spazio.

• Imbottitura inferiore: 20px

Aggiungi modulo pulsante alla colonna 1

Testo

Aggiungi un modulo pulsante per l'invito all'azione.

• Pulsante: Registrati

Collegamento

Aggiungi il collegamento di ancoraggio.

• URL del collegamento: #Registrati

Allineamento

Passa alla scheda Progettazione e imposta l'allineamento.

• Allineamento dei pulsanti: centro

Stili personalizzati dei pulsanti

Stile anche il pulsante.

• Dimensione del testo
  • Desktop: 30px
  • Tablet: 25 px
  • Telefono: 20px
• Colore del testo: bianco #ffffff
• Sfondo: viola #602080
• Raggio del bordo: 35px
• Spaziatura lettere: 1px
• Carattere: Alata

Spaziatura

Infine, regola la spaziatura.

• Margine superiore
  • Tablet e telefono: 15px
• Imbottitura superiore: 2px

Aggiungi modulo pulsante alla colonna 2

Testo

Passa alla colonna 2 e aggiungi un modulo pulsante. Aggiungi la copia che preferisci.

• Pulsante: Altoparlanti

Collegamento

Quindi, aggiungi un collegamento di ancoraggio.

• URL del collegamento: #Speakers

Allineamento

Nella scheda Progettazione, imposta l'allineamento.

• Allineamento dei pulsanti
  • Desktop: destra
  • Tablet e telefono: Centro

Stile pulsante personalizzato

Regola anche gli stili dei pulsanti personalizzati.

• Dimensione del testo: 24px
• Colore del testo: bianco #ffffff
• Sfondo: trasparente
• Spaziatura lettere: 1px
• Carattere pulsante: Alata
• Raggio del bordo: 0px

Scatola ombra

Infine, aggiungi un'ombra di scatola.

• Box Shadow: 4a opzione
• Posizione orizzontale: 0px
• Posizione verticale: 5 px
• Colore ombra: Fucsia: #b030b0

Clona il modulo del pulsante nella colonna 3

Pulsante Clona

Clona il pulsante nella colonna 2 e posiziona il modulo duplicato nella colonna 3.

Modulo pulsante di regolazione

Testo

Modificare il testo nel pulsante clonato.

• Pulsante: Programma

Collegamento

Cambia anche il link di ancoraggio.

• URL del collegamento: #Programma

Allineamento

Non dimenticare di modificare anche l'allineamento.

• Allineamento dei pulsanti
  • Desktop a sinistra

Aggiungi nuova riga

Struttura della colonna

Aggiungi una nuova riga con due colonne uguali.

Dimensionamento

Regolare prima la larghezza della grondaia.

• Larghezza grondaia personalizzata: 2

Spaziatura

Aggiungi spaziatura successiva.

• Margine superiore
  • Telefono: -35px

Visibilità

Quindi regolare la visibilità della riga.

• Disabilita su: tablet e desktop

Clona modulo pulsante e posiziona duplicato nella colonna 1

Pulsante Clona

Clonare il modulo pulsante nella colonna 2 della riga precedente e posizionare il modulo duplicato nella colonna 1 della nuova riga.

Modulo pulsante di regolazione

Stile pulsante personalizzato

Regola il testo nel nuovo pulsante.

• Dimensione del testo: 20px

Scatola ombra

Modifica anche l'ombra della scatola.

• Posizione verticale: 4px

Aggiungi modulo pulsante clonato alla colonna 2

Pulsante Clona

Modulo pulsante duplicato dalla colonna 3 nella riga precedente. Incollalo nella colonna 2 di questa riga.

Modulo pulsante di regolazione

Testo

Regola il contenuto del testo nel pulsante clonato.

• Testo: Programma

2. Crea sezione informazioni

Aggiungi nuova sezione

Sfondo

Per creare la sezione delle informazioni, aggiungi prima una nuova sezione e modella lo sfondo.

• Gradiente di sfondo
  • Colore 1: #202040
  • Colore 2: #202060

Spaziatura

Aggiungi anche un po' di imbottitura.

• Imbottitura superiore: 170 px
• Imbottitura inferiore: 5px

Visibilità

Infine, regola le impostazioni di visibilità nella scheda Avanzate.

• Overflow orizzontale e verticale: nascosto

Aggiungi nuova riga

Struttura della colonna

Aggiungi una nuova riga con una colonna. La chiameremo riga del titolo.

Dimensionamento

Imposta la taglia successiva.

• Larghezza: 80%
• Larghezza massima: 1800 px

Modulo Aggiungi testo

Testo

Aggiungi un modulo di testo.

• Body: H2 Content – ​​Perché partecipare al Digital Marketing Virtual Summit?

Testo dell'intestazione

Nella scheda Design, dai uno stile al testo dell'intestazione.

• Livello di intestazione: H2
• Carattere: Alata
• Colore del testo: bianco #ffffff
• Taglia
  • Desktop: 55px
  • Tablet: 45px
  • Telefono: 40px
• Spaziatura lettere: 2px
• Altezza della linea: 1.1 em

Aggiungi modulo divisore

Linea

Ora aggiungi un modulo divisore e modella la linea nella scheda Design.

• Colore Linea: Fucsia #b030b0

Dimensionamento

Regolare il dimensionamento successivo.

• Peso del divisore: 50 px
• Altezza massima: 50 px

Effetti di scorrimento

Nella scheda Avanzate, aggiungi un effetto di scorrimento orizzontale.

• Abilita movimento orizzontale
• Desktop
  • Compensazione iniziale: -6
  • Scostamento medio: 50% / 0
  • Scostamento finale: 6
• Tablet e telefono
  • Compensazione di affermazione: -4
  • Compensazione media: 50% /0
  • Scostamento finale: 4

Aggiungi nuova riga

Struttura della colonna

Ora aggiungi una nuova riga con tre colonne. Seleziona la struttura delle colonne 1/2, 1/4, 1/4.

Dimensionamento

Prima di aggiungere moduli, regolare le dimensioni delle righe.

• Larghezza: 80%
• Larghezza massima: 1800 px

Impostazioni colonna 1

Spaziatura

Inoltre, regola la spaziatura della prima colonna.

• Imbottitura superiore: 20px

Aggiungi modulo immagine alla colonna 1

Immagine

Ora aggiungi un modulo immagine alla colonna 1. Usa una delle tue immagini con l'effetto bicromia.

• Immagine: foto con effetto bicromia

Frontiera

Regola anche i bordi.

• Angoli arrotondati: 15px

Aggiungi modulo Blurb alla colonna 2

Testo

Passa alla colonna 2 e aggiungi un modulo blurb. Inserisci il contenuto.

• Titolo: Crea nuove connessioni
• Corpo: contenuto descrittivo

Immagine

Carica l'immagine numero 1 che trovi nella cartella scaricabile.

• Immagine: PNG di #1

Immagine e icona

Regolare il posizionamento dell'immagine successiva.

• Posizionamento: in alto
• Allineamento: Sinistra

Testo del titolo

Stile anche il testo del titolo.

• Livello di intestazione: H4
• Carattere: Alata
• Colore: Bianco #ffffff
• Dimensioni: 23px

Corpo del testo

Non dimenticare di dare uno stile al corpo del testo.

• Carattere: Open Sans
• Colore: Bianco #ffffff
• Dimensioni: 14px
• Spaziatura lettere: 1px

CSS personalizzato

Infine, aggiungi un po' di imbottitura extra con CSS personalizzato al titolo del blurb nella scheda Avanzate.

• Titolo Blurb: padding-bottom: 15px;

padding-bottom: 15px;

Clona modulo Blurb e posiziona duplicato nella colonna 2

Clona Blurb

Duplica il primo contrassegno nella colonna 2.

Contenuto

Aggiorna il contenuto.

• Titolo: Nuovo titolo
• Corpo: nuovo testo descrittivo

Immagine

Quindi, cambia l'immagine del numero. Puoi trovare quello nuovo nella cartella scaricabile.

• Immagine: PNG di #2

Elimina colonna 3 e clona colonna 2

Clona colonna

Nelle impostazioni della riga, elimina la terza colonna e duplica la seconda. Assicurati di riportare la struttura della colonna a 1/2, 1/4, 1/4.

Regola Blurb 1 nella colonna 3

Contenuto

Aggiorna il contenuto del testo nel blurb clonato.

• Titolo: Nuovo titolo
• Corpo: nuovo testo descrittivo

Immagine

Cambia anche l'immagine del numero.

• Immagine: PNG di #3

Regola Blurb 2 nella colonna 3

Contenuto

Modifica anche il contenuto di questo blurb. Prima il testo.

• Titolo: Nuovo titolo
• Corpo: nuovo testo descrittivo

Immagine

Quindi, cambia l'immagine del numero.

• Immagine: PNG di #4

3. Crea la sezione dei relatori

Aggiungi nuova sezione

Sfondo

Passiamo alla sezione dei relatori. Aggiungi una nuova sezione e modella lo sfondo.

• Gradiente di sfondo
  • Colore 1: #202060
  • Colore 2: #162447

Visibilità

Regola le impostazioni di visibilità nella scheda Avanzate.

• Overflow orizzontale e verticale: nascosto

Clona riga titolo e posiziona duplicato in una nuova sezione

Riga duplicata

Duplica la riga del titolo dalla sezione sopra e posiziona il duplicato nella sezione clonata. Lo chiameremo, riga del titolo 2.

Modulo di regolazione del testo

Testo

Testo dell'intestazione

Quindi, modella le impostazioni del testo H3 nella scheda Design.

• Livello di intestazione: H3
• Carattere: Alata
• Taglia
  • Desktop: 100 px
  • Tablet: 80px
  • Telefono: 45px

CSS personalizzato

Modifica anche l'ID CSS nel modulo di testo clonato.

• ID CSS: Altoparlanti

Regola divisore

Linea

Quindi, cambia il colore della linea del modulo divisore.

• Colore linea: viola #602080

Aggiungi nuova riga

Struttura della colonna

Ora aggiungi una nuova riga con 5 moduli di uguali dimensioni.

Dimensionamento

Regola le dimensioni della riga come segue:

• Larghezza: 80%
• Larghezza massima: 1800 px
• Equalizza l'altezza della colonna: Sì

Spaziatura

Aggiungi anche un po' di spazio.

• Margine superiore: 40 px

Aggiungi modulo persona alla colonna 1

Testo

Aggiungi il modulo in prima persona alla colonna 1.

• Nome: nome della persona
• Posizione: posizione della persona
• Profili dei social media: profili delle persone
• Corpo: testo descrittivo

Immagine

Carica l'immagine dell'altoparlante con l'effetto colore. Consigliamo una dimensione dell'immagine di 550 x 770 px.

• Immagine: foto con effetto bicromia

Immagine

Aggiungi alcuni angoli arrotondati all'immagine successiva.

• Angoli arrotondati immagine: 15px

Testo del titolo

Quindi, modella il testo del titolo.

• Livello di intestazione: H4
• Carattere: Alata
• Dimensioni: 33px

Corpo del testo

Modella anche il corpo del testo.

• Carattere: Open Sans
• Dimensioni: 14px
• Spaziatura lettere: 1px

Posizione del testo

Non dimenticare il testo della posizione.

• Carattere: Alata
• Dimensioni: 20px

CSS personalizzato

Infine, aggiungi del CSS personalizzato per un'imbottitura extra.

• Immagine membro: padding-bottom: 10px;

padding-bottom: 10px;

• Titolo: padding-bottom: 20px;

padding-bottom: 20px;

• Posizione del membro: padding-bottom: 20px;

padding-bottom: 20px;

Duplica colonna 1

Clona colonna

Nelle impostazioni delle righe, elimina le colonne 2-5. Duplica la colonna 1 quattro volte.

Modifica il contenuto per i moduli per le nuove persone

Testo

Aggiorna il contenuto in tutti i moduli clonati. Prima il testo.

• Nome: nome della nuova persona
• Posizione: posizione della nuova persona
• Profili dei social media: profili di nuove persone
• Corpo: nuovo testo descrittivo

Immagine

Poi l'immagine.

• Immagine: Nuova immagine con effetto bicromia (550x700px)

4. Crea sezione di pianificazione

Aggiungi nuova sezione

Sfondo

Ora creeremo la sezione di pianificazione. Aggiungi una nuova sezione e modella lo sfondo come segue:

• Gradiente di sfondo
  • Colore 1: #162447
  • Colore 2: #1f4068

Visibilità

Regola le impostazioni di visibilità nella scheda Avanzate.

• Overflow orizzontale e verticale: nascosto

Clona titolo riga 2

Riga duplicata

Clona la riga del titolo dalla sezione sopra e incollala in questa sezione.

Modulo di regolazione del testo

Testo

Modificare il contenuto del titolo.

• Titolo: Il programma

CSS personalizzato

Modifica l'ID CSS nel modulo di testo clonato.

• ID CSS: Programma

Regola divisore

Linea

Cambia anche il colore del divisorio.

• Colore Linea: Fucsia #b030b0

Aggiungi nuova riga

Struttura della colonna

Ora aggiungi una nuova riga con tre colonne di uguali dimensioni.

Dimensionamento

Regola le dimensioni della riga.

• Larghezza: 80%
• Larghezza massima: 1800 px

Spaziatura

Aggiungi anche un po' di spazio.

• Margine inferiore: 50 px

Aggiungi modulo di testo alla colonna 1

Testo

Aggiungi un modulo di testo alla prima colonna. Inserisci il contenuto.

• Corpo: Contenuto H3 – Giorno 1

Testo dell'intestazione

Passa alla scheda Design e modella il testo dell'intestazione.

• Livello di intestazione: H3
• Colore: Bianco #ffffff
• Dimensioni: 50px

Spaziatura

Aggiungi un po' di spazio dopo.

• Imbottitura superiore: 20px
• Imbottitura sinistra: 30px

Aggiungi invito all'azione alla colonna 1

Testo

Ora aggiungi un modulo di invito all'azione con alcuni contenuti a tua scelta.

• Titolo: Titolo del tema del giorno – Inbound Marketing
• Corpo: testo descrittivo

Sfondo

Aggiungi anche un'immagine di sfondo.

• Immagine di sfondo: immagine con effetto bicromia

Testo dell'intestazione

Nella scheda Design, dai uno stile al testo dell'intestazione.

• Livello di intestazione: H3
• Carattere: Alata
• Colore: Bianco #ffffff
• Dimensioni: 26px
• Spaziatura lettere: 1px

Corpo del testo

Stile successivo del corpo del testo.

• Carattere: Alata
• Colore: Bianco #ffffff
• Dimensioni: 15px

Spaziatura

Aggiungi anche un po' di spazio.

• Margine superiore: -120 px

Frontiera

Quindi, modella il bordo.

• Angoli arrotondati: 15px

CSS personalizzato

Infine, aggiungi CSS personalizzati per uno stile extra.

• Descrizione della promozione
  • raggio di confine: 15px;
  • colore di sfondo: #162447;
  • padding-left: 25px;
  • padding-right: 25px;
  • padding-bottom: 40px;

border-radius: 15px;
background-color: #162447; 
margin-top: 500px; 
padding-bottom: 40px; 
padding-bottom: 40px;

• Titolo promozionale
  • colore di sfondo: #q62447
  • margine superiore: 500 px
  • padding-bottom: 40px
  • padding-bottom: 40px

background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;

Aggiungi modulo di testo alla colonna 2

Testo

Passa alla colonna 2 e aggiungi un modulo di testo. Segui questa struttura di contenuti:

• Corpo
  • Data: Contenuto H4
  • Relatore: Contenuto H5
  • Argomento: Contenuto H6
  • Descrizione: Contenuto del paragrafo

Testo

Nella scheda Design, dai uno stile al testo.

• Carattere: Open Sans
• Dimensioni: 14px
• Spaziatura lettere: 1px
• Allineamento: Sinistra

Testo dell'intestazione

Quindi modella tutti i livelli di intestazione.

• Livello di intestazione: H4
  • Carattere: Alata
  • Peso: grassetto
  • Dimensioni: 40px
• Livello di intestazione: H5
  • Carattere: Alata
  • Dimensioni: 25px
  • Altezza della linea: 1,5 em
• Livello di intestazione: H6
  • Carattere: Alata
  • Stile: corsivo
  • Dimensioni: 19px
  • Altezza della linea: 1,5 em

Frontiera

Modella anche il bordo.

• Stile: bordo inferiore
• Larghezza: 3px
• Colore: Fucsia #b030b0

Clona modulo di testo 2 volte

Clona modulo testo

Duplica il primo modulo di testo due volte.

Regola nuovi moduli di testo

Testo

Modificare il contenuto nei moduli di testo clonati.

• Corpo
  • Data: nuovo contenuto H4
  • Relatore: Nuovo contenuto H5
  • Argomento: Nuovi contenuti H6
  • Descrizione: nuovo contenuto del paragrafo

Rimuovi bordo del 3° modulo di testo

Frontiera

Rimuovere il bordo dell'ultimo modulo nella colonna.

• Larghezza bordo inferiore
  • Desktop: 0px
  • Tablet e telefono: 3px

Elimina colonna 3 e clona colonna 2

Clona colonne

Nelle impostazioni della riga, elimina la colonna 3. Duplica la colonna 2.

Rimuovi e regola i moduli di testo

Elimina modulo testo

Cancella il terzo modulo di testo nella colonna clonata.

Regola il contenuto

Aggiorna il contenuto in ogni nuovo modulo di testo.

• Corpo
  • Data: nuovo contenuto H4
  • Relatore: Nuovo contenuto H5
  • Argomento: Nuovi contenuti H6
  • Descrizione: nuovo contenuto del paragrafo

Clona modulo pulsante e posiziona duplicato nella colonna 3

Pulsante Clona

Copia il pulsante "registrati" nella sezione dell'intestazione e incollalo sotto l'ultimo modulo di testo nella colonna 3.

Modulo pulsante di regolazione

Allineamento

Modificare l'allineamento del pulsante a sinistra.

• Allineamento dei pulsanti: a sinistra

Stile pulsante personalizzato

Regola leggermente la dimensione del testo.

• Dimensione del testo
  • Desktop e tablet: 25 px
  • Telefono: 20px

Clona la prima riga della sezione dell'abaco

Clona riga

Duplica la prima riga nella sezione della pianificazione.

Modulo di regolazione del testo nella colonna 1

Testo

Modificare il contenuto nel modulo di testo clonato.

• Corpo: Giorno 2

Regola il modulo di invito all'azione

Testo

Regola il contenuto del modulo di invito all'azione.

• Titolo: Titolo del tema del nuovo giorno
• Descrizione: Nuovo contenuto descrittivo

Sfondo

Cambia anche l'immagine di sfondo.

• Immagine di sfondo: nuova immagine con effetto bicromia

Modifica moduli di testo

Testo

Regola anche il contenuto nei moduli di testo.

• Corpo
  • Data: nuovo contenuto H4
  • Relatore: Nuovo contenuto H5
  • Argomento: Nuovi contenuti H6
  • Descrizione: nuovo contenuto del paragrafo

5. Crea una sezione di registrazione

Aggiungi nuova sezione

Sfondo

L'ultima sezione è dedicata alla registrazione. Aggiungi una nuova sezione e modella lo sfondo come segue. Troverai l'immagine del piè di pagina nella cartella di download sopra.

• Colore di sfondo: viola #602080
• Immagine di sfondo: grafica a piè di pagina
• Posizione dell'immagine: in alto al centro

Spaziatura

Regola anche la spaziatura della sezione.

• Imbottitura superiore: 70px
• Imbottitura inferiore: 120 px

Visibilità

E modifica le impostazioni di visibilità nella scheda Avanzate.

• Overflow orizzontale e verticale: nascosto

Aggiungi nuova riga

Struttura della colonna

Ora aggiungi una nuova riga con una colonna.

Aggiungi modulo divisore

Visibilità

Aggiungi un divisore invisibile che funga da collegamento di ancoraggio per la sezione.

• Mostra divisore: No

ID CSS

Inserisci l'ID CSS che collega a tutti i pulsanti "registrati".

• ID CSS: Registrati

Aggiungi nuova riga

Struttura della colonna

Aggiungi una seconda riga con due colonne uguali.

Dimensionamento

Regola le impostazioni di dimensionamento della riga.

• Larghezza grondaia personalizzata: 4
• Larghezza: 80%
• Larghezza massima:: 1800px

Aggiungi il modulo del timer per il conto alla rovescia alla colonna 1

Testo

Aggiungi un modulo per il conto alla rovescia alla prima colonna. Aggiungi il contenuto e la data dell'evento.

• Titolo: Titolo descrittivo
• Data: data di inizio

Sfondo

Disegna lo sfondo successivo.

• Gradiente di sfondo
  • Colore 1: #1f4068
  • Colore 2: #162447

Testo del titolo

Nella scheda Design, dai uno stile al testo del titolo.

• Livello di intestazione: H4
• Carattere: Alata
• Allineamento: Centro
• Colore: Bianco #ffffff
• Taglia
  • Desktop e tablet: 30px
  • Telefono: 25x

Numeri Testo

Stile anche il testo dei numeri.

• Carattere: Alata
• Colore: Bianco #ffffff
• Taglia
  • Desktop: 55px
  • Tablet: 35px
  • Telefono: 25px

Testo etichetta

Inoltre, il testo dell'etichetta.

• Carattere: Alata
• Dimensioni: 9px

Dimensionamento

Quindi, regola le dimensioni della riga.

• Larghezza
  • Taglia: 100%

Spaziatura

Aggiungi anche un po' di imbottitura.

• Imbottitura superiore e inferiore: 60 px

Frontiera

Infine, modella il bordo.

• Angoli arrotondati: 15px

Aggiungi il modulo del modulo di contatto alla colonna 2

Elementi

Aggiungi un nuovo modulo di modulo di contatto alla colonna 2. Rimuovi il campo del messaggio.

• Campo del messaggio: Rimuovi

Layout dei campi

Inserisci le impostazioni per ogni campo. Nella scheda design, sotto layout, fai clic su "crea larghezza intera". Fai lo stesso per il secondo campo.

• Layout: Crea larghezza intera

Testo

Torna alle impostazioni generali del modulo di contatto e aggiungi alcuni contenuti.

• Titolo: titolo descrittivo
• Messaggio di successo: il tuo messaggio
• Pulsante Invia: Registrati

Campi

Quindi, modella i campi come segue:

• Colore di sfondo: trasparente
• Colore del testo: bianco #ffffff
• Colore di sfondo della messa a fuoco: trasparente
• Colore del testo in primo piano: bianco #ffffff
• Carattere: Alata
• Taglia
  • Desktop: 22px
  • Tablet e telefono: 18px
• Spaziatura lettere: 1px

Testo del titolo

Stile anche il testo del titolo.

• Livello di intestazione: H4
• Carattere: Alata
• Colore: Bianco #ffffff
• Taglia
  • Desktop e telefono: 30px
  • Telefono: 24px
• Spaziatura lettere: 1px

Stili personalizzati dei pulsanti

Regola anche gli stili personalizzati dei pulsanti.

• Dimensione del testo: 20px
• Colore del testo: bianco #ffffff
• Colore di sfondo: blu #1f4068
• Raggio del bordo: 15px
• Spaziatura lettere: 1px
• Carattere: Alata
• Margine superiore: 10px
• Imbottitura superiore
  • Tablet e telefono: 60px

Frontiera

Non dimenticare di regolare il raggio del bordo.

• Angoli arrotondati: 15px
• Larghezza bordo: 2px
• Colore: Bianco #ffff

CSS personalizzato

Infine, aggiungi CSS personalizzati per un riempimento extra.

• Titolo contatto: padding-bottom: 30px;

padding-bottom: 30px;

Anteprima

Sono state fatte! Diamo un'occhiata di nuovo al design della pagina di destinazione su schermi di diverse dimensioni.

Desktop

Tavoletta

Mobile

Questo è un involucro

L'hai fatta! Che aspetto ha la tua landing page del summit virtuale? Usa questo design per il tuo summit virtuale o per un client di web design. La navigazione è ottimizzata per la conversione con la giusta quantità di informazioni. Abbiamo aggiunto anche divisori di sezione a scorrimento per un piccolo extra visivo.

Fateci sapere cosa ne pensate nei commenti. Hai scaricato il layout o hai seguito i passaggi?