Le bloc Liste de Prix vous permet de créer une liste d'articles visuellement attrayante accompagnée de descriptions et de prix. Que vous présentiez le menu d'un restaurant, des forfaits de services ou des offres de produits, ce bloc vous offre un moyen flexible et soigné de présenter vos articles.
Chaque article de la liste peut inclure un titre, une description, un prix, une remise optionnelle, une image et un lien. Vous pouvez contrôler la mise en page générale, la position de l'image, l'alignement du prix et choisir parmi des modèles prédéfinis pour commencer 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, faites glisser 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 : Articles de la liste de prix, Mise en page et Zone d'image.
Articles de la liste de prix :
- Liste des articles : Chaque article de la liste de prix apparaît comme une ligne déplaçable. Faites glisser les articles pour les réorganiser. Survolez un article pour révéler les boutons de duplication et de suppression. Cliquez sur le titre d'un article pour développer ses paramètres individuels.
- Titre : Entrez le nom de l'article tel qu'il apparaîtra dans la liste.
- Description : Entrez une description pour l'article. Prend en charge la mise en forme de texte enrichi de base, y compris le gras, l'italique, le soulignement et les liens.
- Prix : Entrez le prix affiché pour l'article (par exemple, 20 $).
- Offre de remise ? : Activez pour afficher un prix réduit à côté de l'original. Lorsqu'il est activé, entrez le champ Prix réel — cela devient le prix original barré, tandis que le champ Prix affiche le montant réduit.
- Image : Téléchargez ou sélectionnez une image à afficher à côté de cet article, ou entrez directement une URL d'image dans le champ URL de l'image.
- Texte alternatif : Entrez un texte alternatif descriptif pour l'image de l'article pour l'accessibilité et le référencement.
- Lien : Entrez une URL pour rendre cet article cliquable. Fonctionne avec le paramètre Boîte de lien complète dans la section Mise en page.
- Ajouter un nouvel article : Cliquez sur le bouton en bas de la liste des articles pour ajouter une nouvelle entrée de liste de prix.
Mise en page :
- Position de l'image : Définissez où les images des articles apparaissent par rapport au contenu textuel — Haut, Gauche, Droite ou Aucune (aucune image affichée).
- Position du prix : Choisissez où le prix apparaît — À droite du titre (le prix apparaît sur la même ligne que le titre, séparé par la ligne de séparation titre-prix) ou Sous le titre 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 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 — Uni, Pointillé, Tirets ou Aucun.
- Alignement général : Définissez l'alignement horizontal de tous les articles — Gauche, Centre ou Droite.
- Alignement vertical : Définissez la façon dont l'image et le contenu textuel s'alignent verticalement dans chaque ligne — Haut, Centre ou Bas. Disponible lorsque la position de l'image n'est pas définie sur Haut.
- Boîte de lien complète : Activez pour rendre toute la ligne de l'article cliquable en utilisant l'URL de lien définie pour chaque article, plutôt que seulement le titre de l'article.
Zone d’image :
- Forme : Choisissez la forme appliquée à toutes les images d'articles — Par défaut (carré), Arrondi (légèrement arrondi), Cercle (entièrement circulaire) ou Personnalisé (définissez votre propre rayon de bordure par coin).
- Largeur : Définissez la largeur de la zone d'image de 1 à 300px.
- Rayon de bordure de l'image : Lorsque la forme est définie sur Personnalisé, définissez le rayon du coin individuellement pour chaque coin (Coin supérieur gauche, Coin supérieur droit, Coin inférieur droit, Coin inférieur gauche).
Étape 2a : Choisir 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 de mise en page gauche (image à gauche), Modèle de mise en page droite (image à droite) et Modèle sans image (texte et prix uniquement, sans images). Cliquer sur un modèle applique instantanément sa mise en page et ses paramètres d'espacement.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez affiner la typographie, les couleurs, les bordures et l'arrière-plan de votre bloc de liste de prix.
Styles :
- Typographie du titre : Définissez la famille de polices, la taille, le poids et le style de tous les titres d'articles.
- Typographie de la description : Définissez la typographie de tout le texte de description des articles.
- Typographie du prix : Définissez la typographie de tout le texte de prix des articles.
- Couleur du titre : Définissez la couleur du texte du titre de l'article.
- Couleur de la description : Définissez la couleur du texte de description de l'article.
- Couleur du prix : Définissez la couleur du texte du prix de l'article.
- Couleur de la remise : Définissez la couleur du prix d'origine barré affiché lorsqu'une remise est activée sur un article.
- Ombre portée du texte : Ajoutez un effet d'ombre au texte — choisissez parmi Aucune, Cheveux fins, Petite, Moyenne, Grande, Très grande ou 2x grande.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc de 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.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc de liste de prix (Haut, Droite, Bas, Gauche). Cela crée un espace entre le contenu de la liste et les bords du bloc.
Bordure :
- Style de bordure : Définissez le style de bordure du bloc — Uni, Pointillé ou Tirets.
- Couleur de bordure : Définissez la couleur de la bordure du bloc.
- Épaisseur de bordure : Définissez l'épaisseur de la bordure par côté (Haut, Droite, Bas, Gauche).
- Rayon de bordure : Définissez l'arrondi des coins du bloc.
Arrière-plan :
- Couleur d'arrière-plan : Définissez une couleur d'arrière-plan unie pour l'ensemble du bloc de liste de 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 ID est créé automatiquement par SeedProd pour le ciblage de styles personnalisés ou de JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML à l’élément d’encapsulation du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Liste de prix sur les écrans d’ordinateur.
- Masquer sur tablette : Masquez le bloc Liste de prix sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Liste de 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, assurez-vous de sauvegarder 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 à vos visiteurs de parcourir facilement vos offres, de comparer les prix et de passer à l’action. Expérimentez avec 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.