--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/site-one-page-a-defilement' title: 'Créer un site one-page à défilement | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:24:40+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Créez ici un site web entier sur une seule page : un héros pleine hauteur dont les boutons sautent vers les sections À propos, Services et Contact en dessous. Chaque section porte un HTML ID, la cible de son bouton. Utilisez-le pour une petite entreprise, une campagne ou un portfolio. Pour une page autour d’une seule offre, suivez plutôt Créer une page de destination marketing. La vidéo crée le site d’un studio de design appelé Studio Nord. tags: - 'Follow a tutorial' 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: 'Créer un site one-page à défilement' description: |- Créez ici un site web entier sur une seule page : un héros pleine hauteur dont les boutons sautent vers les sections À propos, Services et Contact en dessous. Chaque section porte un HTML ID, la cible de son bouton. Utilisez-le pour une petite entreprise, une campagne ou un portfolio. Pour une page autour d’une seule offre, suivez plutôt Créer une page de destination marketing. La vidéo crée le site d’un studio de design appelé Studio Nord. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:24:40+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/tutoriels/site-one-page-a-defilement' articleSection: 'Suivre un tutoriel' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/site-one-page-a-defilement' description: |- Créez ici un site web entier sur une seule page : un héros pleine hauteur dont les boutons sautent vers les sections À propos, Services et Contact en dessous. Chaque section porte un HTML ID, la cible de son bouton. Utilisez-le pour une petite entreprise, une campagne ou un portfolio. Pour une page autour d’une seule offre, suivez plutôt Créer une page de destination marketing. La vidéo crée le site d’un studio de design appelé Studio Nord. 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) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Suivre un tutoriel](/fr/hc/documentation/learn-dxpr-builder/tutorials/overview) # Créer un site one-page à défilement. Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel ## Dans ce guide Guides associés - [Créer une section héros](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/section-heros) - [Créer une page de destination marketing](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing) - [Lier vers des sections et réutiliser des styles avec des classes](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/css-personnalise) Créez ici un site web entier sur une seule page : un héros pleine hauteur dont les boutons sautent vers les sections À propos, Services et Contact en dessous. Chaque section porte un **HTML ID**, la cible de son bouton. Utilisez-le pour une petite entreprise, une campagne ou un portfolio. Pour une page autour d’une seule offre, suivez plutôt [Créer une page de destination marketing](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing). La vidéo crée le site d’un studio de design appelé Studio Nord. ## Avant de commencer - Votre rôle dispose de l’autorisation **Edit with DXPR Builder**. - La médiathèque contient une photo large pour le héros et une photo d’équipe. - 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 section ou colonne : les boutons du héros se placent donc du dernier au premier. ## Étape 1 : créer le héros 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**. Réglez **HTML ID** sur `hero` et, sous **HTML classes**, choisissez **Align text center**. 3. Activez **100% height** pour que la section remplisse l’écran, et **Vertical centering** pour que le contenu se tienne au milieu. 4. 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**, choisissez le **Background** bleu marine et le **Font color** blanc, puis cliquez sur **Save**. 5. Cliquez sur **+** sur la section et choisissez **Button**. Définissez **Title** sur « Contact », **Link** sur `#contact` et **Type** sur **Light**, puis cliquez sur **Save**. Ajoutez deux autres boutons de la même façon : « Services » avec `#services`, puis « About » avec `#about`. Chacun arrive au-dessus du précédent. 6. Cliquez à nouveau sur **+** et choisissez **Text** ; il arrive au-dessus des boutons. Saisissez « Studio Nord » comme **Heading 2** et ajoutez le slogan. Réglez **Font color** sur blanc dans le panneau **Style** 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](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/seo#step-1-start-the-content-at-heading-2). ## Étape 2 : ajouter la section À propos 1. Survolez le héros et cliquez sur **Add Section Below**. Ouvrez les **Plus** > **Paramètres** de la nouvelle section, réglez **HTML ID** sur `about` et cliquez sur **Save**. 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 une photo 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 **Text**. Saisissez « About » comme **Heading 2**, ajoutez votre histoire et cliquez sur **Save**. ## Étape 3 : ajouter la section Services 1. Ajoutez une troisième section avec **Add Section Below** et ouvrez ses **Plus** > **Paramètres**. Réglez **HTML ID** sur `services`, choisissez **Align text center** sous **HTML classes** et un **Background** gris clair dans le panneau **Style**. Cliquez sur **Save**. 2. Ajoutez une **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 « Branding » 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 `pen-nib` 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 « Websites » avec `laptop-code` et « Analytics » avec `chart-pie`. ## Étape 4 : ajouter la section Contact 1. Ajoutez une quatrième section et ouvrez ses **Plus** > **Paramètres**. Réglez **HTML ID** sur `contact`, choisissez **Align text center** sous **HTML classes** et cliquez sur **Save**. 2. Cliquez sur **+** sur la section et choisissez **Social links**. Saisissez `linkedin` comme marque de la première ligne et collez l’URL du profil, puis `instagram` et son URL dans la deuxième. Réglez **Style** sur **Circle** et **Size** sur **2x**, puis cliquez sur **Save**. 3. Cliquez à nouveau sur **+** et choisissez **Button** ; il arrive au-dessus des liens. Définissez **Title** sur « Email us », **Link** sur `mailto:hello@studionord.example` et gardez **Type** sur **Primary**, puis cliquez sur **Save**. 4. Cliquez à nouveau sur **+** et choisissez **Text** ; il arrive au-dessus du bouton. Saisissez « Get in touch » comme **Heading 2** ainsi que votre adresse e-mail et votre numéro de téléphone en dessous, puis 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**), choisissez **Preview** et cliquez sur un bouton du héros, par exemple **Contact**. ## Aller plus loin Non montré dans la vidéo : - **Fixed menu** : créez un menu sous **Structure** > **Menus** > **Add menu** avec un lien par section, par exemple `/studio-nord#about`, ou `#about` sur la page d’accueil. Placez-le dans la région d’en-tête sous **Structure** > **Block layout**. Dans DXPR Theme, activez **Sticky Header** sous **Appearance** > **Settings** > **DXPR Theme**. - **Front page** : faites de la page votre page d’accueil sous **Configuration** > **System** > **Basic site settings**. - **Contact form** : insérez un formulaire depuis l’onglet **Drupal Blocks** au lieu du texte d’accroche ; voir [Ajouter des formulaires aux pages](/fr/hc/documentation/learn-dxpr-builder/tutorials/add-forms). ## Ce que vous voyez La photo remplit l’écran avec « Studio Nord », le slogan et trois boutons clairs. Un clic sur un bouton fait défiler la page en douceur jusqu’à sa section. À propos montre la photo d’équipe à côté de l’histoire, Services trois icônes cerclées sur gris, et Contact le titre « Get in touch » et le bouton **Email us** au-dessus de deux icônes sociales rondes. ## Si la page ne s’affiche pas comme montré - **Un bouton ne saute pas vers sa section.** Son **Link** ne correspond pas au **HTML ID** de la section. Le lien est `#` plus exactement le même ID, par exemple `#about` pour l’ID `about`. - **Une section arrive sous votre en-tête fixe.** Le builder ne connaît pas la hauteur de l’en-tête. Sous **Advanced Settings** sous **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`), réglez **Scroll offset selector** sur le sélecteur CSS de votre en-tête. - **Un lien social affiche « No matching brand icon found ».** La marque n’est pas un nom d’icône connu. Saisissez-la en minuscules, par exemple `linkedin` ou `instagram`. - **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](/fr/hc/documentation/apprendre-dxpr-builder/depannage/enregistrement-echoue). ## Et ensuite ? - [Créer une section héros](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/section-heros) pour les options de superposition et de parallaxe - [Créer une page de destination marketing](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing) pour une page de campagne - [ID et classes HTML](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/css-personnalise) pour en savoir plus sur les ID HTML