Drag and Drop Editor Instructions

How to login

  1. Open a web browser such as Safari, Chrome, Firefox or Edge
  2. Go to your website
  3. Add login after the /
logging in
logging in
  1. Enter your Username & Password
  2. or click Forgot Password
Website Editing Toolbar
Website Editing Toolbar

Once you're logged in, the main website editing toolbar will appear at the top of the page, as shown above.

How to launch the Drag and Drop Editor

  1. Go to the page that you want to edit in the front end of your website.
  2. Click the Drag and Drop Editor or Beaver Builder button in the toolbar at the top of the page.

 

drag and drop editor button
Beaver Builder

Or from the Dashboard...

  1. Using the Dashboard menu on the left, choose Pages > All Pages or Posts > All Posts.
  2. Hover your cursor over the Page or Post that you want to edit and click Drag and Drop Editor.
VID Builder toolbar
VIDesigns Drag & Drop Page Editing toolbar

The main toolbar will be replaced by the Drag and Drop Editor Toolbar, as shown above.

To ADD new content

VID Drag & Drop builder
  1. Click on the + icon in the upper right corner.
  2. Choose the type of content that you want to add: a Module, Row, Template or Saved. See below for a description of each.
launch drag & drop
The main Drag & Drop Editor menu

Edit Page Content

launch-drag-&-drop-edit
  1. Click on the content that you want to edit.
  2. A popup window will appear where you can edit the content and it's settings such as margins, padding and add animations.

To see details for editing each type of content, use the sidebar on the left of this page to find instructions for the type of content that you're editing. Or use the button below to jump to a description of all the Modules.

More Information:

Add a new Page

From within the WordPress Dashboard, using the main menu on the left:

  1. Click Pages > Add New.

Or from your website's front end, using the main editing toolbar at the top of the page:

  1. Click New > Page.
  2. Type a Title for your Page.
  3. Click the Drag & Drop Editor button as shown below to launch the Drag & Drop Editor.
drag and drop editor button

Modules

  • Our Drag & Drop Editor includes 30 modules and growing, separated into several groups in the Drag & Drop content panel. Modules contain settings that determine how the module appears on the page.
  • One of the module groups consists of WordPress widgets, which give you the ability to add widgets anywhere in your layout. The WordPress Widgets group may include widgets created by third-party plugins.

Basic Modules

Media Modules

Actions Modules

Layout Modules

Layout Modules include Rows that allow you to add columns, prebuilt content areas and Saved Templates to your page or post.

Beaver Builder

Our Drag and Drop Editor is Beaver Builder. You can use YouTube or Beaver Builder's website to learn more about using the page editor.