Presque chaque page finit par avoir besoin d'une rangée de petites cartes qui associent une icône avec un titre court et une ligne de texte Caractéristiques, services, étapes, coordonnées, toutes de même forme Le libre Widget de boîte d'informations dans Modules complémentaires principaux pour Elementor construit cette carte Vous choisissez une icône ou une image, tapez un titre et une description, choisissez un préréglage de style (cinq sont gratuits, dix avec Pro) et stylisez chaque partie du panneau Élémenteur.
C'est l'un de ces widgets que vous finissez par atteindre constamment, puisqu'une icône, un titre et une phrase couvrent autant de sections d'un site. Vous trouverez ci-dessous une promenade dans chaque paramètre, des préréglages de style aux contrôles d'icônes, de titres et de descriptions.
Ce que fait le widget Info Box #
Une boîte d'informations empile une icône ou une image au-dessus d'un titre et d'une brève description. Les préréglages de style signifient que le même contenu peut ressembler à une carte remplie, une carte bordée ou un bloc centré propre, et vous pouvez en aligner plusieurs côte à côte pour créer une ligne de fonctionnalités.
Le titre peut créer un lien n'importe où, l'icône peut être remplacée par une image téléchargée et la carte peut porter sa propre animation d'arrière-plan, de bordure et de survol. Il existe trois onglets : Contenu de l'icône, titre et texte, Style pour les couleurs et l'espacement, et Avancé pour les options Elementor habituelles.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Une icône en tête, ou une image à télécharger, plus le texte du titre et de la description.
Comment ajouter le widget Info Box #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Boîte d'informations(ou faites défiler vers la section Addons principaux) Faites-le glisser sur votre page Il se charge avec un exemple d'icône, un titre “Infobox,” et une description d'espace réservé, vous partez donc d'une carte de travail au lieu d'une carte vierge.
Configurez le contenu #
Ouvrir le Contenu onglet. Le Contenu section contient tout ce que la carte montre, et c'est là que se produit la plupart de votre édition.
- Préréglage de style : choisissez la variante un à cinq dans le plugin gratuit, ou six à dix avec Master Addons Pro. Chacun présente l'icône, le titre et la description différemment (plus d'informations ci-dessous).
- Image ou icône : une bascule à trois voies pour Aucun, Icône ou Image Choisissez Icône pour utiliser la bibliothèque d'icônes, ou Image pour télécharger la vôtre.
- Icône: lorsque l'icône est sélectionnée, choisissez n'importe quelle icône dans la bibliothèque Font Awesome ou téléchargez un SVG.
- Titre: le texte du titre, avec une option Écrire avec IA à côté.
- URL du titre : transformez le titre en lien vers n'importe quelle page ou URL externe.
- Description: la ligne ou deux de texte sous le titre, également avec Écrire avec AI.
- Lire la suite Texte et Lire la suite Lien : ceux-ci n'apparaissent qu'avec la variante six, qui nécessite Pro.
Sous ceux-là, vous trouverez un Aide Docs lien et a Lien d'emballage section à partir du gratuit Extension Wrapper Link cela rend la carte entière cliquable.
Choisissez un préréglage de style #
Les préréglages modifient l'ensemble du look sans toucher à votre contenu, donc basculer entre eux est un moyen rapide de trouver la mise en page qui correspond à la section.
- Variation un à cinq (gratuite) : chacun dispose différemment l'icône, le titre et la description Les variantes deux et trois ajoutent une grande copie délavée de l'icône derrière la carte, et la variante cinq définit l'icône en forme d'hexagone.
- Variation six à dix (Pro) : cinq mises en page supplémentaires La variante six ajoute le bouton Lire la suite et une option d'arrière-plan d'icône de dégradé.
Utiliser une image au lieu d'une icône #
Si une photo ou un logo convient mieux qu'une icône, définissez Image ou icône à Image et choisissez un fichier dans la Médiathèque Le widget affiche ensuite votre image dans l'emplacement pour icônes, qui fonctionne bien pour les logos des partenaires, les vignettes des produits ou les cartes de fonctionnalités illustrées Remettez-le sur Aucun lorsque vous souhaitez une boîte uniquement textuelle.
Style la boîte #
Le Style tab est divisé en Styles généraux, Style d'icône, Titre, Description, et Modèles (de l'extension gratuite Patterns).General Styles contrôle le conteneur de cartes lui-même.
- Type de bordure, largeur et couleur : le contour autour de la carte.
- Rayon frontalier : arrondir les coins.
- Rembourrage et marge : espacement à l'intérieur et autour de la boîte.
- Contexte: définissez un fond Normal et un fond Hover, soit une couleur unie, soit une image.
- Animation de survol : ajoutez un effet de mouvement intégré comme Bob ou Grow lorsque quelqu'un survole la carte.
Style d'icône, de titre et de description #
Le Style d'icône la section définit la taille, la couleur et l'arrière-plan de l'icône, avec des états Normal et Hover séparés ainsi qu'un alignement.
Le Titre et Description les sections gèrent la typographie, la couleur, l'alignement et l'espacement du texte. Chacun a ses propres états Normal et Hover, de sorte que la carte peut se déplacer à mesure que les visiteurs se déplacent dessus.
Couleur d'arrière-plan et options d'image #
De retour dans General Styles, le Contexte le contrôle prend soit un solide Couleur ou un Image. Un fond teinté avec du texte blanc, comme la carte “About Us remplie, est un moyen simple de faire ressortir une boîte dans une rangée de boîtes simples.
Le résultat sur la page #
Publiez ou prévisualisez et les cases s'affichent avec vos icônes, titres et descriptions en place Voici une rangée de trois cases d'informations, chacune sur un préréglage de style différent, le genre de mise en page qui correspond à une section de fonctionnalités ou de services.
Cas d'utilisation courants #
- Faits saillants dans une rangée de trois ou quatre colonnes sous le héros.
- Services ou offres chacun avec une icône et un résumé d'une ligne.
- Étapes de fonctionnement avec une icône numérotée ou thématique par pas.
- Coordonnées comme le téléphone, l'e-mail et l'adresse sous forme de zones liées.
- À propos ou des appels d'équipe utilisation du préréglage d'arrière-plan rempli pour se démarquer.
Conseils pour travailler avec le widget Info Box #
- Gardez les descriptions courtes. Une ou deux lignes se lisent mieux et gardent une rangée de cartes uniforme.
- Faites correspondre les tailles d'icônes sur une ligne. Définissez la même taille d'icône sur chaque boîte afin qu'elle s'aligne. C'est la chose qui semble généralement éteinte lorsque les cartes ne correspondent pas tout à fait.
- Utilisez un préréglage par ligne. Le mélange des préréglages dans la même rangée a tendance à paraître inégal ; changez plutôt la couleur d’arrière-plan lorsque vous souhaitez en mettre en surbrillance une.
- Liez le titre ou l'emballage. Envoyez des personnes dans un endroit utile avec l'URL du titre ou rendez l'intégralité de la carte cliquable avec Wrapper Link.
- Ajoutez une animation de survol subtile. Un petit Bob ou Grow on hover signale que la carte est interactive sans gêner.
Pour les préréglages, les démos et une comparaison avec l'Elementor Icon Box, voir le Page du widget Info Box.
Foire aux questions #
Qu'est-ce que le widget Info Box dans Master Addons ?
Il s'agit d'un widget Elementor qui combine une icône ou une image, un titre et une courte description en une seule carte stylisée. Vous obtenez cinq préréglages de style gratuits (dix avec Pro) et un contrôle sur les couleurs, l'espacement et les effets de survol, afin que vous puissiez créer des lignes de fonctionnalités, des listes de services et des appels directement à partir du panneau.
Combien de préréglages de style possède l'Info Box ?
Dix. Variation Un à Cinq sont gratuits, et les Variation Six à Dix ont besoin de Master Addons Pro. Chacun arrange et décore l'icône, le titre et la description différemment Vous passez d'eux à partir de la liste déroulante Style Preset sans refaire votre contenu.
Puis-je utiliser une image au lieu d'une icône ?
Oui. Dans l'onglet Contenu, définissez Image ou Icône sur Image et choisissez un fichier dans la Médiathèque Le widget affiche votre image à la place de l'icône, qui fonctionne bien pour les logos, les photos de produits ou les cartes illustrées. Choisissez Aucun pour une boîte uniquement texte.
Puis-je rendre la boîte d'informations cliquable ?
Vous pouvez lier le titre avec le champ URL Titre dans l'onglet Contenu Pour rendre la carte entière cliquable, utilisez l'option Lien Wrapper, à partir de l'extension gratuite Lien Wrapper Les deux permettent aux visiteurs de taper sur la boîte pour atteindre une autre page ou section.
Puis-je ajouter un effet de survol à la boîte d'information ?
Oui. General Styles a une liste déroulante Hover Animation avec des effets intégrés comme Bob et Grow, et les sections Icône, Titre et Description ont chacune leurs propres états Hover pour la couleur et l'arrière-plan Ensemble, ils laissent la carte réagir lorsque quelqu'un se déplace dessus.
Envelopper #
Le widget Info Box transforme une icône, un titre et une phrase en une carte propre que vous pouvez répéter dans n'importe quelle section Choisissez un préréglage, choisissez une icône ou une image, ajoutez votre texte et vos liens, puis stylisez la case pour qu'elle corresponde à votre page Pour les outils de mise en page associés, consultez le Widget Flipbox et le Widget Membre de l'équipe: parcourez le tableau complet Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.
