Crea un sito web one-page a scorrimento.

Learn DXPR BuilderBuild pagesVolg een tutorial

Qui crei un intero sito web su un’unica pagina: una hero a tutta altezza i cui pulsanti saltano alle sezioni Chi siamo, Servizi e Contatti sotto. Ogni sezione porta un HTML ID, la destinazione del suo pulsante. Usalo per una piccola impresa, una campagna o un portfolio. Per una pagina intorno a un’unica offerta, segui invece Crea una landing page marketing.

Il video crea il sito di uno studio di design chiamato Studio Nord.

Prima di iniziare

  • Il tuo ruolo ha il permesso Edit with DXPR Builder.
  • La libreria multimediale contiene un’ampia foto per la hero e una foto del team.
  • 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, quindi i pulsanti della hero vanno inseriti dall’ultimo al primo.

Passaggio 1: crea la hero

  1. Fai clic su Add Elements sulla pagina vuota e scegli Section dalla scheda Layout.
  2. Passa sopra alla sezione e apri More > Settings. Imposta HTML ID su hero e, in HTML classes, scegli Align text center.
  3. Attiva 100% height così la sezione 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 una foto e fai clic su Insert selected. Imposta Background style su Cover, scegli il Background blu scuro e il Font color bianco, poi fai clic su Save.
  5. Fai clic su + sulla sezione e scegli Button. Imposta Title su "Contact", Link su #contact e Type su Light, poi fai clic su Save. Aggiungi altri due pulsanti allo stesso modo: "Services" con #services, poi "About" con #about. Ciascuno arriva sopra il precedente.
  6. Fai di nuovo clic su + e scegli Text; arriva sopra i pulsanti. Digita "Studio Nord" come Heading 2 e aggiungi lo 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 la sezione Chi siamo

  1. Passa sopra alla hero e fai clic su Add Section Below. Apri il More > Settings della nuova sezione, imposta HTML ID su about e fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Row; arriva con due colonne uguali.
  3. Fai clic su + nella colonna di sinistra e scegli Image. Fai clic su Select Image, seleziona una foto e fai clic su Insert selected. Digita l’Alt attribute nel pannello SEO e fai clic su Save.
  4. Fai clic su + nella colonna di destra e scegli Text. Digita "About" come Heading 2, aggiungi la tua storia e fai clic su Save.

Passaggio 3: aggiungi la sezione Servizi

  1. Aggiungi una terza sezione con Add Section Below e apri il suo More > Settings. Imposta HTML ID su services, scegli Align text center in HTML classes e un Background grigio chiaro nel pannello Style. Fai clic su Save.
  2. Aggiungi una 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 "Branding" 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 pen-nib 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 "Websites" con laptop-code e "Analytics" con chart-pie.

Passaggio 4: aggiungi la sezione Contatti

  1. Aggiungi una quarta sezione e apri il suo More > Settings. Imposta HTML ID su contact, scegli Align text center in HTML classes e fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Social links. Digita linkedin come brand della prima riga e incolla l’URL del profilo, poi instagram e il suo URL nella seconda. Imposta Style su Circle e Size su 2x, poi fai clic su Save.
  3. Fai di nuovo clic su + e scegli Button; arriva sopra i link. Imposta Title su "Email us", Link su mailto:hello@studionord.example e tieni Type su Primary, poi fai clic su Save.
  4. Fai di nuovo clic su + e scegli Text; arriva sopra il pulsante. Digita "Get in touch" come Heading 2 e il tuo indirizzo email e numero di telefono sotto, poi 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), scegli Preview e fai clic su un pulsante della hero, come Contact.

Per approfondire

Non mostrato nel video:

  • Menu fisso: crea un menu in Structure > Menus > Add menu con un link per sezione, come /studio-nord#about, o <front>#about sulla prima pagina. Mettilo nella regione header in Structure > Block layout. In DXPR Theme, attiva Sticky Header in Appearance > Settings > DXPR Theme.
  • Prima pagina: rendi la pagina la tua prima pagina in Configuration > System > Basic site settings.
  • Modulo di contatto: inserisci un modulo dalla scheda Drupal Blocks al posto del testo di apertura; vedi Aggiungi moduli alle pagine.

Cosa vedi

La foto riempie lo schermo con "Studio Nord", lo slogan e tre pulsanti chiari. Un clic su un pulsante scorre la pagina dolcemente fino alla sua sezione. Chi siamo mostra la foto del team accanto alla storia, Servizi tre icone cerchiate sul grigio, e Contatti l’intestazione "Get in touch" e il pulsante Email us sopra due icone social rotonde.

Se non vedi la pagina come mostrata

  • Un pulsante non salta alla sua sezione. Il suo Link non corrisponde all’HTML ID della sezione. Il link è # più esattamente lo stesso ID, come #about per l’ID about.
  • Una sezione finisce sotto il tuo header fisso. Il builder non conosce l’altezza dell’header. In Advanced Settings in DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings), imposta Scroll offset selector sul selettore CSS del tuo header.
  • Un link social mostra "No matching brand icon found". Il brand non è un nome di icona noto. Digitalo in minuscolo, come linkedin o instagram.
  • 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?