Créer un annuaire d’équipe.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Créez ici une page d’équipe : un en-tête centré, trois cartes de direction avec un lien LinkedIn sous la troisième, et une grille de quatre cartes d’équipe. Utilisez-la quand chaque collègue doit être facile à trouver. Pour une courte section d’équipe sur votre page d’entreprise, suivez plutôt Créer une page « à propos ».

La vidéo crée la page d’équipe d’une entreprise de logistique.

Avant de commencer

  • Votre rôle dispose de l’autorisation Edit with DXPR Builder.
  • La page est ouverte dans le builder. Pour une nouvelle page, accédez à Content > Add content > Landing Page (/node/add/landing_page) et cliquez sur Save.
  • Les nouveaux éléments arrivent en haut de leur section ou colonne. C’est pourquoi les liens sociaux se placent avant la carte au-dessus d’eux.

Étape 1 : ajouter l’en-tête

  1. Cliquez sur Add Elements sur la page vide et choisissez Section dans l’onglet Layout.
  2. Survolez la section et ouvrez Plus > Paramètres. Sous HTML classes, choisissez Align text center, puis cliquez sur Save.
  3. Cliquez sur + sur la section et choisissez Text dans l’onglet Content.
  4. Saisissez « Our team » comme Heading 2, ajoutez une ligne d’introduction et cliquez sur Save. Le thème affiche le titre de la page comme Heading 1 de la page. Pour faire de ce titre le Heading 1 à la place, voir Créer des pages optimisées pour le référencement.

Étape 2 : ajouter les cartes de direction

  1. Survolez la section et cliquez sur Add Section Below. Ouvrez les Plus > Paramètres de la nouvelle section, choisissez un Background gris clair dans le panneau Style et cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Row. Cliquez sur son icône de grille (Column layout), choisissez le préréglage 1/3 + 1/3 + 1/3 et cliquez sur Save.
  3. Cliquez sur + dans la première colonne et choisissez Card. Ouvrez ses Plus > Paramètres, réglez le Header sur la fonction et le Title sur le nom, puis cliquez sur Save.
  4. Ajoutez une Card à la deuxième colonne de la même façon.
  5. Cliquez sur + dans la troisième colonne et choisissez Social links. Elle arrive avec deux lignes d’exemple. Saisissez linkedin par-dessus « Facebook » dans la première ligne et saisissez l’URL du profil à côté. Supprimez la deuxième ligne avec son ×, réglez Style sur Circle et Size sur 2x, puis cliquez sur Save.
  6. Cliquez sur + dans la même colonne et choisissez Card ; elle arrive au-dessus des liens. Réglez ses Header et Title de la même façon et cliquez sur Save.
  7. Cliquez sur + sur la section et choisissez Text ; il arrive au-dessus de la ligne. Saisissez « Leadership » comme Heading 2 et cliquez sur Save.

Étape 3 : ajouter la grille d’équipe

  1. Ajoutez une troisième section avec Add Section Below, puis une Row. Cliquez sur son icône de grille (Column layout), choisissez le préréglage 1/4 + 1/4 + 1/4 + 1/4 et cliquez sur Save.
  2. Ajoutez une Card à chaque colonne. Ouvrez ses Plus > Paramètres, réglez la fonction comme Header et le nom comme Title, puis cliquez sur Save.
  3. Cliquez sur + sur la section et choisissez Text ; il arrive au-dessus de la ligne. Saisissez « The team » comme Heading 2 et cliquez sur Save.

Étape 4 : enregistrer et prévisualiser

  1. Cliquez sur Save dans la barre d’outils du builder.
  2. Ouvrez le menu d’affichage (l’eye icon) et choisissez Preview.

Aller plus loin

Non montré dans la vidéo :

  • Photos and biographies : cliquez sur + sur une carte et ajoutez une biographie Text. Cliquez à nouveau sur + sur la carte et ajoutez une Image ; elle arrive au-dessus du texte. Renseignez l’Alt attribute avec le nom de la personne.
  • Rounded photos : sur chaque image, réglez Border radius dans le panneau Style. La valeur est en pixels, jusqu’à 100.
  • Lift on hover : dans le panneau Hover style de la carte, réglez Drop shadow sur 2.
  • Team that updates itself : créez un type de contenu « Team member » et une vue Grid avec un affichage de bloc. Insérez la vue depuis l’onglet Drupal Views, et les rédacteurs ajoutent des personnes sans toucher la page.

Ce que vous voyez

« Our team » trône centré en haut. Sur le bandeau gris, trois cartes de direction affichent chacune la fonction dans l’en-tête et le nom en dessous, avec une icône LinkedIn ronde sous la troisième. « The team » suit avec quatre cartes côte à côte.

Si la page ne s’affiche pas comme montré

  • Une carte n’affiche aucune boîte de dialogue après son ajout. Les cartes s’ouvrent vides, sans boîte de dialogue. Survolez la carte et ouvrez Plus > Paramètres pour renseigner Header et Title.
  • Un lien social affiche « No matching brand icon found ». La marque n’est pas un nom d’icône connu. Saisissez-la en minuscules, par exemple linkedin.
  • L’icône LinkedIn se trouve au-dessus de la carte. La carte est arrivée avant les liens, et les nouveaux éléments arrivent en haut de leur colonne. Glissez la carte au-dessus des liens par la poignée de glissement de sa barre de contrôle.
  • Vos modifications ont disparu après un rechargement. Vous avez quitté la page avant de cliquer sur Save dans la barre d’outils du builder. Si Save affiche une erreur, voir Les modifications ne s’enregistrent pas.

Et ensuite ?