Créer une page « à propos ».

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Créez ici une page « à propos » : un en-tête de mission, votre histoire à côté d’une photo, trois chiffres qui défilent, des cartes d’équipe et un appel à l’action final. Utilisez-la quand une seule page doit dire aux visiteurs qui vous êtes. Pour une page qui répertorie chaque collègue, suivez plutôt Créer un annuaire d’équipe.

La vidéo crée la page pour un studio de design à Rotterdam.

Avant de commencer

  • Votre rôle dispose de l’autorisation Edit with DXPR Builder.
  • La médiathèque contient une photo de votre bureau, de votre équipe ou de votre produit.
  • La page existe : accédez à Content > Add content > Landing Page (/node/add/landing_page), saisissez « About Us » comme Title et cliquez sur Save. La page s’ouvre avec le builder dessus.
  • Sur DXPR CMS, masquez le titre de page du thème sur cette page : dans son formulaire de modification, ouvrez DXPR Theme Settings et cochez Page Title sous DXPR Hide Regions. Le Title du Jumbotron devient alors le seul Heading 1 de la page, comme l’explique Créer des pages optimisées pour le référencement.
  • Les nouveaux éléments arrivent en haut de leur section ou colonne. Ajoutez les lignes d’une section, ou les éléments d’une colonne, dans l’ordre inverse, ou glissez-les ensuite à leur place.

Étape 1 : ajouter un en-tête de mission

  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. Ouvrez le panneau Style, choisissez une pastille Background foncée et cliquez sur Save.
  3. Cliquez sur + sur la section et choisissez Jumbotron dans l’onglet Content.
  4. Saisissez votre raison d’être comme Title : « We build websites people enjoy using ».
  5. Saisissez une phrase d’appui dans le champ Lead : « A 24-person studio in Rotterdam working with brands across Europe since 2012. »
  6. Réglez Type sur Primary pour un texte blanc sur votre couleur primaire, puis cliquez sur Save.

Étape 2 : raconter l’histoire de votre entreprise

  1. Survolez la section et cliquez sur Add Section Below, le + en dessous.
  2. Cliquez sur + sur la nouvelle section et choisissez Row ; elle arrive avec deux colonnes égales. Cliquez sur l’icône de grille (Column layout) de la ligne, choisissez le préréglage 2/3 + 1/3 et cliquez sur Save.
  3. Cliquez sur + dans la colonne la plus large et choisissez Text. Saisissez « Our story » comme Heading 2, puis deux courts paragraphes : vos débuts et le déroulement d’un projet. Cliquez sur Save.
  4. Cliquez sur + dans la colonne la plus étroite et choisissez Image.
  5. Cliquez sur Select Image, recherchez dans la médiathèque avec Apply filters, cochez une photo de votre bureau ou de votre équipe et cliquez sur Insert selected.
  6. Ouvrez le panneau SEO, renseignez l’Alt attribute et cliquez sur Save.

Tip

Restez bref et aérez le récit avec un sous-titre. Les visiteurs survolent avant de lire.

Étape 3 : ajouter des chiffres clés avec compteurs

  1. Ajoutez une troisième section avec Add Section Below. Ouvrez ses Plus > Paramètres, 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. Dans chaque colonne, ajoutez un élément Text avec le libellé du chiffre : « Projects delivered », « Years in business », « Clients who return ».
  4. Dans chaque colonne, cliquez à nouveau sur + et choisissez Number counter ; il arrive au-dessus du libellé. Réglez :
    • End : le chiffre (140, 12, 98)
    • Suffix : « + » ou « % » le cas échéant
    • Thousands separator : Comma
    • Speed : 2500, les millisecondes que dure le décompte
  5. Cliquez sur Save sur chaque compteur.

Le compteur n’a pas de champ de libellé propre, c’est pourquoi un élément Text se trouve en dessous.

Étape 4 : créer une section d’équipe

  1. Ajoutez une quatrième section avec Add Section Below.
  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. Dans chaque colonne, cliquez sur + et choisissez Card. Ouvrez ses Plus > Paramètres, réglez Header sur le nom de la personne (« Sofia Andersen ») et Title sur sa fonction (« Creative Director »), puis cliquez sur Save.
  4. Cliquez sur + sur la section elle-même et choisissez Text ; il arrive au-dessus de la ligne de cartes. Saisissez « Meet the team » comme Heading 2, centrez-le et cliquez sur Save.

Étape 5 : ajouter une section finale

  1. Ajoutez une dernière section avec Add Section Below et ouvrez ses Plus > Paramètres. Sous HTML classes, choisissez Align text center, pour que le texte et le bouton se centrent ensemble. Dans le panneau Style, choisissez votre couleur de marque comme Background et le blanc comme Font color, puis cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Button. Définissez Title sur « Get in touch », Link sur /contact, Type sur Light et Size sur Large, puis cliquez sur Save.
  3. Cliquez à nouveau sur + sur la section et choisissez Text ; il arrive au-dessus du bouton. Saisissez « Want to work with us? » comme Heading 2, puis « We take on a handful of new clients each quarter. » Dans le panneau Style, réglez Font color sur blanc, puis cliquez sur Save.

Étape 6 : 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.
  3. Faites défiler la page pour vérifier chaque section.

Aller plus loin

Non montré dans la vidéo, mais utile à ajouter :

  • Un Text de biographie et une Image de portrait dans chaque carte, et des Social links en dessous
  • 100% height dans les réglages de la première section pour un en-tête qui remplit l’écran

Ce que vous voyez

L’aperçu montre cinq bandeaux. L’en-tête foncé porte votre raison d’être et sa phrase d’appui en blanc. Votre histoire se tient à côté de la photo. Sur le bandeau gris, les trois chiffres défilent depuis zéro quand ils entrent à l’écran.

Le titre d’équipe est centré au-dessus de trois cartes, chacune avec un nom et une fonction. Le bandeau final centre un titre blanc sur un bouton clair Get in touch. Choisissez Edit dans le menu d’affichage pour continuer à travailler.

Si la page ne s’affiche pas comme montré

  • Aucun bouton Add Elements sur la page vide. L’assistant de création de page est désactivé, la page ne propose donc que Choose a template. Cliquez sur la zone vide pour ouvrir le sélecteur d’éléments à la place.
  • Un nouvel élément se trouve au-dessus de celui ajouté avant. Le builder insère les nouveaux éléments en haut de leur section ou colonne. Glissez-le à sa place par la poignée de glissement de sa barre de contrôle.
  • Number counter ou Card manque dans le sélecteur. Votre profil d’utilisateur du builder le masque. Demandez à un administrateur de le cocher sous Elements sous DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile).
  • 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 ?