Modifier vous-même le texte et les boutons

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

Objectif pédagogique : À l'issue de cette leçon, vous saurez modifier vous-même vos textes et vos boutons sans IA, utiliser les liens et la mise en forme, et envoyer chaque bouton au bon endroit : une page, une adresse e-mail, un numéro de téléphone, un autre site web ou une section.

Notions clés : Modifier, double-clic, barre de mise en forme, lien, Mot mis en valeur, Modifier le bouton, destination d'un bouton, mailto et tel, ancre (section), bouton d'envoi, Configurer le formulaire

Pourquoi modifier vous-même

Tout ne doit pas passer par l'IA. Une faute de frappe, un autre numéro de téléphone, une phrase à légèrement reformuler : vous irez plus vite en la tapant vous-même. Modifier vous-même est gratuit, se fait sans IA et sans proposition. Vous voyez immédiatement ce que vous faites, et l'IA ne change rien en chemin que vous n'avez pas demandé. Chaque fois que vous enregistrez, le constructeur crée une nouvelle version (« Votre texte a été enregistré en tant que version ... »), vous pouvez donc toujours revenir en arrière (leçon 3.5).

Règle simple : le contenu que vous connaissez déjà, tapez-le vous-même ; les nouveaux textes ou un autre style, demandez-les à l'IA. Bas, de Schildersbedrijf Example, laisse l'IA rédiger les textes sur ses services, mais il recopie lui-même son numéro d'immatriculation, son adresse et son numéro de téléphone. Ainsi, il est certain qu'ils sont exacts.

Modifier un texte dans l'aperçu

Dans l'aperçu, passez la souris sur un texte. Un petit bouton Modifier apparaît. Cliquez dessus, ou double-cliquez directement sur le texte. Le texte devient alors un champ de saisie et vous tapez dedans comme dans un traitement de texte.

Pour enregistrer ou annuler, utilisez le clavier :

• Dans un texte court, comme un titre : Entrée enregistre, Échap annule.
• Dans un texte plus long avec des paragraphes : Ctrl+Entrée enregistre (Entrée crée alors une nouvelle ligne), Échap annule.

Vous pouvez aussi commencer depuis le chat : sélectionnez un texte avec Choisir un élément et cliquez sur Modifier le texte à côté de l'étiquette. Les boutons Enregistrer et Annuler s'affichent alors en bas du chat.

Si vous voyez le message « Vous ne pouvez pas modifier cet élément directement. Demandez-le via le chat. », il s'agit d'un élément que le constructeur génère lui-même. Demandez alors la modification dans le chat, en désignant l'élément.

La barre de mise en forme : titres, listes, couleur et liens

Pendant la modification, une barre d'outils Mise en forme s'affiche près du texte, avec de petits boutons ; passez la souris dessus pour voir leur nom. Les boutons disponibles dépendent du type de texte : un titre en propose moins qu'un paragraphe. Vous y trouverez notamment :

• dans un texte plus long, le type de ligne : Texte normal, Intertitre, Petit intertitre ;
• Gras, Italique, Souligner, Barrer, Surligner ;
• Liste à puces, Liste numérotée, Citation ;
• Aligner (gauche, centre, droite) et Taille (plus petit, normal, plus grand, beaucoup plus grand) ;
• Couleur du texte, avec les couleurs de votre identité visuelle (couleur principale, deuxième couleur, couleur du texte, texte atténué, blanc, foncé) ;
• Ajouter ou modifier un lien et Supprimer le lien ;
• Mot mis en valeur : applique à un à quatre mots choisis le style d'accent de votre identité visuelle ;
• Effacer la mise en forme.

Au clavier, Alt+F10 vous amène à la barre d'outils.

Quelques conseils. Choisissez une couleur de votre identité visuelle, pas une couleur isolée : votre site reste ainsi sobre et tout s'harmonise. Si vous choisissez une couleur peu lisible sur le fond, le constructeur l'indique (« peu lisible sur ce fond »). Utilisez les intertitres pour structurer le texte et non pour agrandir quelque chose ; les moteurs de recherche et les lecteurs d'écran s'appuient sur cette structure (formation Être trouvé en ligne, leçon 3.2). Et utilisez le gras avec modération : si tout est en gras, plus rien ne ressort.

Un lien dans un texte

Sélectionnez les mots et cliquez sur Ajouter ou modifier un lien. Choisissez une Page de votre site, ou saisissez une adresse, une adresse e-mail ou un numéro de téléphone. Le constructeur accepte une adresse web (https://...), une adresse e-mail (mailto:), un numéro de téléphone (tel:), un chemin sur votre site (/page) ou une section (#section). S'il ne reconnaît pas l'adresse, il n'enregistre pas le lien et vous le signale.

Rédigez le texte du lien de sorte que le visiteur sache où il arrive. « Voir nos tarifs » vaut mieux que « cliquez ici ». C'est plus agréable pour les visiteurs et pour les personnes qui utilisent un lecteur d'écran.

Les boutons : le texte et leur destination

Un bouton comporte deux choses : le texte et la destination. Passez la souris sur un bouton et cliquez sur Modifier le bouton. Vous voyez :

• Texte du bouton ;
• Vers où ce bouton redirige-t-il ?, avec cinq choix.

Le constructeur vérifie ce que vous saisissez. Une adresse e-mail doit être valide, un numéro de téléphone doit comporter au moins 8 chiffres et une adresse web doit être une vraie adresse. Modifier le bouton est gratuit et sans IA.

Pourquoi c'est important : un bouton est souvent l'endroit le plus important d'une page. Un bouton « Demander un devis » qui ne mène nulle part vous fait perdre des clients. Si un lien n'a pas de destination, le constructeur vous avertit : « Ce lien ne mène encore nulle part et ne fonctionnera pas sur votre site publié. Choisissez une page ou une adresse. »

Attention avec le choix Appeler : le champ de saisie affiche 06 12345678 à titre d'exemple. C'est un exemple, pas un numéro. Saisissez votre propre numéro.

Le bouton d'envoi du formulaire n'est pas un lien

Le bouton sous votre formulaire de contact ressemble à n'importe quel autre bouton, mais il fait autre chose : il envoie le formulaire. Si vous passez la souris dessus, vous voyez Configurer le formulaire au lieu de Modifier le bouton. Si vous cliquez dessus, vous voyez Bouton d'envoi du formulaire et l'adresse à laquelle les messages arrivent. Si elle n'est pas encore configurée, il est indiqué « l'adresse e-mail de votre compte ». Modifier l'adresse vous amène à Paramètres > Formulaires. C'est là que vous configurez l'adresse et le reste du formulaire (leçons 4.3 et 5.3).

Si vous voulez que les visiteurs puissent vous écrire sans formulaire, ajoutez un bouton ordinaire avec le choix E-mail. Il fonctionne aussi sur le site gratuit sans forfait, car le visiteur écrit alors lui-même depuis son propre logiciel de messagerie.

Pièges à éviter

• Un numéro de téléphone uniquement dans le texte. Placez-le aussi dans un bouton ou un lien avec Appeler, pour que les visiteurs puissent appeler directement depuis leur téléphone.
• Des boutons qui mènent à la mauvaise page après le renommage ou la suppression d'une page. Si vous supprimez une page, le constructeur supprime aussi les liens qui y mènent et indique combien. Vérifiez ensuite vos boutons.
• Laisser des données d'exemple. Une adresse e-mail ou un numéro de la première version peut être inventé (leçon 2.4). Recopiez vous-même vos vraies coordonnées.
• Des couleurs hors de votre identité visuelle. Des couleurs isolées rendent votre site désordonné et parfois illisible.
• Faire « améliorer » par l'IA ce qui est déjà bien. Chaque demande à l'IA peut changer plus que vous ne le souhaitez. Les petites choses, faites-les vous-même.

Dans le constructeur : comment faire

1. Dans l'aperçu, passez la souris sur un texte et cliquez sur Modifier (ou double-cliquez).
2. Modifiez le texte ; utilisez la barre d'outils Mise en forme pour les titres, les listes et les liens.
3. Enregistrez avec Entrée (texte court) ou Ctrl+Entrée (texte plus long).
4. Passez la souris sur un bouton et cliquez sur Modifier le bouton.
5. Modifiez le Texte du bouton et choisissez une destination sous Vers où ce bouton redirige-t-il ?.
6. Cliquez sur le bouton d'envoi de votre formulaire et vérifiez via Configurer le formulaire où arrivent les messages.

Résumé

• Modifier vous-même le texte est gratuit, sans IA et sans proposition ; chaque enregistrement crée une nouvelle version.
• Avec la barre d'outils Mise en forme, vous créez des titres, des listes, de la couleur dans votre identité visuelle, des mots mis en valeur et des liens.
• Modifier le bouton permet de choisir la destination : Page, E-mail, Appeler, Site web ou Section.
• Le bouton d'envoi du formulaire n'est pas un lien ; l'adresse de réception se configure dans Paramètres > Formulaires.

Quiz

Exercice

Exercice D3.2 : Des boutons qui mènent quelque part. Passez en revue tous les boutons de votre page d'accueil et de votre page de contact, et donnez à chaque bouton une vraie destination.

Checklist :

• [ ] chaque bouton de la page d'accueil ouvert avec Modifier le bouton ;
• [ ] une destination choisie pour chaque bouton (Page, E-mail, Appeler, Site web ou Section) ;
• [ ] au moins un bouton avec Appeler ou E-mail contenant vos vraies coordonnées (pas 06 12345678) ;
• [ ] au moins un bouton avec Section vers une section de la même page ;
• [ ] le bouton d'envoi du formulaire consulté via Configurer le formulaire et l'adresse de réception vérifiée ;
• [ ] un texte modifié vous-même avec un lien via Ajouter ou modifier un lien ;
• [ ] vérifié sur Mobile que les boutons s'affichent correctement.

Questions :

1. Quel bouton ne menait d'abord nulle part ou au mauvais endroit, et où mène-t-il maintenant ?
2. À quelle adresse arrivent les messages de votre formulaire, et est-ce une adresse que vous consultez tous les jours ?
3. Quel texte de lien avez-vous choisi, et pourquoi ?

Après « terminé », vous verrez un exemple de réponse : le bouton « Demander un devis » dans le bandeau principal ne menait nulle part et défile désormais jusqu'à la section Contact ; les messages arrivent sur info@example.com, que Bas consulte tous les jours ; texte de lien « Voir nos tarifs » au lieu de « cliquez ici », car le visiteur sait ainsi où il arrive.

Pour aller plus loin

• Formation gratuite Être trouvé en ligne 3.2: Les titres et la structure d'une page
• Formation WordPress gratuite 4.1: L'éditeur de blocs
• Sitebuilder et AI Builder : lequel choisir et comment l'ouvrir ?