Progetta una hero section.

Impara DXPR BuilderCrea le pagineSegui un tutorial

Qui crei una hero che riempie lo schermo: una foto di sfondo, un titolo, una riga di supporto e un pulsante, con la foto che si muove più lenta della pagina mentre i visitatori scorrono. Usala in cima a qualsiasi pagina. Per costruire tutta la pagina intorno, segui dopo Crea una landing page marketing.

Il video crea la hero di un prodotto di reportistica.

Prima di iniziare

  • Il tuo ruolo ha il permesso Edit with DXPR Builder.
  • La libreria multimediale contiene un’ampia foto, di almeno 1920 pixel di larghezza.
  • La pagina è aperta nel builder. Per una nuova, vai in Content > Add content > Landing Page (/node/add/landing_page) e fai clic su Save.

Passaggio 1: aggiungi la sezione

  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, così titolo, testo e pulsante si centrano insieme.
  3. Attiva 100% height così la hero riempie lo schermo, e Vertical centering così il contenuto sta al centro.
  4. Apri il pannello Style. In Background image fai clic su Select Image, seleziona un’ampia foto e fai clic su Insert selected.
  5. Imposta Background style su Cover così la foto riempie la sezione.
  6. Scegli un colore Background scuro, che si vede mentre la foto si carica. Imposta Font color su bianco, poi fai clic su Save.

Suggerimento

Comprimi la foto sotto 500 KB così la hero si carica in fretta.

Passaggio 2: aggiungi il pulsante

  1. Fai clic su + sulla sezione e scegli Button dalla scheda Content.
  2. Imposta Title su "Start free trial", Link su /trial, Type su Light per contrasto sulla foto e Size su Large, poi fai clic su Save.

Passaggio 3: aggiungi il titolo

  1. Fai di nuovo clic su + sulla sezione e scegli Text dalla scheda Content. Arriva sopra il pulsante, poiché i nuovi elementi arrivano in cima.
  2. Digita il tuo titolo, "Reporting that keeps up with your team", e scegli Heading 2 dal menu delle intestazioni. 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.
  3. Aggiungi una riga di supporto: "Dashboards, alerts and integrations in one workspace. Set up in minutes, no developers required."
  4. Nel pannello Style imposta Font color su bianco, poi fai clic su Save.

Passaggio 4: aggiungi la parallasse

  1. Passa sopra alla sezione e apri di nuovo More > Settings.
  2. Apri il pannello Background effects e imposta Background effect su Parallax image. Parallax speed parte da 20; trascinalo a 35 per un effetto più forte e fai clic su Save.

Passaggio 5: aggiungi contenuti sotto la hero

  1. Passa sopra alla hero e fai clic su Add Section Below, così la pagina ha contenuti verso cui scorrere.
  2. Fai clic su + sulla nuova sezione e scegli Text dalla scheda Content. Digita un’intestazione e un breve paragrafo, imposta la prima riga su Heading 2 e fai clic su Save.

Passaggio 6: salva e vedi l’anteprima

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

Per approfondire

Non mostrato nel video:

  • Overlay: imposta Background effect su Gradient e scegli uno Start color e un End color scuri a circa il 50% di opacità. Il testo resta leggibile su qualsiasi foto. L’effetto contiene un valore solo, quindi un overlay sostituisce la parallasse.
  • Hero più corta: disattiva 100% height e dai alla sezione il suo padding superiore e inferiore nel pannello Style, per esempio 100 pixel.
  • Pulsante largo: attiva Block button per un pulsante largo quanto la sua colonna.

Varianti

Alternative alla costruzione nel video:

Hero con sfondo video

  1. Nel pannello Background effects imposta Background effect su YouTube video.
  2. Incolla l’URL del video in YouTube video URL.
  3. In Video options seleziona Loop e Disable on mobile devices; lascia l’audio spento.

Hero solo sfumatura

Salta l’immagine di sfondo e usa l’effetto Gradient con due colori brand pieni per una hero che si carica in fretta.

Hero divisa

  1. Aggiungi una Row dentro la sezione; arriva con due colonne uguali.
  2. Metti testo e pulsante nella colonna di sinistra e un’immagine in quella di destra.

Cosa vedi

La foto riempie lo schermo con titolo, riga di supporto e pulsante Start free trial centrati in bianco sopra. Mentre scorri in basso verso la seconda sezione, la foto si muove più lenta della pagina.

Se non vedi la hero come mostrata

  • La hero è alta solo quanto il suo testo. 100% height è spento. Attivalo nelle impostazioni della sezione e fai clic su Save.
  • La foto resta ferma mentre scorri. Background effect è ancora su Simple image, Parallax speed è 0, oppure non c’è nulla sotto la hero verso cui scorrere. Imposta Parallax image, trascina Parallax speed sopra 0 e aggiungi la seconda sezione del passaggio 5.
  • Il titolo resta scuro sulla foto. L’elemento Text non ha un Font color proprio. Apri il suo pannello Style e imposta Font color su bianco.

E adesso?