Les boutons de police damp;rsquoicô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 samp;rsquoadaptant à différentes tailles, il est logique de les utiliser dans les boutons. De plus, en utilisant des polices damp;rsquoicônes élégantes, il est en fait très simple de créer des boutons pour les polices damp;rsquoicônes dans Divi. Dans ce tutoriel, je vais montrer comment utiliser les polices damp;rsquoicônes dans le module Divi button pour créer des boutons damp;rsquoicô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 samp;rsquoassurer que le bouton est parfaitement formé carré ou cercle Comment remplacer lamp;rsquoicô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 téléchargez un fichier zip à partir damp;rsquoun billet de blog, nous ferons glisser le fichier de police damp;rsquoicône élégante. TTF est utilisé comme police personnalisée pour le module bouton. Disposition de la page damp;rsquoaccueil du bed and breakfast (disponible gratuitement auprès de Divi Builder) Ajoutez des polices damp;rsquoicô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 damp;rsquoicônes élégantes, allez sur le blog polices damp;rsquoicônes élégantes et téléchargez le fichier polices. Extraire le contenu du fichier zip et trouver le fichier de police damp;rsquoicô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 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 damp;rsquoajouter 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 Namp;rsquooubliez pas que pouvez redimensionner le texte du bouton et que le bouton restera parfaitement circulaire lorsque le remplissage samp;rsquoadaptera à la taille du texte. Lamp;rsquoajout de boutons damp;rsquoicônes à une disposition Divi Divi facilite lamp;rsquoajout et la personnalisation de boutons damp;rsquoicônes individuels pour samp;rsquoadapter à la conception de toute disposition par défaut. Par exemple, je vais montrer comment ajouter un bouton damp;rsquoicône à la disposition de la page damp;rsquoaccueil bed and breakfast.
Pour ajouter une mise en page à la page, cliquez sur lamp;rsquoicône violette au bas de la page pour ouvrir le menu paramètres (assurez que Visual Builder est activé). Alors
chevauchez le coin inférieur droit de lamp;rsquoimage, devez damp;rsquoabord supprimer le bord inférieur du formulaire damp;rsquoimage 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 lamp;rsquoimage 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 lamp;rsquoavons mentionné précédemment dans 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 lamp;rsquoalignement du bouton à droite. Maintenant, nous avons une image et un bouton pour travailler sur la conception. Tout ce que nous avons à faire est damp;rsquoajouter le même bouton à toutes les images de cette section. Comme nous avons supprimé le bord inférieur de lamp;rsquoimage, nous pouvons facilement appliquer ce changement à toutes les images de cette section en utilisant le style étendu. Faites un clic droit sur lamp;rsquoimage et sélectionnez le style damp;rsquoimage é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. Camp;rsquoest le dernier dessin. Grâce à la technologie damp;rsquoespacement 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
Créer un bouton de police d&rsquoicône en utilisant Divi
