Blocs d'édition et guide de mise en page
Utilisez les blocs « Basic », « Layout », « Navigation », « Blog listing » et « Commerce » du panneau « Blocs » pour la structure de la page et les sections de la vitrine ; les blocs « Médias », « Portfolio » et « Hero » sont décrits dans les guides consacrés aux blocs de présentation multimédia.
Cette page répertorie les blocs non multimédias et les éléments de mise en page de base. Les blocs qui affichent principalement des médias, des portfolios, des heroes ou des sliders se trouvent dans la section Blocs de présentation multimédia pris en charge, qui contient des guides plus détaillés par catégorie.
Architecture de base et champs
Faites glisser des blocs depuis le panneau Blocs (barre latérale de droite → icône Blocs) vers une colonne. La plupart des pages suivent la structure suivante :
Section → Ligne → Colonne(s) → Bloc(s)
Pour comprendre le fonctionnement de la largeur et de l’espacement à chaque niveau (section vs ligne vs onglet Style), consultez Mise en page et contenu.
Mise en page
| Bloc | Utilisation |
|---|---|
| Section | Bande verticale pleine largeur ; mode de mise en page, hauteur et arrière-plan dans Attr (voir Mise en page et contenu) |
| 1 colonne | Colonne unique en pleine largeur |
| 2 colonnes | Contenu divisé 50/50 (à ajuster dans « Traits ») |
| 3 colonnes | Fonctionnalités, niveaux tarifaires, fiches d’équipe |
| 4 colonnes | Lignes denses d’icônes ou de statistiques |
| Mise en page avec barre latérale | Colonne principale + colonne de barre latérale |
Les paramètres de ligne comprennent généralement la largeur maximale, l’espacement et le rembourrage — voir Barre latérale et barre d’outils de l’éditeur de page.
Notions de base
| Bloc | Utilisation |
|---|---|
| Texte enrichi | Titres (H1–H6), paragraphes, liens et listes dans un seul bloc — à utiliser pour tout nouveau contenu |
| Texte | Ancien bloc de paragraphe simple (pages existantes uniquement) |
| Lien | Lien texte autonome |
| Bouton | Bouton d’appel à l’action avec URL |
| Citation | Mise en forme de citation |
| Section de texte | Titre pré-encadré + bande de paragraphe |
| Espaceur | Espace vertical flexible ou ligne horizontale (curseur Attr → Ligne de séparation, 0–8 px ; 0 = espace uniquement) |
Navigation
| Bloc | Utilisation |
|---|---|
| Barre de navigation | Barre de navigation dans la page (ancienne version/simple) |
| Pied de page simple | Bande de pied de page dans la page (ancienne version/simple) |
Les éléments d’en-tête et de pied de page à l’échelle du site utilisent l’éditeur de modèles d’en-tête/pied de page (blocs et préréglages dédiés — et non ces blocs de page) : En-tête, pied de page et navigation.
Hero (remarque structurelle)
Les blocs Hero sont axés sur les médias. Utilisez les blocs Hero Canvas pour les éléments Hero de type image, vidéo ou diaporama.
Publications
Blocs de la catégorie Publications dans le panneau Blocs.
| Bloc | Utilisation |
|---|---|
| Liste des articles de blog | Index des articles du site — mise en page (grille / liste / articles en vedette / barre latérale), style du modèle, pagination, onglets de catégories et filtres dans Attr — Gérer la page d’index de votre blog |
| Presse et articles de fond | Fiches sélectionnées renvoyant vers des articles externes, des interviews, des récompenses et des mentions dans la presse — mise en page et liens dans Attr |
Configuration de la page d’accueil du blog : Gérer la page d’accueil de votre blog.
Presse et articles externes : Presse et articles.
Avancé (hors médias)
| Bloc | Utilisation |
|---|---|
| Grille Bento | Mosaïque mixte (texte + images) |
| Curseur avant/après | Comparaison de deux images — Interactif avancé |
| Intégration de publicité | Emplacement publicitaire |
| Carte | Intégrer une carte interactive sur une page — idéal pour les expositions en galerie, les rencontres d’ateliers de photographie ou les itinéraires vers un studio — Ajouter une carte aux pages |
Produits et formulaires
| Bloc | Utilisation |
|---|---|
| Grille de produits | Fiches produits de la boutique en ligne |
| Formulaire de contact | Réception intégrée des demandes des visiteurs directement dans votre boîte de réception — Ajouter un formulaire de contact aux pages |
| Appel à l’action centré | Bloc d’appel à l’action centré — à insérer dans une colonne (et non dans une section flottante). Couleur de remplissage unie dans Style ; image d’arrière-plan et opacité de la superposition dans Attr |
| Fiche de présentation / Grille de présentation | Points forts des services, équipement, récompenses, programme — Fiche de présentation et grille de présentation |
| Témoignages | Citations de preuve sociale |
CTA centré est un bloc de contenu situé dans l’arborescence standard Section → Ligne → Colonne. Il ne remplace pas les contrôles de mise en page de la section parente : utilisez Mise en page et contenu pour les arrière-plans de section en pleine page et la largeur maximale des lignes autour de l’appel à l’action.
Contexte Commerce : Présentation de Commerce.
Blocs multimédias (voir autre section)
| Catégorie | Article du répertoire |
|---|---|
| Image, Vidéo, Lightbox | Blocs multimédias standard |
| Galerie, Portfolio, Carte d’impact | Blocs de présentation de portfolio |
| Image/vidéo/slider Hero | Blocs Hero Canvas |
Étapes suivantes et validation
- Ajoutez une Section → 2 colonnes → Texte enrichi + Bouton sur une page brouillon.
- Enregistrez et prévisualisez la largeur mobile.
- Choisissez un bloc multimédia parmi les blocs de présentation multimédia pris en charge pour votre prochaine section.