Crea una landing page marketing.

Learn DXPR BuilderBuild pagesVolg een tutorial

Qui crei una landing page per un’unica offerta: una hero con foto con pulsante Request a demo, tre funzionalità con icone, due testimonianze e un invito all’azione finale. Usala per una campagna o una pagina prodotto con un unico obiettivo. Per un intero sito su un’unica pagina a scorrimento, segui invece Crea un sito web one-page a scorrimento.

Il video crea una pagina per un prodotto di analisi chiamato Insight.

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 colonna 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 "Request a demo", Link su /demo, 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 titolo come Heading 2 e il sottotitolo sotto. 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 le funzionalità

  1. Passa sopra alla hero e fai clic su Add Section Below. Dai alla nuova sezione la classe Align text center.
  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 + nella prima colonna e scegli Text. Digita il nome della funzionalità come Heading 3, aggiungi una riga e fai clic su Save.
  4. Fai clic su + nella stessa colonna e scegli Icon; arriva sopra il testo. Scegli il set Font Awesome Free Solid, cerca bolt e fai clic sull’icona. Imposta Size su Very Large (3x), apri Icon utilities, imposta Style su Circle e fai clic su Save.
  5. Ripeti per la seconda colonna con chart-line e la terza con shield.

Passaggio 3: aggiungi le testimonianze

  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; arriva con due colonne uguali.
  3. Fai clic su + in ogni colonna e scegli Block quote. Digita la citazione, compila Cite con nome e ruolo della persona, e fai clic su Save.

Passaggio 4: aggiungi l’invito all’azione

  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 "Book a walkthrough", Link su /demo, 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 "See Insight on your own data" 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:

  • Modulo lead: inserisci un blocco webform dalla scheda Drupal Blocks al posto dell’ultimo pulsante; vedi Aggiungi moduli alle pagine
  • 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
  • Hero più alta: dai alla sezione hero 100 pixel di padding superiore e inferiore nel pannello Style della sezione
  • Inizia da un modello: su una pagina vuota, fai clic su Choose a template e scegli un layout landing page; vedi Modelli di pagina

Cosa vedi

Titolo, sottotitolo e pulsante Request a demo stanno centrati in bianco sulla foto. Seguono tre funzionalità, ciascuna un’icona cerchiata sopra un breve titolo e riga. Due citazioni stanno fianco a fianco su una banda grigia, e una banda viola chiude la pagina con Book a walkthrough.

Se non vedi la pagina come mostrata

  • Le icone non hanno il cerchio. Style sta nel pannello Icon utilities, non in General. Apri le impostazioni dell’icona, apri Icon utilities e imposta Style su Circle.
  • La foto hero non riempie la sezione. Background style è ancora su Theme defaults. Apri il pannello Style della sezione e impostalo su Cover.
  • Un’icona sta sotto il suo testo di funzionalità. L’icona è entrata prima del testo e i nuovi elementi arrivano in cima alla loro colonna. Trascina l’icona sopra il testo dalla maniglia di trascinamento sulla sua barra dei controlli.
  • 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?