Crea una knowledge base.

Learn DXPR BuilderBuild pagesVolg een tutorial

Qui crei la prima pagina di un centro assistenza: un header blu scuro, tre card di categoria ciascuna con un’icona, due elenchi di articoli popolari e un invito all’azione di supporto. Usala quando il tuo aiuto è sparso su molti articoli. Per un breve elenco di domande e risposte, segui invece Crea una pagina FAQ.

Il video crea il centro assistenza di un prodotto software.

Prima di iniziare

  • Il tuo ruolo ha il permesso Edit with DXPR Builder.
  • 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 l’header

  1. Fai clic su Add Elements sulla pagina vuota e scegli Section dalla scheda Layout.
  2. Passa sopra alla sezione e apri More > Settings. In HTML classes scegli Align text center. Nel pannello Style scegli il Background blu scuro e il Font color bianco, poi fai clic su Save.
  3. Fai clic su + sulla sezione e scegli Text. Digita "Help centre" come Heading 2 e aggiungi "How can we help you today?". 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 le categorie

  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 Card. Apri il suo More > Settings, imposta l’Header sul nome della categoria e il Title sul conteggio degli articoli, poi fai clic su Save.
  4. Fai clic su + nella stessa colonna e scegli Icon; arriva sopra la card. Scegli il set Font Awesome Free Solid, cerca rocket e fai clic sull’icona. Imposta Size su Extra Large (2x) e fai clic su Save.
  5. Ripeti per la seconda colonna con credit-card e la terza con screwdriver-wrench.
  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; arriva con due colonne uguali.
  3. Fai clic su + in ogni colonna e scegli Text. Digita tre titoli di articoli, uno per riga, e fai clic su Save.
  4. Fai clic su + sulla sezione e scegli Text; arriva sopra la riga. Digita "Popular articles" come Heading 2 e fai clic su Save.

Passaggio 4: aggiungi l’invito al supporto

  1. Aggiungi una quarta 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 support", Link su /support, 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 "Can't find what you need?" come Heading 2 e aggiungi una riga. Imposta Font color su bianco e 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) e scegli Preview.

Per approfondire

Non mostrato nel video:

  • Casella di ricerca: attiva il modulo core Search in Extend. Fai clic su + nella sezione header, apri la scheda Drupal Blocks e scegli Block: Forms: Search form. I visitatori arrivano su /search/node.
  • Card cliccabili: aggiungi prima un elemento Link alla colonna e imposta il suo Link sulla pagina di categoria. Poi aggiungi la Card dentro di esso.
  • Link agli articoli: seleziona ogni titolo negli elenchi e collegalo con il pulsante link nella barra degli strumenti.
  • Altre categorie: aggiungi una seconda Row con lo stesso preset. Quelle comuni sono usare l’editor, modelli e design, e API e sviluppo.

Cosa vedi

L’header blu scuro accoglie i visitatori con "Help centre" in bianco. Seguono tre categorie centrate, ciascuna un’icona sopra una card con nome e conteggio articoli. Una banda grigia elenca sei articoli popolari in due colonne, e una banda viola offre Contact support.

Se non vedi la pagina come mostrata

  • Una card non mostra la finestra impostazioni dopo averla aggiunta. Le card si aprono vuote, senza finestra. Passa sopra alla card e apri More > Settings per compilare Header e Title.
  • Un’icona sta sotto la sua card. L’icona è entrata prima della card e i nuovi elementi arrivano in cima alla loro colonna. Trascina l’icona sopra la card dalla maniglia di trascinamento sulla sua barra dei controlli.
  • L’intestazione resta scura sul blu scuro. L’elemento Text non ha un Font color proprio. Apri il suo pannello Style e imposta Font color su bianco.
  • 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?