Do you want to add spaces or subsections indented on WordPress? Would you like to indent paragraphs on WordPress?

Although most of your text is left aligned, in some cases you may need to indent certain paragraphs for a best typography and a better reading experience.

In this tutorial, we will show you how to indent easily paragraphs on WordPress.

indent paragraphs on WordPress

Method 1: Using the text indent buttons in the visual editor 

By default, most WordPress themes Display justified paragraphs to the left or right for right-to-left languages.

If you want to shift a paragraph, you can do it manually by clicking on the button Increase indentation of the visual text editor. This will add spacing to the left of the paragraph.

Indent paragraphs on wordpress

In case you want to indent more than one paragraph, you have to select those paragraphs and then click on the button Increase indentation.

You can click the button multiple times to increase the indent. For example, if you double click it, it will double the indent spacing.

You can also reduce the withdrawal by clicking the button Decrease indentation

We also invite you before continuing to discover How to use the Gutenberg editor for WordPress 5.0: Part XNUMX

Method 2: Manual indentation paragraph using the text editor

Using the withdrawal buttons text on the visual editor is the easiest way to add indentation to paragraphs. However, this does not give you control over how much spacing you want to add.

Most advanced users can switch to text editor to manually add the indent. All you need to do is put the text in the paragraph tag and and then y add CSS code like this :

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

This method allows you to control the spacing you want to use as an indent. This method works best if you don't need to indent paragraphs regularly.

So if you indent them often enough then this is not an ideal solution.

Discover our guide on How to Write (write) a good paragraph on your blog 

Method 3: Indent only the first line of a paragraph

Web pages do not use the traditional paragraph spacing used by word processing software, which only marks the first line of the paragraph.

Even on WordPress, when you indent a paragraph, space is added to the entire paragraph.

Example paragraph indentation

Some magazine or literary journal websites may wish to add a more traditional indent. In this case, you need to add custom CSS to your WordPress theme.

Go to " Appearance> Customize To launch the " Customizer "To WordPress theme. Click on the " Additional CSS Â».

Additional css customizer wordpress

This will display a text box in the left pane where you can add your custom CSS code. Add this CSS code in this text box.

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

Discover also our Tutorial: How to Master the WordPress Visual Editor

This CSS code simply tells browsers that if a paragraph has the ".custom-indent" class, then it adds a 60px indent.

You can then edit your article in the text editor. Then surround your text with the tags <p class = "custom-indent"> et </p> as following :

Your paragraph text goes here ...

Once finished, you can preview your article, and you will see that only the first line of the paragraph has spacing before.

Spacing in front of a paragraph

This method will work carefully if you only want to indent a few paragraphs. However, if you want to add this style to all paragraphs of your website, you simply need to modify the custom CSS code like this:

article p { 
text-indent:60px;
}

This CSS code will automatically add an indentation on the first line of all paragraphs inside a WordPress post or page.

Discover also before leaving How to add a style to the WordPress visual editor

For those who are looking for style visual editors to improve the look of their website, here we offer them 3 premium WordPress plugins designed for this task.

1. Yellow Pencil: Visual Style CSS Editor

Yellow Pencil is a visual style editor that you can use with any theme to personalize your website in minutes (fonts, colors, animations and more…).

Yellowpencil visual css style editor wordpress plugin

This plugin will create CSS styles in the background while you play with colors as if it were a game. It was designed for beginners as well as experienced users. No coding knowledge is required; However, the plugin has a good CSS editor for those who like to code. You can code live with this editor and customize your CSS.

Download | Demo | Web hosting

2. Easy Custom JS and CSS 

Ce WordPress Plugin premium is a powerful CSS and JavaScript code editor that allows you to add them to any section of your website. It allows you to keep your customizations even after a major update of your WordPress theme.

Easy custom js and css extra customization wordpress plugin

You have the possibility to limit the field of use of your personalized code. For example, you can use your code only for an article having the video format. Or you can limit your code to a specific theme; Which is handy if you frequently change themes for your WordPress blog.

Download | Demo | Web hosting

2. Responsive Google Maps

Ce WordPress Plugin promotes the creation of a system of multiple markers on a map and several maps per page. It includes full screen view and grouping of multiple markers. No API key is needed to do this.

WordPress maps plugins - Responsive google maps

The installation of WordPress Plugin Responsive Google Maps is simple and easy. No need for long complex shortcodes. Likewise, it is simple to create a map, to quickly add a location to it, for that, you just have to copy a shortcode in the page where you want to display the map, and you're done!

Read How to display the location of a member of your WP community on a Google Map

Its other features are: aresponsive arte, pseveral locations on the same map, pseveral cards per page, the possibility ofdownload your own markers, a full screen view, d supportdifferent types of maps (road map, satellite, hybrid and terrain), the zoom automatic, the ability to customize the tgo from the map, et much more ...

Recommended Resources

Discover more resources recommendations that will help you better take control of your visual text editor.  

Conclusion

Here ! That's it for this tutorial, I hope it will allow you to better organize the indentation of your articles. feel free to share the tip with your friends on your social networks.

If you have any suggestions or remarks, they will be welcome. We also invite you to consult our resources if you are a beginner blogger.

...