Écrire sur la page et ajouter des blocs

Écrire directement

Cliquez dans un texte et tapez : c’est tout. Quand vous sélectionnez un passage, une petite barre apparaît pour le mettre en gras, en italique, le barrer, ajouter un lien, et un bouton ✨ pour le retoucher avec l’IA. Dans le panneau de droite, l’onglet Bloc propose aussi les titres, les listes, la citation et l’alignement.

Dans cette barre, la liste Style du texte transforme le paragraphe où se trouve le curseur : Texte, Titre 1 à 4, Sur-titre (une courte ligne au-dessus d’un titre) ou Chapeau (un paragraphe d’introduction, plus grand). Chaque choix est montré tel qu’il s’affichera.

Le choix d’un lien propose une page, une section, une adresse e-mail ou un autre site, et aussi un article du blog, un produit ou une collection de la boutique (onglets Article, Produit et Collection). Le lien suit l’article dans chaque langue du site, et il est retiré proprement si l’article est dépublié.

Dans l’onglet Externe, une adresse de votre propre site qui commence par « / » (par exemple /boutique/ma-collection/) est acceptée : elle est mise dans la bonne langue à la publication.

Mettre des mots en valeur dans un titre

Dans un grand titre (Titre 1, Titre 2, ou le titre d’un bloc Hero), sélectionnez un ou deux mots et cliquez sur Italique : ils prennent l’accent du style de votre site. Selon le style, c’est une autre couleur, une police d’accent, parfois un dégradé, et les mots ne sont pas toujours penchés.

C’est la bonne façon de colorer un mot : l’accent suit le style si vous en changez, s’adapte tout seul au mode clair et au mode sombre, et reste lisible. Une couleur choisie à la main ne ferait rien de tout cela.

Ajouter un bloc avec la touche « / »

1. Placez le curseur sur une ligne vide.
2. Tapez / : le menu des commandes s’ouvre, classé par catégories (Section, Texte, Média, Contenu, Action).
3. Tapez quelques lettres pour filtrer (« gal » pour Galerie), puis validez.

Vous pouvez aussi cliquer sur Ajouter un objet… dans l’onglet Bloc du panneau de droite.

Les principaux blocs

• Texte et mise en page : titres, listes, citation, Encadré, Colonnes (2 à 4 zones côte à côte), Séparateur, Espaceur, Tableau, Sommaire.
• Médias : Image, Galerie, Média (vidéo, son, ou contenu YouTube, Vimeo, SoundCloud, Spotify…), Avant / après, Intégrer (une webcam, un agenda, un widget d’avis… par son adresse ou son code HTML).
• Présenter votre activité : Hero (bannière avec titre et boutons), Fonctionnalités, Grille de cartes, Équipe, Témoignages, Chiffres clés, Chronologie, Fiche technique, Récit défilant, Bandeau défilant, Nuage de logos.
• Prix : Forfaits (cartes de formules, avec au besoin un Prix barré et une Note sous le prix) et Tarifs (une liste de prestations et de prix par catégorie, comme une carte de restaurant).
• Interagir : Bouton CTA, Formulaire, FAQ, Carte, Réseaux sociaux, Newsletter, Réservation, Commentaires / Avis.
• Mettre en avant : Produits de la boutique et Articles de blog.

Le bloc Image propose cinq tailles : XS (150 px au plus, pour un logo ou un badge), S, M, L et 100 %.

Les articles du blog et de la documentation proposent les mêmes blocs que les pages, avec les mêmes gestes. Le bloc Commentaires / Avis, lui, n’est proposé que dans les articles du blog.

Les liens du Hero et de l’Équipe

Dans un bloc Hero, cliquez sur le bloc : le panneau de droite règle le texte et la destination de chaque bouton, avec le choix de lien habituel (une page, une section, une adresse e-mail, un autre site…).

Dans un bloc Équipe, chaque membre a son champ Page du membre : sa photo et son nom mènent alors à sa propre page, à une section ou à un autre site.

Le réglage Taille des photos du bloc Équipe va de S à XL. Un membre sans photo est représenté par ses initiales, qui suivent son nom. Choisissez Aucune pour un comité ou une liste de contacts présentés par leur nom et leur fonction seulement, sans photo ni initiales.

Le bloc Carte

Le bloc Carte place une carte à l’adresse de votre choix. Son Fournisseur est OpenStreetMap ou Google Maps. Avec Google Maps, Type de carte choisit entre Plan et Satellite (la vue aérienne, avec les noms de rues) : ce sont les deux vues que Google offre sans clé.

La grille de cartes

Cliquez sur un bloc Grille de cartes : le panneau de droite liste ses cartes. Dépliez une carte pour modifier son titre, son texte, sa méta, son prix et le libellé de son bouton ; une carte que vous ajoutez peut ainsi recevoir un bouton. Le champ Lien de la carte choisit où elle mène. Vous pouvez aussi cliquer sur le texte d’une carte, directement dans la page.

Le lien d’une carte se choisit comme les autres liens de TOWeb : une page du site, un article, un produit, une collection de la boutique, un fichier ou une adresse externe. Le réglage Alignement du texte centre le texte des cartes.

Quand il y a moins de cartes que de colonnes, une indication sous Colonnes vous dit combien de cartes ajouter pour remplir la rangée.

Le bloc Forfaits

Cliquez sur un bloc Forfaits : le panneau de droite liste ses formules. Le réglage Bouton place le bouton de chaque formule Sous le prix, au même niveau sur toutes les cartes, pour qu’il reste visible sans défiler, ou En bas de la carte.

Dans les Fonctionnalités d’une formule, chaque point peut porter un lien : cliquez sur l’icône Lien du point, puis choisissez une page du site, une ancre ou une adresse externe. Avec un Texte du lien (« Voir en démo », par exemple), il s’affiche en petit lien après le texte du point ; sans texte de lien, c’est le point entier qui devient le lien.

Modifier, déplacer, supprimer

Cliquez sur un bloc : ses réglages s’affichent dans l’onglet Bloc du panneau de droite. La poignée à gauche du bloc se fait glisser pour le déplacer ; un clic dessus ouvre le menu Monter, Descendre, Dupliquer, Supprimer.

Les titres et les paragraphes ont aussi leur poignée ⋮⋮, qui apparaît au survol : glissez-la pour déplacer le texte ailleurs dans la page, ou cliquez dessus pour ouvrir le même menu. Un bloc Colonnes a la sienne quand vous survolez son texte. Le texte d’une colonne, d’un tableau ou d’un encadré n’en a pas : c’est le bloc qui l’entoure qui se déplace.

Pour défaire un bloc Colonnes, cliquez dessus, puis sur Retirer les colonnes dans ses réglages : le contenu des colonnes est gardé, l’un sous l’autre, en pleine largeur, et une colonne vide disparaît.

Le sommaire d’une page

Le bloc Sommaire liste les titres d’une page, d’un article de blog ou d’un article de documentation, avec un lien vers chacun. Tapez / puis « sommaire », « table des matières » ou « plan », ou ajoutez-le depuis l’onglet Ajouter.

Il se construit seul à partir des titres qui le suivent : réglez Titres listés sur H2 et H3 ou H2 seulement. Il se met à jour à chaque publication et s’affiche dans la langue de chaque page, avec les mêmes liens dans toutes les langues. Laissé vide, son Titre devient « Sommaire », traduit lui aussi. Sur téléphone, il reste replié jusqu’à ce qu’on le touche.

Dans l’éditeur, sa carte montre les titres actuels. Tant qu’aucun titre ne le suit, il reste vide et ne s’affiche pas sur le site.

Le formulaire de contact

Tapez / puis choisissez Formulaire. Cliquez sur le bloc : ses réglages s’affichent dans l’onglet Bloc du panneau de droite.

Pour séparer le formulaire en groupes (« Vos coordonnées », « Votre projet »), ajoutez un champ de type Titre : un texte fixe, qui ne demande rien au visiteur.

• Champs : ajoutez-les un par un (texte, e-mail, téléphone, zone de texte, liste déroulante, choix unique, case à cocher, date, fichier), et indiquez s’ils sont obligatoires.
• Lien du libellé : sur une case à cocher, le libellé mène à un document, par exemple vos conditions générales. Il s’ouvre dans un nouvel onglet, sans perdre le formulaire en cours.
• Texte du bouton : ce qu’affiche le bouton d’envoi.
• Après l’envoi : Afficher un message (le Message de confirmation apparaît à la place du formulaire) ou Aller à une page : le visiteur arrive sur la page choisie, dans sa langue, une fois son message envoyé.
• Objet de l'e-mail : propre à chaque formulaire, il sert d’objet aux messages reçus quand le visiteur n’en a pas saisi, pour les trier d’un coup d’œil (« Devis », « Inscription »…).

Dans un champ Liste déroulante ou Choix unique, les flèches Monter l’option et Descendre l’option changent l’ordre des options, à la souris comme au clavier.

Les messages arrivent à l’adresse de réception des formulaires, réglée une fois pour tout le site dans Paramètres › i-Services. Pour qu’un formulaire écrive à une autre adresse, renseignez son Email destinataire dans les réglages du bloc.

Email destinataire accepte plusieurs adresses, séparées par une virgule : chacune reçoit son e-mail.

Sur le site publié, sous un champ e-mail (formulaire de contact, newsletter, commande, réservation), une faute de frappe dans l’adresse d’un grand webmail (gmail.vom, hotmial.com…) est signalée au visiteur par « Vouliez-vous dire … ? » : un clic la corrige. L’adresse saisie reste toujours acceptée telle quelle.

Protéger vos formulaires contre le spam

Dans Paramètres › i-Services, la rubrique Protection anti-spam protège les formulaires de contact, les commentaires du blog et les avis produits. Choisissez le Fournisseur CAPTCHA (Cloudflare Turnstile ou Google reCAPTCHA), puis collez la Clé du site et la Clé secrète que ce fournisseur vous a données.

À la publication, TOWeb vérifie auprès de Google ou de Cloudflare que la clé secrète est acceptée : une clé refusée laisserait passer le spam sans rien dire. L’écran Publier le signale, avec l’endroit où corriger la clé. Il signale aussi une protection à moitié réglée, quand la clé du site ou la clé secrète manque. Sans connexion, la publication part sans attendre.

Sur le site publié, le serveur du site vérifie chaque envoi. Avec reCAPTCHA v3, un envoi que Google juge automatique est refusé ; si Google ne répond pas, l’envoi est accepté, pour qu’aucun message de vos clients ne se perde. Avec Turnstile, une validation obtenue sur un autre site est refusée.

Sur une page protégée par mot de passe, un formulaire n’affiche pas de captcha : seuls les visiteurs qui ont saisi le mot de passe peuvent l’envoyer.

Le site limite aussi les envois en masse, même quand un robot envoie toutes ses demandes en même temps. L’e-mail d’accusé de réception envoyé au visiteur ne recopie son message que si le site a une protection anti-spam : sans elle, un robot pourrait se servir de votre site pour envoyer des e-mails à des tiers.

L’inscription à la newsletter

Avec le bloc Newsletter, le visiteur qui saisit son adresse reçoit un e-mail de confirmation. Son lien ouvre une page de votre site avec le bouton Confirmer mon inscription : seul ce bouton inscrit l’adresse. Un antivirus de messagerie qui ouvre les liens des e-mails reçus ne peut donc pas confirmer une inscription à la place de la personne.

Intégrer un service externe

Une webcam, un agenda en ligne, un widget d’avis, une prévision météo, un formulaire d’un autre service : le bloc Intégrer les place n’importe où dans vos pages.

1. Sur une ligne vide, tapez / puis Intégrer.
2. Dans le panneau de droite, choisissez ce que vous intégrez : Une adresse (la page du service, affichée dans un cadre dont vous réglez la hauteur) ou Un code HTML (le code que le service vous fournit, à copier-coller tel quel).
3. Décrivez en quelques mots Ce que montre l’intégration : c’est ce que lisent les lecteurs d’écran.
4. Ouvrez l’Aperçu pour voir le résultat : dans l’éditeur, le bloc s’affiche sous forme de carte.

En mode Un code HTML, le code se saisit directement dans le bloc, en couleurs, et l’onglet Aperçu montre le résultat. Le code peut atteindre 1 Mo, pour les services qui fournissent un code long.

Si le service dépose des cookies ou suit vos visiteurs, choisissez sa catégorie dans Consentement du visiteur : Mesure d'audience ou Marketing et réseaux sociaux. Le bloc attend alors que le visiteur accepte cette catégorie dans la bannière de cookies ; d’ici là, un message tient sa place, avec un lien pour gérer les cookies. Cela fonctionne avec la bannière de TOWeb comme avec celle de WebLegal.

Le code peut aussi contenir du PHP, comme une page .php de TOWeb 14 : la page qui le contient est publiée en index.php, à la même adresse. Avant la publication, TOWeb vérifie la syntaxe du code : une erreur arrête la publication en nommant la page et la ligne. Le code s’exécute sur votre hébergement, sous votre responsabilité, et au test local ; dans l’aperçu, un cadre tient sa place. Il n’est pas publié dans une page protégée par mot de passe. Pour vérifier que votre hébergement exécute PHP, utilisez Publier › Tester le serveur.

Copier ou dupliquer un passage

Un titre, son texte et une image se copient ensemble, comme dans un traitement de texte :

1. Sélectionnez le passage à la souris, du début du titre à la fin du dernier élément. Vous pouvez aussi cliquer au début, puis Maj + clic à la fin.
2. Copiez : ⌘C (Mac) ou Ctrl+C (Windows).
3. Cliquez à la fin de la ligne après laquelle placer la copie, puis appuyez sur Entrée : une ligne vide se crée.
4. Collez : ⌘V (Mac) ou Ctrl+V (Windows).

Pour reproduire toute une section, avec son fond et tout son contenu, utilisez plutôt Dupliquer dans ses commandes : voir l’article Les sections.

Afficher un bloc selon l’écran

En bas du panneau de chaque bloc, Afficher sur choisit les écrans où il apparaît : Ordinateur, Tablette et Mobile. Un bloc éteint sur un écran n’y apparaît pas sur le site publié, mais reste visible dans l’éditeur avec une pastille. L’Aperçu par appareil montre le résultat.