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.
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.
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>
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.
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 ».
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.
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…).
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.
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.
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.
- How to install (add) a plugin on WordPress
- How to install Wordfence Security on WordPress
- What to expect from Gutenberg the new WordPress editor
- How to use the Gutenberg editor for WordPress 5.0: Part XNUMX
- How to Add Features to WordPress Visual 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.
...
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