Rédiger une étude de cas.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Ici, vous rédigez un projet client en trois parties : le défi, la solution et les résultats. Vous terminez avec sept bandes : un héros photo, un aperçu avec le chiffre principal, le défi, la solution à côté d’une photo, trois compteurs, une citation et un appel à l’action. Pour montrer beaucoup de projets sur une page, suivez plutôt Créer une galerie de portfolio.

La vidéo rédige le travail d’une agence pour Northwind Retail.

Avant de commencer

  • Votre rôle a la permission Edit with DXPR Builder.
  • La médiathèque contient une photo large pour le héros et une photo de ce que vous avez livré.
  • La page est ouverte dans le builder. Pour une nouvelle, accédez à Content > Add content > Landing Page (/node/add/landing_page) et cliquez sur Save.
  • Les nouveaux éléments atterrissent en haut de leur section ou colonne. Ajoutez les éléments d’une colonne dans l’ordre inverse, ou glissez-les en place ensuite.

Étape 1 : ajouter le héros

  1. Cliquez sur Ajouter des éléments sur la page vide et choisissez Section depuis l’onglet Mise en page. Survolez-la et ouvrez Plus > Paramètres.
  2. Sous HTML classes, choisissez Align text center.
  3. Ouvrez le panneau Style. Sous Background image, cliquez sur Select Image, cochez une photo et cliquez sur Insert selected. Réglez Background style sur Cover.
  4. Choisissez un Background bleu marine sombre et un Font color blanc, puis cliquez sur Save. La couleur s’affiche pendant le chargement de la photo.
  5. Cliquez sur + sur la section et choisissez Bouton. Réglez Title sur « Visit the site », Link vers l’URL du client, Type sur Light et Size sur Large, puis cliquez sur Save.
  6. Cliquez à nouveau sur + et choisissez Texte ; il atterrit au-dessus du bouton. Tapez le nom du client en Heading 2 et un résumé d’une ligne en dessous. Réglez Font color sur blanc dans le panneau Style et cliquez sur Save. Le thème imprime 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 l’aperçu

  1. Survolez le héros et cliquez sur Add Section Below. Ajoutez une Ligne à la nouvelle section, cliquez sur son icône de grille (Column layout), choisissez le préréglage 2/3 + 1/3 et cliquez sur Save.
  2. Cliquez sur + dans la colonne large et choisissez Texte. Tapez « Overview » en Heading 2, ajoutez le résumé et cliquez sur Save.
  3. Cliquez sur + dans la colonne étroite et choisissez Texte. Tapez le libellé de la mesure, « More online orders », et cliquez sur Save.
  4. Cliquez à nouveau sur + dans la colonne étroite et choisissez Compteur de nombres ; il atterrit au-dessus du libellé. Réglez End sur 32, Suffix sur %, Thousands separator sur Comma, réglez Speed sur 2500, puis cliquez sur Save.

Le compteur n’a pas de champ de libellé à lui ; l’élément Texte en dessous fait ce travail.

Étape 3 : ajouter le défi

  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 Texte. Tapez « The challenge » en Heading 2, décrivez le problème et cliquez sur Save.

Étape 4 : ajouter la solution

  1. Ajoutez une quatrième section, puis une Ligne ; elle arrive avec deux colonnes égales.
  2. Cliquez sur + dans la colonne gauche et choisissez Texte. Tapez « The solution » en Heading 2, décrivez ce que vous avez construit et cliquez sur Save.
  3. Cliquez sur + dans la colonne droite et choisissez Image. Cliquez sur Select Image, cochez une photo du livrable et cliquez sur Insert selected. Tapez l’Alt attribute dans le panneau SEO et cliquez sur Save.

Étape 5 : ajouter les résultats

  1. Ajoutez une cinquième section et ouvrez ses Plus > Paramètres. Choisissez Align text center sous HTML classes, puis le Background bleu marine et le Font color blanc dans le panneau Style. Cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Ligne. 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 d’abord un libellé Texte, puis un Compteur de nombres au-dessus, comme à l’étape 2 : End 32 avec Suffix %, End 2 avec Suffix s, et End 15000.

Étape 6 : ajouter la citation

  1. Ajoutez une sixième section.
  2. Cliquez sur + sur la section et choisissez Bloc de citation. Tapez les mots du client, remplissez Cite avec son nom et son rôle, et cliquez sur Save.

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

  1. Ajoutez une septiè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 Bouton. Réglez Title sur « Contact us », Link sur /contact, Type sur Light et Size sur Large, puis cliquez sur Save.
  3. Cliquez à nouveau sur + et choisissez Texte ; il atterrit au-dessus du bouton. Tapez « Ready to get started? » en Heading 2 et ajoutez une ligne. Réglez Font color sur blanc et cliquez sur Save.

Étape 8 : enregistrer et prévisualiser

  1. Cliquez sur Save dans la barre d’outils du builder.
  2. Ouvrez le menu d’affichage (l’icône en forme d’œil) et choisissez Preview.

Ce que vous voyez

Le nom du client et le bouton Visit the site se placent centrés sur la photo. L’aperçu montre 32 % à côté de son résumé ; les visiteurs le voient compter quand il entre dans la vue. Le défi se dresse sur une bande grise, et la solution se tient à côté de sa photo.

Sur la bande bleu marine, les trois résultats comptent à leur entrée dans la vue : 32 %, 2s et 15 000. La citation du client et une bande Contact us violette ferment la page.

Si vous ne voyez pas la page comme montrée

  • La photo du héros ne remplit pas la section. Background style est encore sur Theme defaults. Ouvrez le panneau Style de la section et réglez-le sur Cover.
  • Le dernier compteur affiche 15000 sans séparateur de milliers. Thousands separator est encore sur None. Ouvrez les réglages du compteur et choisissez Comma.
  • Un libellé se trouve au-dessus de son compteur. Le compteur est entré avant son libellé, et les nouveaux éléments atterrissent en haut de leur colonne. Glissez le libellé sous le compteur par la poignée de glissement sur sa barre de contrôle.
  • Vos changements 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 ?