Please note that this plugin is built for themes made by us.
If you're looking for a theme optimized for this amazing page builder, please visit this page!
If you purchase one of these theme, you will have access to our support forum.
First of all, install or update to the latest version of Wordpress on your server.
There is 2 ways for installing Wolf Page Builder.
Wolf Page Builder is an easy way to create complex layouts for your pages using the drag'n drop system.
It won't prevent you from using your regular Wordpress text editor as you can switch from the builder editor to the Wordpress text editor at any moment.
If your page is switched to the regular Wordpress editor, the content of the Wordpress editor will be displayed on the frontend.
To create your first section, click on the big button at the center of the screen or on the plus button at the top left or bottom left of the page builder.
If you already have sections in your editor, the top plus button will add a new section at the top of the editor, and the bottom plus button will add it at the end.
When you add a section, you will be asked which kind of section you want to create.
The columns section contains 3 levels of containers
The main section container is where you can set a background, set your main font color tone and more.
The main section container can contain several rows.
A row consists of a set of column.
For each row you can set a different columns layout, a different width and set a top and bottom margin.
For each row you can set a different columns layout.
The column layout can be changed even when your columns contain content.
But be careful, if you decide to change your layout for one with less colums, the content of your removed column will be gone.
The column container will contain your elements. You will see that in the next section of this doc: Add an element.
For advanced geeks: for each column you can set a specific CSS class if needed and evene apply custom CSS styles.
The blocks section contains 2 levels of containers: the main section container and the blocks.
You main blocks section can contain from 2 to 8 blocks. You can set your layout the same way as the column layout by clicking of the layout icon at the top left of your section.
For each blocks you can set a background and decide if it will contain text or media.
The difference is that if you set your block to text content, a padding will be added automatically.
Tip: To display an image in a block, you can set a background image to it instead of adding an image element. That way your picture will always cover the full size of the block.
Add a new element to a column or a block is very simple. Just click on the "plus" icon at the top right of the container where you want to insert your new element to open the elements panel.
These element are sorted by categories (1) and you can use the top right seach field to find an element quickly (2).
When clicking of element, you will open a bunch of element settings. You are free to leave any field empty to use the default setting.
There is 2 main types of element : simple elements, elements that you can insert as-is in your column or block, and nested elements.
Nested elements are element that contain element children, for example the testimonials slider. You can insert an testimonials slider element in your column and then set different slides in it. These testimonial slides are the element children.
In this case, you will find settings for the element itself AND for the element children as well.
Most of the elements can be animate on page scroll using the element animation. If the element offers this feature, you will find an "animation" dropdown option in the element settings.
You can also set an animation delay to animates the element one by one on the same row.
Wolf Page Builder allows you to load any google font and use it in text blocks and in other elements.
To load your google fonts, go in the Wolf Page Builder -> fonts panel and enter your google fonts in the field using the google font specific format.