Qu’Internet ait changé la façon dont nous recevons et traitons l’information n’est pas qu’un cliché : c’est la vérité. D’une part, notre la durée d’attention se raccourcit: les gens ont de moins en moins de temps pour le contenu textuel. Par contre, il n’y a pas de remplacement si vous voulez transmettre des informations de quelque sens ou complexité que ce soit.
Une chose que vous pouvez faire pour éviter que vos visiteurs sautent simplement un gros corps de texte est de rendre votre contenu textuel numérisable, au cas où tout ce que vous voudriez est de mettre en évidence quelques informations intéressantes. Vous pouvez également utiliser du texte en surbrillance pour les accents. Les boîtes de message WordPress sont encore une autre chose que vous pouvez essayer : ils se démarquent nettement du reste du texte et transmettre des éléments d’information de choix à vos visiteurs.
Nous allons vous montrer comment créer des boîtes de message pour votre site WordPress. Mais avant d’entrer dans les détails, nous aimerions discuter de la boîte de message en termes plus généraux. Si vous êtes sûr que tout ce dont vous avez besoin est de savoir comment le faire, faites défiler jusqu’à la section tutoriel. Voici de quoi nous allons parler :
Une boîte de message WordPress est élément de design utilisé pour attirer l’attention d’un visiteur sur une information. Il se compose d’une boîte, de texte et éventuellement d’icônes ou d’autres graphiques. Ils associent généralement des informations importantes à un visiteur du site Web et se démarquer du corps du texte.
Aussi, une boîte de message peut généralement être licencié en cliquant sur un signe X ou un autre type d’icône de fermeture. Une fois que l’utilisateur a obtenu les informations, il peut supprimer la boîte de message d’un simple clic de souris et poursuivre la lecture. Ils ressemblent à quelque chose comme ça :
Une boîte de message est mieux utilisée lorsque vous voulez amenez vos visiteurs à porter une attention particulière à une information discrète qui peut informer le reste du contenu, mais n’est pas nécessaire pour le comprendre. Il peut être étroitement lié au texte, mais ce n’est pas nécessaire.
Peut-être que l’article qu’un visiteur lit n’est pas la première partie d’une série. Dans ce cas, vous voudrez peut-être les alerter avec une boîte de message qu’ils doivent d’abord lire autre chose. Votre boutique a une offre spéciale liée au texte ? Peut-être que vous pouvez l’annoncer dans une boîte de message. Votre critique de livre ou de film contient des spoilers ? Mieux vaut le préciser à l’avance.
Une boîte de message peut être créée à l’aide de code ou d’un plugin. Nous utiliserons un plugin gratuit, développé par nous, appelé Qi Addons for Elementor. Qi Addons élargit la palette déjà formidable de widgets d’Elementor avec 60 nouveaux éléments magnifiquement conçus, dont l’un est la boîte de message.
Avec notre plugin vous pouvez créer des boîtes de message WordPress accrocheuses en quelques minutes. Tout ce que vous avez à faire au préalable est d’installer la dernière version d’Elementor (la version gratuite convient parfaitement), puis d’installer Qi Addons. En plus des modules complémentaires Qi pour Elementor, nous utiliserons notre propre thème Qi. Pour de meilleurs résultats, nous vous suggérons de le faire aussi. Si vous avez déjà investi dans un autre thème, ne vous inquiétez pas : Qi Addons fonctionnera également avec.
Qi Addons est un plugin séparé conçu pour fonctionner avec Elementor et le compléter, et il est complètement libre. Après avoir installé les deux, vous êtes prêt. Vous pouvez voir comment créer une boîte de message dans la vidéo ci-dessous :
Si vous préférez votre tutoriel sous forme de texte, lisez la suite ci-dessous. Pour commencer, vous devez trouver un Boîtes de messages dans le menu de gauche et faites-le glisser là où vous le souhaitez sur la page.
Vous verrez la boîte de message avec ses paramètres par défaut. Il a un titre d’espace réservé et du texte lorem ipsum. Vous pouvez les modifier dans le Général onglet du widget.
Nous n’utiliserons pas le Classe personnalisée réglages pour cette démonstration. Ce que nous allons faire, c’est changer le Titre à Ajustez les couleurs des arrière-plans, des icônes, des titres et du texte. Tout cela ne prend que quelques clics et efface le texte, ce qui en fait une boîte de message très simple.
Ce que nous voulons aussi faire, c’est changer les icônes. L’icône en haut à gauche de la boîte est la première dans votre Général app, et s’appelle Icône. Survolez pour afficher les menus, puis Bibliothèque d’icônes pour le changer.
Une fois là-bas, vous pouvez choisir parmi vos bibliothèques disponibles. Nous ajouterons un Signet icône en la recherchant dans le champ de recherche, en la sélectionnant et en cliquant sur Insérer.
Nous allons également changer le Icône Fermer, l’icône à droite qui permet de fermer la boîte de message. Pour modifier une icône en téléchargeant une image .svg, survolez le contrôle puis cliquez sur Télécharger SVG.
Vous pouvez ensuite télécharger une nouvelle image ou en sélectionner une dans la médiathèque, comme nous le ferons. Sélectionnez simplement une image et cliquez Insérer un média quand c’est prêt.
Avec nos icônes définies, nous sommes prêts à passer au Style languette.
Dans la section principale du Style onglet, vous pouvez trouver de nombreuses options pour styliser le titre, le texte, l’icône et l’arrière-plan de votre widget.
Nous allons changer notre Balise de titre à H4, mais vous pouvez le remplacer par n’importe quel paramètre de titre ou texte de paragraphe. Vous pouvez également modifier le Couleur du titre, ce que nous ne ferons pas, et le Typographie du titre.
Dans le Typographie du titre paramètres, vous pouvez modifier le type de police (Famille), Taille (nous avons mis le nôtre sur 21 pixels) et Poids (ou « audace »). le Transformer contrôle modifie la majuscule du titre, le Style peut être utilisé pour mettre la police en italique ou sélectionner une police oblique, tandis que le Décoration Le contrôle est utilisé pour souligner, surligner ou barrer.
le Hauteur de la ligne peut espacer les lignes d’un titre s’il en a plusieurs, mais cela a également un effet sur la taille de la case car il réserve de l’espace pour une ligne suffisamment haute. Nous allons mettre le nôtre à 30 pixels. le L’espacement des lettres contrôle est utilisé pour espacer les lettres individuelles du titre, et nous ne l’utiliserons pas pour cette boîte de message particulière.
le Couleur du texte et Paramètres de typographie de texte sont exactement les mêmes, mais s’appliquent au texte, par opposition au titre. Cette boîte de message particulière n’a pas de texte, nous ne les utiliserons donc pas.
Ensuite, nous trouvons le Emplacement de l’icône contrôles. Vous pouvez placer votre icône en haut, au milieu ou en bas de la ligne de titre. Nous l’aimons sur le dessus, nous allons donc le laisser tel quel. nous allons changer Couleur de l’icône à #1e1e1e – presque noir, pour correspondre à la couleur de la police de notre titre. Enfin, nous définirons le Taille de l’icône à 23 pixels.
Les contrôles pour le Fermer la taille de l’icône fonctionnent exactement de la même manière que pour le Icône. le Fermer la couleur de l’icône contrôle vous permet de choisir une couleur différente pour votre icône. Nous allons le mettre en noir (#000000). le Couleur de survol de l’icône de fermeture est la couleur de l’icône lorsqu’elle est survolée par la souris d’un utilisateur. Nous allons également définir cela sur noir, mais avec une certaine transparence (#000000cc).
Ensuite, nous trouvons le Type d’arrière-plan contrôles. Ce contrôle a deux modes principaux : Pente, que nous n’utiliserons pas, et Classique, ce que nous ferons. Nous utiliserons un fond de couleur unie, un bleu clair (#d5eaf4), mais vous pouvez également utiliser un Image si vous le souhaitez.
Au bas de la Style section de cet onglet, vous pouvez trouver le Rayon de bordure de boîte contrôles. Vous pouvez les utiliser pour arrondir tout ou partie des coins de votre boîte de message. Nous ne l’utiliserons pas pour cette démonstration.
Enfin, on trouve le Style d’espacement section de l’onglet. Dans le Marge de l’icône contrôle, vous pouvez définir la distance entre l’icône et les autres éléments. Nous allons cliquer sur le lien icône pour dissocier les valeurs, car nous voulons affiner la position de l’icône. Nous allons définir la marge supérieure à 4 et la marge de droite pour 18 pixels.
le Marge de texte en haut contrôle est là si vous voulez séparer le texte du titre. Comme cette boîte de message n’a pas de texte, nous n’en avons pas besoin.
Finalement, le Rembourrage de la boîte control est utilisé pour contrôler la distance entre les bords de la boîte et son contenu. Nous n’en aurons pas besoin pour cette démonstration.
Et voilà, une belle boîte à messages en quelques minutes seulement.
En conclusion
Comme vous pouvez le voir, il est remarquablement facile de configurer une boîte de message dans WordPress. Tout ce dont vous avez besoin, c’est de quelques plugins gratuits (Elementor et Qi Addons) et d’une bonne idée pour un design accrocheur. Avec Qi Addons, vous obtenez une boîte de message entièrement fonctionnelle avec des options de style pratiquement illimitées. Nous l’encourageons à en faire bon usage.
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
