Le bloc Liste de prix vous permet de créer une liste visuellement attrayante d'articles accompagnés de descriptions et de prix. Que vous présentiez le menu d'un restaurant, des offres de services ou des produits, ce bloc vous offre un moyen flexible et élégant de présenter vos articles.
Chaque élément de la liste peut inclure un titre, une description, un prix, un prix réduit facultatif, une image et un lien. Vous pouvez contrôler la mise en page générale, la position des images, l'alignement des prix et choisir parmi des modèles prédéfinis pour démarrer rapidement.
Ajouter le bloc Liste de prix à vos pages
Suivez ces étapes pour ajouter un bloc Liste de prix à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc Liste de prix dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Liste de prix pour ouvrir ses paramètres. L'onglet Contenu est organisé en trois sections : Éléments de la liste de prix, Mise en page et Zone d'image.
Articles de la liste de prix :
- Liste des éléments : chaque élément de la liste de prix apparaît sous forme de ligne pouvant être déplacée. Faites glisser les éléments pour les réorganiser. Passez la souris sur un élément pour afficher les boutons de duplication et de suppression. Cliquez sur le titre d'un élément pour développer ses paramètres individuels.
- Titre : Entrez le nom de l'élément tel qu'il apparaîtra dans la liste.
- Description : Entrez une description pour l'élément. Prend en charge le formatage de texte enrichi de base, notamment le gras, l'italique, le soulignement et les liens.
- Prix : Entrez le prix affiché pour l'article (par exemple, 20 $).
- Offrir une remise ? : Activez cette option pour afficher le prix réduit à côté du prix d'origine. Une fois cette option activée, renseignez le champ Prix réel: celui-ci deviendra le prix d'origine barré, tandis que le champ Prix affichera le montant de la remise.
- Image : téléchargez ou sélectionnez une image à afficher à côté de cet élément, ou saisissez directement l'URL de l'image dans le champ Image Src.
- Texte alternatif : Entrez un texte alternatif descriptif pour l'image de l'article à des fins d'accessibilité et de référencement.
- Lien : entrez une URL pour rendre cet élément cliquable. Fonctionne avec le paramètre « Boîte de lien complète » dans la section « Mise en page ».
- Ajouter un nouvel élément : cliquez sur le bouton situé au bas de la liste des éléments pour ajouter une nouvelle entrée à la liste de prix.
Mise en page :
- Position de l'image : définissez l'emplacement des images des articles par rapport au contenu textuel : en haut, à gauche, à droite ou aucune (aucune image affichée).
- Position du prix : choisissez l'emplacement du prix — À droite de l'en-tête (le prix apparaît sur la même ligne que le titre, séparé par la ligne de séparation titre-prix) ou Sous l'en-tête et la description (le prix apparaît après le texte de la description). Remarque : cette option n'est pas disponible lorsque la position de l'image est définie sur Haut.
- Séparateur de titre et de prix : choisissez le style de la ligne de séparation entre le titre de l'article et le prix lorsque la position du prix est définie sur À droite de l'en-tête — Plein, Pointillé, Tiré ou Aucun.
- Alignement global : définissez l'alignement horizontal de tous les éléments : à gauche, au centre ou à droite.
- Alignement vertical : définissez l'alignement vertical de l'image et du texte dans chaque ligne : en haut, au centre ou en bas. Disponible lorsque la position de l'image n'est pas définie sur Haut.
- Cochez la case Lien complet pour rendre cliquable toute la ligne de l'élément à l'aide de l'URL de lien définie pour chaque élément, plutôt que seulement le titre de l'élément.
Zone d'image :
- Forme : choisissez la forme appliquée à toutes les images d'articles — Par défaut (carrée), Arrondie (légèrement arrondie), Cercle (entièrement circulaire) ou Personnalisée (définissez votre propre rayon de bordure pour chaque coin).
- Largeur : définissez la largeur de la zone d'image entre 1 et 300 pixels.
- Rayon de la bordure de l'image : lorsque la forme est définie sur Personnalisée, définissez le rayon de chaque coin individuellement (en haut à gauche, en haut à droite, en bas à droite, en bas à gauche).
Étape 2a : Choisissez un style de modèle
Dans l'onglet Modèles, vous pouvez choisir parmi des modèles de mise en page prédéfinis pour configurer rapidement l'apparence de votre liste de prix.
- Modèles disponibles : choisissez parmi 3 modèles : modèle avec mise en page à gauche (image à gauche), modèle avec mise en page à droite (image à droite) et modèle sans image (texte et prix uniquement, sans images). En cliquant sur un modèle, vous appliquez instantanément ses paramètres de mise en page et d'espacement.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez affiner la typographie, les couleurs, les bordures et l'arrière-plan de votre bloc Liste de prix.
Styles :
- Typographie des titres : définissez la police, la taille, l'épaisseur et le style de tous les titres des éléments.
- Description Typographie : définissez la typographie pour tous les textes de description des articles.
- Typographie des prix : définissez la typographie pour tous les textes indiquant le prix des articles.
- Couleur du titre : définissez la couleur du texte du titre de l'élément.
- Description Couleur : définissez la couleur du texte de la description de l'article.
- Couleur du prix : définissez la couleur du texte indiquant le prix de l'article.
- Couleur de la remise : définissez la couleur du prix d'origine barré qui s'affiche lorsqu'une remise est activée sur un article.
- Ombre du texte : ajoutez un effet d'ombre au texte — choisissez parmi Aucun, Très fin, Petit, Moyen, Grand, Très grand ou 2 fois plus grand.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Liste de prix (haut, droite, bas, gauche). Cela détermine l'espace qui apparaît entre le bloc et les éléments environnants sur la page.
- Remplissage : ajustez l'espacement intérieur de votre bloc Liste de prix (haut, droite, bas, gauche). Cela crée un espace entre le contenu de la liste et les bords du bloc.
Frontière :
- Style de bordure : définissez le style de bordure du bloc : pleine, pointillée ou en pointillés.
- Couleur de la bordure : définit la couleur de la bordure du bloc.
- Largeur de la bordure : définissez l'épaisseur de la bordure pour chaque côté (haut, droite, bas, gauche).
- Rayon de bordure : définit l'arrondi des coins du bloc.
Contexte :
- Couleur d'arrière-plan : définissez une couleur d'arrière-plan unie pour l'ensemble du bloc Liste des prix.
- Image d'arrière-plan : téléchargez ou sélectionnez une image d'arrière-plan pour le bloc, avec des options pour la position, la taille et le comportement de répétition.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc Liste de prix. Cet identifiant est créé automatiquement par SeedProd pour la personnalisation du style ou le ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez n'importe quel attribut HTML à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur.
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc Liste des prix sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc Liste des prix sur les tablettes.
- Masquer sur mobile : masquer le bloc Liste des prix sur les appareils mobiles.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Liste de prix et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Liste de prix à votre page ! Utilisez-le pour créer des listes attrayantes et informatives qui permettent aux visiteurs de parcourir facilement vos offres, de comparer les prix et de passer à l'action. Testez différentes mises en page, formes d'images et styles de modèles pour créer une liste de prix qui correspond parfaitement à votre marque.