Créer une page de services.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Créez ici une page qui répertorie ce que vous proposez. Elle comprend un en-tête, trois services avec icônes, un service détaillé à côté d’une photo, des logos clients et un appel à l’action. Utilisez-la quand vous vendez plusieurs services. Pour une page sur une seule offre, suivez plutôt Créer une page de destination marketing.

La vidéo crée la page de services d’une agence numérique.

Avant de commencer

  • Votre rôle dispose de l’autorisation Edit with DXPR Builder.
  • La médiathèque contient une photo pour le service détaillé et quatre logos clients.
  • 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.
  • 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 éléments d’une colonne dans l’ordre inverse, ou glissez-les ensuite à leur place.

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

  1. Cliquez sur Add Elements sur la page vide et choisissez Section dans l’onglet Layout. Survolez-la, ouvrez Plus > Paramètres, choisissez le Background bleu marine dans le panneau Style et cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Jumbotron dans l’onglet Content.
  3. Réglez le Title sur « Our services », le Lead sur une ligne à propos de votre offre et le Type sur Primary, puis cliquez sur Save.

Étape 2 : ajouter l’aperçu des services

  1. Survolez la section et cliquez sur Add Section Below. Donnez à la nouvelle section la classe Align text center.
  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 Text. Saisissez « Design » comme Heading 3, ajoutez une ligne et cliquez sur Save.
  4. Cliquez sur + dans la même colonne et choisissez Icon ; l’icône arrive au-dessus du texte. Choisissez le jeu Font Awesome Free Solid, recherchez palette et cliquez sur l’icône. Réglez Size sur Very Large (3x), ouvrez Icon utilities, réglez Style sur Circle et cliquez sur Save.
  5. Répétez pour « Development » avec code et « Marketing » avec bullhorn.

Étape 3 : détailler un service

  1. Ajoutez une troisième section avec Add Section Below, puis une Row ; elle arrive avec deux colonnes égales.
  2. Cliquez sur + dans la colonne de gauche et choisissez Image. Cliquez sur Select Image, cochez une photo et cliquez sur Insert selected. Saisissez l’Alt attribute dans le panneau SEO et cliquez sur Save.
  3. Cliquez sur + dans la colonne de droite et choisissez Button. Définissez Title sur « Get a quote », Link sur /contact et Type sur Primary, puis cliquez sur Save.
  4. Cliquez à nouveau sur + dans la colonne de droite et choisissez Text ; il arrive au-dessus du bouton. Saisissez « Design » comme Heading 2, ajoutez la description et le contenu inclus, puis cliquez sur Save.

Étape 4 : ajouter les logos clients

  1. Ajoutez une quatrième section et ouvrez ses Plus > Paramètres. Choisissez Align text center sous HTML classes et un Background gris clair dans le panneau Style. Cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Marquee. Supprimez les trois images d’exemple avec le × sur chacune. Cliquez sur Select Image, recherchez vos logos, cochez-en quatre et cliquez sur Insert selected. Activez Gray scale et cliquez sur Save.
  3. Cliquez à nouveau sur + sur la section et choisissez Text ; il arrive au-dessus du chapiteau. Saisissez « Trusted by leading brands » comme Heading 2 et cliquez sur Save.

Étape 5 : ajouter l’appel à l’action

  1. Ajoutez une cinquième section et ouvrez ses Plus > Paramètres. Choisissez Align text center sous HTML classes, puis le Background violet et le Font color blanc dans le panneau Style. Cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Button. Définissez Title sur « Schedule a consultation », Link sur /contact, Type sur Light et Size sur Large, puis cliquez sur Save.
  3. Cliquez à nouveau sur + et choisissez Text ; il arrive au-dessus du bouton. Saisissez « Ready to get started? » comme Heading 2 et ajoutez une ligne. Réglez Font color sur blanc et 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.

Aller plus loin

Non montré dans la vidéo :

  • One detail section per service : répétez l’étape 3 pour Development et Marketing. Activez Mirror row dans les réglages d’une ligne sur deux, pour que les photos alternent de côté sur tablettes et ordinateurs.
  • Jump links : définissez le HTML ID de chaque section détaillée (design, development, marketing). Ajoutez un Button sous chaque texte d’aperçu avec le Link #design, et ainsi de suite.
  • Testimonials : ajoutez un Block quote par client au-dessus des logos.

Ce que vous voyez

Un bandeau bleu marine ouvre la page, avec « Our services » en grands caractères blancs sur un résumé d’une ligne. Trois services centrés suivent, chacun une icône cerclée sur son nom et sa ligne. Design a son propre bandeau avec une photo, une description et Get a quote. Des logos clients gris défilent sur un bandeau clair, et un bandeau violet conclut la page.

Si la page ne s’affiche pas comme montré

  • Le chapiteau affiche encore les logos d’exemple. Les trois images d’exemple restent jusqu’à leur suppression. Ouvrez les réglages du chapiteau, cliquez sur le × de chaque image d’exemple et enregistrez.
  • Les logos sont en couleur. Gray scale est désactivé. Ouvrez les réglages du chapiteau, activez-le et cliquez sur Save.
  • Les icônes n’ont pas de cercle. Style se trouve dans le panneau Icon utilities, pas dans General. Ouvrez les réglages de l’icône, ouvrez Icon utilities et réglez Style sur Circle.
  • 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 ?