Page Builder is a drag and drop tool. We have a famouse WordPress Page Builder Rock Page Builder. WordPress page builder is a tool to make building pages easy. Page Builder and WordPress Page Builder Rock Page Builder got a lot of benefits like ;
- Drag and drop website building
- Making sites faster
- Very easy to use UI
- Fully Responsive Design
- Up To 5x Faster Website building
- And so much more..
Page Builder for WordPress Rock Page Builder
Rock Page Builder is a very unique WordPress page builder. By using Rock Page Builder, you can build your pages easily. And you can do so much more with Rock Page Builder. It’s advanced WordPress page builder features, allows you to build your page faster.
Saving Rock Page Builder
To save your Rock Page Builder, you should use our green save button. We have also some details about this basic saving system. You can learn more details about it at saving with Rock Page Builder.
Rock Page Builder is an advanced WordPress Page Builder. It has very unique and powerful features. In this page, we will get into the details of Rock Page Builder’s general features. Here are the main features we are going to learn ;
Rock Page Builder Templates
- 01. Rock Page Builder Template List
- 02. Rock Page Builder Template Name
- 03. Save Rock Page Builder Template
- 04. Delete Rock Page Builder Template
- 05. Load Rock Page Builder Template
- 06. Add New Rock Page Builder Template
Special Grids
- 07. Grid Lock – Special Grid
- 08. Quick Move – Special Grid
- 09. Settings – Special Grid
- 10. Delete – Special Grid
Columns
- 11. Quick Move – Column
- 12. Settings – Columns
- 13. Duplicate – Column
- 14. Delete – Column
- 20. Add New Element into Column
- 21. Increase Decrease Column
Sections (Building Shutter Page)
Elements
- 16. Edit – Element
- 17. Delete – Element
- 18. Duplicate – Element
- 19. Move – Element
- 20. Add New Element into Column
- 21. Increase Decrease Column
Layout / Content
Rock Page Builder Templates
Templates are very useful when building your page. You can save your layout as a template or back up. You can load the template in the same page or different page. You can easily save, load and build new templates. We advise using templates when working on complex pages. Also, if you want to do something different, you can save your layout as template. Then load it if you want.
01. Rock Page Builder Template List
This is the saved Rock Page Builder templates list. If you select a template here, you can load it to use. If you select a template, template name will be shown. When you make new Rock Page Builder templates, they will be shown here. If you want to save over a template, select the template then click on the Save button.
02. Rock Page Builder Template Name
When you select a Rock Page Builder template, it’s name will be displayed here. This way, you will know the template you are working on. If you want to save over a template, system will save the template named here. If you want to make a new template, enter a unique template name here then click on “Add New” button. (06. Add New)
03. Save Rock Page Builder Template
To save a Rock Page Builder Template, you should select a template from the template list (01 Template List). Active template name will be shown in the Template Name area (01. Template Name). If you see your template name in the Template Name area, you can click on Save button to save your template.
04. Delete Rock Page Builder Template
To delete a Rock Page Builder template, you should select a template from the template list (01 Template List). Active template name will be shown in the Template Name area (01. Template Name). If you see your template name in the Template Name area, you can click on Delete button to delete that template.
05. Load Rock Page Builder Template
To load a Rock Page Builder template, you should select a template from the template list (01 Template List). Active template name will be shown in the Template Name area (01. Template Name). If you see your template name in the Template Name area, you can click on Load button to load that template. After the template loaded, the page will be reloaded automatically.
06. Add New Rock Page Builder Template
To add a new Rock Page Builder template, you should enter a new and unique template name into Template Name area (01. Template Name). After you enter a template name into Template Name area, you can click on Add New button to add new template. When new template added, it will be shown in the Template List (01 Template List).
Special Grids
Special Grids are unique elements of Rock Page Builder. It’s actually the real power of the Rock Page Builder. You can do so much more things by using Special Grids. To use Special Grid, move your columns between Special Grid Open and Close blocks. Make sure Special Grid Open – Block : X matches with Special Grid Close – Block : X. Which means If you use Special Grid Open – Block : 3, it should be closed with Special Grid Close – Block : 3.
You can do different things with Special Grids ;
- Shutter Page Design
- One Page Design
- Full Width Content
- Full Screen Content
- Background Images
- Video Background
07. Grid Lock – Special Grid
You can quick move (08. Quick Move) Special Grids and columns inside when grid lock is locked. Grid lock will lock the columns in the Special Grids to Quick Move. You can click on it to lock/unlock it. By default it comes as locked.
08. Quick Move – Special Grid
Rock Page Builder is a drag and drop page builder. But if you want to move a Special Grid somewhere quickly, you can use this feature. When you click on this icon, you’ll see the layout changes with landing icons. You can click on a icon to quickly move this grid. Make sure you always have at least 12 columns when using Special Grid quick move. For example, if you want to quickly move a Special Grid from bottom to the top, element of the landing icon should be at the left or have to be 12 columns. If you want to move columns inside the special grid, you can enable grid lock (07. Grid Lock).
09. Settings – Special Grid
To edit a Special Grid details, click on Settings icon. It will show you a lot of different features to set up as you like. The columns between Special Grid open and close blocks will use those features.
- Special Grid ID : If you want to use Shutter Page, One Page design, set an id to your Special Grid. make sure this id is unique in the page and you don’t use spaces in this id. Then you can use this ID to link to this field. Setting ID will not enable linking automatically. You should use this id to link from the menu. (One Page)
- Special Grid Title : Special Grid titles are the quick references you can use. This will make the backend usage easier. By using Special Grid title, you can know which section starts and ends easily. Special Grid titles are not your menu titles. You should set your menu title in Appearance > Menus. (One Page)
10. Delete – Special Grid
To delete a Special Grid, you can close on the icon on the Special Grid. That will remove both Special Grid Open and Close blocks automatically. Columns between Special Grid blocks will remail the same.
Columns
Rock Page Builder allows you to use 1 to 12 columns easily. You can either select a columns while you are adding new element with columns (22. Add New Element With Columns). Or you can change the columns easily by using increase / decrease arrows (21. Increase Decrease Column). You can of course add new elements into the columns too (20. Add New Element into Column).
11. Quick Move – Column
When you click on this icon, it will change the layout view. You will see landing icons to quickly move this column. You can click on a landing icon to move the active column. Make sure, your landing item’s location and columns are enough for the active columns.
| Columns From Details | Columns To Details | Result |
| 4 Columns | 3 Columns with offset 3 | Success |
| 4 Columns | 7 Columns with offset 3 | No ( 7 + 3 + 4 > 12) |
| 4 Columns | 6 Columns with offset 0 | Success |
12. Settings – Columns
You will see different settings for columns. Click on the edit icon (12. Settings – Columns) and columns features will be shown to edit. There are different things you can do with columns settings ;
- Change Columns Background
- Use Background Image in Columns
- Change Columns padding
- Animate Columns
13. Duplicate – Column
You can easily duplicate (copy-paste) a column. When you click on this icon, system will automatically duplicate the active columns. Also the elements inside the columns will be duplicated as well. Duplicated new column will be added to the grid’s first empty area. Which means, if you have an empty area at the top, your new duplicated columns may be added there. You can of course use our Quick Move (11. Quick Move – Column) feature to move duplicated columns to the area you want.
14. Delete – Column
When you click on delete, a confirmation will be shown. If you choose to confirm, the columns and the elements inside will be deleted. Make sure you are deleting the correct columns. If you don’t want to risk it, you can save your layout as Rock Page Builder Template (03. Save Rock Page Builder Template) or make a new template if you haven’t made already (06. Add New Rock Page Builder Template).
Sections
Sections are the unique areas made by Special Grids. To make a section to work like Shutter Page / One Page, you should set ID to that Special Grid (09. Settings – Special Grid).
15. Sections (Building Shutter Page / One Page)
We are using sections for building Shutter Page / One Page Design. Basically, a section will have ;
- Special Grid Open Block
- … Elements …
- Special Grid Close Block
To make a section, use special grids. And enter an ID for your Special Grid (09. Settings – Special Grid). ID’s used for one page design. Menu can only know and link to the Special Grid section with ID’s. So you must enter a unique ID for each Special Grid to make Shutter Page / One Page design.
Elements
There are different elements in the Rock Page Builder. Our elements are based on Responsive Design. You can use our elements and build your website easily.
16. Edit – Element
There are different elements in the Rock Page Builder. You can easily edit an element by clicking on the edit icon. When you click on this icon, a new area with element settings will be shown. You can edit the element details there. Each element can have different settings and different features.
17. Delete – Element
You can delete elements when you click on delete icon. A confirmation will be shown when you want to delete an item. If you confirm, element will be deleted. Make sure you are deleting the correct element. If you don’t want to risk it, you can save your layout as Rock Page Builder Template (03. Save Rock Page Builder Template) or make a new template if you haven’t made already (06. Add New Rock Page Builder Template).
18. Duplicate – Element
You can duplicate elements by clicking on that icon. Duplicated element will be added below the originial element.
19. Move – Element
Elements can be moved. To move an element, start to drag it by holding down on your mouse on the drag icon. Then move your mouse where you want to move this element to. Release your mouse to add it to the new area.
20. Add New Element into Column
When you click on it, our element list will be shown. You can click on the element you want to add. And the system will automatically add that element into the same column.
21. Increase Decrease Column
You can change the columns size by clicking on increase decrease arrows. This arrows can increase your column size up to 12 and decrease column size to the 1. If your element is at the end of the column, you may need to move it to the left to increase it’s size.
Layout / Content
Layout and Content is our final detail in this file. We tried to touch the basics of Rock Page Builder and how to use some of it’s main features. By learning this main features, you can use the power of Rock Page Builder and make your website building faster and of course easier. Also, these features allows you to enlarge your usage on a page builder by adding a lot of different variations on page building
22. Add New Element With Columns
By clicking on this button, you can add new elements. When this button clicked, you’ll see our element list along with columns selection. You can select column 1 to 12 as you like. Then click on an element to add it.
23. Add Content To Text Editor
This button, adds the content you’ve made to the text editor. By default, when you click on Rock Page Builder’s save button (Saving Rock Page Builder), WordPress’s default Text Editor’s content updated automatically. However, there could be times when you want to get the shortcodes of the elements to use it somewhere else. For that, you can use this button. Keep in mind, this button will add the content as shortcode into the WordPress’s default text editor. Which means, if there are some content there already, this will be added after them. If you want your final layout to be shown there only, you can delete the older entries in the WordPress’s Default Text Editor.
Rock Page Builder Layout Structure
It is very easy to use Rock Page Builder. It is working with Drag and Drop, Drag and Droll and Quick Move. But before using it’s full power, you should learn the basics. You can ofcourse start to use it right away without any additional information. This information will boost the power and usability of the Rock Page Builder.
Above here you will see a structure for understanding the areas used in Special Grids.