Le bloc Icône vous permet d'ajouter une seule icône redimensionnable à n'importe quelle page SeedProd. Grâce à l'accès à des milliers d'icônes Font Awesome, vous pouvez rapidement placer des symboles visuels qui viennent appuyer votre contenu, qu'il s'agisse d'une icône de réseau social, d'une flèche directionnelle, d'un indicateur de fonctionnalité ou d'un élément décoratif.
Chaque icône peut être redimensionnée, colorée, alignée et, éventuellement, liée à n'importe quelle URL, ce qui en fait un élément de base polyvalent pour les boutons, les listes de fonctionnalités, les appels à l'action, etc.
Ajouter le bloc Icône à vos pages
Suivez ces étapes pour ajouter un bloc Icône à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc Icône dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Icône pour ouvrir ses paramètres. Dans l'onglet Contenu, configurez l'apparence et le lien de l'icône.
Icône :
- Icône : cliquez sur le sélecteur d'icônes pour parcourir et sélectionner parmi des milliers d'icônes Font Awesome disponibles. Effectuez une recherche par mot-clé pour trouver rapidement l'icône dont vous avez besoin.
- Alignement : définissez l'alignement horizontal de l'icône dans sa section : à gauche, au centre ou à droite. Prend en charge les valeurs par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
- Couleur : définissez la couleur de l'icône à l'aide du sélecteur de couleurs.
- Taille : définissez la taille de l'icône entre 10 et 150 pixels à l'aide du curseur.
- Lien : vous pouvez éventuellement saisir une URL pour transformer l'icône en lien cliquable. Cliquez sur l'icône des paramètres à côté du champ du lien pour afficher des options supplémentaires.
- Ouvrir dans une nouvelle fenêtre : cochez cette option pour ouvrir l'URL liée dans un nouvel onglet du navigateur.
- No Follow : Cochez cette option pour ajouter un
rel="nofollow"attribut au lien, indiquant aux moteurs de recherche de ne pas transmettre l'équité du lien à la destination.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser le style de l'ombre et l'espacement de votre bloc Icône.
Styles :
- Ombre du texte : ajoutez un effet d'ombre à l'icône. Choisissez parmi Aucun, Très fin, Petit, Moyen, Grand, Très grand ou 2 fois plus grand pour donner de la profondeur à l'icône et la mettre en valeur.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Icon (haut, droite, bas, gauche). Prend en charge les valeurs par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
- Remplissage : ajustez l'espacement intérieur de votre bloc Icon (haut, droite, bas, gauche). Prend en charge les valeurs par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
Attributs :
- CSS ID : Affiche l'identifiant unique généré automatiquement pour votre bloc Icon, créé automatiquement par SeedProd pour un style personnalisé ou un 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 : masque le bloc d'icônes sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc d'icônes sur les tablettes.
- Masquer sur mobile : masquer le bloc Icône sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez un effet d'animation qui s'affiche lorsque le bloc Icône apparaît à l'écran, tel que Rebondir, Fondu entrant, Zoom avant, Rotation vers l'intérieur, et bien d'autres encore.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Icône et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Icône à votre page ! Les icônes sont un moyen simple mais efficace d'ajouter de la clarté visuelle à votre contenu : elles guident le regard, renforcent le sens et rendent les pages plus soignées. Essayez différentes icônes, tailles et couleurs pour trouver la combinaison qui correspond le mieux à votre design.