Créer un site one-page à défilement.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

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.

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.

É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 <front>#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.

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.

Et ensuite ?