Crea un elenco del team.

Impara DXPR BuilderCrea le pagineSegui un tutorial

Qui crei una pagina team: un header centrato, tre card leadership con un link LinkedIn sotto la terza, e una griglia di quattro card team. Usala quando ogni collega deve essere facile da trovare. Per una breve sezione team sulla pagina aziendale, segui invece Crea una pagina Chi siamo.

Il video crea la pagina team di un’azienda di logistica.

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. Ecco perché i link social vanno inseriti prima della card sopra di essi.

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, poi fai clic su Save.
  3. Fai clic su + sulla sezione e scegli Text dalla scheda Content.
  4. Digita "Our team" come Heading 2, aggiungi una riga di introduzione 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 card leadership

  1. Passa sopra alla sezione e fai clic su Add Section Below. Apri il More > Settings della nuova sezione, 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. Fai clic su + nella prima colonna e scegli Card. Apri il suo More > Settings, imposta l’Header sul ruolo e il Title sul nome, poi fai clic su Save.
  4. Aggiungi una Card alla seconda colonna allo stesso modo.
  5. Fai clic su + nella terza colonna e scegli Social links. Arriva con due righe di esempio. Digita linkedin sopra "Facebook" nella prima riga e digita l’URL del profilo accanto. Rimuovi la seconda riga con la sua ×, imposta Style su Circle e Size su 2x, poi fai clic su Save.
  6. Fai clic su + nella stessa colonna e scegli Card; arriva sopra i link. Imposta allo stesso modo il suo Header e Title e fai clic su Save.
  7. Fai clic su + sulla sezione e scegli Text; arriva sopra la riga. Digita "Leadership" come Heading 2 e fai clic su Save.

Passaggio 3: aggiungi la griglia team

  1. Aggiungi una terza sezione con Add Section Below, poi una Row. Fai clic sulla sua icona griglia (Column layout), scegli il preset 1/4 + 1/4 + 1/4 + 1/4 e fai clic su Save.
  2. Aggiungi una Card in ogni colonna. Apri il suo More > Settings, imposta il ruolo come Header e il nome come Title, e fai clic su Save.
  3. Fai clic su + sulla sezione e scegli Text; arriva sopra la riga. Digita "The team" come Heading 2 e fai clic su Save.

Passaggio 4: 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:

  • Foto e biografie: fai clic su + su una card e aggiungi una biografia Text. Poi fai di nuovo clic su + sulla card e aggiungi un’Image; arriva sopra il testo. Compila l’Alt attribute con il nome della persona.
  • Foto arrotondate: su ogni immagine, imposta Border radius nel pannello Style. Il valore è in pixel, fino a 100.
  • Sollevamento al passaggio del mouse: nel pannello Hover style della card imposta Drop shadow su 2.
  • Team che si aggiorna automaticamente: crea un tipo di contenuto "Team member" e una vista Grid con una visualizzazione blocco. Inserisci la vista dalla scheda Drupal Views, e gli editor aggiungono persone senza toccare la pagina.

Cosa vedi

"Our team" sta centrato in alto. Sulla banda grigia, tre card leadership mostrano ciascuna il ruolo nell’header e il nome sotto, con un’icona LinkedIn rotonda sotto la terza. "The team" segue con quattro card fianco a fianco.

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 link social mostra "No matching brand icon found". Il brand non è un nome di icona noto. Digitalo in minuscolo, come linkedin.
  • L’icona LinkedIn sta sopra la card. La card è entrata prima dei link e i nuovi elementi arrivano in cima alla loro colonna. Trascina la card sopra i link 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?