Mise en page et contenu
Les pages sont structurées selon la hiérarchie Section → Ligne → Colonne → Bloc : les arrière-plans des sections s'étendent à fond, tandis que la largeur maximale des lignes limite le contenu ; utilisez le mode de mise en page « Attr » (Contenu, Largeur fixe, De bord à bord) et la hauteur (% de la fenêtre d'affichage) sur la section, et non la largeur définie dans le style de chaque bloc.
La plupart des pages suivent une structure identique : Section → Ligne → Colonne(s) → Bloc(s). Comprendre quel niveau contrôle la largeur et quel niveau contrôle l'espacement permet d'obtenir des mises en page centrées sur ordinateur et agréables sur mobile.
Notions de base sur la barre latérale : Barre latérale et barre d’outils de l’éditeur de page. Catalogue de blocs : Référence sur les blocs de l’éditeur et la mise en page.
Le modèle du cadre photo
Considérez chaque section comme un cadre photo pleine largeur. La ligne qu’elle contient correspond au passe-partout : une zone centrée dont la largeur est limitée. Vos blocs s’insèrent à l’intérieur de cette zone.
┌─ SECTION (largeur 100 % — arrière-plan, espace de respiration vertical) ────┐
│ │
│ ┌─ LIGNE (largeur maximale, centrée — limite du contenu principal) ─────┐ │
│ │ [ Grille de portfolio / texte / boutons / autres blocs ] │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
L'arrière-plan de la section reste à fond perdu. La couleur, l’image et la superposition recouvrent l’intégralité de la section, d’un bord à l’autre. L’option Ligne → Largeur maximale limite uniquement le contenu à l’intérieur du passe-partout ; elle ne réduit pas l’arrière-plan.
N’utilisez pas de marges gauche/droite importantes sur la section pour « rétrécir » le contenu sur un ordinateur de bureau. Cela va à l’encontre du système de mise en page et entraîne des dysfonctionnements prévisibles sur les petits écrans. Compressez plutôt la largeur du contenu avec Ligne → Largeur maximale sous Attr.
Ce que contrôle chaque calque
| Calque | Contrôle | Où modifier |
|---|---|---|
| Section | Mode de mise en page, hauteur, arrière-plan à fond perdu (image/superposition), espacement vertical | Sélectionnez la section → Attr ; couleur unie dans Style |
| Ligne | Largeur max, espacement entre les colonnes, remplissage de la ligne, centrage horizontal | Sélectionnez ligne → Attr (mise en page de la ligne) |
| Colonne | Remplissage de la cellule, hauteur minimale, alignement vertical des blocs dans la cellule | Sélectionnez colonne → Attr |
| Bloc | Paramètres spécifiques au bloc (source du portfolio, image hero, destinataire du formulaire, etc.) | Sélectionnez bloc → Attr |
L'espacement de la section ne redimensionne pas les éléments enfants. Il ajoute de l’espace autour de la ligne ; il n’étire pas les lignes ni les colonnes pour remplir la fenêtre d’affichage. Pour augmenter la hauteur d’une bande, utilisez Attr → Hauteur sur la section, augmentez la hauteur minimale de la colonne, ajoutez un espacement à la colonne ou insérez un bloc Spacer.
Attributs de section : mode de mise en page et hauteur
Une fois la section sélectionnée, Modifier → Attributs affiche les options de Mise en page de la section :
| Commande | Options | Fonction |
|---|---|---|
| Mode de mise en page | Contenu (par défaut), Largeur fixe, De bord à bord | Comment la section et sa ligne interne s’adaptent à la largeur de la fenêtre d’affichage. L’option De bord à bord couvre toute la fenêtre d’affichage ; les colonnes s’empilent toujours sur mobile. |
| Hauteur | Auto, 50 % de la fenêtre d’affichage, 80 % de la fenêtre d’affichage, 100 % de la fenêtre d’affichage | Détermine la hauteur de la bande de la section par rapport à la fenêtre du navigateur (ou à la hauteur du contenu lorsque l’option Auto est sélectionnée). |
Arrière-plan de la section (même panneau Attr) : choisissez une image d’arrière-plan, sa taille/position et l’opacité de la superposition. La couleur de remplissage unie reste dans l’onglet Style — Attr ne duplique pas de deuxième sélecteur de couleur.
Rappel : l’image et la superposition s’appliquent à la bande de section en pleine largeur. Réduisez la largeur du titre ou de la grille à l’aide de Ligne → Largeur maximale, et non en rognant l’arrière-plan.
Réglage de la largeur du contenu (le curseur de droite)
| Objectif | Commande recommandée | À éviter |
|---|---|---|
| Grille de portfolio ou d’articles large (~1280 px) | Ligne → Largeur maximale → 1280 / Pleine | Énorme rembourrage horizontal de la section |
| Article étroit ou texte long (~768 px) | Ligne → Largeur maximale → 960 ou préréglage inférieur | Largeur de l’onglet Style sur la section |
| Marge latérale confortable sur les téléphones | Espacement de la section (généralement 32–64 px) | Utilisation de l'espacement pour simuler la largeur maximale sur ordinateur de bureau |
| Bloc autonome sur le canevas (portfolio intégré, formulaire de contact) | Style → Largeur (centrage lorsqu’une valeur fixe est définie) | Attente d’un conteneur de ligne qui n’existe pas |
Les lignes sont centrées automatiquement lorsque vous définissez une largeur maximale sous Attr. C’est le principal moyen de compresser ou d’élargir le contenu de la page.
Onglet Style vs Attr pour la mise en page
| Contrôle | Privilégiez Attr lorsque… | L’onglet Style sert à… |
|---|---|---|
| Largeur maximale de la ligne | Toujours (caractéristiques de mise en page des lignes) | Remplacements exceptionnels uniquement |
| Mode de mise en page / hauteur de la section | Toujours (caractéristiques de mise en page des sections) | Ne pas simuler uniquement avec la hauteur de l’onglet Style |
| Espacement des lignes / sections | Lignes : Attr uniquement ; sections : Attr en priorité | Ajustements ponctuels sur des éléments hors ligne |
| Largeur du bloc sur le canevas | Le bloc n’appartient à aucune ligne (intégration autonome) | Largeur fixe avec centrage automatique (par ex. 800px) |
| Couleur unie de la section / du bloc | — | Couleur d’arrière-plan et préréglages de thème |
| Image d’arrière-plan de la section / du CTA + superposition | Toujours via Attr | — |
| Typographie et autres couleurs | Caractéristiques du bloc lorsqu’elles sont disponibles | Remplacements visuels précis |
Si Attr et Style définissent tous deux le remplissage sur la même ligne, utilisez uniquement Attr pour éviter les conflits de valeurs sur le site en ligne.
Remplissage : lié et non lié
Dans Style → Espacement, les options Remplissage et Marge prennent en charge deux modes :
- Lié (icône de lien activée) : une seule valeur s’applique aux quatre côtés, comme dans la syntaxe abrégée CSS (
padding: 32px). - Non lié (icône de lien désactivée) : définissez haut, droite, bas et gauche indépendamment.
Les curseurs vont jusqu’à 160 px. Pour des valeurs plus grandes ou asymétriques, passez en mode « non lié » et saisissez les valeurs dans les champs numériques (par exemple 200px ou 48px 24px via les champs par côté).
Sélectionner le bon élément
| Problème | Solution |
|---|---|
| Impossible de cliquer sur la ligne dans le canevas | Calques → développer Section → sélectionner Ligne |
| Le contenu semble aligné à gauche avec un espace vide à droite | Définissez Ligne → Largeur max. sous Attr, et pas seulement Style → Largeur sur un bloc enfant |
| Bande trop haute ou trop courte | Définissez Section → Attr → Hauteur, ou ajustez l’espacement vertical / la hauteur minimale de la colonne — pas la largeur de la section |
| L’arrière-plan semble coupé à la largeur du contenu | L’arrière-plan est censé s’étendre à fond ; réduisez plutôt la largeur du contenu avec Ligne → Largeur maximale |
| L’intégration du portfolio n’est pas centrée à une largeur personnalisée | Style → Largeur sur le bloc (centrage automatique) ; confirmez en cliquant sur Enregistrer la page et prévisualisez |
Modèles de page courants
Page de contenu standard
- Ajoutez une Section.
- À l’intérieur : Ligne (la largeur maximale par défaut convient généralement).
- Ajoutez 1 colonne ou 2 colonnes.
- Déposez des blocs dans les colonnes.
Bande de section à fond perdu, corps contenu
- Sélectionnez la section → Attr → Mode de mise en page → De bord à bord (facultatif) et définissez la hauteur si vous souhaitez une bande haute.
- Ajoutez une image d’arrière-plan ou une couleur unie via Style à la section ; conservez la largeur maximale de la ligne pour les titres et les boutons.
- Section suivante : Contenue avec une largeur maximale de ligne normale pour le corps du texte ou les grilles.
Intégration autonome (sans ligne)
Certains blocs (par exemple Intégration de portfolio, Formulaire de contact) peuvent être placés directement sur la page sans ligne. Utilisez Style → Largeur pour les contraindre et les centrer ; utilisez Attr pour les options spécifiques au bloc.
Étapes suivantes et validation
- Ouvrez une page brouillon → Calques → vérifiez la hiérarchie Section → Ligne → Colonne.
- Sélectionnez la section → Attr → testez les options Contenu et Bord à bord ainsi qu’une hauteur en % de la fenêtre d’affichage → prévisualisez les modes Ordinateur de bureau et Mobile.
- Sélectionnez la ligne → Attr → modifiez la Largeur max → vérifiez que l’arrière-plan couvre toujours toute la largeur tandis que le contenu se rétrécit.
- Ajoutez un remplissage horizontal à la section uniquement pour laisser un espace libre sur les bords — et non pour simuler une largeur maximale.
- Sur un bloc autonome, définissez Style → Largeur sur
800px→ vérifiez qu’il est centré après avoir Enregistré la page.
Connexes : Barre latérale et barre d’outils de l’éditeur de page · Référence sur les blocs et la mise en page de l’éditeur · Blocs de présentation multimédia pris en charge