Skip to Main Content

How to indent paragraphs on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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 :

Your paragraph text goes here ...

Manually indent paragraph on wordpress

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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 magazine websites may wish to add a more traditional removal. In this case, you need to add custom CSS to your WordPress theme.

Go to " Appearance> Customize To launch the " Customizer Of 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

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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

You can then go and edit your article on the text editor. Then surround your text with the tags and 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 plugin wordpress

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 

This premium WordPress plugin is a powerful CSS and Javascript code editor that allows you to add these to any section of your website. It allows you to keep your customizations even after a major update to 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

3. Custom JS and CSS for Gutenberg

The WordPress Custom JS and CSS for Gutenberg plugin will allow you to add an unlimited number of custom styles to the WYSIWYG editor for your WordPress posts and pages. It is fully compatible with the Gutenberg version of WordPress.Custom js and css for gutenberg wordpress plugin

You can simply create a new style with an easy-to-use CSS editor. This plugin extends the functionality of custom fields on your site and gives you the ability to modify your custom fields with a dynamic and powerful customization module. and the real-time preview feature of this plugin makes it very comfortable and user-friendly.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Download | Demo | Web hosting

Recommended Resources

Discover other recommended resources 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.

... 

This article features 1 comment

  1. Article p {dash-text: 60 px; }
    string that gives me an error.
    The validation service also gives me the error "60px; } "
    How should we correct?
    Good work

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
17 shares
Share14
tweet1
Save2