Crea una pagina Chi siamo.

Impara DXPR BuilderCrea le pagineSegui un tutorial

Qui crei una pagina Chi siamo: un header di missione, la tua storia accanto a una foto, tre numeri che contano in avanti, card del team e un invito all’azione finale. Usala quando un’unica pagina deve dire ai visitatori chi sei. Per una pagina che elenca ogni collega, segui invece Crea un elenco del team.

Il video crea la pagina per uno studio di design a Rotterdam.

Prima di iniziare

  • Il tuo ruolo ha il permesso Edit with DXPR Builder.
  • La libreria multimediale contiene una foto del tuo ufficio, team o prodotto.
  • La pagina esiste: vai in Content > Add content > Landing Page (/node/add/landing_page), digita "About Us" come Title e fai clic su Save. La pagina si apre con sopra il builder.
  • 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 le righe di una sezione, o gli elementi di una colonna, in ordine inverso, oppure trascinali al loro posto dopo.

Passaggio 1: aggiungi un header di missione

  1. Fai clic su Add Elements sulla pagina vuota e scegli Section dalla scheda Layout.
  2. Passa sopra alla sezione e apri More > Settings. Apri il pannello Style, scegli un campione Background scuro e fai clic su Save.
  3. Fai clic su + sulla sezione e scegli Jumbotron dalla scheda Content.
  4. Digita la tua missione come Title: "We build websites people enjoy using".
  5. Digita una frase di supporto nel campo Lead: "A 24-person studio in Rotterdam working with brands across Europe since 2012."
  6. Imposta Type su Primary per testo bianco sul tuo colore primario, poi fai clic su Save.

Passaggio 2: racconta la storia dell’azienda

  1. Passa sopra alla sezione e fai clic su Add Section Below, il + sotto di essa.
  2. Fai clic su + sulla nuova sezione e scegli Row; arriva con due colonne uguali. Fai clic sull’icona griglia (Column layout) sulla riga, scegli il preset 2/3 + 1/3 e fai clic su Save.
  3. Fai clic su + nella colonna più larga e scegli Text. Digita "Our story" come Heading 2, poi due brevi paragrafi: come hai iniziato e come si svolge un progetto. Fai clic su Save.
  4. Fai clic su + nella colonna più stretta e scegli Image.
  5. Fai clic su Select Image, cerca nella libreria multimediale con Apply filters, seleziona una foto del tuo ufficio o team e fai clic su Insert selected.
  6. Apri il pannello SEO, compila l’Alt attribute e fai clic su Save.

Suggerimento

Tieni breve la storia e dividila con un sottotitolo. I visitatori scansionano prima di leggere.

Passaggio 3: aggiungi numeri chiave con contatori

  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. 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 un elemento Text con l’etichetta del numero: "Projects delivered", "Years in business", "Clients who return".
  4. In ogni colonna, fai di nuovo clic su + e scegli Number counter; arriva sopra l’etichetta. Imposta:
    • End: il numero (140, 12, 98)
    • Suffix: "+" o "%" dove si applica
    • Thousands separator: Comma
    • Speed: 2500, i millisecondi che impiega il conteggio
  5. Fai clic su Save su ogni contatore.

Il contatore non ha un proprio campo etichetta, ecco perché un elemento Text sta sotto di esso.

Passaggio 4: crea una sezione team

  1. Aggiungi una quarta sezione con Add Section Below.
  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, fai clic su + e scegli Card. Apri il suo More > Settings, imposta Header sul nome della persona ("Sofia Andersen") e Title sul suo ruolo ("Creative Director"), poi fai clic su Save.
  4. Fai clic su + sulla sezione stessa e scegli Text; arriva sopra la riga di card. Digita "Meet the team" come Heading 2, centralo e fai clic su Save.

Passaggio 5: aggiungi una sezione finale

  1. Aggiungi un’ultima sezione con Add Section Below e apri il suo More > Settings. In HTML classes scegli Align text center, così testo e pulsante si centrano insieme. Nel pannello Style scegli il colore del tuo brand come Background e il bianco come Font color, poi fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Button. Imposta Title su "Get in touch", Link su /contact, Type su Light e Size su Large, poi fai clic su Save.
  3. Fai di nuovo clic su + sulla sezione e scegli Text; arriva sopra il pulsante. Digita "Want to work with us?" come Heading 2, poi "We take on a handful of new clients each quarter." Nel pannello Style imposta Font color su bianco, poi 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.
  3. Scorri la pagina per controllare ogni sezione.

Per approfondire

Non mostrato nel video, ma da aggiungere:

  • Un Text bio e un’Image ritratto dentro ogni card, e Social links sotto
  • 100% height nelle impostazioni della prima sezione per un header che riempie lo schermo

Cosa vedi

L’anteprima mostra cinque bande. L’header scuro porta la tua missione e la sua lead in bianco. La tua storia sta accanto alla foto. Sulla banda grigia i tre numeri contano da zero quando entrano in vista scorrendo.

L’intestazione del team sta centrata sopra tre card, ciascuna con nome e ruolo. La banda finale centra un titolo bianco sopra un pulsante Get in touch chiaro. Scegli Edit nel menu occhio per continuare a lavorare.

Se non vedi la pagina come mostrata

  • Non c’è il pulsante Add Elements sulla pagina vuota. L’assistente di creazione pagina è spento, quindi la pagina offre solo Choose a template. Fai clic sull’area vuota per aprire invece il selettore di elementi.
  • Un nuovo elemento sta sopra quello aggiunto prima. Il builder inserisce i nuovi elementi in cima alla loro sezione o colonna. Trascinalo al suo posto dalla maniglia di trascinamento sulla sua barra dei controlli.
  • Number counter o Card manca nel selettore. Il tuo profilo utente builder lo nasconde. Chiedi a un amministratore di selezionarlo in Elements in DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile).
  • 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?