Introduction

About WR Page Builder

WR Page Builder is clear, simple and extremely easy to use. Designed with an intuitive interface, WR Page Builder gives you new experience with visual drag-and-drop functionality when building a WordPress site.

The plugin is similar to an advanced editor and works on both posts and pages of any theme. It includes full page elements, widget support, built-in shortcodes and many more options that provide an unlimited number of style variations, so there is no need to touch technical code.

In particular, WR Page Builder has a live preview mode allowing users to view their page as it would appear in the front-end.

Go to: http://woorockets.com  and click the download button to download the installation file.

Let’s scroll down!

Back To Top

Hot Features Overview

WordPress Compatibility

WordPress 3.6 or higher Compatibility

Natively compatible with WordPress 3.6 and higher version

wp-compatible

Back To Top

Intuitive Layout

Once installed, it’s located next to the default WordPress Editor. To help you easily create your pages/posts, WR Page Builder is designed with a simple and intuitive layout.

You can easily switch between compact mode and full preview mode to preview everything you have created without going back to the front-end.

0

Back To Top

Fully Responsive

This plugin is 100% responsive and adaptive to various styles. This makes your site automatically resize its layout and look beautiful on any device.

1

Back To Top

Drag and Drop Layout

Drag and drop is a convenient functionality for creating a page or a post. You can easily arrange columns, move page elements or widgets into another position and even resize columns using just your mouse. You can also use the “Move button” on the sidebar to move rows up or down.

image_48

Change width with mouse only.

image_77

Move page elements between columns.

15

Switch between columns.

Back To Top

Live Preview Mode

You can save a lot of time and feel comfortable with our live preview mode (full). This plugin simplifies the process of building a page since you can see everything you have created in a front-end preview, so there is no need to go to the home page.

Back To Top

Easy To Customize

With this page builder, you can fully control your page. You can create the layout of pages: add columns, rows, change widths, background, padding, etc. of rows and use styling modes for each page element.

Back To Top

Advanced Page Elements (Built-in Shortcodes)

We have created many advanced page elements, such as: Pricing Tables, QR codes, Testimonials, Tables… You can choose the most suitable field and add as many elements as you want for your site without any coding. Interestingly, you can easily search these elements with the Spotlight Filter.

image_67

Field Page Box

You can also see the complicated shortcodes when you switch to Classic Editor Mode.

image_53

The shortcodes in the Classic Editor

Back To Top

Easy To Add Widgets

You can easily add all your current widgets into your pages in the same way as adding page elements. You can also find them in Spotlight Filter.

image_9

Back To Top

Installation

How to install WR Page Builder

After downloading, you will have an extension installation file called wr_page buider_x. xx. zip. In which: x. xx is the version of the plugin

This is a free installation file which can be installed in the WordPress theme as usual:

1.  In WordPress administration, go to menu Plugin -> Install Plugin

install-plugin

2.  Click the Add New button

add-plugin

3.  Click the Upload tab and browse for your installation file ->Click Install Now. The installation file will be uploaded to your server and installed in WordPress automatically.

image_83

4.  If everything is ok, the plugin will be installed successfully. Click Activate plugin and use it.

image_64

Or go to plugin -> Find WR Page Builder plugin and click the “Activate” option.

ig-doc-13

 

 

Back To Top

Usage

How to create a Page/Post with WR Page Builder

This plugin will help you to create content for a page/post with a variety of styles. In this section, this guide will show you more advanced concepts for building a page using WR Page Builder.

1. Creating the layout of the page

First you need to create the layout of your page/post.
–  Step 1: Click on the Add Row button to add new rows.

14

If you want to change the width, background, padding, etc. of rows, you click on the row settings icon on the sidebar of the row.

image_29

Edit Buttons of a row

A new option box will be opened, and you can edit the parameters of the row there.

image_30

Configuration Row Box

– Step 2: Click on the “add columns” icon  to add more columns with equal sizes.

Untitled

If you want to change the width of columns, you can use the mouse to drag the space between the columns to resize.

ig-doc-21

To delete a column: Click the delete button in the top-right corner of column

ig-doc-22

After setting rows and columns, you have a basic layout. Now you can add elements to your page.

2. Adding Widgets

Add Widgets: Click Add Element -> Select Elements -> Add Widget. You can select existing widgets to add into your columns and easily find them by using the Spotlight Filter.

image_52

To edit the settings of a widget, click on the Edit button of that widget.

16

A Setting box appears that allows you to edit the settings. For instance, I chose the Widget Page. In the Widget Page Settings, you can edit title, sort by, and exclude.

ig-doc-25

In the Styling tab, you can preview the widget as it would appear in the front-end.

ig-doc-26

You can add as many widgets as you want and easily move your widget into another position using drag and drop.

Back To Top

Enable WR Page Builder

Now WR Page Builder has been activated. This plugin works on both post and page and is located next to the WordPress Editor.

11

To enable it, you go to Post/Page -> Add new Post/Page -> Click the “Page Builder” tab -> Click the “On” button. (The default is always “Enable” mode)

11

Let’s take a look at the layout of WR Page Builder:

image_32

NOTE:

– Compact: The compact layout allows users to view all of the layout of page in a simple interface. (The layout is divided into blocks).
– Full (Live Preview): The enables the viewing of the full content of a page as it would appear in the front-end. You don’t have to go to the front-end.
– Move Buttons: Allow users to replace the position of rows.
– Add elements: You can add an unlimited number of page elements or widgets into each row.
– Delete Row: Allow users to delete a row.
– Row settings: Allows you to change the widthbackgroundborder and padding of rows.
– Add columns: Allow users to add columns in a row.

Back To Top

Page Elements

Adding Page Elements

Go to Add Element -> Select Element -> Page Elements. You can also select one or more elements per column.

wr-pagebuilder-elements

We provide a bundle of elements, as listed below:

  • –  Accordion
  • –  Alert
  • –  Audio
  • –  Button
  • –  Button Bar
  • –  Carousel
  • –  Divider
  • –  Google Maps
  • –  Heading
  • –  Image
  • –  List
  • –  Pricing Table
  • –  Progress Bar
  • –  Progress Circle
  • –  Promotion Box
  • –  QR Code
  • –  Tab
  • –  Table
  • –  Testimonial
  • –  Text
  • –  Tooltip
  • –  Video

Each element has 2 tab sections for configuring:
–  Content: Create specific content to display
–  Styling: Customize element (font, size, color, background, etc.)

Back To Top

Accordion

Using this element, you can show a set of items in a compact space with an accordion layout.

1. Front-end Appearance:

wr-pagebuilder-accordion-01

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-accordion-02

–  Element Title: Set the title of your element.
–  Accordion Items: List of items displayed, each item is a node of the accordion set.
–  Add Item: Add more items to show; you can add as many items as you want.
–  Edit item: Once you click here, the Accordion Item Settings will appear, which allows you to edit your item.

wr-pagebuilder-accordion-03

    + Heading: Set the text of your heading item.
    + Body: Create the content of each item using the editor.
    + Icon: Select an icon for your item. It is easy to find an icon using a search box or click “None” if you don’t need an icon.
    + Tag: Use tag to organize your content and group items which have the same tag together.

–  Duplicate: Allows you to create an identical copy of an item.

–  Convert to: This plugin supports converting your Accordion into a TabCarousel, or List with the same content.

ig-doc-32

–  Drag and drop to move position of items.

2.2. Styling Tab:

wr-pagebuilder-accordion-04

In this section, you can preview the presentation of an accordion item.
–  Margin: Allows you to set and change margin-top and margin-bottom
–  Initial Open: Sets the item which will be opened first
–  Allow Multiple Opening: Supports the opening of multiple items when set to “Yes
–  Enable Filter: This option allows its items to be filtered using tags or not (Tags are set in the item settings).

Back To Top

Alert

You can use this element to display a warning or information to your customers.

1. Front-end Appearance:

wr-pagebuilder-alert-01

The interface of an Alert

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-alert-02

–  Element Title: Set the title of the current element.
–  Alert content: Create the content of the element

2.2. Styling Tab:

wr-pagebuilder-alert-03

In this section, you can preview the alert which you created.
–  Margin: Allow you to set and change margin-top and margin-bottom.
–  Style: Support 4 styles: DefaultSuccessInfo and Danger.
–  Allow to close: Set whether the customers can close the alert or not.

Back To Top

Audio

This Element supports adding audio into your pages. The audio sources permitted are:

  • Local audio file (from your media library)
  • SoundCloud (https://soundcloud.com/)

1. Front-end Appearance:

wr-pagebuilder-audio-01

A SoundCloud audio

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-audio-02

– Element Title: Set the text for your element’s title
– File URL: Insert your audio link.

2.2. Styling Tab:

You can preview the audio and edit some options. If you choose SoundCloud, the dedicated styling options are shown below.

wr-pagebuilder-audio-03

–  Dimension: Set width and height of the audio box
–  Color: Select color for Play Button
–  Elements: Tick elements you want to display on the player.
–  Auto Play: Set whether to automatically play the audio or not.
–  Alignment: Allows you to select alignment options setting the position of the audio: rightleftcenter
–  Margin: Allows you to set or change margin size.

Back To Top

Button

1. Front-end Appearance:

wr-pagebuilder-button-01

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-button-02

–  Element Title: Set the title of your element.
–  Button Items: Show the list of items.

To edit an item, click the Edit button, and the Button Item Settings will appear:

Text: Set the text on the button
Link Type: Select link types: link to postpageproductarticle… After choosing a link type, there are more options which allow you to select a single item and set the links which open in the current browser, a new browser, or a light box.
Icon: Set the icon for items or click none if you don’t need an icon
Size: Set the size of the button
Color: Select the color of the button

2.2. Styling Tab:

wr-pagebuilder-button-03

In this tab, you can preview the Front-end appearance of Button Bars and modify some options:
–  Margin: Allow you to set or change margin-top, margin-bottom.
–  Alignment: Allow you to select alignment options to set the position of buttons: inheritrightleftcenter.
–  Show Title: Show/hide the title of buttons.
–  Show Icon: Show/hide the icon of buttons.
–  Group Button: Arrange button bars into a group in a single row.

Back To Top

Button Bar

1. Front-end Appearance:

wr-pagebuilder-button-bar-01

2. Configuration:

2.1. Content Tab:

ig-doc-41

–  Element Title: Set the title of your element.
–  Button Bar Items: Show the list of items.

To edit an item, click the Edit button, and the Button Bar Item Settings will appear:

wr-pagebuilder-button-bar-02

Text: Set the text on the button
Link Type: Select link types: link to postpageproductarticle… After choosing a link type, there are more options which allow you to select a single item and set the links which open in the current browser, a new browser, or a light box.
Icon: Set the icon for items or click none if you don’t need an icon
Size: Set the size of the button
Color: Select the color of the button

2.2. Styling Tab:

wr-pagebuilder-button-bar-03

In this tab, you can preview the Front-end appearance of Button Bars and modify some options:
–  Margin: Allow you to set or change margin-top, margin-bottom.
–  Alignment: Allow you to select alignment options to set the position of buttons: inheritrightleftcenter.
–  Show Title: Show/hide the title of buttons.
–  Show Icon: Show/hide the icon of buttons.
–  Group Button: Arrange button bars into a group in a single row.

Back To Top

Carousel

Using this element, your posts, products, images, etc. will be displayed as a carousel with nice effects.

1. Front-end Appearance:

ig-doc-44

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-carousel-02

– Element Title: Set your element’s title
– Carousel Items: The list of items displayed
– Add items: Add items to display. You can add as many items as you want.
– Convert to: This plugin supports converting your Carousel to a TabAccordion, or List with the same content
– Edit Element Button: Once you click here, the Carousel Item Settings Box will appear, which allows you to edit your items.

wr-pagebuilder-carousel-03

Image File: Allows you to upload an image file if you want to have images in your carousel.
Heading: Set the text of your heading items.
+ Body: Add the content of your items using the editor.
+ Icon: Select an icon for your items. It is easy to find icons with a search box or click “None” if you don’t need an icon.

 Duplicate element button: Allows you to create an identical copy of an item

2.2. Styling Tab:

wr-pagebuilder-carousel-04

In this tab, you can preview the appearance of your carousel in the front-end, and you can modify some
options:

 Margin: Set or change margin-top and margin-bottom
 Alignment: Select the alignment options: inherit, right, left, center
 Dimension: Set the width and height for the carousel
 Show Indicator: Show/hide navigation buttons inside your carousel.
 Show Arrows: Show/hide arrow buttons.
 Automatic Cycling: Set whether to run your carousel automatically or not.

Back To Top

Divider

You can use this element to split your posts

1. Front-end Appearance:

ig-doc-48

ig-doc-49

Examples of types of Divider Element

2. Configuration:

2.1. Content Tab:

ig-doc-50

– Element Title: Allow you to set your element’s title

2.2. Styling Tab:

wr-pagebuilder-divider-01

In this section, you can preview the appearance of your Divider element in the front-end and you can modify some options:
–  Margin: Set or change margin-bottom and margin-top.
–  Border: Set the border for your divider.

WR Page Builder provides some styles for you to choose.

 

Back To Top

Google Maps

Insert google map into your website with 4 map types: HybridRoadmapSatellite and Terrain.

1. Front-end Appearance:

ig-doc-94 (1)

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-gmap-03

–  Element Title: Set the title of the element.
–  Marker Items: Set the map options and add more details about your map. Click on “Add Marker” to add a new item and edit its option:

–  Title: Set the title of the item.
–  Description: Set more description details of this item.
–  Link URL: Set Google Profile URL.
–  Image: Select the description image for this item.
–  Location: Set location by entering location numbers.
–  Show: Show or hide this item.
–  Enable Direction: Select to activate or deactivate directions.
–  Destination: Select a destination item.
–  Css Class suffix: Add custom class for the wrapper div of this item.

2.2. Styling Tab:

wr-pagebuilder-gmap-04

In this tab, you can preview the appearance of your Google Map in the front-end and you can modify the following options:
–  Container Style: Choose the style of your container, there are two options: No styling and Thumbnail.
–  Alignment: Alignment on leftright or center.
–  Dimension: Enter the dimensions.
–  Margin: Set or change margin-topmargin-bottommargin-right and margin-left.
–  Zoom Level: Move the bar to choose zoom level.
–  Map Type: Select map styling, there are four options: HybridRoad-mapSatellite and Terrain.
–  Elements: Activate or deactivate the content elements.
–  Css Class suffix: Add custom class for the wrapper div of this element.

 

Back To Top

Heading

This element allows users to create heading text with a variety of font styles.

1. Front-end Appearance:

ig-doc-52

2. Configuration:

2.1. Content Tab:

ig-doc-53

–  Element Title: Set the title of your heading item
–  Tag: Support tags: H1, H2, H3, H4, H5, H6
–  Text: Insert your heading text

2.2. Styling Tab:

wr-pagebuilder-heading-03

In this tab, you can preview the appearance of your heading in the front-end and you can modify some options:
–  Margin: Allow you to set or change margin size.
–  Alignment: Allow you to select alignment options setting the position of headings: inheritrightleftcenter.
–  Font: Support inherit (the default font of current theme) or custom font. With custom font, you can choose standard fonts or Google fonts for your heading and you can edit the font size as well as text styles.
–  Bottom Border: Set width and styles for the bottom border of the element.
–  Bottom Padding: Set the distance between the heading and bottom.

Back To Top

Image

With this element, you can show images as full images or thumbnails and optionally attach a link.

1. Front-end Appearance:

ig-doc-55

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-image-02

–  Element Title: Set the title of your element.
–  Image File: Allow you to upload an image file from your media.
–  Image Size: Support  image sizes: full, medium, thumbnail (150x150px)
–  Alt Text: Insert ALT Tag for image.
–  Link Type: Select the type of link. This plugin supports a lot of link types, such as: URL or link to access a product, category, or large image.

2.2. Styling Tab:

wr-pagebuilder-image-03

In this tab, you can preview the appearance of your images in the front-end and you can modify some options:
–  Container Style: Select the Container border style of the image.
–  Alignment: Allow you to select alignment options setting the position of photos: inherit, right, left, center
–  Margin: Allow you to set or change margin size.
–  Fade in animations: If you select “Yes”, the image will fade gradually when user scrolls down to the photo.

Back To Top

List

1. Front-end Appearance:

wr-pagebuilder-list-01

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-list-02

– Element Title: Set the title of your element
– List Items: The list of items that will be shown
– Add Item: Allow you to add more items. You can add as many as you want.
– Edit element button: Click here to create content for each item. The List Items Settings Box will appear:

Heading: Set the title for your heading items.
Body: Add the content of your item using the editor.
Icon: Select an icon for your items. It is easy to find an icon with a search box or  click none if you don’t need an icon.

– Duplicate element button: Allow you to create an identical copy of an item

2.2. Styling Tab:

wr-pagebuilder-list-03

In this tab, you can preview the appearance of your list in the front-end and you can modify some options:
–  Margin: Allow you to set or change margin top and bottom.
–  Show Icon: Show/hide icon of items
–  Icon Position: Choose right or left
–  Icon Background: Set size and type of icon
–  Icon Color: Select the color for icon
–  Show Heading: Show/hide heading of items
–  Heading Font: Allow you to inherit the font, or use a custom font for your heading

NOTE:
– If you choose custom font, there are more options about font styles for you to choose from.
– Font Attributes: Set size and text style for your heading

 

Back To Top

Pricing Table

By using this element, you can easily create and publish a pricing or comparison table for your online store.

1. Front-end Appearance:

wr-pagebuilder-pricing-table-01

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-pricing-table-02

–  Element Title: Set the title of the element.
–  Attributes: Create the attributes of the Pricing Table. Click on “Add item” to add a new item and edit the attribute settings:

+  Title: Set the title of your attribute.
+  Description: Allows you to set more details of this attribute.
+  Type: There are two type options: free text and yes/no.

–  Options: Add new options to the pricing table by clicking on “Add item” in the options group; it will show an “Option Settings” form:

+  Title: Set the title of the element.
+  Description: Set more description details of this option.
+  Images: Upload image files if you want to have images in your option.
+  Price: Set a price number.
+  Button Text: Enter a button label.
+  Button Link: Set the URL for this button; you can link to pagepost or tag
+  Attributes: Edit your attribute settings.
+  Featured: There are two featured options: yes/no

2.2. Styling Tab:

wr-pagebuilder-pricing-table-03

In this tab, you can preview the appearance of your Pricing Table in the front-end and you can modify some options:
–  Margin: Set or change margin-top and margin-bottom.
–  Design: Choose your style option.
–  ElementsActivate or deactivate the content elements.
–  Css Class suffix: Add custom class for the wrapper div of this element.

 

Back To Top

Progress Bar

1. Front-end Appearance:

wr-pagebuilder-progress-bar-01

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-progress-bar-02

–  Element Title: Set the title of the element.

–  Progress Bar Items: List of items displayed, each item is a node of the progress bar set.

–  Add Item: Add more items to show; you can add as many items as you want.

–  Edit item: Once you click here, the Progress Bar Item Settings will appear, which allows you to edit your item.

Text: Set the text on the bar

Percentage: Set the percentage of progress

+  Color: Select the color of the bar

Icon: Set the icon for items or click none if you don’t need an icon.

2.2. Styling Tab:

wr-pagebuilder-progress-bar-03

In this tab, you can preview the appearance of your Progress Bar in the front-end and you can modify some options:
–  Margin: Set or change margin-top and margin-bottom.

–  Presentation: Choose to display multiple bars or single bar.

–  Show Title: Show/hide the title of progress bar.

–  Show Icon: Show/hide the icon of progress bar.

–  Show Percentage: Show/hide the percentage of progress bar.

–  Animated Progress Bar: Choose to add animation effect to Progress Bar or not.

 

Back To Top

Progress Circle

1. Front-end Appearance:

wr-pagebuilder-circle-bar-01

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-circle-bar-02

–  Element Title: Set the title of the element.

–  Text: Set the text on the circle.

–  Description: Set more description details of this item.

2.2. Styling Tab:

wr-pagebuilder-circle-bar-03

In this tab, you can preview the appearance of your Progress Circle in the front-end and you can modify some options:
–  Percentage: Specify the percentage of completed / active in progress circle.

–  Foreground Color: Choose the color of completed / active in progress circle.

–  Background Color: Choose the color of incomplete / inactive in progress circle.

–  Use Fill Color: Show/hide fill color for completed / active part in progress circle.

–  Circle Thickness: Specify the thickness of progress circle.

–  Dimension: Specify width / height of progress circle.

–  Font Size: Choose font size of text inside progress circle.

–  Show Icon: Show/hide the icon of progress circle.

 

Back To Top

Promotion Box

1. Front-end Appearance:

wr-pagebuilder-promotion-box-01

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-promotion-box-02

–  Element Title: Set the title of your element
–  Promotion Title: Set the promotion title of your element
–  Promotion Content: Create the content you want to show with the editor
–  Button title: Set the title for button
–  Button Link: Set the link to access. This plugin supports many types of link, such as: URL or link to access a product, category, or large image.
–  Open in: Set the target of the link.

2.2. Styling Tab:

wr-pagebuilder-promotion-box-03

In this tab, you can preview the appearance of your list in the front-end and you can modify some options:
–  Margin: Allows you to set or change margin top and bottom.
–  Background Color: Choose the background color for the promotion box.
–  Border: Set the width of the border
–  Border Color: Set the color of the border.
–  Show Shadow: Show/hide the shadow of the promotion box
–  Element: Click the elements which you want to display in the promotion box

ig-doc-65
To edit the title: you click on the Setting button  , and the Title Settings box will open. It allows you to select font styles, bottom padding and bottom margin.

To edit the button: You click on Setting button  , and the Button Settings box will open. It allows you to set the button size and color.

 ig-doc-66

Back To Top

QR Code

1. Front-end Appearance:

ig-doc-67

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-qr-code-02

– Element Title: Set the title of your element
– Data: Add the data for the QR Box
– Image ALT Text: Insert ALT Tag for image

2.2. Styling Tab:

wr-pagebuilder-qr-code-03

In this tab, you can preview the appearance of the QR Code in the front-end and you can modify the following options:
–  Margin: Set or change margin-top and margin-bottom.
–  Container Style: Select the container border style of the image.
–  Alignment: Select alignment options to set the position of QR Code: inherit, right, left, center.
–  QR Code Sizes: Set size of QR code

Back To Top

Tabs

This element supports showing content as tabs.

1. Front-end Appearance:

ig-doc-70

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-tab-02

–  Element Title: Set the title of the element
–  Tab Items: The list of items that will be shown in tabs.
–  Add item: Add more items – as many as you want
–  Convert to: This function allows you to convert Tab content to AccordionCarousel, or List with the same content.
–  Edit Element Button: Click this button to edit each item

Heading: Set the text of your heading items.
Body: Add the content to your items using the editor.
Icon: Select an icon for your items. It is easy to find icons with a search box or click “None” if you don’t need an icon.

–  Duplicate: Allow you to create an identical copy from an item.

2.2. Styling Tab:

wr-pagebuilder-tab-03

In this tab, you can preview the appearance of your Tab in the Front-end and you can modify some options:
–  Margin: Allows you to set or change margin-top and margin-bottom.
–  Initial Open: Set the tab that will be shown first.
–  Fade Effect: Allow users to use a fade effect
–  Tab Position: Select the position of the tab: top, bottom, left, right.

Back To Top

Table

This element supports displaying your content in a table; you can change the number of columns and rows, and you can edit colors and table styles.

1. Front-end Appearance:

wr-pagebuilder-table-01

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-table-02

–  Element Title: Set the title of the element
–  Table Content:
Add Row: Click this button to add one row
Add Column: Click this button to add one column
Edit Row Button: Allow you to edit the content of the row

* Width: Set the width of a row (px or %)
* Row span: Enable extending over multiple rows.
* Column Span: Enable extending over multiple columns.
* Row style: Select a style for a row.
* Content: Create content for a row

2.2. Styling Tab:

wr-pagebuilder-table-03

In this tab, you can preview the appearance of your table in the front-end and you can modify some options:
–  Margin: Set or change margin-bottommargin-top.
–  Style: Select style options for your table.

Back To Top

Testimonial

Testimonial is an Add-on which can help you show your customer’s feedback on the website.

1. Front-end Appearance:

ig-doc-103

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-testimonial-02

–  Element Title: Set the title of the element.
–  Testimonial Items: Add a new item for the testimonial element by clicking on the “Add item” button. The option “Testimonial Item Settings” will appear:

wr-pagebuilder-testimonial-03

Title: Set the title of the item.
Content: Write the user feedback or content here.
User Name: Enter a user name.
User: User description such as a role or website.
User Image: Set an image file for the user.
Css Class suffix: Add custom class for the wrapper div of this item.

2.2. Styling Tab:

wr-pagebuilder-testimonial-04

In this tab, you can preview the appearance of your Testimonials in the front-end and you can modify some options:
–  Margin: Set or change margin-top and margin-bottom.
–  Items per Slide: Enter the number of items you want to display on the Slide.
–  Slider Elements: There are two options of slider you can select: Arrows and Indicator.
–  Content Elements: You can activate or deactivate the content elements: TitleContentUsernameUser
–  Css Class suffix: Add custom class for the wrapper div of this element.

Back To Top

Text

1. Front-end Appearance:

ig-doc-78

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-text-02

–  Element Title: Set the title of the element
–  Text Content: Create your content using the editor

2.2. Styling Tab:

wr-pagebuilder-text-03

In this tab, you can preview the appearance of your carousel in the front-end of and you can modify some options:
–  Margin: Set or change margin-bottommargin-top
–  Enable Dropcap: Enable dropcap or not. If you choose “Yes”, there are more options for you to select:
Font Face: Support standard fonts and Google Font.
Font Attributes: Set size and styles for Dropcap.

Back To Top

Tooltip

This element helps you create a message or hint that appears when a customer hovers on a text.

1. Front-end Appearance:

ig-doc-81

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-tooltip-02

–  Element: Set the title of the element
–  Text: Set text here
–  Tooltip Content: Create content of tooltip

2.2. Styling Tab:

wr-pagebuilder-tooltip-03

In this tab, you can preview the appearance of your tooltip in the front-end and you can modify some options:
–  Margin: Allow you to set or change margin-bottom and margin-top.
–  Tooltip Position: Set position where your tooltip will appear.
–  Tooltips In Button: Create a button for your text. If you choose “Yes”, you can select color for button with the button color option.
–  Delay: Set time (ms) before a tooltip appears when customers hover on your text
–  Hide: Set time (ms) before a tooltip disappears when customers hover on your text.

 

Back To Top

Video

This element allows you to add videos into a page. It supports video on local file, Youtube and Vimeo

1. Front-end Appearance:

ig-doc-84

2. Configuration:

2.1. Content Tab:

wr-pagebuilder-video-02

–  Element Title: Set the title of the video
–  Video link: Insert your link here
–  Select video source: Select a video source (YouTube, local file, Vimeo)

2.2. Styling Tab:

wr-pagebuilder-video-03

In this tab, you can preview the appearance of your video in the Front-end and you can modify some options:
–  Dimension: Set the width and height of your video
–  Auto play: Choose “Yes” if you want to automatically play video.
–  Loop: Play your video indefinitely in a loop.
–  Controls auto hide: Manage the options below each video.
–  Alignment: Select alignment options to set the position of the video: right, left, center or not use it.
–  Margin: Set or change margin size.

 

Back To Top

Shortcode Tab

How to use Shortcode Tab

The Shortcode Tab is a new improvement of WR Page Builder; to use this functionality you can click on “Copy to Clipboard” to copy Shortcode.

wr-pagebuilder-shortcode-01

When you want to reuse an element, select “Add new element”, choose “Page Builder Shortcode” and paste the Shortcode into the “Page Builder Shortcode” form.

Back To Top

WR Page Builder Settings

Configuration

In this page you can change the settings of WR Page Builder: Enable caching, load bootstrap assets and login with customer account.

wr-pagebuilder-settings

Back To Top

For Developers

Introduction

This document is made for developers, who are going to build Add-on for WR Page Builder. This part includes a knowledge base about WR Page Builder, some basic APIs, and a tutorial to make a simple Add-on with a simple element.

Before reading this document, you are expected to have good knowledge in working and developing with WordPress, WordPress Plugins and Shortcodes, be familiar with WR Page Builder’s UI and UX.

Back To Top

Definition

Concept Explanation
Core This is the WR Page Builder plugin which is released on WordPress.org :http://wordpress.org/plugins/wr-page-builder/
Page Builder Element (Shortcode) This is a type of WordPress Shortcode, which is found in the popup after clicking on the “Add Element” button of Page Builder (Accordion, Carousel, Audio, …).
Page Builder Addon A WordPress plugin which includes one or many Page Builder Elements
“Add Element” popup The popup opens when clicking on the “Add Element” button, which lists all Page Builder Elements
Element setting modal The modal which is opened when a user clicks on the “Add / Edit element” button in Page Builder’s UI in the backend.
HTML Input Type The automatically rendered inputs inside Element Setting modal, such as
text_field, radio, checkbox, label,… , read the HTML Input Type section in this document for more
information

Back To Top

Page Builder’s Addon folder structure

This Addon of WR Page Builder is a WordPress plugin, which is packed and installed by the WordPress Plugin manager. There is a very simple folder structure that you might follow to help WR Page Builder Core to realize your elements:

First, take a look at the image below:

ig-doc-110

This is the structure inside an WR Page Builder’s Addon, including:

main.php:

A regular WordPress Plugin main file, which includes plugin info: Plugin Name,  Version, Description, etc.

defines.php:

This file includes necessary constants for the Addon, and the ruled constants which are needed for update/upgrading Addon via WR Page Builder core.

+ “elements” folder:

Includes all the Elements of this Addon. Each element is placed in a folder named by its identify name.

The names of folders are not required to be exactly the same as above ones; they will be declared in the main.php file. (This will be described more detail in next section)

Back To Top

Page Builder Element (Shortcode) folder structure

All the files of a shortcode that we call an Element are placed in a folder named by its identify name. This folder is placed in the “elements” folder of the Addon.

For example, this element “accordion” is located in root_folder/wp-content/plugins/addon_folder/elements/accordion

screenshot_element_11

A shortcode can output an Accordion element like this in the front-end:

screenshot_element_2

accordion.php

The main file of this element, which includes parameter declaration and configuration, and the logic code to render it in the site’s front-end, …

assets folder

This folder includes necessary assets (css, js, image… files) for the element.

item folder

This folder includes child elements if it has any. Here (as in the picture above), the child elements are  “Accordion Item 1, Accordion Item 2”.

=> item/accordion.php

This is the child element’s main file, it has same structure as the Element main file. This file will declare parameters for the child element such as title, content, icon, etc…

Back To Top

How to create a “Hello World” Addon

Before starting, you can take a look at this sample Addon package or copy the code easily, all the code representations of this section will be in images.

This section will show you how to create a WordPress Plugin that WR Page Builder could realize this one is its Addon:

1. Create the element folder and files.

First, we need to build the skeleton structure for this simple Addon:

ig-doc-113

As in the definition of this document, an WR Page Builder Addon is also a normal WordPress plugin so the basic requirements will follow WordPress standards.

2. Start setting up Addon and its element parameters.

+ defines.php

The WR_HELLO_WORLD_IDENTIFICATION constant is only needed when you provide your Addon via Addon Directory. This helps WR Page Builder Core know if your Addon has an update.

+ main.php

Firstly, we have to declare the necessary information in this file main.php:

+ elements/helloworld/helloworld.php

This file is the main file of this element “Hello World”. It will include a class to associate with the core and the header part will look like this :

– Declare the configuration of the element using the function “element_config()” :

* ‘shortcode’ : (string) the desired WordPress shortcode tag, ensure that this tag is unique by adding a prefix, ex: {your prefix}_{element name}, here we used the class name for the tag – [wr_helloworld]
* “name”: (string) the name will be displayed in element setting modal title.
* “icon”: (string) icon of the item in the “Add Element“ popup.

At this step, if you install the Addon, you will get the Hello World item appearing inside the “Add Element” popup:

ig-doc-121b

– Declare the element’s parameters using the function “element_items()”, all the parameters will be declared inside this variable:

$this->items = array();

The parameters are separated into 2 tabs: Content and Styling, equivalent to 2 options of $items: “content” and “styling”. If you don’t want the parameters to be separated into tabs, just declare all parameters inside “Notab” instead of “content” or “styling”.  View the full code of this function and read the comments for an explanation:

After declaring the configuration and parameters for the element, the Setting modal of this element should work. You can add the element into the Page Builder UI, change the parameters, save them, etc, You can check this by trying to add your Hello World Element:Notice the “type” option: this is the HTML input type identify name. The other options (std, options, tooltip,…) will depend on what the input type requires.

ig-doc-1261

– Retrieve saved parameter values and display the element in the site’s front-end. After saving your Hello World parameters you can decide how to display it in the front-end. Let’s say we are going to make this element be displayed like this:

To do this, declare this function: “element_shortcode()” inside WR_Helloworld class.

NOTE:
The front-end of WR Page Builder uses customized bootstrap 3 CSS, so you can reuse the style athttp://getbootstrap.com. All elements are wrapped inside a div with class named “jsn-bootstrap3”. You can use this to style your own element, as you desire.3. Add extended element assets.WR Page Builder will automatically load the assets (JS and CSS files) for the back-end (inside the Setting modal of the element) and the front-end if you name and place them following the rules below:- For JS file:
[element folder]/assets/js/[element identified name].js if you want this JS file to be loaded inside the Setting modal, for example: “helloworld/assets/js/helloworld.js”.

[element folder]/assets/js/[element identified name]_frontend.js if you want this JS file to be loaded in the front-end. For example:” helloworld/assets/js/helloworld_frontend.js”.

– For CSS file:
[element folder]/assets/js/[element identified name].css if you want this JS file to be loaded inside the Setting modal, for example: “helloworld/assets/js/helloworld.css”.

[element folder]/assets/js/[element identified name]_frontend.css if you want this JS file to be loaded in the front-end. For example:” helloworld/assets/js/helloworld_frontend.css”.

Back To Top

HTML Input Types

HTML Input Types

There are built-in HTML types inside WR Page Builder’s core (core/helper/html) that help you to do most actions to declare element parameters. You also can extend those types, see “Extend HTML Types” to know how.

The HTML types will be rendered by this function :

(array) $element : includes options which were declared inside the “$item” variable in the “element_items()” function of the element’s entry class.  

How to understand HTML Input Types list

For example, with this type:

…that means you can declare “$this->items” inside the function “element_items()” as below:

ig-doc-130

1) The required options for every Input Type

2) These are options you should find in the HTML Input Type list

Below is the list of built-in HTML Input types (you can find the files inside /core/helper/html/):

Back To Top

Advanced

 How to create an element with sub-elements

This will show you how to create a LIST-type element, with a parent element and many child elements (like Accordion or List elements).  We will make it based on the Hello World element.

The Setting modal of the element will have this field:

ig-doc-131

Follow the steps below to add sub-elements to the Hello World element.

– Change the parent of  class “WR_Helloworld” from file /elements/helloworld/helloworld.php) :

to “WR_Pb_Shortcode_Parent” as below :

Update the function element_config() as show below :

Define the field to Display/Add sub items by update the content array inside function element_items() as below:

Last thing is update this block of code inside function element_shortcode_full :

Create this file: “/elements/helloworld/item/helloworld.php”, with the following content:

The sub-element class must extend the “WR_Pb_Shortcode_Child” class, other will follow the instruction in Creating Hello World Element tutorial.

You must set 1 parameter with role = “title”, that is the item title which is displayed in the parent element’s Add Item field.

Back To Top

WR Page Builder Theme Integration

Looking for a way to make your WordPress theme top seller? A lot of theme authors has already included WR Page Builder into their WordPress themes so can you. This is a step-by-step guide to help you integrate WR Page Builder into your theme using TGM Activation :

  • 1. Include TGM Activation into your theme : First, navigate to this page and download file class-tgm-plugin-activation.php
  • 2. Go to your theme folder, create a new sub-folder named assets then place both class-tgm-plugin-activation.phpand ig-pabebuilder-package.zip file there.
  • 3. Open your_theme_folder/functions.php file and add this code :

 

 

That’s it! Upon install and activate your theme, you will see notification about required WR Page Builder plugin that need to be installed along with the theme.

Back To Top

Migrate from IG PageBuilder to WR PageBuilder

As you might already know, InnoGears was acquired by WooRockets and IG PageBuilder plugin has been changed to WR PageBuilder. The good news is if you’re using old plugin IG PageBuilder, you still have a change to migrate to WR PageBuilder to get latest bug fixes and future updates just by follow the step-by-step guide below :

1. First, navigate to the page / post you built with IG PageBuilder >>> then switch to Classic Editor (1) >>> make sure you’re in Text mode (2) >>> copy the shortcode to any HTML editor and replace all “ig_” (without double quote) with “wr_” (without double quote) (3) >>> then copy the updated shortcode back here and hit Update to update your page / post (don’t switch to IG PageBuilder panel).

wr-doc-200

2. Next, go to Plugins >>> Installed Plugins >>> Deactivate IG PageBuilder >>> make sure you choose option Deactivate without parsing data as below

wr-doc-201

3. Last step is to install latest version of WR PageBuilder >>> activate the plugin >>> navigate to the page / post in step 1 >>> switch to WR PageBuilder panel and if you see all elements are rendered correctly as in the screenshot below, you’re good to go with all remaining pages / posts.

wr-doc-202

Back To Top

Support and Feedback

Feedback and Suggestion for our products

If you have any feedback or suggestions please let us know via forum here. Thank you!

 

Back To Top