Crea una pagina servizi.

Impara DXPR BuilderCrea le pagineSegui un tutorial

Qui crei una pagina che elenca ciò che offri. Ha un header, tre servizi con icone, un servizio in dettaglio accanto a una foto, loghi clienti e un invito all’azione. Usala quando vendi più servizi. Per una pagina su un’unica offerta, segui invece Crea una landing page marketing.

Il video crea la pagina servizi di un’agenzia digitale.

Prima di iniziare

  • Il tuo ruolo ha il permesso Edit with DXPR Builder.
  • La libreria multimediale contiene una foto per il servizio in dettaglio e quattro loghi clienti.
  • La pagina è aperta nel builder. Per una nuova, vai in Content > Add content > Landing Page (/node/add/landing_page) e fai clic su Save.
  • Su DXPR CMS, nascondi il titolo pagina del tema in questa pagina: nel suo form di modifica, apri DXPR Theme Settings e seleziona Page Title in DXPR Hide Regions. Il Title del Jumbotron è allora l’unico Heading 1 della pagina, come spiega Crea pagine SEO-friendly.
  • 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 l’header

  1. Fai clic su Add Elements sulla pagina vuota e scegli Section dalla scheda Layout. Passaci sopra, apri More > Settings, scegli il Background blu scuro nel pannello Style e fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Jumbotron dalla scheda Content.
  3. Imposta il Title su "Our services", la Lead su una riga su ciò che offri e il Type su Primary, poi fai clic su Save.

Passaggio 2: aggiungi la panoramica dei servizi

  1. Passa sopra alla sezione 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 "Design" 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 palette 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 "Development" con code e "Marketing" con bullhorn.

Passaggio 3: aggiungi un servizio in dettaglio

  1. Aggiungi una terza sezione con Add Section Below, poi una Row; arriva con due colonne uguali.
  2. 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.
  3. Fai clic su + nella colonna di destra e scegli Button. Imposta Title su "Get a quote", Link su /contact e Type su Primary, poi fai clic su Save.
  4. Fai di nuovo clic su + nella colonna di destra e scegli Text; arriva sopra il pulsante. Digita "Design" come Heading 2, aggiungi la descrizione e cosa è incluso, e fai clic su Save.

Passaggio 4: aggiungi i loghi clienti

  1. Aggiungi una quarta sezione e apri il suo More > Settings. Scegli Align text center in HTML classes e un Background grigio chiaro nel pannello Style. Fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Marquee. Rimuovi le tre immagini di esempio con la × su ciascuna. Fai clic su Select Image, cerca i tuoi loghi, selezionane quattro e fai clic su Insert selected. Attiva Gray scale e fai clic su Save.
  3. Fai di nuovo clic su + sulla sezione e scegli Text; arriva sopra il marquee. Digita "Trusted by leading brands" come Heading 2 e fai clic su Save.

Passaggio 5: aggiungi l’invito all’azione

  1. Aggiungi una quinta 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 "Schedule a consultation", Link su /contact, 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 "Ready to get started?" come Heading 2 e aggiungi una riga. Imposta Font color su bianco 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) e scegli Preview.

Per approfondire

Non mostrato nel video:

  • Una sezione dettaglio per servizio: ripeti il passaggio 3 per Development e Marketing. Attiva Mirror row nelle impostazioni di ogni seconda riga, così le foto alternano i lati su tablet e desktop.
  • Link di salto: imposta l’HTML ID di ogni sezione dettaglio (design, development, marketing). Aggiungi un Button sotto ogni testo di panoramica con Link #design e così via.
  • Testimonianze: aggiungi un Block quote per cliente sopra i loghi.

Cosa vedi

Una banda blu scuro apre la pagina, con "Our services" in grande bianco sopra un riepilogo di una riga. Seguono tre servizi centrati, ciascuno un’icona cerchiata sopra nome e riga. Design ha una sua banda con foto, descrizione e Get a quote. Loghi clienti grigi scorrono su una banda chiara, e una banda viola chiude la pagina.

Se non vedi la pagina come mostrata

  • Il marquee mostra ancora i loghi di esempio. Le tre immagini di esempio restano finché non le rimuovi. Apri le impostazioni del marquee, fai clic sulla × su ogni immagine di esempio e salva.
  • I loghi sono a colori. Gray scale è spento. Apri le impostazioni del marquee, attivalo e fai clic su Save.
  • 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.
  • 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?