Le bloc Alerte vous permet d'ajouter des boîtes d'alerte colorées et accrocheuses à vos pages SeedProd. Ce bloc vous aide à communiquer des messages importants, des annonces, des avertissements ou des notifications de réussite à vos visiteurs de manière visuellement proéminente.
Les boîtes d'alerte sont idéales pour mettre en évidence les informations critiques qui nécessitent une attention immédiate, telles que les promotions spéciales, les mises à jour importantes, les notifications système ou les annonces urgentes. Grâce à des styles et des couleurs personnalisables, vous pouvez vous assurer que vos messages se démarquent et captent l'attention de vos visiteurs.
Ajouter le bloc d'alerte à vos pages
Suivez ces étapes pour ajouter un bloc d'alerte à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc Alerte dans la section souhaitée de votre page.
Le bloc Alerte se trouve sous Conception > Avancé et peut être glissé dans n'importe quelle section de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Alerte pour ouvrir ses paramètres. Dans l'onglet Contenu, vous pouvez personnaliser votre message d'alerte et son apparence.
Alerte :
- Type : choisissez parmi les styles d'alerte prédéfinis : Info (bleu, pour les informations générales), Succès (vert, pour les confirmations positives), Avertissement (jaune/orange, pour les mises en garde) ou Danger (rouge, pour les alertes critiques). Chaque type est associé à des couleurs appropriées afin de transmettre le ton adéquat du message.
- Bouton Ignorer : activez cette option pour afficher ou masquer un bouton de fermeture qui permet aux visiteurs d'ignorer l'alerte. Activez cette option pour les messages non critiques que les utilisateurs peuvent souhaiter masquer.
- Titre : Entrez le titre principal de votre message d'alerte. Il doit être concis et accrocheur.
- Description : ajoutez un texte détaillé pour expliquer votre message d'alerte. Cela fournit un contexte et des informations supplémentaires au-delà du titre.
- Alignement du titre : définissez l'alignement horizontal du titre de votre alerte (à gauche, au centre ou à droite).
- Description Alignement : définissez l'alignement horizontal du texte de description de votre alerte.
- Taille de la police du titre : ajustez la taille du texte du titre pour vous assurer qu'il soit bien visible et lisible.
- Taille de la police de la description : contrôlez la taille du texte de la description pour une lisibilité optimale.
- Balise de titre : choisissez la balise HTML pour votre titre (h1, h2, h3, h4, h5 ou h6). Cela affecte à la fois le référencement et la hiérarchie visuelle.
- Afficher l'icône : activez cette option pour afficher ou masquer une icône à côté de votre message d'alerte. Les icônes fournissent des indications visuelles rapides sur le type d'alerte.
- Icône : sélectionnez une icône personnalisée à afficher avec votre alerte. Choisissez une icône qui correspond à l'objectif de votre message.
L'onglet Contenu vous permet de configurer le type d'alerte, le contenu du message, l'alignement et les paramètres des icônes.
Étape 2a : Choisissez un style de modèle
Dans l'onglet Modèles, vous pouvez choisir parmi des styles d'alerte prédéfinis pour modifier rapidement l'apparence générale de votre boîte d'alerte.
- Choisissez parmi quatre modèles différents, chacun avec une mise en page et un traitement visuel uniques. Prévisualisez chaque style pour trouver celui qui correspond le mieux à la conception de votre page.
L'onglet Modèles propose quatre styles prédéfinis pour personnaliser rapidement l'apparence de votre alerte.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Alerte :
Styles :
- Typographie : contrôlez les propriétés de police pour le titre de votre alerte, notamment la famille, l'épaisseur et le style de police.
- Typographie du texte : personnalisez les propriétés de police pour le texte de description de votre alerte.
- Couleur : définissez la couleur du texte du titre de votre alerte.
- Description Couleur : choisissez la couleur du texte de description de votre alerte.
- Couleur du bouton Fermer : définissez la couleur du bouton Fermer (icône X) qui permet de fermer l'alerte.
- Arrière-plan du titre : ajoutez une couleur d'arrière-plan spécifique à la zone du titre de votre alerte.
- Couleur d'arrière-plan : définissez la couleur d'arrière-plan générale pour l'ensemble de la boîte d'alerte.
- Ombre du texte : ajoutez des effets d'ombre à votre texte d'alerte pour plus de profondeur et de lisibilité. Choisissez parmi Aucun, Très fin, Petit, Moyen, Grand, Très grand, 2 fois plus grand ou Personnalisé.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc d'alerte (haut, droite, bas, gauche). Cela détermine l'espace qui apparaît entre l'alerte et les éléments environnants.
- Remplissage : ajustez l'espacement intérieur de votre boîte d'alerte (haut, droite, bas, gauche). Cela crée un espace entre le contenu et les bordures de l'alerte.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc d'alerte. Cet ID est créé automatiquement par SeedProd pour le ciblage personnalisé des styles ou 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 tous les attributs HTML à l'élément d'encapsulation de l'alerte. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur (par exemple, rôle|alerte)
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc d'alerte sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc d'alerte sur les tablettes.
- Masquer sur mobile : masquer le bloc d'alerte sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque l'alerte apparaît à l'écran. Les options disponibles incluent Rebond, Fondu entrant, Zoom avant, Rotation et bien d'autres encore. Cela permet d'attirer immédiatement l'attention sur vos messages importants.
L'onglet Avancé offre de nombreuses options de style, notamment la typographie, les couleurs, l'espacement et les effets d'animation.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Alerte et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Alerte à votre page ! Ce bloc puissant vous aide à communiquer efficacement des informations importantes et à capter l'attention des visiteurs grâce à des messages accrocheurs et codés par couleur. Testez différents types d'alertes, styles de modèles et couleurs personnalisées pour créer des alertes qui correspondent à votre marque et communiquent clairement votre message.