Ajouter une section.

Apprendre DXPR BuilderCréer des pagesAjouter du contenuMise en page

Une section est une bande de votre page, comme un héros en haut ou une bande grise de fonctions en dessous. Vous donnez à chaque section son propre fond, sa couleur de texte, son espacement et sa hauteur, puis vous la remplissez de lignes ou de contenu. Lisez cette page pour ajouter et régler des sections ; pour diviser une section en colonnes, voir Ajouter une ligne.

La page de la clinique vue par les visiteurs : une section bleu marine bord à bord avec le titre centré Book your health check, une ligne sur les rendez-vous de la semaine et un bouton blanc Book online, au-dessus d’une section gris clair à trois colonnes, Same-week visits, Experienced GPs et Results online

Ajouter une section

L’exemple construit une section héros bleu marine pour une clinique. Une section gris clair à trois colonnes suit en dessous.

  1. Cliquez sur Ajouter des éléments sur une page vide et choisissez Section depuis l’onglet Mise en page. Sous une section existante, cliquez sur Add Section Below, le plus rond en dessous.
  2. Survolez la section, ouvrez Plus et choisissez Paramètres.
  3. Réglez toute la section : ici Align text center sous HTML classes, un Background bleu marine et un Font color blanc. Cliquez sur Save.
  4. Cliquez sur + sur la section pour y ajouter du contenu directement, ou ajoutez une Ligne pour la diviser en colonnes.
  5. Cliquez sur Save dans la barre d’outils pour enregistrer la page.

Background et Font color sont dans le panneau Style de la boîte de dialogue. Les nouveaux éléments atterrissent en haut de la section, donc ajoutez le plus bas d’abord : dans la vidéo, le bouton entre avant le titre.

Ce que vous voyez

La bande bleu marine remplit la fenêtre bord à bord. Son titre et son bouton restent dans une boîte centrée, le conteneur intérieur de la section. La section grise commence juste en dessous, avec ses trois colonnes de fonctions dans la même boîte centrée.

Chaque nouvelle section porte déjà la classe Vertical padding size 5 (py-5) dans HTML classes. Cette classe lui donne l’espace au-dessus et au-dessous de son contenu.

Régler votre section

La boîte de dialogue de réglages a cinq panneaux : General, Background effects, Animation, Style et Hover style. Seules les sections ont Background effects.

Réglage Panneau Rôle Défaut
Full width General Les lignes vont bord à bord au lieu d’aller dans le conteneur centré Désactivé
100% height General La section fait au moins la hauteur de la fenêtre du navigateur Désactivé
Vertical centering General Le contenu se place au milieu vertical d’une section plus haute que lui Désactivé
HTML ID General Un nom d’ancre, pour qu’un lien vers #name saute à cette section Vide
HTML classes General Classes utilitaires, comme Align text center ou une taille de remplissage Vertical padding size 5 (py-5)
Background effect Background effects Simple image, Fixed image, Parallax image, Gradient ou YouTube video Simple image
Background, Font color Style La couleur derrière la section et la couleur de son texte Aucune : le thème décide

Le fond couvre toujours toute la section, quoi que dise Full width. Les effets d’image déplacent le Background image choisi dans le panneau Style ; Fonds montre chaque effet.

Pour plus ou moins d’espace, remplacez Vertical padding size 5 (py-5) pour une taille plus petite ou No vertical padding (py-0). Pour des pixels exacts, utilisez le modèle de boîte du panneau Style, comme l’explique Espacement.

Recettes de sections

Section Réglages qui la créent
Héros 100% height et Vertical centering activés, un effet Parallax image, un titre et un bouton
Fonctions Un Background clair, un titre, puis une ligne de trois colonnes
Appel à l’action Un Background marqué, Align text center, une courte ligne et un bouton
Témoignages Un Background clair et une ligne de trois colonnes, chacune avec un Block quote

Créer une section héros construit la première pas à pas.

Si rien ne s’affiche

  • La page vide n’a pas de bouton Ajouter des éléments. L’assistant de création de pages est désactivé, donc la page vide n’offre que Choose a template. Cliquez sur la zone vide pour ouvrir le sélecteur d’éléments, ou activez Enable page creation assistant à /admin/dxpr_studio/dxpr_builder/ai_settings.
  • Il n’y a pas de bouton Add Section Below. Seules les sections placées directement sur la page l’ont, pas une section dans une colonne ou un onglet. Cliquez plutôt sur + sur la colonne.
  • Le centrage vertical ne change rien. La section n’a que la hauteur de son contenu, donc aucun espace à centrer. Activez aussi 100% height.
  • Full width semble ne rien faire. Le fond couvre déjà toute la section ; Full width ne fait que pousser les lignes vers ses bords. Avec un texte court dans une colonne, le changement se voit mal.
  • Une section est apparue sans que vous l’ajoutiez. Vous avez choisi une Ligne ou un élément de contenu sur une page vide, et chaque élément a besoin d’une section autour de lui. DXPR Builder en a ajouté une pour vous ; ouvrez ses réglages comme les autres.

Et ensuite ?