Ajouter et déplacer des blocs, ajuster les dimensions en glissant

Module 3: Textes, photos et sections · Temps de lecture : 10 minutes

Objectif pédagogique : Après cette leçon, vous saurez construire une page à partir de blocs : ajouter un bloc via le sélecteur ou le chat, le déplacer, le copier et le supprimer, ajuster les espacements et les dimensions en les faisant glisser, et choisir pour chaque bloc les colonnes, les coins, l'arrière-plan et la visibilité sur mobile.

Notions clés : bloc, Blocs, Ajouter un bloc, forme, Bloc en dessous, trois designs, Créer avec l'IA, Modifier le bloc, Espacement, Espace entre les éléments, Colonnes, Coins, Masquer sur mobile, poignée, HTML personnalisé

Une page est une pile de blocs

Chaque page de votre site se compose de blocs : des bandes horizontales placées les unes sous les autres. En haut, vous trouvez généralement un Hero (la grande ouverture avec un titre, un texte et un bouton), puis par exemple des Cartes présentant vos services, des Avis, les Horaires d'ouverture et, tout en bas, un bloc Contact. Le constructeur propose 35 types de blocs, chacun dans une ou plusieurs formes : le même contenu, présenté autrement.

En raisonnant ainsi, vous construisez une meilleure page. Placez les informations les plus importantes en haut, un seul sujet par bloc, et terminez par ce que le visiteur doit faire (appeler, envoyer un e-mail, demander un devis). Chez Schildersbedrijf Example, la page d'accueil se présente ainsi : un Hero avec "Demander un devis", des Cartes avec trois services, un bloc Photo et texte sur la méthode de travail, des Avis, des Questions et un bloc Contact.

Ajouter un bloc : trois façons de faire

1. Choisir vous-même dans le sélecteur (gratuit)

Ouvrez le panneau Blocs dans la barre latérale, ou cliquez dans l'aperçu sur Bloc en dessous : ce bouton se trouve dans la barre d'outils d'un bloc sélectionné et sur la ligne avec un + qui apparaît lorsque vous passez la souris entre deux blocs. Sous l'aperçu se trouve également Ajouter un bloc.

Le sélecteur présente les types par groupes : Populaires, Ouverture et titre, Texte et histoire, Services et produits, Prix et offres, Confiance et équipe, Photo et vidéo, Infos pratiques, Contact et appel à l'action et Personnalisé et widgets. Un champ de recherche est disponible ("Rechercher, par exemple avis, prix ou équipe"). Chaque type s'affiche sous forme d'aperçu dans votre propre identité visuelle. Cliquez sur un type pour voir ses formes et choisissez-en une avec Ajouter. Si vous n'êtes pas passé par un bloc précis, le constructeur vous demande "Où doit aller ... ?" : cliquez sur une ligne verte dans votre page, ou choisissez En haut ou En bas. Vous pouvez aussi faire glisser un bloc directement depuis le panneau vers votre page.

Cela ne coûte rien. Le nouveau bloc arrive avec des textes d'exemple que vous modifiez ensuite vous-même (leçon 3.2) ou que vous faites remplir par l'IA (leçon 3.1). Important : tant que votre site contient ce type de texte d'exemple, le constructeur ne le met pas en ligne. Vous voyez alors le message "Votre site contient encore du texte d'exemple. Remplissez-le d'abord ou supprimez le bloc."

2. Demander dans le chat : trois designs

Si vous tapez dans le chat "Je veux un bloc présentant notre méthode de travail en quatre étapes", l'IA vous montre d'abord trois designs adaptés issus de la bibliothèque de blocs, dans votre identité visuelle. Vous choisissez avec Ce design, ou vous cliquez sur Laisser l'IA choisir. L'IA remplit ensuite le bloc avec du contenu, sous forme de proposition. Comme un bloc est ajouté, cela coûte 2 modifications.

Si vous précisez qu'un élément doit aller dans un bloc existant ("mets les horaires d'ouverture dans le bloc contact"), ou si vous mentionnez un service comme Spotify ou Calendly avec un lien, le constructeur saute l'étape des trois designs : ce que vous voulez est alors clair.

3. Faire créer un bloc sur mesure

Vous ne trouvez pas ce que vous cherchez ? En haut du sélecteur se trouve Créez votre propre bloc avec l'IA. Décrivez ce que les visiteurs doivent pouvoir faire, par exemple un calculateur de prix ou un court quiz, puis cliquez sur Créer avec l'IA. Cela coûte 2 modifications, car un nouveau bloc est ajouté.

Déplacer, copier et supprimer

Passez la souris sur un bloc. Une barre d'outils apparaît avec Modifier avec l'IA, Monter, Descendre, Dupliquer, Bloc en dessous et Supprimer, ainsi qu'une poignée pour faire glisser le bloc ("Faites glisser ce bloc à un autre endroit"). Avec Supprimer, le constructeur demande d'abord "Sûr ?". Vous pouvez aussi faire glisser, dupliquer et supprimer des éléments individuels au sein d'une rangée, comme une seule carte ou un seul avis.

Tous ces boutons sont gratuits. Chaque action crée une nouvelle version ("Bloc déplacé (version ...)") : un bloc supprimé par erreur se récupère donc via Versions (leçon 3.5). En revanche, supprimer un bloc par une demande dans le chat coûte une modification : utilisez donc le bouton.

Ajuster les dimensions en glissant

Dans l'aperçu, passez la souris sur un bloc, une photo ou un texte : des poignées apparaissent. Faire glisser est gratuit et se fait sans IA :

• Bord inférieur d'un bloc : plus ou moins d'espace au-dessus et en dessous du bloc.
• Hero : le rendre plus haut ou plus bas.
• Photo : plus large ou plus étroite, plus haute ou plus plate (la forme), des coins plus arrondis ou plus droits, et le point focal (leçon 3.3).
• Bloc de texte : plus large ou plus étroit (bord droit).
• Titre : plus grand ou plus petit, et l'espace en dessous.
• Rangée de cartes ou de colonnes : la largeur de toute la rangée.

Double-cliquez sur une poignée pour retrouver la taille par défaut ; pour le hero, le constructeur choisit alors de nouveau lui-même la hauteur.

Pourquoi faire glisser vaut mieux que demander "agrandis-le" : vous voyez immédiatement le résultat, cela ne coûte rien et l'IA ne modifie aucun texte au passage.

Modifier le bloc : les réglages d'un seul bloc

Cliquez sur un bloc et choisissez Modifier le bloc. Une fenêtre s'ouvre avec :

En dessous se trouvent les mêmes boutons que dans la barre d'outils (Monter, Descendre, Dupliquer, Bloc en dessous, Supprimer) et, sous "Ou demandez autre chose à l'IA :", un champ de texte pour une demande à l'IA qui ne concerne que ce bloc.

Quelques conseils. Alternez les arrière-plans (aplat clair, aucun, teinte) pour que les visiteurs voient où un sujet se termine. Sur une rangée de cartes, utilisez au maximum trois ou quatre colonnes ; sur un téléphone, elles s'affichent de toute façon les unes sous les autres. Utilisez Masquer sur mobile avec modération : ne masquez jamais vos coordonnées ni rien dont un visiteur sur mobile a besoin. Pour vérifier le rendu, choisissez Mobile dans la barre supérieure.

HTML personnalisé

Dans le groupe Personnalisé et widgets se trouve aussi HTML personnalisé : un bloc dans lequel vous collez vous-même du HTML et, si vous le souhaitez, du CSS. Une fois le bloc placé, vous le modifiez avec Modifier le HTML sur le bloc. Les couleurs et les polices suivent votre identité visuelle grâce à des variables comme var(--acc), var(--tekst) et var(--kop-font). Le CSS ne s'applique qu'à ce bloc.

Les limites sont volontaires : les scripts, les iframes et les formulaires ne fonctionnent pas ici. Pour un lecteur, un agenda, une carte ou un formulaire provenant d'un autre service, utilisez le Widget (leçon 4.3). Le HTML personnalisé s'adresse à ceux qui connaissent le HTML ; pour tous les autres, les blocs habituels et l'IA sont la voie la plus rapide.

Pièges à éviter

• Laisser du texte d'exemple dans un bloc issu du sélecteur : vous ne pourrez alors pas mettre le site en ligne.
• Trop de blocs. Une longue page de dix blocs n'est pas lue. Supprimez ce qui n'apporte rien. Une page compte au maximum 40 blocs, mais vous n'en aurez jamais besoin d'autant.
• Régler l'espacement via le chat. Cela coûte des modifications et c'est moins précis que de faire glisser.
• Ne regarder que sur l'ordinateur. Les colonnes, l'espacement et le masquage se comportent différemment sur un téléphone.
• Supprimer via le chat alors que le bouton Supprimer est gratuit.

Dans le constructeur : comment procéder

1. Dans l'aperçu, cliquez sur Bloc en dessous, ou ouvrez Blocs.
2. Choisissez un groupe, un type et une forme, puis cliquez sur Ajouter.
3. Remplacez les textes d'exemple vous-même ou avec l'IA.
4. Déplacez le bloc avec Monter, Descendre ou la poignée ; dupliquez ou supprimez via la barre d'outils.
5. Faites glisser le bord inférieur pour l'espacement ; double-cliquez pour revenir à la valeur par défaut.
6. Ouvrez Modifier le bloc pour l'arrière-plan, les colonnes, les coins, la hauteur du hero et Masquer sur mobile.
7. Vérifiez sur Mobile.

Résumé

• Une page est une pile de blocs ; 35 types, chacun dans une ou plusieurs formes.
• Ajouter via le sélecteur est gratuit et fournit un texte d'exemple que vous devez remplacer avant la mise en ligne ; via le chat, vous recevez trois designs et cela coûte 2 modifications.
• Déplacer, dupliquer, supprimer et ajuster les dimensions en glissant sont gratuits ; un double-clic sur une poignée rétablit la valeur par défaut.
• Modifier le bloc règle l'arrière-plan, l'espacement, l'espace entre les éléments, les colonnes, les coins, la hauteur du hero et Masquer sur mobile.
• Le HTML personnalisé est possible, mais sans scripts, iframes ni formulaires ; pour cela, il y a le widget.

Quiz

Exercice

Exercice D3.4 : Une section en plus, une en moins. Améliorez la structure de votre page d'accueil avec les boutons et les poignées, sans demandes inutiles à l'IA.

Liste de contrôle :

• [ ] noter les blocs de votre page d'accueil, de haut en bas ;
• [ ] ajouter un bloc via le sélecteur et remplacer tout le texte d'exemple ;
• [ ] supprimer ou fusionner un bloc qui n'apportait rien, avec Supprimer ;
• [ ] déplacer un bloc avec Monter, Descendre ou la poignée ;
• [ ] faire glisser l'espacement d'au moins un bloc, et le rétablir une fois par un double-clic ;
• [ ] modifier l'arrière-plan ou les colonnes dans Modifier le bloc ;
• [ ] vérifier la page sur Mobile.

Questions :

1. Quel était l'ordre de vos blocs avant et après, et pourquoi avez-vous choisi cet ordre ?
2. Quel bloc avez-vous supprimé, et pourquoi ne manquera-t-il pas à un visiteur ?
3. Combien de modifications cet exercice vous a-t-il coûté, et quelle étape aurait coûté des modifications via le chat ?

Après "terminé", vous voyez un exemple de réponse : de Hero, Chiffres, Cartes, Avis, Contact à Hero, Cartes, Photo et texte (méthode de travail), Avis, Questions, Contact, afin que les services apparaissent juste sous l'ouverture ; le bloc Chiffres a été supprimé car les chiffres étaient inventés ; l'exercice a coûté 0 modification, alors qu'une suppression ou un nouveau bloc via le chat en aurait coûté 1 ou 2.

Pour aller plus loin

• Formation gratuite Être trouvé en ligne 3.2: Les titres et la structure d'une page
• Formation gratuite Être trouvé en ligne 4.2: Le mobile d'abord et la balise viewport
• Sitebuilder et AI Builder : lequel choisir et comment l'ouvrir ?