--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/demarrage/premiere-page' title: 'Construisez votre première page | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:42:49+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Construisez une page avec DXPR Builder : une image à côté d’un titre, un court paragraphe et un bouton. Vous pouvez aussi partir d’un modèle prêt à l’emploi et changer ses mots. Chaque méthode prend quelques minutes, et vous terminez avec une page enregistrée que vous prévisualisez comme les visiteurs la verront. Utilisez cette page après avoir installé DXPR Builder. La vidéo construit la page de zéro : section, ligne, image, bouton et texte, puis enregistrement et aperçu. tags: - 'Build your first page' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Construisez votre première page' description: |- Construisez une page avec DXPR Builder : une image à côté d’un titre, un court paragraphe et un bouton. Vous pouvez aussi partir d’un modèle prêt à l’emploi et changer ses mots. Chaque méthode prend quelques minutes, et vous terminez avec une page enregistrée que vous prévisualisez comme les visiteurs la verront. Utilisez cette page après avoir installé DXPR Builder. La vidéo construit la page de zéro : section, ligne, image, bouton et texte, puis enregistrement et aperçu. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:42:49+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/demarrage/premiere-page' articleSection: 'Créer votre première page' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/demarrage/premiere-page' description: |- Construisez une page avec DXPR Builder : une image à côté d’un titre, un court paragraphe et un bouton. Vous pouvez aussi partir d’un modèle prêt à l’emploi et changer ses mots. Chaque méthode prend quelques minutes, et vous terminez avec une page enregistrée que vous prévisualisez comme les visiteurs la verront. Utilisez cette page après avoir installé DXPR Builder. La vidéo construit la page de zéro : section, ligne, image, bouton et texte, puis enregistrement et aperçu. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Commencer ici](/fr/hc/documentation/learn-dxpr-builder/start-here) /[Créer votre première page](/fr/hc/documentation/learn-dxpr-builder/start-here/first-steps) # Construisez votre première page. Apprendre DXPR BuilderCommencer iciCréer votre première page ## Dans ce guide Construisez une page avec DXPR Builder : une image à côté d’un titre, un court paragraphe et un bouton. Vous pouvez aussi partir d’un modèle prêt à l’emploi et changer ses mots. Chaque méthode prend quelques minutes, et vous terminez avec une page enregistrée que vous prévisualisez comme les visiteurs la verront. Utilisez cette page après [avoir installé DXPR Builder](/fr/hc/documentation/apprendre-dxpr-builder/demarrage/installation). La vidéo construit la page de zéro : section, ligne, image, bouton et texte, puis enregistrement et aperçu. ## Avant de commencer - DXPR Builder est installé avec votre clé produit ([Installer DXPR Builder](/fr/hc/documentation/apprendre-dxpr-builder/demarrage/installation)). - Un type de contenu affiche le constructeur : son champ de texte utilise le formateur **DXPR Builder**, comme **Drag and drop Page** de `dxpr_builder_page`. - Votre rôle dispose de la permission **Edit with DXPR Builder**. ## Créer la page 1. Allez dans **Content** > **Add content** et choisissez un type de contenu qui affiche le constructeur. 2. Saisissez un **Title** et cliquez sur **Enregistrer**. La page enregistrée s’ouvre avec un constructeur vide. DXPR Builder travaille sur cette page, pas dans le formulaire de modification. ## Option A : partir d’un modèle L’onglet **Saved templates** liste les mises en page que les gens de votre site ont enregistrées pour réutilisation. DXPR CMS en livre plusieurs, comme **Colored icon boxes**. Sur d’autres sites, l’onglet peut être vide ; **Choose a template** sur la page vide propose alors les modèles de pages livrés avec DXPR Builder. [Insérer un modèle enregistré](/fr/hc/documentation/learn-dxpr-builder/reusable-templates/saved-templates-tab)montre ces étapes en vidéo. 1. Cliquez sur **Ajouter des éléments** pour ouvrir le sélecteur d’éléments. 2. Passez à l’onglet **Saved templates**. 3. Cliquez sur un modèle pour l’insérer. Ses sections, lignes et éléments apparaissent sur la page, prêts pour modification. 4. Cliquez sur **Enregistrer** dans la barre d’outils. 5. Ouvrez le menu d’affichage et choisissez **Aperçu** pour voir la page comme les visiteurs la verront. ## Option B : construire de zéro La vidéo ci-dessus suit ces étapes. 1. Cliquez sur **Ajouter des éléments** et choisissez **Section** dans l’onglet **Mise en page**. 2. Cliquez sur **+** dans la barre de contrôle de la section et choisissez **Row**. 3. Cliquez sur l’icône de grille de la ligne, choisissez un préréglage de colonnes comme 1/3 + 2/3, puis cliquez sur **Enregistrer**. 4. Cliquez sur **+** dans la colonne de gauche, ouvrez l’onglet **Contenu** et choisissez **Image**. 5. Cliquez sur **Select Image**, cherchez dans la médiathèque avec **Apply filters**, cochez une photo puis cliquez sur **Insert selected**. 6. Ouvrez le panneau **SEO**, saisissez **Alt attribute** puis cliquez sur **Enregistrer**. 7. Cliquez sur **+** dans la colonne de droite et choisissez **Bouton**. 8. Saisissez **Title** et **Link**, choisissez un **Type** puis cliquez sur **Enregistrer**. 9. Cliquez sur **+** dans la barre de contrôle de la colonne large et choisissez **Texte**. 10. Saisissez un titre, réglez-le sur **Heading 2**, saisissez un paragraphe en dessous puis cliquez sur **Enregistrer**. 11. Cliquez sur **Enregistrer** dans la barre d’outils. 12. Ouvrez le menu d’affichage et choisissez **Aperçu** pour voir la page comme les visiteurs la verront. Choisissez **Modifier** dans le même menu pour continuer. ## Modifiez ce que vous avez ajouté - **Texte** : cliquez sur un élément de texte pour le modifier sur place. Une barre d’outils propose le gras, l’italique, les titres, les liens, les listes, la couleur de police et plus. Votre [profil d’utilisateur](/fr/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) décide des boutons affichés. - **Paramètres** : ouvrez **Plus** dans la barre de contrôle d’un élément et choisissez **Paramètres**. Une Image a une largeur, une hauteur, un lien et son texte alternatif ; un Bouton a un **Type**, une taille et un lien. - **Ordre** : faites glisser un élément par sa barre de contrôle vers un autre endroit. Cliquez sur **Enregistrer** dans la barre d’outils quand vous avez fini. Le navigateur vous avertit si vous essayez de quitter la page avec des modifications non enregistrées. ## Ce que vous voyez Dans **Aperçu**, l’image est à gauche. Le titre, le paragraphe et le bouton sont à droite, sans barres de contrôle. De retour dans **Modifier**, chaque élément montre sa barre de contrôle à son survol. DXPR Builder stocke la page en HTML dans le champ qu’il modifie, généralement **Body**. Les visiteurs voient la page une fois le contenu publié. ## Si vous ne voyez pas le bouton Ajouter des éléments - **La page vide montre « Choose a template » et « Or add elements using the + ».** **Enable page creation assistant** est désactivé sur `/admin/dxpr_studio/dxpr_builder/ai_settings`. Cliquez sur **+** dans la barre d’outils du constructeur pour ouvrir le sélecteur d’éléments à la place. - **La page ne montre aucun constructeur.** Le type de contenu n’utilise pas le formateur **DXPR Builder**, ou votre rôle n’a pas **Edit with DXPR Builder**. Suivez [Vérifier l’installation](/fr/hc/documentation/apprendre-dxpr-builder/demarrage/installation#verify-the-installation). - **L’onglet Saved templates ne liste aucun modèle.** Personne sur le site n’en a encore enregistré, ou votre profil d’utilisateur les masque. Utilisez **Choose a template** sur la page vide, ou [enregistrez votre propre modèle](/fr/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates). - **Vos modifications ont disparu après un rechargement.** La page n’a pas été enregistrée. Cliquez sur **Enregistrer** dans la barre d’outils du constructeur avant de quitter la page. ## Et ensuite ? - [Les outils de modification](/hc/documentation/learn-dxpr-builder/editing) : chaque commande, ainsi que les raccourcis clavier. - [Éléments](/hc/documentation/learn-dxpr-builder/elements) : les 22 éléments de contenu et 6 éléments de mise en page. - [Mise en page](/hc/documentation/learn-dxpr-builder/layout/overview) : des sections, lignes et colonnes qui s’adaptent à chaque écran.