Infobox

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 Boîte d'informations widget 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 l'une des quatre mises en page toutes faites 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 quatre 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 à quatre. 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.

Sous ceux-là, vous trouverez un Aide Docs lien et a Lien d'emballage option (une fonctionnalité Pro) qui rend la carte entière cliquable.

Choisissez un préréglage de style #

Les quatre 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.

• Première variante : une carte centrée avec l'icône, le titre et la description empilés, souvent sur un fond rempli.
• Deuxième variante : une carte bordée avec l'icône alignée à gauche au-dessus du titre.
• Troisième variante : une carte avec l'icône placée dans un bloc carré coloré au-dessus du titre.
• Variante quatre : une disposition centrée avec l'icône à l'intérieur d'un badge circulaire.

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 (une option Pro).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.

Foire aux questions #

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.