Le bloc Boîte à icônes vous permet de combiner une icône Font Awesome avec un titre et un texte descriptif dans une mise en page unique et unifiée. Ce bloc est idéal pour mettre en évidence des fonctionnalités, des avantages, des services ou tout contenu qui bénéficie d'un symbole visuel associé à une courte explication.
Avec un contrôle total sur la taille, la couleur, l'alignement, l'espacement et la typographie de l'icône, le bloc Boîte à icônes est l'un des blocs les plus polyvalents pour créer des sections de fonctionnalités et des mises en page de proposition de valeur.
Ajouter le bloc Boîte à icônes à vos pages
Suivez ces étapes pour ajouter un bloc Boîte à icônes à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser et déposez le bloc Boîte à icônes dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Boîte à icônes pour ouvrir ses paramètres. L'onglet Contenu est organisé en deux sections : Icône/Image et Texte.
Icône :
- Icône : Cliquez sur le sélecteur d'icônes pour parcourir et choisir parmi des milliers d'icônes Font Awesome disponibles.
- 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.
- Espacement de l'icône : Définissez l'espacement entre l'icône et le contenu textuel de 10 à 150 px.
- Alignement : Définissez l'alignement horizontal de l'ensemble de la Boîte à icônes dans sa section — Gauche, Centre ou Droite. Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Alignement vertical : Définissez la façon dont l'icône s'aligne verticalement par rapport au titre et au texte — Haut, Milieu ou Bas.
Texte :
- Texte du titre : Saisissez le titre de votre Boîte à icônes à l'aide de l'éditeur de texte enrichi. Prend en charge le gras, l'italique, le soulignement, le barré et les liens en ligne.
- Niveau : Choisissez la balise de titre HTML pour le titre — H1, H2, H3 ou H4 — pour maintenir une structure de document appropriée.
- Texte : Saisissez le texte descriptif du corps de votre Boîte à icônes. Prend en charge le formatage de base de texte enrichi, y compris le gras, l'italique, le soulignement, le barré et les liens.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser la typographie, les couleurs et l'espacement de votre bloc Boîte à icônes.
Styles :
- Typographie du titre : Ajustez la famille de polices, le poids de la police, la hauteur de ligne, l'espacement des lettres et la transformation du texte du titre. Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Couleur du titre : Définissez la couleur du texte du titre à l'aide du sélecteur de couleur.
- Typographie : Ajustez la famille de polices, le poids de la police, la hauteur de ligne, l'espacement des lettres et la transformation du texte du corps. Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Couleur : Définissez la couleur du texte de la description du corps à l'aide du sélecteur de couleur.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc Boîte à icônes (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 Boîte d’icônes (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 Boîte d’icônes, 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 Boîte d’icônes sur les écrans d’ordinateur.
- Masquer sur tablette : Masquez le bloc Boîte d’icônes sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Boîte d’icônes sur les appareils mobiles.
Effets d'animation :
- Animation d’entrée : Choisissez un effet d’animation qui se joue lorsque le bloc Boîte d’icônes apparaît à l’écran, 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 Boîte d’icônes et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Boîte d’icônes à votre page ! Les boîtes d’icônes sont l’un des moyens les plus efficaces de présenter des fonctionnalités, des avantages et des services dans un format visuellement attrayant et facile à parcourir. Expérimentez avec les choix d’icônes, les niveaux de titres et les paramètres de typographie pour créer des boîtes d’icônes qui correspondent à votre marque et communiquent clairement votre valeur.