[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885{margin-bottom: 0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi : le thème WordPress le plus facile à utiliser

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] TÉLÉCHARGER [/vcex_button][/vc_column][/vc_row]

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 901.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits.

Voulez-vous ajouter des espaces ou des paragraphes en retrait sur WordPress ? Souhaitez-vous indenter les paragraphes sur WordPress ?

Bien que la plupart de vos textes soient alignés à gauche, dans certains cas, il arrive que vous ayez besoin d’indenter certains paragraphes pour une meilleure typographie et une meilleure expérience de lecture.

Dans ce tutoriel, nous allons vous montrer comment indenter facilement les paragraphes sur WordPress.

indenter les paragraphes sur WordPress

Méthode 1 : Utilisation des boutons de retrait de texte dans l’éditeur visuel 

Par défaut, la plupart des thèmes WordPress affichent des paragraphes justifiés vers la gauche ou vers la droite pour les langues de droite à gauche.

Si vous souhaitez décaler un paragraphe, vous pouvez le faire manuellement en cliquant sur le bouton Augmenter l’indentation de l’éditeur visuel de texte. Cela ajoutera l’espacement à gauche du paragraphe.

Indenter les paragraphes sur wordpress

Dans le cas où vous souhaitez indenter plus d’un paragraphe, vous devez sélectionner ces paragraphes, puis cliquez sur le bouton Augmenter l’indentation.

Vous pouvez cliquer sur le bouton plusieurs fois pour augmenter le retrait. Par exemple, si vous cliquez deux fois dessus, il doublera l’espacement du retrait.

Vous pouvez également réduire le retrait en cliquant sur le bouton Diminuer l’indentation

Nous vous invitons aussi avant de continuer à découvrir Comment utiliser l’éditeur Gutenberg de WordPress 5.0 : Première Partie

Méthode 2: Indentation manuelle du paragraphe à l’aide de l’éditeur texte

L’utilisation des boutons de retrait de texte sur l’éditeur visuel est le moyen le plus simple pour ajouter du retrait aux paragraphes. Toutefois, cela ne vous permet pas de contrôler la quantité d’espacement que vous souhaitez ajouter.

Les utilisateurs les plus avancés peuvent basculer vers l’éditeur texte pour ajouter manuellement le retrait. Tout ce que vous devez faire est de mettre le texte  dans la balise paragraphe <p> et </p> et puis y ajouter du code CSS comme ceci :

<p style="padding-left:25px;">Your paragraph text goes here...</p>

Indenter manuellement le paragraphe sur wordpress

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer Facilement et Gratuitement n'importe quel design de site Web ou blog avec un look professionnel. Arrêtez de payer cher pour un site internet que pouvez faire vous-même.

Cette méthode vous permet de contrôler l’espacement que vous souhaitez utiliser comme retrait. Cette méthode fonctionne mieux si vous n’avez pas besoin d’indenter les paragraphes régulièrement.

Donc, si vous les indentez assez souvent, alors ce n’est pas une solution idéale.

Découvrez notre guide sur Comment écrire (rédiger) un bon paragraphe sur votre blog 

Méthode 3 : Indenter seulement la première ligne d’un paragraphe

Les pages Web n’utilisent pas l’espacement des paragraphes traditionnels utilisés par les logiciels de traitement de texte, qui ne marquent que la première ligne du paragraphe.

Même sur WordPress, lorsque vous indentez un paragraphe, de l’espacement est ajouté à l’ensemble du paragraphe.

Indentation de paragraphe exemple

Certains sites Web de magazines ou de revues littéraires peuvent souhaiter ajouter un retrait plus traditionnel. Dans ce cas, vous devez ajouter du CSS personnalisé à votre thème WordPress.

Allez sur « Apparence > Personnaliser » pour lancer le « Customizer » de thème WordPress. Cliquez sur l’onglet « CSS Additionnel ».

Css additionnel customizer wordpress

Voulez-vous vendre vos produits sur internet ?

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress et créez facilement votre boutique en ligne. Parfait pour les débutants.

Cela affichera une zone de texte dans le volet de gauche où vous pourrez ajouter votre code CSS personnalisé. Ajoutez ce code CSS dans cette zone de texte.

p.custom-indent { 
text-indent:60px;
}

Découvrez aussi notre Tutoriel : Comment maîtriser l’éditeur visuel de WordPress

Ce code CSS indique simplement aux navigateurs que si un paragraphe a la classe « .custom-indent », alors il ajoute une indentation de 60px.

Vous pouvez ensuite aller modifier votre article sur l’éditeur de texte. Ensuite, entourez votre texte avec les balises <p class = « custom-indent »> et </p> comme suit :

<p class="custom-indent">Your paragraph text goes here...</p>

Une fois terminé, vous pouvez prévisualiser votre article, et vous verrez que seule la première ligne du paragraphe possède un espacement avant.

Espacement devant un paragraphes

Cette méthode fonctionnera soigneusement si vous voulez seulement indenter quelques paragraphes. Toutefois, si vous souhaitez ajouter ce style à tous les paragraphes de votre site web, vous devez simplement modifier le code CSS personnalisé comme ceci :

article p { 
text-indent:60px;
}

Ce code CSS ajoutera automatiquement un retrait sur la première ligne de tous les paragraphes à l’intérieur d’un article WordPress ou la page.

Découvrez aussi avant de partir Comment ajouter un style à l’éditeur visuel de WordPress

Pour ceux qui recherchent des éditeurs de visuels de styles pour améliorer l’apparence de leur site Web, nous leur proposons ici 3 plugins WordPress premium conçus pour cette tâche.

1. Yellow Pencil: Visual CSS Style Editor

Yellow Pencil est un éditeur visuel de style que vous pouvez utiliser avec n’importe quel thème pour personnaliser votre site Web en quelques minutes (polices, couleurs, animations et plus…).Yellowpencil visual css style editor plugin wordpress

Ce plugin va créer des styles CSS en arrière-plan pendant que vous jouez avec les couleurs comme s’il s’agissait d’un jeu. Il a été conçu aussi bien pour les débutants que pour les utilisateurs expérimentés. Aucune connaissance en codage n’est requise; Toutefois, le plugin dispose d’un bon éditeur de CSS pour ceux qui aiment coder. Vous pouvez coder en live avec cet éditeur et personnaliser votre CSS.

Télécharger | Démo | Hébergement Web

2. Easy Custom JS and CSS 

Ce plugin WordPress premium est un éditeur puissant de code CSS et Javascript qui vous permet d’ajouter ces derniers sur n’importe quelle section de votre site web. Il vous permet de garder vos personnalisations même après une importante mise à jour de votre thème WordPress. Easy custom js and css extra customization plugin wordpress

Vous avez la possibilité de limiter le champ d’utilisation de votre code personnalisé. Par exemple, vous pouvez utiliser votre code uniquement pour un article ayant le format vidéo. Ou encore vous pouvez limiter votre code à un thème spécifique; Ce qui est pratique si vous changez couramment de thèmes pour votre blog WordPress.

Télécharger | Démo | Hébergement Web

3. Custom JS and CSS for Gutenberg

Le plugin WordPress Custom JS and CSS for Gutenberg vous permettra d’ajouter un nombre illimité de styles personnalisés à l’éditeur WYSIWYG pour vos articles et pages WordPress. Il est entièrement compatible avec la version Gutenberg de WordPress.Custom js and css for gutenberg plugin wordpress

Vous pourrez simplement créer un nouveau style avec un éditeur de CSS facile à utiliser. Ce plugin étend les fonctionnalités des champs personnalisés de votre site et vous donne la faculté de modifier vos champs personnalisés avec un module de personnalisation dynamique et puissant. et la fonctionnalité de prévisualisation en temps réel de ce plugin le rend très confortable et convivial.

Télécharger | Démo | Hébergement Web

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous aideront à mieux prendre en main votre éditeur visuel de texte.  

Conclusion

Voilà ! C’est tout pour ce tutoriel, j’espère qu’il vous permettra de mieux organiser l’indentation de vos articles. N’hésitez pas à partager l’astuce avec vos amis sur vos réseaux sociaux.

Si vous avez des suggestions ou des remarques, elles seront les bienvenues. Nous vous invitons aussi à consulter nos ressources si vous êtes un blogueur débutant.

… 

17 Partages
Partagez14
Tweetez1
Enregistrer2