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 succès à vos visiteurs de manière visuellement proéminente.
Les boîtes d'alerte sont parfaites 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. Avec 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 Alerte à vos pages
Suivez ces étapes pour ajouter un bloc Alerte à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Alerte dans la section souhaitée de votre page.
Le bloc Alerte se trouve sous Design > 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 accompagné de couleurs appropriées pour transmettre le bon ton de message.
- Bouton Fermer : Activez ou désactivez un bouton de fermeture qui permet aux visiteurs de masquer l'alerte. Activez cette option pour les messages non critiques que les utilisateurs peuvent vouloir masquer.
- Titre : Entrez le titre principal de votre message d'alerte. Il doit être concis et accrocheur.
- Description : Ajoutez du 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 de votre titre d'alerte (gauche, centre ou droite).
- Alignement de la description : Définissez l'alignement horizontal du texte de description de votre alerte.
- Taille de police du titre : Ajustez la taille du texte du titre pour vous assurer qu'il est proéminent et lisible.
- Taille de police de la description : Contrôlez la taille du texte de description pour une lisibilité optimale.
- Balise de titre : Choisissez la balise de titre 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 ou désactivez l'affichage d'une icône à côté de votre message d'alerte. Les icônes fournissent des indices visuels 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 de l'icône.
Étape 2a : Choisir 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 de conception différents, chacun avec des mises en page et des traitements visuels uniques. Prévisualisez chaque style pour trouver celui qui correspond le mieux à la conception de votre page.
L'onglet Modèles fournit quatre styles prédéfinis pour personnaliser rapidement l'apparence de votre alerte.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc d'alerte :
Styles :
- Typographie : Contrôlez les propriétés de la police de votre titre d'alerte, y compris la famille de polices, le poids et le style.
- Typographie du texte : Personnalisez les propriétés de la police de votre texte de description d'alerte.
- Couleur : Définissez la couleur du texte de votre titre d'alerte.
- Couleur de la description : Choisissez la couleur du texte de description de votre alerte.
- Couleur de la fermeture : Définissez la couleur du bouton de fermeture (icône X) qui ferme l'alerte.
- Arrière-plan du titre : Ajoutez une couleur d'arrière-plan spécifiquement pour la zone de titre de votre alerte.
- Couleur d'arrière-plan : Définissez la couleur d'arrière-plan globale de toute 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 Aucune, Cheveu, Petite, Moyenne, Grande, Très grande, Très très grande ou Personnalisée.
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.
- Rembourrage : Ajustez l'espacement intérieur de votre boîte d'alerte (Haut, Droite, Bas, Gauche). Cela crée un espace de respiration 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 style personnalisé ou le ciblage 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 wrapper de l'alerte. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, role|alert).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc d'alerte sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc d'alerte sur les appareils tablettes.
- Masquer sur mobile : Masquez 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 incluent Rebond, Fondu, Zoom avant, Rotation avant, et bien d'autres. Cela attire immédiatement l'attention sur vos messages importants.
L'onglet Avancé fournit des options de style étendues, y compris 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 d'alerte et de personnaliser son apparence, assurez-vous d'enregistrer votre travail.
Vous avez ajouté avec succès un bloc d'alerte à votre page ! Ce bloc puissant vous aide à diffuser des informations importantes efficacement et à capter l'attention des visiteurs avec des messages accrocheurs et codés par couleur. Expérimentez avec 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.