A Word on White Spaces

Building Page layout with Visual Composer is very easy. But what if you want to make more or even less spaces between your elements? Well read on to find out about it.

1. Working with padding and margin on Visual Composer:

Each row that you create via Visual Composer, has 40 pixels of padding (the white space inside a row) on top and bottom and 35 pixes of margin (the space on the outside) on the bottom of it. But you are not stock with it, you can go ahead and add you own padding and margins.

Read This article to learn all about padding and margin.

To customize the white spaces on your theme all you need to do is to enter your own padding and margin in px,em,% while you are creating a row using VC.

Add_New_Page_‹_Une_Boutique_—_WordPress

The padding, since it is the space inside an element, is important when you decide to give your row a background color/image.

The margin option, adds or removes (by setting it to 0) the margin all around a row.

The padding, is much more flexible though, you can enter 0 to remove all the padding within a row, or you can enter 4 numbers (clockwise) to give your row a customized padding all around. for example if you enter 40px 20px 30px 20px, this means that your row will have 40 pixels of padding on top, 20 pixels of padding on the right, 30 pixels of padding on the bottom and 20 pixels on the left. (count it clockwise, top, right, bottom, left).

TIP: You can now set the padding, margin, border and background to rows, inner rows, columns, inner columns and even text blocks using Visual Composer.

2. Removing margins inside the visual editor:

To give you more power over your layout design, I have added some CSS classes to your regular text editor too, so that you can easily remove a margin from an element that you insert in your text editor. For example, all heading texts and border lines have margins on top and bottom of it. If that margin is conflicting your layout design, all you need to do is to highlight the element you want, and from the styles drop down click on either no-margin, no-margin-top, no-margin-bottom, no-margin-left, no-margin-right.

white-spaces-02[1]

These two methods are extremly useful if you are concened about your layout, typography and white spaces in your design.