Extensions

Getting Started

In this guide you will learn the first steps needed to create a stunning website easily using the PluginOps Page Builder for WordPress.

 

This guide will cover the following points.

  1. Type of Pages. 
  2. Accesing the editor.
  3. PluginOps UI: Getting familiar with the interface and basic options. 
  4. Adding, Deleting, Editing & Duplicating Rows.
  5. Getting familiar with Columns and its options. 
  6. Adding a widget. 
  7. Choosing pre made template designs.   

1. Types of Pages

With PluginOps Page Builder you can create 2 types of pages. 1. Simple WordPress Page, 2. A Dedicated Landing Page. 

  1. A simple page will be just like any other page you create with your theme styling but you can use Page Builder to design it.
  2. A Landing Page will not use any of your theme's styling and allow you to style each and every element without theme's interference. 

 

Both of these pages will have same level of options and features the only main difference is in landing pages there will be no usage of your theme's styling. 

 

To create a Landing Page go to Landing Page Builder > Add New  on your WordPress Dashboard. 




2. Accessing the editor

In Landing pages the editor will active by default but for Pages and other post types you will have to enable the editor. 

To activate the PluginOps editor Add a new page. Then Click on the Switch to PluginOps Page Builder button. 

 

 


3. Getting to know the UI

 To work with PluginOps Page Builder you need to understand these main features.

 1. Options Panel : Use this panel to edit options for elements, add new widgets, columns.

2. Row Controls: When you bring your mouse cursor over a row the row controls will appear. With Row controls you can edit row, delete row, duplicate row, set global row, reorder & move rows and add new Rows. 

3. Column Edit :  This blue button is column edit button when you bring your mouse over a column its edit button will appear clicking it will open column options in side panel where you can edit column options and add new widgets into your columns by dragging them. 

4. Widget Controls:  Just like rows widgets controls will appear on mouse over and you can edit a widget, delete a widget, duplicate a widget and  drag it to other rows. 

5.  Full Screen Editor:  This is the full screen button clicking it will disable wordpress menus and gives your full front end editing experience. 

 6. Right Side Panel: Click this arrow button will open the Right side panel. On this panel you can change the status of your page, and access some advanced options. 

 

 

4. Adding, Deleting, Editing & Duplicating Rows

 

1. To add a row click on add new row button and then select your column structure. Selecting column structure will set the number of columns for that row. 

 

2. To edit a Row click on edit button on row controls, It will open the row options panel where you can edit row options. Following are the row options you can edit. 

  1. Row Height
  2. Number Of Columns
  3. Row Background Color
  4. Row Margin
  5. Row padding
  6. Row Background Video
  7. Row Custom CSS & JS 

 

 

3.  With Row controls you can add, edit, duplicate, reorder, delete rows.

  1. Add new Row button. 
  2. Drag & Drop handle.
  3. Global Row Set Button.
  4. Duplicate Row Button.
  5. Edit Row Button.
  6. Delete Row Button.

 


 

5. Columns And Column Options

 

1. Column Edit Button

2. Column Right Border + Resize Button

 

 In column options panel you can edit column options, add new widgets and manage existing widgets. 

Column Options Tab

  1. Column Background Color
  2. Column Width, You can also set by dragging columns right handle. 
  3. Column Margin.
  4. Column Padding.




 

6. Adding and editing a widget

 

To add a widget click on column edit button then switch to New Widget Tab click and drag a widget on your column and drop to add it. 

GIF
 


To edit a button bring your mouse over a widget and click on edit button. 

 

 

7. Choosing Pre-made templates  


  1. Switch to templates tab from top tabs above the editor. 
  2. Select a template you want. 
  3. Click on the green update template button. 

Once you click on update button the page will reload and you new template will be loaded. 

Note : Updating a template will replace your existing design and content.