Comment créer 3 superbes conceptions de polices à espacement fixe dans Divi

Les polices à espacement fixe sont un atout précieux pour la conception Web. Ils sont particulièrement utiles pour créer des designs qui ont une belle symétrie et un bel équilibre. Une police à espacement fixe est composée de lettres et de caractères qui ont chacun la même largeur (ou espace horizontal). En tant que tels, ils fournissent une structure cohérente et élégante pour l'affichage du texte. Les polices à espacement fixe sont largement utilisées dans le codage pour cette raison.

Dans ce tutoriel, nous allons créer trois superbes conceptions de polices à espacement fixe dans Divi. Nous verrons comment personnaliser correctement les modules de texte pour positionner et concevoir des polices à espacement fixe de manière assez unique, et bien plus encore.

Commençons.

Aperçu

Voici un aperçu des conceptions que nous allons construire dans ce tutoriel.

Conception de police à espacement fixe n ° 1: Style de logo

Commencer la conception de bâtiments #1

Conception de polices à espacement fixe n° 2 : grands blocs de lettres

Commencer la conception de bâtiments #2

Conception de polices à espacement fixe n ° 3: Puzzle de mots croisés

Commencer la conception de bâtiments #3

Téléchargez GRATUITEMENT la mise en page des conceptions de polices à espacement fixe

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Abonnez-vous à notre chaîne Youtube

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le Divi Theme installé (ou le Divi Builder Plugin si vous n'utilisez pas le Divi Theme).
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Téléchargez quelques images fictives dans la médiathèque à utiliser pour le didacticiel. Nous utiliserons un logo d'image de 200 px par 200 px du pack de mise en page HVAC et deux images d'arrière-plan (au moins 1920 px de large) tirées du pack de mise en page Cake Maker et du pack de mise en page d'amélioration de l'habitat.

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Conception de police à espacement fixe n ° 1: Style de logo

Commençons par une conception de police simple à espacement fixe qui met en évidence l'équilibre symétrique des lettres. Étant donné que les lettres sont espacées uniformément, les polices à espacement fixe sont idéales pour les graphiques et les logos. Voici un exemple rapide de la façon dont vous pouvez incorporer la police à espacement fixe avec une simple icône d'image pour créer un joli graphique.

Tout d'abord, créez une section régulière avec une ligne à une colonne.

Avant d'ajouter le module de texte, nous allons ajouter un arrière-plan à la section. L'arrière-plan consistera en une image d'icône centrée avec un arrière-plan gris foncé. L'image de l'icône que nous utiliserons est extraite du pack de mise en page HVAC. Assurez-vous que l'icône de l'image mesure environ 200 pixels sur 200 pixels, car nous utiliserons la taille réelle comme image d'arrière-plan.

Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Couleur d'arrière-plan : #121212
• Image d'arrière-plan : [insérer l'icône d'image 200 x 200 pixels]
• Taille de l'image d'arrière-plan : taille réelle
• Position de l'image d'arrière-plan : Centre

Ajouter le module de texte

Une fois la section terminée, ajoutez un module de texte à la ligne à une colonne.

C'est là que nous ajoutons le texte avec une police à espacement fixe. L'aspect pratique des lettres à espacement fixe est que, comme chaque lettre a la même largeur, vous pouvez facilement centrer la lettre du milieu du texte sur la page. Cela facilitera l'alignement avec l'icône d'image d'arrière-plan que nous avons ajoutée à la section.

Ouvrez les paramètres du module de texte et mettez à jour le contenu du corps avec le mot « élégant ». En fait, vous pouvez utiliser à peu près n'importe quel mot qui a un nombre impair de lettres afin que nous ayons une lettre centrale pour bien chevaucher l'icône de l'image d'arrière-plan.

Ajout de la conception de police à espacement fixe

Divi propose environ 12 polices différentes à espacement fixe incluses dans le constructeur Divi parmi lesquelles nous pouvons choisir. Pour les voir, nous pouvons cliquer pour sélectionner une police de texte et entrer « mono » dans la barre de recherche. Cela affichera la liste des polices disponibles à espacement fixe.

Mettez ensuite à jour les paramètres de conception comme suit :

• Police du texte : Droid Sans Mono
• Taille du texte : 5vw
• Espacement des lettres du texte : 1.3em
• Hauteur de la ligne de texte : 1 em

Cette combinaison de l'unité de longueur vw pour la taille du texte et de l'unité de longueur em pour l'espacement des lettres et la hauteur de ligne garantira que le texte est parfaitement adapté à toutes les tailles de navigateur.

Espacement

Une fois la police prête, ajoutez un espacement au module de texte pour vous assurer que le texte est parfaitement centré. Nous pouvons voir que le texte est un peu décentré à cause de l'espacement des lettres. Nous pouvons facilement résoudre ce problème en ajoutant un remplissage à gauche égal à la valeur que nous avons ajoutée pour l'espacement des lettres.

Mettez à jour les éléments suivants :

• Marge : 0px en bas
• Rembourrage : 2 em en haut, 2 em en bas, 1,3 em à gauche

Changer la couleur de la lettre centrale

Un moyen simple de changer la couleur d'une seule lettre dans Divi consiste à utiliser les options de style en ligne lors de l'utilisation du générateur sur le front-end.

Mettez simplement en surbrillance la lettre que vous souhaitez modifier et cliquez sur l'icône de couleur du texte dans la barre de menu.

Ajoutez ensuite le code couleur suivant : rgba(248, 142, 96, 0.54)

C'est ça!

Faire la ligne pleine largeur

Nous devons faire de la place pour le texte qui sera ajouté, alors allez-y et agrandissez la ligne en ouvrant les paramètres de ligne et en mettant à jour les éléments suivants :

• Largeur : 100 %
• Largeur maximale : 100 %

Résultat final

Voici le résultat final.

Et si vous le souhaitez, vous pouvez ajouter un espace pour le caractère central dans le texte afin d'utiliser l'icône de l'image d'arrière-plan pour l'espace vide. Voici à quoi cela ressemblerait.

Conception de polices à espacement fixe n° 2 : grands blocs de lettres

Cette conception suivante présente la structure de police de type bloc qui est possible avec les polices à espacement fixe. Contrairement aux polices ordinaires (à largeur variable), les polices à espacement fixe s'empilent les unes sur les autres pour un design équilibré, moderne et agréable à regarder.

Voici comment procéder.

Créez une nouvelle section régulière avec une ligne à une colonne.

Avant d'ajouter un module, mettez à jour la section avec une conception d'arrière-plan comme suit :

• Couleur d'arrière-plan du dégradé à gauche : #fcd1e5
• Dégradé d'arrière-plan à droite : rgba(255,255,255,0)
• Direction du dégradé : 135 deg
• Position de départ : 50 %
• Position finale : 76 %

Ajoutez ensuite une image de fond. J'en utilise un du Cake Maker Layout Pack.

Ajouter une largeur de ligne

Ensuite, mettez à jour la largeur de ligne comme suit :

• Largeur : 100 %
• Largeur maximale : 100 %

Ajouter le module de texte

Une fois que vous avez une ligne pleine largeur, ajoutez un module de texte à la ligne.

Ensuite, mettez à jour le contenu du corps avec les éléments suivants :

<p>dividesign<a href="#">learnmore</a></p>

Ensuite, stylisez le texte du paragraphe comme suit :

• Police de texte : Overpass Mono
• Style de police de texte : TT
• Texte Couleur du texte : #2e298f
• Taille du texte du texte : 15vw
• Espacement des lettres du texte : 0,16 em
• Hauteur de la ligne de texte : 1 em

Nous allons ajouter un style différent au texte du lien comme suit :

• Style de police du lien : Souligné
• Couleur du texte du lien : #2e298f
• Taille du texte du lien : 3,5 vw
• Espacement des lettres des liens : 0em

Espacement

Une fois le texte stylisé, mettez à jour l'espacement comme suit :

• Marge : 0px en bas
• Rembourrage : 0,16 em à gauche, 3 em à droite

Après cela, enregistrez les paramètres. Ensuite, utilisez les options de style en ligne pour changer la couleur des lettres comme nous l'avons fait dans le premier exemple de conception plus tôt dans la publication.

Pour ce faire, mettez en surbrillance les quatre premières lettres et changez la couleur en blanc.

Changez la couleur de la deuxième lettre comme suit : #f34a43

Enfin, mettez en surbrillance les cinq premières lettres du texte du lien (« apprendre ») et mettez à jour la couleur comme suit : #f34a43.

Conception finale

Voyons maintenant le résultat final sur une page en direct.

Conception de polices à espacement fixe n ° 3: Puzzle de mots croisés

Cette dernière conception tire parti des polices à espacement fixe pour créer une mise en page de type mots croisés pour votre texte. Voici comment procéder.

Tout d'abord, créez une nouvelle section régulière avec une ligne à une colonne.

Avant d'ajouter des modules, ouvrez les paramètres de la section et ajoutez une image d'arrière-plan avec un dégradé comme suit :

• Image d'arrière-plan : [insérer l'image]
• Couleur d'arrière-plan du dégradé de gauche :
• Dégradé d'arrière-plan à droite :
• Direction du gradient : 90deg
• Position de départ : 25 %
• Position finale : 0%
• Placer le dégradé au-dessus de l'image d'arrière-plan : OUI

Paramètres de ligne

Une fois l'arrière-plan de la section terminé, ouvrez les paramètres de ligne avec une nouvelle largeur et un certain espacement.

• Largeur : 100 %
• Largeur maximale : 100 %
• Rembourrage : 22vw haut, 5vw gauche

Ajouter un module de texte

Une fois la ligne mise à jour, ajoutez un nouveau module de texte à la ligne avec le mot "mono" comme contenu du corps.

Mettez ensuite à jour la conception du module de texte comme suit :

• Police du texte : Rubik Mono One
• Texte Couleur du texte : #faac00
• Taille du texte du texte : 8vw
• Espacement des lettres du texte : 0,15 em
• Hauteur de la ligne de texte : 1 em

Dupliquer le module de texte

Pour accélérer la conception de nos deux prochains blocs de texte, dupliquons deux fois le module de texte que nous venons de concevoir afin que vous ayez un total de trois modules de texte empilés les uns sur les autres.

Mettre à jour le module de texte #2

Après avoir dupliqué le module de texte, ouvrez les paramètres du deuxième module de texte (au milieu) et remplacez le corps du texte par le mot « polices ».

Ensuite, mettez à jour les éléments suivants :

• Corps : « polices »
• Couleur d'arrière-plan : #dddddd
• Texte Couleur du texte : #930565
• Largeur : 0.86em
• Marge : -3em en haut, 2em à gauche

Remarquez comment la modification de la largeur du module de texte provoque l'affichage vertical du texte. Et parce qu'il s'agit de polices à espacement fixe, elles s'empilent uniformément. Et avec une largeur égale à la taille de chaque bloc de lettres, nous pouvons déplacer le module de texte par incréments de 1em. Ainsi, la marge supérieure de -3em fera monter le texte d'exactement 3 blocs de lettres. Et 2em marge gauche déplacera le module de texte sur exactement 2 blocs de lettres vers la droite. Cela facilite le positionnement des éléments dans une disposition de mots croisés comme celle-ci.

Boîte ombre

Ajoutons une ombre de boîte pour augmenter la taille de l'arrière-plan derrière le module de texte.

• Box Shadow : voir capture d'écran
• Position verticale de l'ombre de la boîte : 0px
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte : 0,08 em
• Couleur de l'ombre : #dddddd (identique à la couleur d'arrière-plan)

Indice Z

Pour vous assurer que ce bloc de texte reste au-dessus des autres modules de texte, mettez à jour l'index z comme suit :

• Indice Z : 11

Mettre à jour le module de texte n° 3

Une fois le module de texte n° 2 terminé, ouvrez les paramètres du troisième module de texte et remplacez le corps du texte par le mot « espacement ».

Déplacez ensuite le module en place à l'aide de nos valeurs magiques de marge em :

• Marge : -1em en haut, 2em à gauche

Conception finale

Mobile

Étant donné que ces conceptions sont construites à l'aide d'unités de longueur vw et em, la conception restera cohérente sur toutes les tailles de navigateur. Voici à quoi ressemble le design sur l'écran de la tablette et du téléphone.

Remarque : le seul élément qui ne répond pas est l'icône de l'image d'arrière-plan dans le premier design. Cependant, vous pouvez facilement ajouter une image d'arrière-plan plus petite sur une tablette et un téléphone pour résoudre ce problème.

Dernières pensées

Peut-être que la meilleure chose à propos de la création de conceptions de polices à espacement fixe dans Divi est la polyvalence des styles de police. Quelques petites touches peuvent faire une grande différence. De plus, les applications sont assez pratiques pour n'importe quel site Web.

Lequel de ces trois exemples avez-vous trouvé le plus prometteur ?

J'ai hâte de vous entendre dans les commentaires.

À votre santé!