Pricing
Written by Editorial Team on June 10, 2020

How To Modify Line Height And Spacing Between Paragraphs In Beaver Builder?

Beaver Builder is one of the most popular WordPress drag and drop builder. At WP Maven, we use Beaver Builder a lot in our web development projects. So, we do have a fair share of experience with it. While this plugin is a great asset to many WordPress site owners, there is still some learning curve within Beaver Builder to make it really a beginner-friendly one. One of the most common questions we being asked is "how to modify line height and spacing between paragraphs in Beaver Builder?"

In the next few minutes, we will show you how you can easily change the line height and spacing between paragraphs in Beaver Builder.

A quick introduction to Beaver Builder

When it comes to WordPress frontend editor, Beaver Builder is one of the top and most underrated plugin. It is extremely flexible and building landing pages or content pages are extremely easy with Beaver Builder.

We published an extensive review on Beaver Builder last year and we love the features that come with it.

What Is Beaver Builder
~What is Beaver Builder WordPress?

What are the advantages of using Beaver Builder in WordPress?

If you are wondering, here's a quick summary on the advantages of using the Beaver Builder plugin in WordPress site development:

  • Frontend drag & drop interface
  • Low learning curve
  • Pre-built designlayouts
  • Fast and lightweight plugin
  • Multisite capable
  • Works with Easy Digital Downloads and major Woocommerce plugins
  • SEO and translation ready
  • Optimized code delivery
  • Import/Export functionality
  • WPML compatible

Tutorial: How to add line height and spacing between paragraph in Beaver Builder plugin?

Thankfully, the process of modifying the line height and spacing between paragraph can easily be done with a little tweak in the CSS line.

Follow these steps:

Step 1: Head over to wp-admin » Post » All Posts » Choose any post, hover the title and click on Beaver Builder

Step 2: Once you are in the Beaver Builder frontend editor, click on the dropdown button and look for Layout CSS & Javascript. Beaver Builder allows you to use shortcut key and you can pop up the option with CTRL + Y.

Beaver Builder Layout CSS & Javascript
~Beaver Builder Layout CSS & Javascript option

Step 3: Add in this code into the CSS column.

body p {
  line-height: 1.5em; padding-bottom: 15px;
}
Modify Line Height And Spacing Between Paragraph In Beaver Builder
~Modify Line Height And Spacing Between Paragraph In Beaver Builder

Lastly, don't forget to adjust the line-height to match your needs. We use 1.5em for this sample. Also, you may also use margin-bottom instead of padding-bottom.

Summary

We hope that you this quick fix helps you to add line height and spacing between paragraph when using Beaver Builder. If you nee more help, hit us up in the comments area or reach out to us today!

Article written by Editorial Team

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

crossmenu