Using the Drag & Drop Editor to Design Your Website Pages

One of the handiest features of our free website builder is the drag and drop editor. It provides you with the tools you need to make designing your website pages a breeze.

If you are new to web design or using our CMS, this is the article for you!

What is the Drag & Drop Editor?

The drag and drop editor (Innova Studio Drag & Drop Editor) is a tool which allows you to design how a specific page on your site will look by clicking upon and dragging snippets from a column onto the page itself. A snippet is a feature or block which lets you perform and display a certain action on your web page.

For instance, within our snippet offerings, you can choose from titles, text paragraphs, maps, images and calls to action. You will find the snippets you can select from on the right hand side of your screen when using the drag and drop editor mode on a web page in the CMS.

Using the Drag & Drop Editor

To use the drag and drop editor, you must first select it as your editing mode, if it is not already chosen. This is done by clicking the button 'Change Editor Mode' and then selecting Innova Studio Drag & Drop Editor. This will open the editor and allow you to redesign a web page. If you have previously used another editor on this page, you will be unable to edit that part within this editor (you'll need to use the previous editor for it, or remove it and redo it in this editor).

Using the drag and drop editor is easy. Simply use your mouse to click on the drop down arrow of the snippets column on the right hand side of your screen, then select the specific type of snippet you are wanting. Or you can view all of your snippet options by selecting the 'All' tab.

To move a snippet type across onto your page, click and hold the mouse on the snippet, then drag it across to the position you want it in on your page.

Here are two videos which demonstrate how to use the drag and drop editor in greater detail: