Hero section

Is the first section on page. If there are exactly two columns here, the large pale blue circle background shows up.

Inline Video Section with no image preview

Email Newsletter examples on multiple devices

Global styles

Most of appearance is defined globally, including colors, font sizes, etc., so it is discouraged to apply manual styling in most cases.

What does it apply on:

  • all headings (H1-H6) have defined their appearance for both desktop and mobile view.
  • there’s a “lead paragraph” style that applies on every element immediately preceded with H1-H3 heading. such paragraph is rendered with a larger font and in a grey color.
  • bulleted lists have their global style with a blue dot.
  • use underline on H1-H6 to get a blue “swoosh”
  • buttons have their global styling
  • form fields have their global styling

Smaller h3

Smaller h4

Headings get smaller if they’re contained in a two narrow column (one third or one quarter of the grid width)

Blue sections with white text

Add bgblue (background: blue) to the Row’s “Extra class name” field to turn the section to blue with white text. that’s all.

Image or video with a blue circle background

  • add bg to the Single Image‘s ‘Extra class name’ field
  • have a Video section with a preview (background added automatically)
  • add box to the Single Image‘s ‘Extra class name’ field to have the image on white background with rounded corners and a slight shadow.
Email Newsletter examples on multiple devices

Light background section

Add bglight (background: light blue) to the Row’s “Extra class name” field to turn the section to blue with white text. that’s all.

Other background types

Aside the “blue” and “light blue” sections, other two types of background are supported.

use bgtop , bgbottom in the Row’s Extra class name field to recieve a gradient backround under the section

Featured texts section

use featured-texts class on Row to achieve column specific appearance (padding and a background image).

Feature text

Feature text paragraph

Feature text

Set a background color of your choice here in WPB, on the wrapping column

Feature text

The circle background is added automatically, because of “feature-texts” class on the wrapping section

Icon box and similar types

use an wpb: Icon box element or feature-icon class on a wpb: Single Image element to achieve appearance of elements below.

Feature Icon Title

This is a separate Text Block with a special style, because it’s just after a “feature-icon” image element

Icon left kind of box

Icon left kind of box

Top background

Use bgtop in the Row’s Extra class name field to recieve a gradient backround under the section

Classes overview

Classes for WP Bakery elements

Class nameElement to use onEffect
bgbluerowblue background, centered white text
bglightrowlight blue background, centered text
bgtoprowgrey gradient background from top
bgbottomrowgrey gradient background from bottom
bgsingle imageadds blue circle background below
boxsingle imageadds white backrgound and rounded corners

SmartSlider3 classes

Class nameElement to use onEffect
newsliderslidermakes images circle-shaped, adjusts styling of nav arrows. (however, styling is mostly defined in SmartSlider dashboard, same appearance can be achieved by cloning the well styled slides)

Legacy classes support

Class nameElement to use onEffect
key-benefits-iconssingle imageturns image and following text box into an "Icon box" appearance
feature-iconsingle imageturns image and following text box into an "Icon box" appearance
menu-anchor-sectionrowadjusts styling of the pink anchor menu section
client-logosrowadjusts styling of the client logos section
featured-textsrowadjusts styling and adds circle gradient background to each column. (column bg colors are set in wp bakery)