Sections et éléments

Chaque page de votre site est une pile de sections : un hero en haut, puis les services, les tarifs, un formulaire de contact, etc. Une section spéciale, le Conteneur, accueille des éléments plus petits (titres, textes, boutons, images…) que vous disposez librement en colonnes.

Types de sections

L’En-tête (menu) et le Pied de page sont toujours présents sur chaque page et ne peuvent pas être déplacés. Cliquez dessus dans la liste Structure pour modifier le logo, les liens du menu, le bouton du menu, les textes du pied de page, les liens et les réseaux sociaux.

Réglages communs à toutes les sections

Sélectionnez une section et ouvrez Apparence :

• Arrière-plan de la section : aucun, carte (légèrement plus claire), lueur ou couleur d’accent.
• Espacement haut/bas : compact, normal ou aéré.
• Alignement du titre : par défaut, à gauche ou centré.
• Image d’arrière-plan de la section et Assombrissement de l’image de fond.
• Taille et espacement : largeur, hauteur, marge et marge intérieure de la section (voir Taille et espacement plus bas).
• ID de la section : le nom utilisé dans les liens, par exemple #contact. Un lien de menu vers #contact fait défiler la page jusqu’à cette section. Si vous renommez l’ID, les liens qui y menaient sont mis à jour pour vous.

Beaucoup de sections ont aussi leurs propres options de style (colonnes, style des cartes, forme des images, etc.) dans le même onglet.

Ajouter une section

1. Dans l’onglet Structure, cliquez sur la section après laquelle la nouvelle doit apparaître (ou sur rien, pour l’ajouter à la fin).
2. Cliquez sur Ajouter une section sous la liste, ou ouvrez l’onglet Ajouter à droite.
3. Sous Sections prêtes à l’emploi, cliquez sur le type souhaité.

La nouvelle section arrive avec un contenu d’exemple pour ne jamais paraître vide, et elle est sélectionnée pour que vous puissiez la modifier tout de suite.

Gérer les sections

Dans la liste Structure, chaque ligne de section comporte :

• la poignée à gauche : faites-la glisser vers le haut ou le bas pour changer l’ordre ;
• l’icône œil : Masquer du site / Afficher sur le site. Les sections masquées restent dans l’éditeur (grisées) mais les visiteurs ne les voient pas ;
• le menu ⋯ : Dupliquer, Monter, Descendre et Supprimer la section.

La suppression demande une confirmation, et vous pouvez toujours récupérer une section avec Ctrl+Z.

Les éléments : créer votre propre mise en page

La section Conteneur (contenu libre) vous permet de créer n’importe quelle mise en page. Choisissez une Disposition des colonnes (1, 2, 3 ou 4 colonnes, ou 2/3 + 1/3 et 1/3 + 2/3), puis remplissez les colonnes d’éléments.

Types d’éléments

Ajouter des éléments

Ouvrez l’onglet Ajouter. Sous Éléments, vous pouvez :

• Faire glisser un élément dans l’aperçu. Une ligne indique où il sera placé : dans une colonne, dans une boîte ou entre deux sections (le déposer entre deux sections crée pour lui une nouvelle section Conteneur).
• Cliquer sur un élément pour l’ajouter juste après l’élément sélectionné (ou dans la première colonne du Conteneur sélectionné). Si aucun Conteneur n’est sélectionné, une nouvelle section Conteneur est ajoutée.

Modifier, déplacer, dupliquer et masquer des éléments

Cliquez sur un élément dans l’aperçu pour le sélectionner. L’onglet Modifier affiche ses champs et une barre d’outils :

• Monter / Descendre (les flèches) ;
• Déplacer vers la colonne précédente / Déplacer vers la colonne suivante (visibles quand le Conteneur a plus d’une colonne) : l’élément passe à la fin de cette colonne et reste sélectionné ;
• Afficher / Masquer (l’œil) pour le cacher aux visiteurs sans le supprimer ;
• Dupliquer ;
• Supprimer ;
• ✦ AI (éléments avec du texte) : ouvre le champ IA sur le texte de l’élément. Voir L’éditeur.
• la flèche de retour vous ramène à la section entière.

Vous pouvez aussi changer le Type d’élément (par exemple transformer un Texte en Carte) et la Colonne dans laquelle il se trouve. Le champ Alignement aligne l’élément à gauche, au centre ou à droite.

Taille et espacement

Chaque élément, chaque section et chaque colonne d’un Conteneur a un panneau Taille et espacement : dans les réglages de l’élément et dans l’onglet Apparence d’une section. Les champs vides gardent l’aspect du thème : rien ne change tant que vous ne tapez pas de valeur.

• Largeur, Largeur max. et Hauteur : tapez un nombre et choisissez l’unité à côté : px, rem, em, %, vw, vh ou auto. Pour les textes, boutons et conteneurs, la hauteur est un minimum (un contenu plus long tient quand même) ; les images et vidéos prennent exactement cette hauteur et l’image la remplit.
• La Marge (l’anneau extérieur) est l’espace autour de l’élément ; la Marge intérieure (l’anneau intérieur) est l’espace à l’intérieur, entre son bord et son contenu. Chaque anneau a quatre champs : haut, bas et les deux côtés. Tapez 24 (pixels), 2rem, 5% ou auto (marges seulement : auto des deux côtés centre un élément qui a une largeur).
• Le bouton chaîne d’un anneau met la même valeur sur les quatre côtés à la fois.
• Dans chaque champ, ↑ et ↓ changent la valeur de 1 (Maj + flèche : de 10 ; pour rem et em de 0,1 et 1).
• Quand vous survolez le panneau, l’aperçu montre la marge (orange) et la marge intérieure (vert) de la sélection.
• Réinitialiser efface les valeurs de l’appareil que vous modifiez.

Appareils. Les trois icônes en haut du panneau (Ordinateur, Tablette, Téléphone) fonctionnent comme les boutons de l’aperçu : choisissez-en une et l’aperçu passe à cette taille. Les valeurs tapées ensuite ne s’appliquent qu’à cet appareil. La tablette reprend les valeurs de l’ordinateur tant que vous ne lui en donnez pas, et le téléphone celles de la tablette (ou de l’ordinateur) ; les valeurs héritées s’affichent en gris dans les champs vides, et un point sur une icône indique les appareils qui ont leurs propres valeurs. Tablette = écrans jusqu’à 1023 px de large, téléphone jusqu’à 640 px.

Colonnes. Dans l’onglet Apparence d’un Conteneur, Taille et espacement des colonnes a un bouton par colonne (Col 1, Col 2…) : choisissez-en une et réglez sa taille et ses espacements.

Bon à savoir :

• Un élément n’est jamais plus large que l’espace qui le contient : une grande largeur en pixels ne fait pas défiler la page de côté sur un téléphone.
• Les côtés sont « début » et « fin », pas gauche et droite : en arabe et dans les autres langues écrites de droite à gauche, les espacements sont inversés automatiquement.
• La largeur, la hauteur et la marge intérieure d’un bouton dimensionnent le bouton lui-même ; sa marge le déplace.

L’élément Boîte / grille

Utilisez Boîte / grille pour regrouper des éléments, par exemple trois cartes côte à côte dans une seule colonne.

1. Ajoutez un élément Boîte / grille.
2. Dans ses réglages, choisissez la Disposition : Les uns sous les autres, En ligne, ou une grille de 2, 3 ou 4 colonnes.
3. Choisissez l’Aspect de la boîte : sans cadre, carte, verre ou couleur d’accent. Ajustez la Marge intérieure et l’Espace entre les éléments.
4. Ajoutez des éléments dans la boîte : faites-les glisser sur la boîte dans l’aperçu, ou ajoutez-les sous Éléments dans la boîte.

Une boîte ne peut pas contenir une autre boîte (un seul niveau).

Images et photos gratuites

Chaque champ d’image (image principale, arrière-plan de section, galerie, image de carte…) ouvre le sélecteur d’images lorsque vous cliquez sur Choisir. Il comporte deux onglets :

• Mes images : les images que vous avez importées (faites-les glisser dans la fenêtre ou cliquez sur Importer ; JPG, PNG, WebP, AVIF ou GIF jusqu’à 10 Mo), ainsi que les photos gratuites que vous avez déjà utilisées.
• Photos gratuites : des millions de photos gratuites et sous licence provenant d’Unsplash ou de Pexels. Vous pouvez les utiliser sur votre site sans frais.

Pour utiliser une photo gratuite :

1. Cliquez sur Choisir dans un champ d’image et ouvrez l’onglet Photos gratuites.
2. Décrivez la photo en quelques mots en anglais, par exemple bakery counter, yoga studio ou mountain lake. Choisissez un format (paysage, portrait ou carré) si l’emplacement l’exige.
3. Cliquez sur une photo. Elle est ajoutée à vos images et placée aussitôt dans le champ.

La même recherche se trouve dans le tableau de bord sous Images → Photos gratuites.

Bon à savoir :

• Le nom du photographe apparaît sous chaque résultat, et le pied de page de votre site crédite les photographes dont il affiche les photos (par exemple Photos : Jane Doe sur Unsplash). C’est ce que demandent les services de photos : gardez-le.
• Les photos Unsplash restent sur les serveurs rapides d’Unsplash et sont affichées depuis là-bas ; les photos Pexels sont copiées dans vos images.
• Les sites créés à partir d’un modèle ou par le créateur de site IA peuvent déjà contenir des photos gratuites choisies pour votre activité. Remplacez-les par les vôtres quand vous voulez.
• Vos propres photos (votre équipe, vos produits, votre lieu) convertissent généralement mieux que les photos de banque d’images. Utilisez les photos gratuites pour les ambiances, les arrière-plans et les lieux.

L’onglet Photos gratuites n’apparaît que si le service de photos est activé sur la plateforme.

Conseils

• Donnez à chaque section un seul objectif clair : un titre, un message, un bouton.
• Utilisez Dupliquer pour créer rapidement des sections cohérentes, puis changez les textes.
• Masquez une section plutôt que de la supprimer si vous risquez d’en avoir à nouveau besoin (par exemple une offre saisonnière).