Créer un tableau tarifaire.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Créez ici un tableau tarifaire : trois offres côte à côte, chacune un panneau avec un prix, une liste de fonctionnalités et un bouton pleine largeur, avec l’offre du milieu mise en avant. Utilisez-le sur une page tarifaire ou dans une page de produit. Pour la page de produit complète autour, suivez Créer une page de produit.

La vidéo crée trois offres pour un outil de reporting.

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 conteneur : dans chaque panneau, le bouton se place donc avant le prix.

Étape 1 : ajouter la section et les colonnes

  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. Ouvrez le panneau Style, choisissez un Background gris clair et cliquez sur Save.
  3. Cliquez sur + sur la section et choisissez Row ; elle arrive avec deux colonnes égales.
  4. Cliquez sur l’icône de grille de la ligne (Column layout), choisissez le préréglage 1/3 + 1/3 + 1/3 et cliquez sur Save.

Étape 2 : créer la première offre

  1. Cliquez sur + dans la première colonne et choisissez Panel dans l’onglet Content.
  2. Survolez le panneau et ouvrez Plus > Paramètres. Réglez le Title sur « Starter », gardez le Type sur DXPR et cliquez sur Save.
  3. Cliquez sur + sur le panneau et choisissez Button. Définissez Title sur « Choose plan », Link sur /signup et Type sur Primary. Activez Block button pour qu’il remplisse la colonne, puis cliquez sur Save.
  4. Cliquez à nouveau sur + sur le panneau et choisissez Text ; il arrive au-dessus du bouton. Saisissez le prix comme Heading 2, ajoutez les fonctionnalités une par ligne et cliquez sur Save.

Étape 3 : créer les autres offres

  1. Répétez l’étape 2 dans la deuxième colonne pour « Professional ». Dans le panneau Style du panneau, choisissez le Background violet, et réglez le Type du bouton sur Success, pour que l’offre ressorte.
  2. Répétez l’étape 2 dans la troisième colonne pour « Enterprise », avec « Custom pricing » comme prix.

Tip

La colonne du milieu attire le regard. Placez-y l’offre que vous voulez le plus vendre.

Étape 4 : ajouter le titre

  1. Cliquez sur + sur la section et choisissez Text ; il arrive au-dessus de la ligne.
  2. Saisissez « Choose your plan » comme Heading 2, ajoutez une ligne comme « Simple monthly pricing. Cancel any time. » 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 :

  • Four plans : choisissez plutôt le préréglage 1/4 + 1/4 + 1/4 + 1/4 et créez une quatrième colonne.
  • Most popular badge : ajoutez un élément Text en haut du panneau mis en avant avec « Most popular » en gras.
  • Annual and monthly : ajoutez une ligne Text au-dessus de la ligne comme « Monthly | Annual (save 20%) ». La ligne est statique ; un basculeur en direct exige l’élément HTML avec votre propre script.
  • Feature ticks : collez une coche avant chaque ligne de fonctionnalité, ou ajoutez un élément Icon au-dessus de la liste.

Ce que vous voyez

« Choose your plan » trône centré au-dessus de trois offres sur un bandeau gris. Chaque panneau affiche son nom dans la barre de titre, le prix, trois fonctionnalités et un bouton Choose plan pleine largeur. L’offre du milieu ressort en violet avec un bouton vert.

Si les offres ne s’affichent pas comme montré

  • Un panneau s’ouvre sans boîte de dialogue des réglages. Les panneaux s’ouvrent vides, sans boîte de dialogue. Survolez le panneau et ouvrez Plus > Paramètres pour régler son Title.
  • Un Type de panneau comme Primary n’affiche aucune couleur. Votre thème ne stylise pas ce type de panneau. Gardez le Type sur DXPR et choisissez un Background dans le panneau Style du panneau, comme à l’étape 3.
  • Les boutons ne sont larges que comme leur texte. Block button est désactivé. Ouvrez les réglages de chaque bouton et activez-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 ?