Thank You!

Thanks a ton for downloading Wolf Page Builder!

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.

Version: 1.6.9

Installation

First of all, install or update to the latest version of Wordpress on your server.

There is 2 ways for installing Wolf Page Builder.

Zip upload installation

  1. In your Wordpress admin panel, go to the plugins panel
  2. Hit "Add new" button at the top of the page
  3. Choose the "Upload plugin" option and upload the wolf-page-builder.zip file

FTP upload installation

  1. Extract the wolf-page-builder.zip archive
  2. Via your FTP client, put the "wolf-page-builder" folder in wp-content/plugins/
  3. Once the upload is complete you can activate Wolf Page Builder theme

Introduction

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.

Create a section

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.

Columns section

The columns section contains 3 levels of containers

1. The main section container

The main section container is where you can set a background, set your main font color tone and more.

2. The rows

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.

Columns layout

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.

3. Column

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.

Blocks section

The blocks section contains 2 levels of containers: the main section container and the blocks.

Blocks layout

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 an element

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.

Different types of element

There is 2 main types of element : simple elements, elements that you can insert as-is in your column or block, and nested elements.

Simple element

Nested element

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.

Element animation

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.

Load google fonts

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.

Social profiles

If you want to use the "Socials" element to diplay icons linked to your social profiles, you must enter your network profiles in the Wolf Page Builder -> Socials.

Simply fill the field of the social network you want to use.

Thanks again for downloading Wolf Page Builder. Have fun!

Being a free product, this plugin is distributed as-is without official support. Verified customers however, who have purchased a premium theme. will have access to support for this plugin in the forums https://help.wolfthemes.com/.