How to enhance page designs in WPBakery

Break the page into sections such as a hero, features, testimonials and call to action. In WPBakery, each major section is usually a Row, while columns inside the row control the horizontal layout.

Keep the structure simple. Rows can contain columns and inner rows, but WPBakery does not allow an inner row inside another inner row. Use unique row or element IDs if you need anchor links or custom CSS.

Edit the page and open the WPBakery editor. Add a Row, choose a column arrangement such as two equal columns or three thirds, then place text, images, buttons and other elements inside the columns. Drag rows vertically and columns horizontally to change their order.

For a wide hero or banner, open Row settings and check the available Row stretch option. Stretching may fail when the theme or a parent container uses overflow: hidden, so check the live page rather than relying only on the editor.

Open the pencil icon for a row, column or content element and use Design Options. You can set margins, padding, borders, border radius, background colours and background images. Use row settings for section-wide backgrounds and column or element settings for cards, buttons and individual blocks.

Use padding to create space inside a coloured section and margin to separate that section from neighbouring content. If rows suddenly develop large gaps, inspect both the row and its first or last element instead of adding more Spacer elements.

Edit each column and open Width & Responsiveness or the similarly named responsive tab. Set column widths and offsets for desktop, tablet and mobile, and hide a column on a specific device when a block is not suitable for small screens.

WPBakery normally stacks content on screens below 768px. Check headings, buttons, background images and horizontal spacing at the actual mobile width. A layout that looks correct in the desktop editor can still overflow because of fixed widths, long text or excessive padding.

The built-in controls are the manual route and are enough for many pages. For a site-wide adjustment, use WPBakery Page Builder > Design Options or its Custom CSS area. For one page, use the page-level CSS control if it is available. To target one element, enter only a class name in Extra CSS Class name, then write the CSS in a proper stylesheet or Custom CSS field.

Do not paste CSS declarations into the class-name field. Also avoid reusing the same ID on several rows. Custom CSS is flexible, but it becomes harder to maintain when every spacing or colour change depends on theme-specific selectors.

When a section is finished, open its settings menu and choose Save as template. You can then insert that row or section on another page. You can also save a complete page as a template or save a configured element as a My Element preset for repeated use.

The fast route is to use Ultimate Addons for WPBakery Page Builder when the built-in elements are not enough. It adds more than 50 content elements, templates, sliders and layout controls, so it is useful for repeated design work or advanced banners, info boxes and sliders. Install the plugin ZIP from Plugins > Add New > Upload Plugin, activate it, then look for its elements inside the WPBakery Add Element window.

Before publishing, preview the page on desktop, tablet and mobile. If a full-width row has a side gap, check the theme's page template, row stretch setting and parent container before trying to fix it with random negative margins.