Comment créer une boîte de fonctionnalité dans WordPress avec Elementor

Une boîte de fonctionnalités est une section en surbrillance sur une page Web par laquelle vous pouvez attirer l'attention des utilisateurs sur le contenu comme des offres spéciales, des avantages sociaux, des services ou des appels à l'action. Il est conçu pour se démarquer visuellement et faciliter clairement les visiteurs de voir vos messages importants à première vue.

Créer des boîtes de fonctions accrocheuses n'est pas difficile aujourd'hui. Elementor est un plugin Page Builder puissant et bien connu qui a facilité la conception du site Web. Même ceux qui ne connaissaient pas le codage peuvent désormais concevoir des pages Web élégantes avec Elementor.

Il vous donne un contrôle créatif complet sur la mise en page, les couleurs, les icônes, les images, les animations, etc. Ainsi, dans cet article, nous couvrirons un tutoriel étape par étape sur la façon de créer une boîte de fonctionnalités dans WordPress avec le plugin Elementor. J'espère que vous en profiterez. Commencer!

Pourquoi devriez-vous envisager de créer des boîtes de fonctionnalités?

Les boîtes de fonction ont le pouvoir de façonner la façon dont les visiteurs interagiront avec le contenu de votre site Web en accrochant vraiment leur attention. Jetez un coup d'œil à la raison pour laquelle vous devriez envisager de créer des boîtes de fonctionnalités sur votre site Web.

• Mettre en surbrillance les fonctionnalités clés

Les boîtes de fonctionnalités sont parfaites pour attirer l'attention sur les fonctionnalités les plus importantes de votre offre. Il peut s'agir de vos produits, services ou packages. Au lieu de détailler votre produit à l'échelle de la page, les boîtes de fonctionnalités aident visuellement à séparer les caractéristiques clés et à les présenter de manière instantanément visible.

• Communiquer les valeurs

Avec des boîtes de fonctions captivantes, vous pouvez faire savoir à votre public ce qui fait ressortir vos marques / produits. Il vous donne un espace pour communiquer vos valeurs fondamentales au public en ligne de manière propre et directe. Cela renforce la confiance et relie vos visiteurs à un niveau plus profond.

• Créer une disposition cohérente

Vous devrez peut-être créer plusieurs boîtes de fonctionnalités sur votre site. Elementor vous permet simplement de dupliquer les cases de fonction autant de fois que vous le souhaitez. Ainsi, il garantit la cohérence et le rythme sur tout le site Web. Après leur duplication, il vous suffit de modifier le contenu en eux.

• Renforcer l'identité de la marque

Les boîtes de fonctionnalités offrent une excellente occasion de renforcer votre identité de marque. Vous pouvez les aligner sur les couleurs, les polices et les styles d'icônes de votre marque pour maintenir l'harmonie visuelle. Cette répétition subtile aide votre marque à se sentir plus cohérente et mémorable.

• Améliorer la lisibilité au contenu

De longs paragraphes peuvent submerger les lecteurs. Mais avec des boîtes de fonction, vous divisez le contenu en petits morceaux faciles à comprendre. Ils peuvent rendre votre contenu plus numérisable. Cela permet aux visiteurs de comprendre rapidement votre message sans passer beaucoup de temps à explorer de grands blocs de contenu.

Pré-exposition pour créer une boîte de fonctionnalité

Avant de sauter dans le tutoriel, il y a plusieurs conditions préalables que vous devez assurer à l'avance. Assurez-vous que les plugins suivants sont installés et activés sur votre site.

• Élémentor
• Happyaddons

Pourquoi happyaddons?

Une des principales raisons pour lesquelles Elementor est si populaire aujourd'hui est qu'elle a une grande collection d'addons puissants. Chacun d'eux est livré avec de nombreuses fonctionnalités et widgets supplémentaires pour étendre davantage la puissance du plugin Core Elementor. HappyAddons est un tel addon.

HappyAddons possède 130+ widgets riches en fonctionnalités, 28+ fonctionnalités passionnantes, plus de 100 modèles pré-conçus et un constructeur de thème. J'espère que vous savez que la version élémentor gratuite n'offre pas de nombreuses fonctionnalités et widgets avancés. Mais si vous êtes vraiment pour une option gratuite complète, HappyAddons pourrait être un choix intelligent.

La version gratuite de HappyAddons propose 70+ widgets et plus de 20 fonctionnalités, et de nombreux modèles pré-conçus. Ainsi, vous pouvez créer de superbes boîtes de fonctionnalités avec la version gratuite de HappyAddons. C'est pourquoi nous allons l'utiliser dans ce tutoriel.

Comment créer une boîte de fonction dans WordPress: Tutoriel étape par étape

J'espère que les plugins mentionnés ci-dessus sont installés et activés sur votre site. Il est maintenant temps de commencer le tutoriel. Suivez-nous.

Étape 01: Ouvrez un message ou une page avec le toile Elementor

Ouvrez le message ou la page où vous souhaitez créer la boîte de fonctionnalité.

Étape 02: Sélectionnez une disposition de colonne

Sélectionnez une disposition de colonne comme vous le souhaitez. Pour ce tutoriel, nous sélectionnerons la disposition à trois colonnes.

Étape 03: Faites glisser et déposez le widget approprié sur la toile

Comme déjà dit, HappyAddons propose de nombreux widgets riches en fonctionnalités que vous pouvez utiliser pour créer la boîte de fonctionnalité. Parmi eux, les trois meilleurs widgets sont la boîte d'icône , la boîte d'information et la carte . Vous pouvez utiliser n'importe quel widget. Mais pour le tutoriel, nous utiliserons le widget Info Box.

Recherchez le widget Info Box sur le panneau Elementor. Faites glisser et déposez -le sur une colonne appropriée sur la toile.

Vous verrez que le widget de la boîte d'information a été ajouté au canevas Elementor.

Explorez comment intégrer Google Sheets dans WordPress Table et le rendre triable.

Étape 04: Sélectionnez un préréglage pour le widget de la boîte d'information

Un préréglage est une disposition pré-conçue avec des paramètres enregistrés et des personnalisations. Une fois que vous avez sélectionné un préréglage, ses paramètres et stylisations entiers seront appliqués au widget pour lui donner une apparence prédéfinie. Lorsque vous manquez de temps, l'utilisation des préréglages peut vous faire gagner du temps.

La plupart des widgets HappyAddons comprennent plusieurs préréglages. Par exemple, le widget de la boîte d'information a douze préréglages . Sélectionnez simplement le préréglage souhaité.

Remarque: Si vous souhaitez construire la fonctionnalité à partir de zéro, vous pouvez éviter d'utiliser des préréglages. Mais pour le tutoriel, nous utiliserons un préréglage.

Étape 05: Ajoutez une icône / image à la zone de fonctionnalité

L'ajout d'une icône à la boîte de fonctionnalité peut aider les utilisateurs et les visiteurs à visualiser la fonctionnalité particulière que votre produit propose.

Développez la section icône / image . Cliquez sur l'icône sous le type de support . Il ouvrira la bibliothèque d'icônes.

Vous pouvez trouver votre icône souhaitée en faisant défiler la bibliothèque ou en tapant un mot-clé dans la zone de recherche. Une fois que vous avez trouvé l'icône, sélectionnez-la et cliquez sur le bouton Insérer en bas.

Vous verrez que l'icône est ajoutée à la boîte de fonctionnalité, comme nous l'avons fait.

Apprenez à ajouter un flip box dans WordPress.

Étape 06: Ajoutez un titre et une description à la boîte de fonctionnalité

L'ajout d'un titre concis et d'une description à la zone de fonctionnalité est un must. Cela peut instantanément fournir une brève idée de la fonctionnalité aux utilisateurs.

Développez la section Titre & Description . Écrivez votre titre et la description souhaités dans les boîtes respectives sous la section. Vous verrez les modifications apparaître dans la zone de fonctionnalité du canevas Elementor. Enfin, alignez le titre et la description au centre .

Étape 07: Configurer les paramètres du bouton

De la même manière, développez la section des boutones . Vous serez autorisé à écrire une nouvelle copie pour le bouton et à y ajouter un lien de destination. Effectuer les modifications selon les besoins.

Étape 08: styliser la boîte de fonctionnalité

Venez à l' onglet Styles . Vous obtiendrez des options pour personnaliser chaque élément dans la zone de fonctionnalité à partir de l'onglet. Tu peux

# Icône / image stylisée

Développez la section icône / image . Vous pouvez personnaliser la taille de l'icône, l'espacement, le rembourrage, la marge, le type de bordure et son rayon.

En faisant défiler un peu ci-dessous, vous obtiendrez l'option pour modifier la couleur de l'icône de fonctionnalité. Faites ces changements vous-même selon les besoins.

# Styliser le titre et la description

Maintenant, développez la section Titre & Description . De là, vous pouvez modifier la typographie, la couleur du texte et l'espacement entre les textes.

# Bouton de fonction Stylize

De la même manière, développez la section des boutones . Ensuite, modifiez sa typographie, son rembourrage et d'autres paramètres nécessaires comme vous le souhaitez.

Étape 09: Ajoutez une couleur d'arrière-plan à toute la boîte de fonctionnalité

L'ajout d'une couleur d'arrière-plan appropriée à la boîte de fonctions peut le rendre plus beau et aider à mettre en surbrillance le contenu.

Sélectionnez l'intégralité du widget en cliquant sur l'icône du crayon dessus. Accédez à l' onglet avancé> Section d'arrière-plan .

Cliquez sur l' icône de pinceau à côté de l'option Type d'arrière-plan. Sélectionnez une couleur que vous aimez. La couleur sera instantanément appliquée à la boîte de fonctionnalité.

Étape 10: Dupliquez la boîte de fonctionnalité

Maintenant, vous souhaiterez peut-être créer plusieurs boîtes de fonctionnalités pour couvrir toutes les fonctionnalités de votre produit. La meilleure façon de le faire est d'utiliser l'option en double fournie avec Elementor.

Cliquez avec le bouton droit sur l' icône du conteneur pour sélectionner la zone de fonctionnalité entière.

Une liste s'ouvrira. Cliquez sur l'option en double de la liste.

De la même manière, dupliquez la boîte de fonctionnalité autant de fois que vous le souhaitez. Vous pouvez voir que nous l'avons dupliqué pour créer trois boîtes de fonctionnalités avec la même apparence et la même stylisation.

Maintenant, vous devez retirer les cases vides de la disposition.

De la même manière, cliquez avec le bouton droit sur l' icône du conteneur de la boîte vierge. Ensuite, sélectionnez l'option Supprimer sur la liste. Faites de même pour supprimer toutes les cases vides.

Vous pouvez voir que nous avons supprimé toutes les boîtes vierges de la disposition.

# Modifier le contenu sur les boîtes de fonctionnalités

Une fois que les boîtes de fonctionnalité sont parfaitement dupliquées, vous pouvez modifier le contenu en eux pour présenter différentes informations sur les fonctionnalités dans chaque case.

Étape 11: Rendez les boîtes de fonctionnalités sensibles aux mobiles

À moins que vous ne réalisiez vos boîtes de fonctionnalités mobiles, elles se casseront ou deviendront désordonnées lorsque le site sera visité à partir d'appareils à petit écran. Elementor fournit un moyen de rendre vos pages sensibles aux mobiles.

Cliquez sur le mode réactif en bas du panneau Elementor. Cela ajoutera une barre supérieure sur la toile à partir de l'endroit où vous pouvez changer pour explorer à quoi ressemble la page sur différentes tailles d'écran.

Si leurs dispositions ne sont pas belles sur une taille d'écran spécifique, vous pouvez modifier leurs stylisations à partir de l'onglet Style jusqu'à ce qu'ils s'adaptent à cette taille d'écran respective.

Les modifications que vous apportez ne seront enregistrées que pour ce type d'écran particulier. Ainsi, vous pouvez rendre l'une de vos conceptions sensibles à la mobile à l'aide du plugin Elementor.

Étape 12: Aperçu des boîtes de fonctionnalités

Venez au frontend de la page et vérifiez si la boîte de fonctions semble bonne et que son bouton fonctionne ou non. J'espère que cela fonctionnera bien de votre côté.

Pour résumer!

J'espère que vous avez apprécié ce tutoriel. Les boîtes de fonctionnalités aujourd'hui ne sont plus seulement des éléments Web simples que vous pouvez ignorer . Si vous pouvez bien les concevoir et les placer, ils peuvent créer une impression durable sur vos produits et services dans l'esprit des clients. Il y a donc plusieurs facteurs que vous devez considérer lors de la conception de boîtes de fonctionnalités.

Assurez-vous une disposition propre avec suffisamment d'espace blanc afin que chaque boîte de fonctionnalité et son contenu puissent être parfaitement distingués. Utilisez le même style d'icône, la même famille de polices et la même palette de couleurs sur toutes les boîtes de fonctionnalités pour maintenir l'harmonie visuelle. Et enfin et surtout, n'oubliez pas de réaliser vos conceptions.