L’ajout de boîtes de fonctionnalités à un site web permet aux visiteurs de voir rapidement et facilement les avantages d’un produit ou d’un service particulier. Elles se composent généralement d’une seule image d’icône et peut-être d’une ou deux phrases sur la caractéristique. De plus, il est exceptionnellement facile de créer des boîtes de fonctionnalités dans WordPress.
Dans ce tutoriel, je vous montrerai comment créer des boîtes de fonctionnalités dans WordPress pour les utiliser sur une page d’accueil ou de destination. Cela ajoutera une apparence professionnelle tout en informant les visiteurs.
Construire des colonnes avec le Page Builder de SiteOrigin
Le Page Builder de SiteOrigin est un outil utile pour personnaliser n’importe quel site web WordPress. Il fonctionne avec la plupart des thèmes et vous offre une grande souplesse pour personnaliser votre contenu.
Dans le cas présent, nous allons l’utiliser pour créer une page facile à consulter par colonne. Il s’agit d’un plugin de boîte de fonctions gratuit qui offre un large éventail de possibilités.
Installez et activez “Page Builder by SiteOrigin”.
Mise en place des colonnes
Pour ce tutoriel, nous allons créer une nouvelle page d’accueil de base juste pour vous montrer comment faire.
Créez une nouvelle page pour votre site web.
Donnez un nom à cette page. Pour l’instant, je vais l’appeler “Landing Page”.
Cliquez sur l’onglet “Créateur de page” au-dessus de l’éditeur.
Cliquez sur le bouton “Ajouter un widget” en haut à gauche.
Dans ce tutoriel, nous allons utiliser l’offre groupée de gadgets SiteOrigin. Il s’agit d’une collection d’outils spécialement conçus pour fonctionner avec Page Builder. Vous voudrez explorer ce qui est disponible plus tard, car Page Builder possède des capacités intéressantes.
Cliquez sur le bouton “SiteOrigin Features” dans la liste.
Cela permettra d’ajouter un nouveau segment de boîte à la page. C’est un widget spécial de SiteOrigin, mais il doit être installé avant que nous puissions commencer à ajouter des icônes et des fonctionnalités.
Passez la souris sur la boîte et cliquez sur “Modifier”.
Installation de l’offre groupée de gadgets SiteOrigin
Avant de pouvoir utiliser les outils spécifiques de SiteOrigin, nous devons installer le pack qui comprend la boîte de fonctionnalités ainsi que les icônes que vous utiliserez. Cliquez sur le lien pour installer cette offre groupée.
Cela ouvrira immédiatement une nouvelle fenêtre et installera automatiquement le paquet de widgets dans WordPress. Cliquez sur le bouton “Activer le plugin” lorsque vous êtes prêt. Ne vous inquiétez pas, vous n’aurez à franchir ce cap qu’une seule fois. Après quoi, vous aurez accès aux widgets sans avoir à les installer à nouveau.
Vous pouvez fermer l’onglet “plugin supplémentaire” en toute sécurité après que SiteOrigin ait installé le widget bundle. retournez à la page d’accueil sur laquelle vous travailliez.
Cliquez sur le bouton “Terminé” en bas à droite. Nous devons sauvegarder et recharger la page avant que les widgets ne soient disponibles.
Cliquez sur “Enregistrer le projet” pour la page que nous sommes en train de créer. Cela rafraîchira les widgets pour que nous puissions continuer.
Survolez la boîte et cliquez à nouveau sur “Modifier”.
Ajout de fonctionnalités
La première chose à faire est de décider du nombre d’éléments à afficher par ligne. Pour ce tutoriel, je vais faire en sorte que ce soit facile et agréable et laisser le nombre de trois par défaut de SiteOrigin.
Notez également que SiteOrigin active par défaut la “mise en page réactive”. Cela permet aux utilisateurs d’appareils mobiles de bénéficier de la meilleure expérience possible. Ne sous-estimez jamais la valeur de l’utilisation d’un site web adapté aux mobiles.
En haut, cliquez sur le bouton “Ajouter” pour ajouter des fonctionnalités. Vous pouvez le faire autant de fois que vous le souhaitez, en fonction du nombre de visiteurs que vous souhaitez afficher. Pour ce tutoriel, je vais créer seulement trois mises en page de base.
Cliquez sur la flèche vers le bas à côté de l’élément à modifier. Vous pouvez ainsi ajouter du texte et des images et procéder à d’autres ajustements.
Cet écran est doté de plusieurs options de personnalisation allant des couleurs au texte que vous souhaitez utiliser dans la colonne.
Cliquez sur le bouton “Choisir l’icône”.
SiteOrigin prend en charge une ménagerie de types d’icônes allant de Font Awesome à n’importe quel type utilisé par votre thème actuel. Choisissez une icône qui correspond le mieux à la fonctionnalité que vous créez.
NOTE : Vous n’êtes pas obligé de vous limiter aux icônes pour afficher vos fonctionnalités. Vous pouvez également utiliser les images d’icônes de votre bibliothèque de médias dans WordPress.
Donnez un titre au reportage. Pour cet exemple, je vais donner un titre bref comme “Support Android”.
Saisissez la description de l’élément. N’oubliez pas que cette description doit être brève car elle vise à mettre en évidence une fonction ou un attrait spécifique d’un produit ou d’un service. Dans mon exemple, je vais simplement indiquer comment une chose est prise en charge par Android.
Choisissez si vous voulez un lien “Plus” et du texte sur l’élément. Cela vous permet de créer des liens vers des pages concernant l’élément si vous souhaitez aller plus loin dans le détail. Par exemple, cela peut être utile pour la page de biographie d’un membre du personnel si vous créez une liste d’équipe.
La fonction “Plus” est toutefois purement facultative.
Faites-le pour chaque élément que vous voulez créer sur la page.
Publier votre page
Lorsque vous avez fini de créer vos reportages, cliquez sur “Terminé” en bas à droite.
Cliquez sur le bouton “Publier” ou “Mettre à jour”, selon que vous en avez fait une nouvelle ou que vous l’avez ajoutée à une page existante.
Vos boîtes à icônes dans WordPress sont maintenant disponibles.
Donnez à votre site une belle apparence
Page Builder offre une grande flexibilité en ce qui concerne la création de boîtes de contenu WordPress et l’affichage des fonctionnalités. Vous pouvez même aller jusqu’à supprimer les barres latérales de vos pages d’accueil pour donner à la page un aspect plus net.
Découvrez ce que vous pouvez faire pour créer une page d’accueil qui se convertit. Quelque chose d’aussi simple que des boîtes de fonctionnalités dans WordPress pourrait faire la différence lorsqu’il s’agit d’intéresser un utilisateur.
Quel genre d’éléments visuels utilisez-vous dans WordPress ? Comment avez-vous utilisé Page Builder dans le passé ?
