twenty,fse,thème,Wordpress

Justifier un texte dans Twenty Twenty-Five de WordPress

Connaissances requises : HTML + CSS

Comme vous le savez (ou peut-ĂŞtre pas 🤔), il n’est pas possible de justifier un texte directement avec le thème FSE Twenty Twenty-Five. Pour y parvenir, nous devons passer par l’intĂ©gration de HTML/CSS. Voici un petit tutoriel pour vous accompagner dans cette dĂ©marche. Si vous ĂŞtes dĂ©jĂ  familier avec l’intĂ©gration de code HTML/CSS, cliquez ici pour accĂ©der directement au code que j’ai utilisĂ©.

1. Justifier un seul bloc

Cette méthode permet de justifier un texte bloc par bloc. Si vous souhaitez appliquer la justification sur plusieurs blocs à la fois, rendez-vous plus bas en cliquant ici.

Étape 1 : Modifiez votre bloc texte en HTML
Dans l’Ă©diteur de blocs, passez votre texte en mode HTML.

twenty,fse,thème,Wordpress

Étape 2 : Collez le style CSS directement dans la balise <p>
Ajoutez le code suivant dans la balise de votre texte :

twenty,fse,thème,Wordpress

En gros, voici le code que j’ai rajoutĂ© dans la balise p :

<p style="text-align: justify; word-break: break-word; hyphens: auto;">Votre texte ici</p>

2. Justifier plusieurs blocs à la fois avec une classe CSS (recommandé)

Si vous souhaitez appliquer la justification à plusieurs blocs sans avoir à modifier chaque élément manuellement, il est plus efficace de créer une classe CSS.

Étape 1 : Ajoutez une classe à votre bloc texte

  • Dans les propriĂ©tĂ©s avancĂ©es de votre bloc texte, ajoutez un nom de classe.
  • Par exemple, ici, nous avons choisi « justifier » comme nom de classe.
twenty,fse,thème,Wordpress

Étape 2 : Ajoutez le style CSS globalement

Quittez l’Ă©diteur de page et accĂ©dez Ă  l’Ă©diteur de site.

twenty,fse,thème,Wordpress

Cliquez sur Styles > CSS additionnel (voir l’image ci-dessous si besoin).

twenty,fse,thème,Wordpress

Ajoutez le code CSS suivant :

.justifier
{ text-align: justify; word-break: break-word; hyphens: auto; }
twenty,fse,thème,Wordpress

Bien sûr, vous pouvez le faire plus proprement avec un snippet.

Et voilĂ  !
Tous les blocs portant la classe « justifier » auront automatiquement la mise en forme appliquée.

J’espère que ce tutoriel vous a été utile ! Si vous avez des questions ou besoin d’aide, n’hésitez pas à me contacter.