Référence des blocs de contenu
Un guide de tous les blocs de contenu de l’éditeur, des titres et des images aux témoignages, FAQ et formulaires, avec l’usage de chacun et ses principaux réglages.
Chaque page de votre boutique est construite avec des blocs. Cet article liste les blocs de contenu du panneau de gauche de l’éditeur, leur usage et leurs principaux réglages. Les blocs qui présentent vos produits et gèrent le panier et le paiement se trouvent dans Blocs de boutique : grille de produits, produit, panier et paiement.
Réglages communs à tous les blocs
Cliquez sur un bloc de la page pour ouvrir ses réglages. La plupart des blocs les regroupent sous Général, Apparence et Typographie. Chaque bloc a aussi Taille et position, où vous définissez sa place dans la grille et pouvez le masquer sur tablette ou téléphone, et Gérer, avec Dupliquer et Supprimer. Voir Ajouter, déplacer et redimensionner des blocs et Adapter votre site aux téléphones et aux tablettes.
Quand un bloc propose des réglages de Typographie, ce sont toujours les mêmes : Police, Taille de police, Graisse, Couleur, Italique, Casse, Interlettrage et Interligne. Les tableaux ci-dessous les regroupent sous le terme « Typographie ».
Essentiels
| Bloc | À quoi il sert | Principaux réglages |
|---|---|---|
| Titre | Un titre ou un intertitre de section. | Texte, Taille (Titre 1 à Titre 6), Alignement, Typographie. |
| Texte | Un paragraphe de texte courant. | Texte, Alignement, Typographie. |
| Liste | Une courte liste de points, par exemple ce qui est inclus. | Éléments (un par ligne), Style de puce (Coche, Puce, Tiret, Numéroté ou Aucun), Espace entre les éléments, Typographie. |
| Bouton | Un bouton qui mène à une page ou à une adresse. | Libellé, Lien, Style (Plein, Contour ou Discret), Alignement, couleurs, Arrondi des angles, taille du texte, marges intérieures et Pleine largeur. |
| Émoji | Un grand émoji, comme simple décoration. | Émoji (choisissez-en un ou saisissez le vôtre), Taille de police, Alignement. |
Pour en savoir plus sur les textes et les boutons, voir Modifier les textes, les titres et les boutons. Le Lien d’un bouton fonctionne comme un lien de menu : voir Modifier les liens de votre menu.
Médias
| Bloc | À quoi il sert | Principaux réglages |
|---|---|---|
| Image | Une photo ou un visuel seul. | Image, Texte alternatif (une courte description pour les personnes qui ne voient pas l’image), Forme (Large 16:9, Standard 4:3, Carré ou Original), Ajustement de l’image (Remplir le cadre ou Contenir dans le cadre), Arrondi des angles. |
| Galerie | Une grille d’images, qui peuvent s’ouvrir en taille réelle au clic. | Images, Nombre de colonnes (1 à 6), Espacement de la grille, Forme, Arrondi des angles, Ouvrir en taille réelle au clic. |
| Vidéo | Une vidéo YouTube, lue directement sur votre page. | Lien YouTube. Payly n’héberge jamais de fichiers vidéo. |
| Carte | Une carte Google de votre atelier, de votre boutique ou de votre point de retrait. | Adresse ou lieu, Zoom, Forme, Arrondi des angles. Saisissez l’adresse comme vous la rechercheriez. |
Dans une Galerie, chaque image est ajoutée par son adresse web, avec une description et un lien facultatif. Pour utiliser une photo que vous avez importée, copiez son adresse depuis l’écran Médias. Voir Ajouter des images et utiliser la médiathèque.
Mise en page
| Bloc | À quoi il sert | Principaux réglages |
|---|---|---|
| Conteneur | Une boîte qui contient d’autres blocs, pour que vous puissiez les styler et les déplacer d’un seul bloc. | Disposition interne (Grille libre, Empilée ou Côte à côte), Espacement de la grille, Alignement des éléments, Couleur de fond, Couleur de bordure, Arrondi des angles, marges intérieures, Hauteur minimale. |
| Grille | Un tableau de lignes et de colonnes avec un bloc dans chaque cellule. Sur téléphone, elle devient une seule colonne. | Nombre de colonnes et Nombre de lignes (de 1 à 8 chacun), Espacement de la grille, Alignement des éléments, Contour des cellules, couleurs, marges intérieures. |
| Séparateur | Un trait fin entre deux parties d’une page. | Couleur, Épaisseur. |
| Espacement | De l’espace vide entre des blocs. | Hauteur. |
Voir Créer des mises en page avec des conteneurs et des grilles.
Marketing
| Bloc | À quoi il sert | Principaux réglages |
|---|---|---|
| Bandeau d’annonce | Un bandeau coloré et fin pour un court message, comme une offre de livraison, avec un lien facultatif. | Texte, Texte du lien, Lien, Alignement, Couleur de fond, Couleur du texte, Taille de police. |
| Témoignage | La citation d’un client avec un nom, une courte description, une photo et une note en étoiles. | Ce qu’ils ont dit, Nom, Description, Photo, Étoiles (0 à 5), Alignement, couleurs, Typographie. |
| Bandeau de logos | Une rangée de logos, par exemple de boutiques qui vendent vos créations ou de parutions dans la presse. | Logos, Nombre de colonnes, Espacement de la grille, Hauteur des logos, Atténuer les couleurs jusqu’au survol. |
| Compte à rebours | Un minuteur qui décompte jusqu’à une date, pour des soldes ou un lancement. | Décompte jusqu’au, Message une fois le temps écoulé, Afficher les libellés jours et heures, Alignement, Taille des chiffres, couleurs. |
| Liens sociaux | Des icônes qui mènent à vos comptes de réseaux sociaux. | Comptes (un réseau et une adresse pour chacun), Style (Cercle plein, Cercle contour ou Icône seule), Taille de l’icône, Espacement de la grille, Alignement, Couleur du cercle, Couleur de l’icône. |
Pour afficher un bandeau d’annonce sur toutes les pages, déposez-le dans votre en-tête. Le compte à rebours lit la date dans le fuseau horaire de chaque visiteur : minuit correspond donc à son propre minuit. Les liens sociaux proposent Instagram, Facebook, TikTok, X, YouTube, LinkedIn, Pinterest, WhatsApp, E-mail et Site web.
Menus et formulaires
| Bloc | À quoi il sert | Principaux réglages |
|---|---|---|
| Formulaire | Un formulaire de contact dont les messages vous sont envoyés par e-mail. | Titre du formulaire, Description, Champs, Texte du bouton d’envoi, Message après envoi, couleurs. |
| FAQ | Des questions qui s’ouvrent pour afficher leurs réponses. | Titre, Questions (une question et une réponse chacune), Ouvrir la première réponse, Une seule réponse ouverte à la fois, Couleur de fond, Typographie. |
| Navigation | Votre logo et votre menu. Il se trouve déjà dans votre en-tête. | Logo du site, Logotype, Hauteur du logo, Disposition, Afficher le bouton du panier, Liens, couleurs. |
| Liste de liens | Une colonne de liens avec un titre, comme dans un pied de page. | Titre de la colonne, Liens, Couleur de fond, Police, Couleur, Taille de police. |
Voir Ajouter un formulaire de contact, Modifier les liens de votre menu et Personnaliser votre en-tête et votre pied de page.