La typographie est l’une des principales préoccupations des concepteurs de sites, qui doivent placer les lettres et le texte de manière agréable. Une bonne typographie est hautement responsable de la lisibilité, de la clarté et de l’attrait visuel de l’ensemble de la structure du design pour les lecteurs.
Sur votre site WordPress, vous pouvez obtenir une collection par défaut de plus de 800 polices intégrées. Mais la difficulté vient si vous avez votre propre typographie personnalisée pour votre marque ou si vous voulez donner un aspect unique à votre site Web. Eh bien, la fonction de police personnalisée d’Elementor peut vous sauver la mise. Elle vous permet d’ajouter différents styles, tailles et variations de polices personnalisées à votre site.
Dans le tutoriel d’aujourd’hui, nous allons montrer comment vous pouvez ajouter une police à votre site WordPress en utilisant la fonction de police personnalisée d’Elementor.
Sommaire
Explication de la fonction de police personnalisée d’Elementor
Personnalisé (personnalisable) signifie une chose spécifique que vous pouvez créer ou produire en fonction de votre désir ou de vos exigences pour tout secteur particulier. La police personnalisée d’Elementor vous fournit des formats de police facilement personnalisables. Elle vous permet de créer, de modifier ou d’ajuster efficacement des fonctions supplémentaires par rapport aux polices ordinaires ou par défaut.
Vous trouverez cinq types de formats de polices personnalisées sur votre site Elementor, les voici :
- The Web Open Font Format (WOFF) – WOFF est le format le plus recommandé car il est pris en charge par tous les navigateurs modernes.
- The Web Open Font Format (WOFF 2.0) – Police TrueType ou OpenType qui offre une meilleure compression que WOFF 1.0.
- TrueType Fonts (TTF) – Cette police a été développée à la fin des années 1980 par Apple et Microsoft.
- Polices/Shapes SVG – Les polices SVG permettent d’utiliser le format SVG comme glyphes lors de l’affichage de texte. Veillez à utiliser ce format pour prendre en charge les anciennes versions de l’iPhone.
- Embedded OpenType Fonts (EOT) – Ce fichier de police fonctionne sur IE, mais pas sur les autres navigateurs. Veillez à utiliser ce format pour prendre en charge les anciennes versions d’IE
Voyons ci-dessous comment ajouter des polices sur Elementor :
Vous pouvez ajouter la police personnalisée de deux façons simples :
Méthode 1 : Ajouter la police à Elementor en incluant du code
Méthode 2 : Utiliser la fonctionnalité de police personnalisée d’Elementor
Méthode 1 : Ajouter une police à Elementor en utilisant du code
Voyons comment vous pouvez ajouter des polices à votre site Elementor en suivant un processus manuel.
- Ajoutez un nouveau dossier « fonts » au dossier de votre thème via un client FTP ou en utilisant le cPanel. Le nouveau dossier doit être situé dans le dossier wp-content/themes/fonts.
- Une fois que vous avez ajouté le nouveau dossier « fonts », ajoutez-y tous les fichiers de polices.
- Maintenant, ouvrez la feuille de style du thème (style.css) et ajoutez-y le code suivant :
- Configurez les éléments qui utiliseront cette police en les ajoutant à la même feuille de style.
- Cette méthode peut être pénible pour les débutants. Chaque fois que vous voudrez ajouter des configurations comme « italique » ou « gras », vous devrez suivre le même processus et ajouter ces paramètres. Cela implique beaucoup de codage.
Pour ceux qui ne veulent pas s’occuper de ce processus technique, vous pouvez suivre le processus ci-dessous pour ajouter avec succès des polices personnalisées à votre site Elementor.
Méthode 2 : Utiliser la fonction de police personnalisée d’Elementor
La police personnalisée est une fonction pro d’Elementor. Assurez-vous donc que vous avez installé et activé les deux plugins Elementor (gratuit) et Elementor Pro sur votre site Web.
Étape 01 : Ajouter une police personnalisée à votre site
Tout d’abord, naviguez vers Elementor>Polices personnalisées
Ici, vous pouvez créer des polices personnalisées. Par exemple, cliquez sur le bouton Ajouter nouveau pour créer une structure de police personnalisée.
Donnez un titre à votre police. Puis cliquez sur le bouton Ajouter une variation de police
Étape 02 : Ajouter une variation de police et télécharger les fichiers de police
Ici, vous pouvez ajouter quelques options supplémentaires à la police. Comme le poids de la police, le style et les fichiers de police.
Chargeons un fichier de police personnalisé TTF. Pour cela, cliquez sur le bouton de téléchargement.
Téléchargez le fichier de police à partir de votre appareil ou du dossier situé.
Remarque : veillez à conserver vos fichiers de polices préférés sur votre appareil avant de les télécharger ici !
Une fois que vous avez terminé, vous pouvez voir les détails de la police à partir d’ici.
En suivant le même processus, continuez le processus de chargement du fichier de police pour chaque format. Chargeons une autre variation de police. Par exemple, cliquez sur le bouton Add Font Variation et définissez le poids et le style de la police.
Définissez le poids de la police sur 100 et cliquez à nouveau sur le bouton de téléchargement.
Une fois que vous avez téléchargé le fichier, vous pouvez l’ajouter à partir de la galerie de médias.
Étape 03 : Publier la police personnalisée finale
En procédant de la même manière, ajoutez différentes variantes de polices à votre site. Une fois que vous avez terminé, cliquez simplement sur le bouton Publier.
Étape 04 : Utiliser la police personnalisée dans votre design Elementor
Maintenant, vous vous demandez peut-être comment utiliser cette police personnalisée. N’est-ce pas ? Voyons comment trouver et utiliser cette police personnalisée, vous devez ouvrir n’importe laquelle de vos pages Elementor dans le panneau de conception Elementor. Puis, ajoutez l’un des widgets de texte sur le panneau.
Ajouter le widget Titre au panneau d’édition d’Elementor.
Une fois que vous avez ajouté le widget Texte (rubrique),
- Accédez à la section Style
- Cliquez sur la typographie
Et ici vous pouvez trouver la police que vous venez de créer plus tôt (My Font). Il suffit de sélectionner la police
Une fois que vous avez ajouté la police, il est maintenant temps d’expérimenter les autres options de typographie pour rendre votre texte ou votre police plus attrayante. Telles que la taille de la police, le poids, la transformation, le style, la décoration, l’épaisseur de la ligne, et plus encore !
Styliser votre police avec le widget d’animation de texte de Happy Addons
Le widget Texte Animé est une fonctionnalité pro de Happy Addons. Vous pouvez rendre votre texte intéressant et attrayant en utilisant ce widget. Il dispose de 10 modèles de conception préétablis pour réduire vos efforts et difficultés supplémentaires. Ainsi, une fois que vous l’ajoutez à votre panneau de conception Elementor, il vous suffit de choisir la bonne mise en page et de la personnaliser en fonction de la structure de votre page Web.
Voyons concrètement comment vous pouvez utiliser le widget Animated Text sur votre site WordPress au lieu d’un texte ou d’une police ordinaire.
Pour commencer, vous devez installer et activer ces plugins :
- Elementor (gratuit)
- Happy Addons Free & Pro
Étape 1 : Ajouter le widget Texte Animé
Tout d’abord, glissez-déposez le widget depuis la galerie de widgets.
Vous obtiendrez la vue initiale du widget à l’écran.
Utilisez le texte de la police personnalisée que vous avez créé précédemment. Pour la sélectionner, appuyez sur le bouton style, typographie et choisissez l’option Mes polices.
Étape 2 : Ajouter des motifs à votre texte
Appuyez à nouveau sur la section du contenu. Et choisissez le motif qui vous plaît le plus.
Une fois que vous avez confirmé le design, il est maintenant temps d’ajuster le style d’animation. Pour ce faire, cliquez sur le contenu et trouvez le type d’animation. Explorez chaque type un par un pour obtenir un meilleur résultat pour votre site Web.
Étape 3 : Voir le résultat final de votre texte animé sur la page
Voyons le résultat final après avoir personnalisé le widget Texte animé sur votre police.
