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
bgto the Single Image‘s ‘Extra class name’ field - have a Video section with a preview (background added automatically)
- add
boxto the Single Image‘s ‘Extra class name’ field to have the image on white background with rounded corners and a slight shadow.
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 name | Element to use on | Effect |
| bgblue | row | blue background, centered white text |
| bglight | row | light blue background, centered text |
| bgtop | row | grey gradient background from top |
| bgbottom | row | grey gradient background from bottom |
| bg | single image | adds blue circle background below |
| box | single image | adds white backrgound and rounded corners |
SmartSlider3 classes
| Class name | Element to use on | Effect |
| newslider | slider | makes 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 name | Element to use on | Effect |
| key-benefits-icons | single image | turns image and following text box into an "Icon box" appearance |
| feature-icon | single image | turns image and following text box into an "Icon box" appearance |
| menu-anchor-section | row | adjusts styling of the pink anchor menu section |
| client-logos | row | adjusts styling of the client logos section |
| featured-texts | row | adjusts styling and adds circle gradient background to each column. (column bg colors are set in wp bakery) |
