Créer un bouton de police d’icône en utilisant Divi

Les boutons de police d’icônes sont utilisés à de nombreuses fins dans la conception de pages Web. Comme les icônes de police restent vives en couleur et en design tout en s’adaptant à différentes tailles, il est logique de les utiliser dans les boutons. De plus, en utilisant des polices d’icônes élégantes, il est en fait très simple de créer des boutons pour les polices d’icônes dans Divi. Dans ce tutoriel, je vais vous montrer comment utiliser les polices d’icônes dans le module Divi button pour créer des boutons d’icônes individuels. Voici quelques faits saillants de ce tutoriel: comment ajouter une icône comme texte de bouton en utilisant une police élégante comment ajouter un rayon de remplissage et de bordure pour s’assurer que le bouton est parfaitement formé carré ou cercle Comment remplacer l’icône de bouton par une icône différente pendant que la souris passe? Comment placer une icône de bouton pour écraser une image, etc… Voici un aperçu de ce qui va se passer… Pour ce tutoriel, je vais utiliser ce qui suit: sujet Divi (bien sûr) icône de police élégante – une fois que vous téléchargez un fichier zip à partir d’un billet de blog, nous ferons glisser le fichier de police d’icône élégante. TTF est utilisé comme police personnalisée pour le module bouton. Disposition de la page d’accueil du bed and breakfast (disponible gratuitement auprès de Divi Builder) Ajoutez des polices d’icônes de mode au module ajouter un bouton pour commencer, créer une nouvelle page et déployer Visual Builder. Sélectionnez créer à partir de zéro, puis après avoir déployé Visual Builder, ajoutez une ligne dans la colonne à la section, puis ajoutez le module bouton à la ligne. Pour obtenir des polices d’icônes élégantes, allez sur le blog polices d’icônes élégantes et téléchargez le fichier polices. Extraire le contenu du fichier zip et trouver le fichier de police d’icônes élégant n
ARN droit = 90px la hauteur totale de la ligne de texte du bouton est de 1,7 EM, ce qui correspond à 170% de la taille du texte du bouton (30 Px), soit 51 Px. Pour le remplissage en haut et en bas, réglez les deux à 0,65 em. 0,65 em correspond à 65% de la taille du texte du bouton (30 Px), ce qui équivaut à 19,5 Px.
Ainsi… 19,5 Px espacement supérieur + 51 Px hauteur de ligne + 19,5 Px espacement inférieur = 90 Px total cela signifie que lorsque le texte du bouton est réglé à 30 Px, la taille totale du bouton sera de 90 Px X X 90 Px (un carré parfait). En fait, tu peux penser comme ça. Quelle que soit la raison pour laquelle vous définissez la taille du texte du bouton, la taille totale du bouton sera trois fois cette valeur. Ensuite, un texte de bouton de 40 pixels crée un bouton de 120 pixels multiplié par 120 pixels, et ainsi de suite. Pour le moment, le bouton est de la bonne taille, mais il est toujours carré. Tout ce que nous avons à faire est d’ajouter un rayon de bord de 50% et de transformer le bouton carré en bouton circulaire parfait.
Ce qui suit est nécessaire pour changer le bouton en un bouton circulaire: rayon de bord du bouton: 50% de remplissage personnalisé: 0,65 em en haut, 0,65 em en bas, 1 em à droite, 1 em à gauche N’oubliez pas que vous pouvez redimensionner le texte du bouton et que le bouton restera parfaitement circulaire lorsque le remplissage s’adaptera à la taille du texte. L’ajout de boutons d’icônes à une disposition Divi Divi facilite l’ajout et la personnalisation de boutons d’icônes individuels pour s’adapter à la conception de toute disposition par défaut. Par exemple, je vais vous montrer comment ajouter un bouton d’icône à la disposition de la page d’accueil bed and breakfast.
Pour ajouter une mise en page à la page, cliquez sur l’icône violette au bas de la page pour ouvrir le menu paramètres (assurez – vous que Visual Builder est activé). Alors…
Si vous chevauchez le coin inférieur droit de l’image, vous devez d’abord supprimer le bord inférieur du formulaire d’image ci – dessus. Activez le réglage du module image directement au – dessus du bouton et réglez la limite inférieure à 0 Px. Maintenant, nous devons tirer le bouton sur l’image en utilisant une valeur de marge négative personnalisée égale à la hauteur du bouton. Pour ce faire, nous devons déterminer la hauteur du bouton. Comme nous l’avons mentionné précédemment dans cet article, avec un remplissage personnalisé, nous pouvons connaître la taille exacte du bouton en fonction de la taille du texte du bouton courant. Comme la taille du texte du bouton est de 20 Px, nous savons que la hauteur du bouton est de 3 em (3 fois la taille du texte du bouton), soit 60 Px. Par conséquent, nous devons définir la marge personnalisée pour le bouton comme suit: marge personnalisée: – 60 Px en haut, puis nous pouvons positionner le bouton à droite en ajustant l’alignement du bouton à droite. Maintenant, nous avons une image et un bouton pour travailler sur la conception. Tout ce que nous avons à faire est d’ajouter le même bouton à toutes les images de cette section. Comme nous avons supprimé le bord inférieur de l’image, nous pouvons facilement appliquer ce changement à toutes les images de cette section en utilisant le style étendu. Faites un clic droit sur l’image et sélectionnez le style d’image étendu. Dans la fenêtre contextuelle style étendu, pour toutes les options, sélectionnez cette section et cliquez sur le bouton extension. La limite inférieure de toutes les images est maintenant de 0 pixel. La dernière étape consiste simplement à copier et coller le module bouton sous chaque image. C’est le dernier dessin. Grâce à la technologie d’espacement appropriée, les boutons restent inchangés même sur les appareils mobiles… Utilisez les icônes disponibles pour le module bouton parce que le texte d