Crea una pagina evento.

Impara DXPR BuilderCrea le pagineSegui un tutorial

Qui crei una pagina per un evento. Ha una hero con foto con data e pulsante Register now, i dettagli accanto a una mappa, card dei relatori e una banda di iscrizione. Usala per open day, talk e webinar. Per un intero sito su un’unica pagina a scorrimento, segui invece Crea un sito web one-page a scorrimento.

Il video crea la pagina per un open day universitario.

Prima di iniziare

  • Il tuo ruolo ha il permesso Edit with DXPR Builder.
  • La libreria multimediale contiene un’ampia foto per la hero.
  • La pagina è aperta nel builder. Per una nuova, vai in Content > Add content > Landing Page (/node/add/landing_page) e fai clic su Save.
  • I nuovi elementi arrivano in cima alla loro sezione o colonna. Aggiungi gli elementi di una sezione in ordine inverso, oppure trascinali al loro posto dopo.

Passaggio 1: aggiungi la hero

  1. Fai clic su Add Elements sulla pagina vuota e scegli Section dalla scheda Layout. Passaci sopra e apri More > Settings.
  2. In HTML classes scegli Align text center.
  3. Apri il pannello Style. In Background image fai clic su Select Image, seleziona una foto e fai clic su Insert selected. Imposta Background style su Cover.
  4. Scegli un Background blu scuro e un Font color bianco, poi fai clic su Save.
  5. Fai clic su + sulla sezione e scegli Button. Imposta Title su "Register now", Link sulla pagina di registrazione, Type su Light e Size su Large, poi fai clic su Save.
  6. Fai di nuovo clic su + e scegli Text; arriva sopra il pulsante. Digita il nome dell’evento come Heading 2, poi la data e uno slogan. Imposta Font color su bianco nel pannello Style e fai clic su Save. Il tema stampa il titolo della pagina come Heading 1 della pagina. Per rendere invece questa intestazione l’Heading 1, vedi Crea pagine SEO-friendly.

Passaggio 2: aggiungi i dettagli e la mappa

  1. Passa sopra alla hero e fai clic su Add Section Below. Fai clic su + sulla nuova sezione e scegli Row; le sue due colonne uguali sono la divisione che serve.
  2. Fai clic su + nella colonna di sinistra e scegli Text. Digita "Event details" come Heading 2, aggiungi una riga ciascuna per data, sede e contatti, e fai clic su Save.
  3. Fai clic su + nella colonna di destra e scegli Map. Digita l’Address della sede, imposta Map height su 320 e fai clic su Save.

Passaggio 3: aggiungi i relatori

  1. Aggiungi una terza sezione con Add Section Below. Apri il suo More > Settings, scegli un Background grigio chiaro nel pannello Style e fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Row. Fai clic sulla sua icona griglia (Column layout), scegli il preset 1/3 + 1/3 + 1/3 e fai clic su Save.
  3. Fai clic su + in ogni colonna e scegli Card. Apri il suo More > Settings, imposta l’Header sulla sessione e il Title su nome e ruolo del relatore, poi fai clic su Save.

Passaggio 4: aggiungi l’invito alla registrazione

  1. Aggiungi una quarta sezione e apri il suo More > Settings. Scegli Align text center in HTML classes, poi il Background viola e il Font color bianco nel pannello Style. Fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Button. Imposta Title su "Sign up", Link sulla pagina di registrazione, Type su Light e Size su Large, poi fai clic su Save.
  3. Fai di nuovo clic su + e scegli Text; arriva sopra il pulsante. Digita "Register today" come Heading 2 e aggiungi una riga. Imposta Font color su bianco e fai clic su Save.

Passaggio 5: salva e vedi l’anteprima

  1. Fai clic su Save nella barra degli strumenti del builder.
  2. Apri il menu vista (l’icona occhio) e scegli Preview.

Per approfondire

Non mostrato nel video:

  • Foto dei relatori: fai clic su + su una card e aggiungi una biografia Text, poi fai di nuovo clic su + sulla card e aggiungi un’Image; arriva sopra il testo
  • Foto più scura: nel pannello Background effects della hero imposta Background effect su Gradient. Scegli lo stesso colore scuro a circa il 60% di opacità come Start color e End color
  • Programma: aggiungi un elemento Text e inserisci una tabella con il pulsante Table per ora, sessione e relatore
  • Registrazione nella pagina: vedi Aggiungi moduli alle pagine

Cosa vedi

Nome dell’evento, data e pulsante Register now stanno centrati e bianchi sulla foto. Sotto, i dettagli riempiono la metà sinistra e una mappa della sede la destra. Tre card dei relatori stanno su una banda grigia, e una banda viola chiude la pagina con Sign up.

Se non vedi la pagina come mostrata

  • La foto hero non riempie la sezione. Background style è ancora su Theme defaults. Apri il pannello Style della sezione e impostalo su Cover.
  • La mappa mostra il posto sbagliato. Google Maps cerca l’indirizzo come digitato. Aggiungi CAP, città e paese a Address e salva di nuovo.
  • Una card non mostra la finestra impostazioni dopo averla aggiunta. Le card si aprono vuote, senza finestra. Passa sopra alla card e apri More > Settings per compilare Header e Title.
  • Le tue modifiche non ci sono più dopo un ricaricamento. Hai lasciato la pagina prima di fare clic su Save nella barra degli strumenti del builder. Se Save mostra un errore, vedi Le modifiche non si salvano.

E adesso?