Visual Page Builder is a drag and drop builder that works with the Studio module containing Bootstrap variables to provide fully responsive Pages that are easy to customise.

For more information and a brief explanation on how to use, see: Visual Page Builder - Introduction

You can choose to use Visual Page Builder within Pages in Admin, or here.

1. Choose Studio Layout To Add

The first time you arrive at Visual Page Builder, you will see a Content Block already on the page, with the Snippets menu open to the right-hand side.

The Snippets menu contains the full Studio Library of Layouts, including; Blocks and Pages.

Click on the dropdown at top of the Snippets menu to select which type of layout you would like; Block or Page.

Once you have chosen a type, pick the specific Layout you would like to use.

Simply drag and drop this Layout onto your page to begin using it.

To re-open the Snippets menu, click the blue arrow on the right-hand side of the page. While open, close the menu by clicking click the blue arrow to the left.

2. Editing A Layout

You now have a Block in your page, it's time to edit.

Click anywhere within a Layout to begin editing.

From here, you can do a multitude of things, including but not limited to:

  • Change text size, font, colour, spacing, and format
  • Previewing the page as a whole
  • Editing the HTML of each Layout
  • Undo and re-do on changes made

For any images that are present, you can replace them with images from your File Manager after you have pasted this page into your Siteglide Site.

Once you are done editing, you can continue to add more Layouts or export the page as it is.

Additional Block Editing Options

Once you have clicked anywhere on a Layout Block to begin editing, you will also see an options menu on the right-hand edge of the Block.

  • Click on the blue "move" icon to drag this Block to a different place within your page
  • Click on the "..." to be able to choose; "Move up" to move this Block up one, "Move down" to move this Block down one, "Duplicate" to insert a copy of this Layout, and "HTML" to edit the HTML for this particular Block.
  • Click the red "X" to delete this Block where you will be presented with a confirmation modal asking if you are sure you want to delete this Block. To confirm, click "delete". Alternatively, to cancel, click anywhere outside of this modal.

Editing HTML

You can choose to edit the HTML of specific Layouts or of the whole page at any time.

To edit the HTML the whole page, click the "..." in the text editing bar above any Layout and select the "< >" HTML icon.

Alternatively, to edit the HTML of a specific Layout, click the "..." on the right hand side of the Block and click the "< >" HTML icon.

Once you have finished editing the HTML, click "OK" to save any changes and go back to the builder. Alternatively, click "Cancel" to go back without your changes.

Preview Page

You can choose to preview your page at any time, to take a look at what your design will look in a browser of varying device screen sizes.

You can preview your page by first clicking into any Layout, then click the "..." from the editing bar above and select the "eye" Preview icon.

Click on different sections in the bar top of the preview page to alter the device screen size width.

Smart Phone Sizes:

  • 320px
  • 375px
  • 425px

Tablet Size:

  • 768px

Desktop Sizes:

  • 1024px
  • 1440px

3. Exporting Your Page

Exporting your Page enables you to copy the full HTML code. Any editing that you have done will be included as inline-styles and will over-write any global Studio variables where relevant.

Click the white "Export HTML" button in the bottom left-hand corner to open the export modal where you can preview all of the current HTML.

Click the blue "Copy" to copy the code. Head over to your Siteglide site paste the code into a Page.

4. Customising In Siteglide

Once you have pasted the exported HTML code into a Page in your Siteglide site, use Toolbox or Visual Editor to further customise the page content including images.

You can also customise the design of the page further by using Studio - Variables Explanations within Code Editor.

Note: Be sure to tick the checkbox for "Studio" in the template you have applied to this page.

Did this answer your question?