We don’t use Bootstrap or any other CSS framework in Page Builder Framework to reduce loading time. Instead it comes with its own, minimalistic CSS framework. Take a look at the helper classes below to easily customize the look of your website.
To create the grid container, add the
.wpbf-grid class to a parent element. To determine the child elements width, add the class
.wpbf-* to determine how the units shall be sized.
<div class="wpbf-grid"> <div class="wpbf-1-2"> ... </div> <div class="wpbf-1-2"> ... </div> <div class="wpbf-1-3"> ... </div> <div class="wpbf-1-3"> ... </div> <div class="wpbf-1-3"> ... </div> <div class="wpbf-1-3"> ... </div> <div class="wpbf-2-3"> ... </div> </div>
The width-classes below can also be used outside the grid component, for instance in combination with the container component (sections). Read more about that below.
||100% of the available width|
||divides grid into halves|
||divides grid into thirds|
||divides grid into fourths|
||divides grid into fiths|
||divides grid into sixths|
||divides grid into tenths|
Page Builder Framework provides a number of very useful responsive width classes. They work just like the usual width classes, except they are prefixed, so that they only come to effect at certain breakpoints. This is great to adjust your layout and content for different device sizes.
||Affects device widths above 480px. Grid columns will stack on 480px & smaller sizes.|
||Affects device widths above 768px. Grid columns will stack on 768px & smaller sizes.|
||Affects device widths above 1024px. Grid columns will stack on 1024px & smaller sizes.|
||Affects device widths above 1200px. Grid columns will stack 1200px & smaller sizes.|
In the example below, the first 2 columns will be stacked at 480px, meaining they’re displayed in halves above 480px. In the second row, the 3 columns will be stacked at 768px, meaning they’re displayed in thirds above 768px.
The third row takes it to an extreme to show you what’s possible by declaring a separate width for each breakpoint. Let’s break it down:
- on devices above 1200px, the container is using the 100% of the available space
- on devices above 1024px, the container takes 3/5 of the available space
- on devices above 768px, the container uses one third of the available space
- on devices above 480px, the container uses 50% of the available space
- on devices at 480px or below, the container falls back and uses 100% of the available space.
Otherwise, if we also had declared
wpbf-1-3 for the last row, we’d see one third of the space being used on devices at 480px and below with no full-width fallback.
You can change the space between the grid by simply adding a class to the grid container.
<div class="wpbf-grid wpbf-grid-large"> ...
<div class="wpbf-grid wpbf-grid-medium"> ...
<div class="wpbf-grid wpbf-grid-small"> ...
<div class="wpbf-grid wpbf-grid-collapse"> ...
<div class="wpbf-grid wpbf-grid-divider"> ...
On full-width pages, you can easily create a centered boxed section that receives its width from the width setting in the Customizer under General -> Layout -> Page Width (default: 1200px).
<div class="wpbf-container wpbf-container-center">Hello World</div>
Margin & Padding
Apply the themes default button styling to your links using the wpbf-button class.
<a class="wpbf-button" href="#">click me</a>
Add the wpbf-button-primary class to modify the look of the default button (wpbf-button). The button will use the accent color from the WordPress customizer as a background color.
<a class="wpbf-button wpbf-button-primary" href="#">click me</a>
To use the theme’s default table styling, add the
wpbf-table class to your table element.
<table class="wpbf-table"> ...
In the example below, we see a table that has been modified through helper classes.
<table class="wpbf-table wpbf-table-small wpbf-table-striped"> ...
In this example we display a larger table with hover effect.
<table class="wpbf-table wpbf-table-large wpbf-table-hover"> ...
Full width images
This is handy if you’re working on your blog layout for instance. With this helper class your image will set to 100% width so they fit its parent container.
<img class="wpbf-image" src="https://wp-pagebuilderframework.com/wp-content/uploads/2017/03/wpbf-clean-design.jpg">
Button modifiers are classes that can added to the button element above, to change its look.
Show Element after Pageload
Under certain circumstances, you may want to show a specific type of content only after page load. To do that, simply apply the CSS-class
opacity to your element. This will set the opacity to 0 and trigger a js animation (FadeIn) after the page has loaded.