Créer une page de produit.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Créez ici une page pour un produit. Une photo se tient à côté du nom, du prix et du bouton Buy now, suivis de trois fonctionnalités, d’une liste de caractéristiques et d’un appel à l’action commercial. Utilisez-la pour tout ce que vous vendez. Pour comparer plusieurs formules, ajoutez-y un tableau tarifaire.

La vidéo crée la page d’un produit matériel appelé Insight Hub.

Avant de commencer

  • Votre rôle dispose de l’autorisation Edit with DXPR Builder.
  • La médiathèque contient une photo du produit.
  • 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 colonne. C’est pourquoi la colonne de droite se construit à partir du bouton vers le haut.

Étape 1 : ajouter le produit

  1. Cliquez sur Add Elements sur la page vide et choisissez Section dans l’onglet Layout.
  2. Cliquez sur + sur la section et choisissez Row ; elle arrive avec deux colonnes égales.
  3. Cliquez sur + dans la colonne de gauche et choisissez Image. Cliquez sur Select Image, cochez la photo du produit et cliquez sur Insert selected. Saisissez l’Alt attribute dans le panneau SEO et cliquez sur Save.
  4. Cliquez sur + dans la colonne de droite et choisissez Button. Définissez Title sur « Buy now », Link sur votre boutique, Type sur Primary et Size sur Large, puis cliquez sur Save.
  5. Cliquez à nouveau sur + dans la colonne de droite et choisissez Text ; il arrive au-dessus du bouton. Saisissez le prix comme Heading 2 et cliquez sur Save.
  6. Cliquez une fois de plus sur + et choisissez Text ; il arrive tout en haut. Saisissez le nom du produit comme Heading 2, ajoutez une ligne de description 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 fonctionnalités

  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 le nom de la fonctionnalité 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 plug 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 la deuxième colonne avec cloud et la troisième avec battery-full.

Étape 3 : ajouter les caractéristiques

  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 Text. Saisissez « Specifications » comme Heading 2, puis une caractéristique par ligne, et cliquez sur Save.

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

  1. Ajoutez une quatriè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 « Talk to sales », 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 « Insight Hub from 249 euro » comme Heading 2 et ajoutez une ligne. Réglez Font color sur blanc et cliquez sur Save.

Étape 5 : 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 :

  • Specification table : insérez un tableau avec le bouton Table de la barre d’outils du texte plutôt qu’une ligne par caractéristique.
  • Gallery : remplacez la photo unique par un Image carousel de photos du produit.
  • Plans : reliez le prix à un tableau tarifaire.

Ce que vous voyez

La photo du produit remplit la moitié gauche, avec le nom, le prix et le bouton Buy now à droite. Trois fonctionnalités centrées suivent, chacune une icône cerclée sur son nom et sa ligne. Les caractéristiques se tiennent sur un bandeau gris, et un bandeau violet conclut la page avec Talk to sales.

Si la page ne s’affiche pas comme montré

  • Le nom, le prix et le bouton sont dans le mauvais ordre. Ils sont arrivés de haut en bas, et les nouveaux éléments arrivent en haut de leur colonne. Glissez-les à leur place par la poignée de glissement de leur barre de contrôle.
  • 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.
  • Le titre reste foncé sur violet. L’élément Text n’a pas de Font color propre. Ouvrez son panneau Style et réglez Font color sur blanc.
  • 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 ?