Le bloc Icône vous permet d'ajouter une seule icône évolutive à n'importe quelle page SeedProd. Avec l'accès à des milliers d'icônes Font Awesome, vous pouvez rapidement placer des symboles visuels qui soutiennent votre contenu — qu'il s'agisse d'une icône de média social, d'une flèche directionnelle, d'un indicateur de fonctionnalité ou d'un accent 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 polyvalent pour les boutons, les listes de fonctionnalités, les appels à l'action, et plus encore.
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, faites glisser 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. Recherchez 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, Centre ou Droite. Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Couleur : Définissez la couleur de l'icône à l'aide du sélecteur de couleur.
- Taille : Définissez la taille de l'icône de 10 à 150 px à l'aide du curseur.
- Lien : Entrez éventuellement une URL pour faire de l'icône un lien cliquable. Cliquez sur l'icône de paramètres à côté du champ de lien pour révéler des options de lien 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 attribut
rel="nofollow"au lien, indiquant aux moteurs de recherche de ne pas transmettre l'équité du lien à la destination.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser le style de l'ombre et l'espacement de votre bloc Icône.
Styles :
- Ombre de texte : Ajoutez un effet d'ombre à l'icône. Choisissez parmi Aucune, Cheveu, Petite, Moyenne, Grande, Très grande ou 2x Très grande pour donner à l'icône de la profondeur et une emphase visuelle.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc Icône (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Icône (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Icône, 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 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 Icône sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Icône sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Icône sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez un effet d'animation qui se joue lorsque le bloc Icône défile dans la vue, tel que Rebondir, Fondu, Zoom avant, Rotation avant, et bien d'autres.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Icône et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Icône à votre page ! Les icônes sont un moyen simple mais puissant d'ajouter de la clarté visuelle à votre contenu — elles guident le regard, renforcent le sens et donnent une impression de finition aux pages. Expérimentez avec différentes icônes, tailles et couleurs pour trouver la combinaison qui correspond le mieux à votre design.