Visual Composer Spacing Rows and Columns

See what to do when you want to edit or change the WordPress plugin Visual Composer (WPBakery) spacing rows and columns of your page elements.

By Claudio Pires
Updated on July 25, 2022
Visual Composer Spacing Rows and Columns

The most popular WordPress drag and drop page builder plugin is Visual Composer, see now what to do when you want to edit r change the Visual Composer Spacing Rows and Columns. All the Visualmodo WordPress themes include this premium plugin.

By default, the Visualmodo WordPress theme adds a 35px margin below all columns in the Visual Composer.

This allows for a better responsive site but it’s also very important to consider it when building your site so you can create perfect spacing between your elements. This margin can be altered through the Visual Composer panel > design Options area.

Visual Composer Spacing Rows and Columns
Visual Composer Spacing Rows and Columns

Removing The Default Visual Composer Spacing – Consequences

If you enter 0px for the bottom column margin globally it will remove it everywhere. However, you will have to remember to add margins to your columns for responsive layouts. So, where they turn from columns next to each other to stacked columns. Also, it will be a lot harder for you to keep consistency throughout the site.

Better Way Of Resetting The Margin

The best way to reset your margins is to do so via the Visual Composer. “column” settings when editing a column. For example, if working on a row with a background and you want content in the middle. In one column and you want to add padding to your row that is the same at the top and bottom.

Rather than adding a 40px padding at the top of your Visual composer row or column and allowing the column to have a 40px bottom margin. So, to give the impression of padding, it’s best to edit your column and remove the bottom margin, then you can apply a top and bottom padding directly to the row. In fact, this is what I do often on my live demos.

Visual Composer Spacing Rows and Columns
Visual Composer Spacing Rows and Columns

In most situations you shouldn’t have to remove the bottom margin on columns, just remember it’s there and work smartly. The only cases where you would want to remove it is when adding rows with backgrounds for example and you want smaller padding inside the row. In addition, remember the limits of your page content and design

Remove Margin Via Row Column Spacing Setting

If you are using a row without any inner columns you can also remove this spacing by easily selecting 0px for your columns margin via the built-in setting and setting it to 0px:

Visual Composer Spacing Rows and Columns
Visual Composer Spacing Rows and Columns

See the videos.

Finally, I hope you guys enjoy the Visual Composer Spacing Rows and Columns guide by Visualmodo



Claudio Pires

Claudio Pires is the co-founder of Visualmodo, a renowned company in web development and design. With over 15 years of experience, Claudio has honed his skills in content creation, web development support, and senior web designer. A trilingual expert fluent in English, Portuguese, and Spanish, he brings a global perspective to his work. Beyond his professional endeavors, Claudio is an active YouTuber, sharing his insights and expertise with a broader audience. Based in Brazil, Claudio continues to push the boundaries of web design and digital content, making him a pivotal figure in the industry.