Référence des blocs
Insérez n'importe quel bloc en tapant / dans l'éditeur. Tous les blocs ne sont pas disponibles partout : le tableau indique où utiliser chacun.
Disponibilité
| Bloc | Pages | Leçons | Emails | Blog | Formulaires |
|---|---|---|---|---|---|
| Titre 1 / 2 / 3 | ✓ | ✓ | ✓ | ✓ | ✓ |
| Petit texte | ✓ | ✓ | ✓ | ✓ | ✓ |
| Image | ✓ | ✓ | ✓ | ✓ | ✓ |
| Vidéo (Pro) | ✓ | ✓ | — | — | ✓ |
| Vidéo externe | ✓ | ✓ | ✓ | ✓ | ✓ |
| Audio (Pro) | ✓ | ✓ | — | ✓ | ✓ |
| Fichier | ✓ | ✓ | ✓ | ✓ | ✓ |
| Bouton | ✓ | ✓ | ✓ | ✓ | — |
| Ligne | ✓ | ✓ | ✓ | ✓ | ✓ |
| 2 Colonnes | ✓ | ✓ | — | — | — |
| 3 Colonnes | ✓ | ✓ | — | — | — |
| Conteneur | ✓ | ✓ | — | ✓ | — |
| Bannière | ✓ | ✓ | — | ✓ | — |
| Section déroulante | ✓ | ✓ | — | ✓ | — |
| Formulaire email | ✓ | ✓ | — | ✓ | — |
| Produit | ✓ | ✓ | — | — | — |
| Timer (Pro) | ✓ | ✓ | — | — | — |
| Calendrier | ✓ | — | — | — | — |
| Template | ✓ | ✓ | ✓ | ✓ | — |
| Code (Pro) | ✓ | ✓ | — | ✓ | ✓ |
| Prénom (variable) | — | — | ✓ | — | — |
« Emails » couvre à la fois les emails que vous envoyez depuis Emails et les emails de vos automatisations.
Les formulaires ont aussi leurs propres blocs de questions (email, nom, numéro de téléphone, choix, réponses texte), présentés dans Types de champs.
Description des blocs
Titre 1 / 2 / 3 : des titres de section à trois niveaux. Titre 1 pour le titre principal, Titre 2 pour les sections, Titre 3 pour les sous-sections.
Petit texte : une ligne de texte plus petite et atténuée. Utile pour les sous-titres ou les informations secondaires sous un titre.
Ligne : une ligne horizontale pour séparer visuellement des sections.
2 Colonnes : une mise en page sur deux colonnes pour placer du contenu côte à côte.
3 Colonnes : une mise en page sur trois colonnes égales. Pratique pour comparer des fonctionnalités ou aligner des icônes.
Conteneur : une boîte qui regroupe des blocs. Utile pour les encadrés ou les sections mises en avant.
Bannière : un bloc pleine largeur pour un message clé ou une annonce. Vous pouvez ajouter une image de fond personnalisée depuis votre bibliothèque. Dès que vous ajoutez une photo, elle est légèrement assombrie pour que votre texte reste lisible et passe en blanc tout seul. Le curseur situé à côté du bouton image permet de doser cet assombrissement, jusqu'à revenir à la photo d'origine.
Section déroulante : une section repliable. Les visiteurs cliquent pour afficher le contenu. Idéal pour les FAQ.
Image : importez et affichez une image. Inclut un outil IA qui crée une image à partir d'une description que vous écrivez.
Vidéo : importez vos vidéos directement dans TinyPages. Recommandé pour les leçons de formation. (plan Pro uniquement)
Vidéo externe : collez le lien d'une vidéo hébergée sur YouTube, Vimeo, Loom, Wistia ou Tella pour l'afficher dans votre contenu. Dans un email, seules les vidéos YouTube, Loom et Wistia peuvent être ajoutées. Par exemple, pour ajouter une vidéo YouTube, tapez / dans l'éditeur, commencez à écrire « Vidéo externe » et choisissez ce bloc. Collez l'adresse de la vidéo dans le champ Coller l'URL de la vidéo, puis cliquez sur Ajouter une vidéo.
Audio : importez un fichier audio, lu avec un lecteur intégré. (plan Pro uniquement)
Fichier : un fichier (PDF, ZIP, etc.) que vos visiteurs téléchargent en un clic.
Bouton : un bouton avec un texte et une destination. Dans Destination, choisissez où mène le clic :
- une adresse que vous collez,
- une de vos pages web,
- la page de commande d'un produit,
- une Section de la page : le bouton fait défiler votre visiteur jusqu'à un titre de la même page. C'est pratique pour un bouton « Voir le programme » en haut d'une longue page de vente. Sélectionnez le titre dans la liste, où une petite icône à côté de chacun indique sa taille (titre 1, 2 ou 3).
Les sections de la page sont proposées sur les pages, les articles de blog et les leçons, mais pas dans les emails, où il n'y a rien à faire défiler.
Formulaire email : un formulaire d'inscription qui ajoute les visiteurs à vos contacts. Voir Bloc Formulaire email pour ses options.
Produit : affiche un de vos produits avec un bouton d'achat.
Timer : un compte à rebours en direct pour les offres limitées dans le temps. (plan Pro uniquement)
Calendrier : affiche votre calendrier de réservation sur la page, pour que vos visiteurs prennent rendez-vous avec vous sans la quitter. Il fonctionne avec Calendly, TidyCal et Cal.com : connectez d'abord votre compte dans Paramètres → Intégrations, puis insérez le bloc et choisissez l'événement à afficher.
Template : insérez un bloc réutilisable sauvegardé. Voir Templates.
Code : ajoutez du HTML, CSS ou JavaScript. (plan Pro uniquement) Voir comment se comporte le bloc Code.
Prénom : insère automatiquement le prénom du destinataire. Disponible uniquement dans les emails.
Le bloc Code
Le bloc Code sert à tout ce que TinyPages ne propose pas sous forme de bloc : un formulaire d'un autre outil, un quiz, un simulateur, ou une section entière écrite par Claude ou ChatGPT. Savoir comment il se comporte vous évite bien des allers-retours, et ça vaut le coup de partager cette section avec l'IA qui écrit votre code.
- Votre code tourne à part du reste de la page. Il ne récupère ni les polices, ni les couleurs, ni les styles de votre page : mettez dans le bloc le CSS dont il a besoin. Dans l'éditeur, le bloc affiche votre code. Pour voir le résultat, ouvrez la page avec Prévisualiser ou consultez-la une fois publiée.
- Le bloc s'adapte à son contenu. Sa hauteur s'ajuste toute seule, même quand votre code change de taille après le chargement, par exemple un accordéon qui s'ouvre ou un formulaire qui passe à l'étape suivante.
- Les liens s'ouvrent dans le même onglet. Un lien de votre code remplace toute la page par sa destination, comme n'importe quel lien de votre site. Ajoutez
target="_blank"pour l'ouvrir plutôt dans un nouvel onglet. - Vous pouvez faire un lien vers une section de votre code. Donnez un
idà la section, par exemple<section id="tarifs">. Un lien écrit<a href="#tarifs">dans le bloc y fait défiler la page, et l'adressevotresite.com/votre-page#tarifsy mène directement. C'est pratique pour un sommaire, ou pour envoyer un client pile sur le paragraphe qui répond à sa question. - Le suivi de vos pubs et les codes promo passent aussi. Quand l'adresse de votre page contient des paramètres UTM (
utm_source,utm_campaign…), les codes que Google et Facebook ajoutent aux clics sur vos pubs ou uncoupon, votre code les reçoit aussi. Un formulaire Kit ou d'un autre outil enregistre alors d'où vient le visiteur, et une page de commande TinyPages intégrée dans le bloc applique le code promo. - Les éléments fixes restent dans le bloc. Une barre ou un bouton en
position: fixedreste collé au bloc, pas à la fenêtre du navigateur.
Le bloc tient dans la colonne de la page. Pour l'étaler sur toute la largeur de la fenêtre, voir Étaler un bloc Code sur toute la largeur de la fenêtre.