Scrivi un caso di studio.

Impara DXPR BuilderCrea le pagineSegui un tutorial

Qui racconti un progetto cliente in tre parti: la sfida, la soluzione e i risultati. Finisci con sette bande: una hero con foto, una panoramica con il numero principale, la sfida, la soluzione accanto a una foto, tre contatori, una citazione e un invito all’azione. Per mostrare molti progetti in un’unica pagina, segui invece Crea una galleria portfolio.

Il video racconta il lavoro di un’agenzia per Northwind Retail.

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 di ciò che hai realizzato.
  • 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. Il colore si vede mentre la foto si carica.
  5. Fai clic su + sulla sezione e scegli Button. Imposta Title su "Visit the site", Link sull’URL del cliente, 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 del cliente come Heading 2 e un riepilogo di una riga 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 la panoramica

  1. Passa sopra alla hero e fai clic su Add Section Below. Aggiungi una Row alla nuova sezione, fai clic sulla sua icona griglia (Column layout), scegli il preset 2/3 + 1/3 e fai clic su Save.
  2. Fai clic su + nella colonna larga e scegli Text. Digita "Overview" come Heading 2, aggiungi il riepilogo e fai clic su Save.
  3. Fai clic su + nella colonna stretta e scegli Text. Digita l’etichetta della metrica, "More online orders", e fai clic su Save.
  4. Fai di nuovo clic su + nella colonna stretta e scegli Number counter; arriva sopra l’etichetta. Imposta End su 32, Suffix su %, Thousands separator su Comma, imposta Speed su 2500, poi fai clic su Save.

Il contatore non ha un proprio campo etichetta; l’elemento Text sotto fa quel lavoro.

Passaggio 3: aggiungi la sfida

  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 Text. Digita "The challenge" come Heading 2, descrivi il problema e fai clic su Save.

Passaggio 4: aggiungi la soluzione

  1. Aggiungi una quarta sezione, poi una Row; arriva con due colonne uguali.
  2. Fai clic su + nella colonna di sinistra e scegli Text. Digita "The solution" come Heading 2, descrivi cosa hai creato e fai clic su Save.
  3. Fai clic su + nella colonna di destra e scegli Image. Fai clic su Select Image, seleziona una foto del realizzato e fai clic su Insert selected. Digita l’Alt attribute nel pannello SEO e fai clic su Save.

Passaggio 5: aggiungi i risultati

  1. Aggiungi una quinta sezione e apri il suo More > Settings. Scegli Align text center in HTML classes, poi il Background blu scuro e il Font color bianco nel pannello Style. 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. In ogni colonna, aggiungi prima un’etichetta Text, poi un Number counter sopra, come nel passaggio 2: End 32 con Suffix %, End 2 con Suffix s, e End 15000.

Passaggio 6: aggiungi la citazione

  1. Aggiungi una sesta sezione.
  2. Fai clic su + sulla sezione e scegli Block quote. Digita le parole del cliente, compila Cite con nome e ruolo, e fai clic su Save.

Passaggio 7: aggiungi l’invito all’azione

  1. Aggiungi una settima 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 "Contact us", 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 8: 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.

Cosa vedi

Il nome del cliente e il pulsante Visit the site stanno centrati sulla foto. La panoramica mostra 32% accanto al suo riepilogo; i visitatori lo vedono contare quando entra in vista scorrendo. La sfida sta su una banda grigia e la soluzione sta accanto alla sua foto.

Sulla banda blu scuro i tre risultati contano quando entrano in vista scorrendo: 32%, 2s e 15.000. La citazione del cliente e una banda Contact us viola chiudono la pagina.

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.
  • L’ultimo contatore legge 15000 senza virgola. Thousands separator è ancora su None. Apri le impostazioni del contatore e scegli Comma.
  • Un’etichetta sta sopra il suo contatore. Il contatore è entrato prima della sua etichetta e i nuovi elementi arrivano in cima alla loro colonna. Trascina l’etichetta sotto il contatore 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?