Visual Builder Docs

# Visual Builder for LifeGuide HTML template

Created: 13.12.2016
By: MWTemplates
Email: support@modernwebtemplates.com

Thank you for purchasing our HTML template with Visual Builder. If you have any questions that are beyond the scope of this help file, please feel free to email us via my user page contact form. Thanks so much!

## Visual Builder files

There are two HTML files and one folder that is related to Visual Builder. These are

- "builder" folder, that contains all of the builder scripts, styles, images, PHP files etc.
- "_builder.html" file is the actual Visual Builder. You should open it in your browser to start building your new HTML pages.
- "_template.html" file is a service file which is used for the preview of your pages while creating them in Visual Builder.

Warning! You should not upload these files and the folder onto your production server for security purposes!

## Visual Builder features

You can use the builder to create singlepage or multipage websites without coding!

### Main features:

- Drag'n'drop layout building and editing.
- Easy-to-create multipage and single page sites.
- Create other pages based on the existing saved page.
- Inline content editing.
- Easy edit and customize predefined building blocks.
- Highlighted HTML source code editing.
- Project import and export.
- Drag'n'drop images upload.
- Easy preview of your page.
- Generating HTML files into your siteroot directory.
- Creating ZIP archive with all the files needed for uploading onto production server.

Warning! Some features require launching your builder on the working webserver with PHP support! See section below.
Please NOTE: Visual Builder is not an actual HTML editor. It also cannot modify existing HTML pages. Its main purpose is creating new pages with predefined building blocks.

## Visual Builder requirements

You can launch and use Visual Builder as local file, even without webserver at all!

But for the best user experiance before using the builder you need to upload your files on webserver with PHP support.

#### Features that requires webserver with PHP:

- Drag'n'drop image upload into images/!uploads folder.
- Displaying links list and images list in inline text editor in Content Edit mode.
- Highlighted source code editing in the inline text editor in Content Edit mode.
- Preview of the page that you are building in a new tab.
- Creating (generating) previously saved pages in your siteroot.
- Generating ZIP archive with all the previously saved pages, site files and folders for uploading onto production server.

#### Features that have a fallback if using builder without webserver:

- Default non-highlighted source code editing in the inline text editor in Content Edit mode.
- Export project. Showing a popup with code that you need to manually paste in the new file and save it as *.JS file instead of generating it by builder itself.
- Use "Get page code" function for every of your saved pages to manually paste in the new file and save it as *.HTML file instead of generating pages by builder itself.

## Building Pages in Visual Builder

Open _builder.html in your browser.

### In brief you need to do several steps:

- Create your layout: drag elements from side menu to the canvas, starting from topline and header down to the footer and copyrights.
- Switch to Content edit mode and replace all of "dummy" content with your content. You can switch editing modes as many times as you need.
- Save your page using "save" or "save as" menu item in pages dropdown menu at the top of your builder.
- Use Preview menu item in Actions dropdown menu at the top of your builder or at the bottom of your side menu for previewing your progress while building your page.
- Repeat these steps for all of your pages if you are building a multipage website.
- Generate your HTML pages into your siteroot or create ZIP archive with your previously saved pages by clicking on appropriate menu item in Actions dropdown at the top of you builder or at the bottom of your side menu.

#### Creating layout

- Open the side menu by clicking on appropriate icon in the top left corner of your builder.
- Click on elements group name to open the right part of the side menu with available elements and their options.
- Choose options for element that you want to drag if available.
- Grab an element icon and drop it onto the canvas.
- Repeat these steps for other layout elements.

#### Deleting elements

If you need to delete some element, such as column content, the whole column or even full row or section, just drag it into the trash that is in the top of your builder.

You may also click on "Delete section" and "Delete column" buttons when hovering on certain section or column:

#### Editing sections and columns

When you are building your layout in Drag'n'Drop mode you may want to customize the predefined sections: add or change background images and color, sections and paddings etc.

To do this just hover on section that you want to customize (in Drag'n'Drop mode) and click on "Edit section" button it top right corner of your section:

and you'll see the popup window with all the section's options:

You can change section tag (section, header or footer), background color and image, vertical paddings, bootstrap container type (regular centered or fullwidth fluid), align your content in section columns verticaly on large screens (as in table), add an ID attribute to sections etc.

You may also want to change Bootstrap columns that are inside your sections.

To do this just hover on column inside a section that you want to customize (in Drag'n'Drop mode) and click on "Edit column" button in the top left corner of your column and you'll see the popup window with column's options:

In this popup you can set a column width on different screen sizes, center the column content and set an animation for the column.

See template documentation for more info about column animation: Setup Animation for Elements
See Twitter Bootstrap documentation about template grid system

#### Editing content

- Switch to content editing mode by clicking on Content Edit radio button at the top of your editor.
- Double click on bootstrap column that you need to change.
- Use inline text editor to modify column content.

#### Inline editor menu:

#### Saving, editing and deleting previously saved pages

When you're done with building page layout and editing your content you can save your page:

Choose page title and page name (which will be used for HTML file name) and hit "Save Page":

Now you can see your saved page in pages dropdown and in side menu below "Saved pages" title:

If you click on saved page title in dropdown menu or click on page title in side menu and click on "Edit page" button, you can start editing your saved page. Current page that you are editing will be replaced with saved page.

When you are finished with editing your previously saved page you need to open pages dropdown menu by clicking on page name and hitting "Save" to replace old page.

Also you can save those page as another page by clicking "Save as..." and choosing a new page name. You can perform this action if you need a new page that is based on previously saved page (ex. for subpages).

If you need to delete some pages just open side menu, click on saved page name and hit "Delete page" button.

## Project export and import

You may want to save your project for later editing.

You need to save some pages and/or sections before exporting your project.

You can export project and import your previosly saved project by clicking on the appropriate link in Actions dropdown menu at the top of your builder or at the bottom of your side menu:

By clicking "export" on the webserver with PHP support you'll get your project file project_***.zip which you can later import in builder.

If you run builder locally by clicking "export" you'll see the popup window with the code that you can copy and paste in a new file and save it for future importing.

Click on Import for import of your previosly exported project file (ZIP or manual saved file).

Warning! Your saved pages and sections will be replaced with pages and sections from project that your import!

## Creating pages and project archive

When you're done with building your pages you need to generate HTML files or create full project archive.

You need to save at least one page to create HTML pages or generate ZIP package of your project.
You need a webserver with PHP support to use these functions.

You can generate HTML files and create project archive by clicking the appropriate buttons in Actions dropdown menu at the top of the builder or at the bottom of the side menu:

By clicking "Create Pages" button all of your saved pages will be created as HTML files in your siteroot directory.

If your page names match HTML filenames in your siteroot, those pages will be overwritten!

By clicking "Get ZIP" button all the content of your siteroot directory except builder folder and files will be zipped

## Credits ans Sources

As we mentioned earlier, we used Twitter Bootstrap v3 as CSS framework and HTML5 Boilerplate for this template.

### Fonts:

- http://www.google.com/fonts/ - Google WebFonts
- http://www.socicon.com/ - Social Icons Font
- http://fontawesome.io/ - Font Awesome
- http://icomoon.io/ - teaser rt-icons font

### Template Scripts

- modernizr-2.6.2.min.js detecting browser's features.
- jquery-2.2.4.min.js is a popular JavaScript library.
- bootstrap.min.js is a stantard Twitter Bootstrap library.
- respond.min.js is required for working Twitter Bootstrap v3 in older browsers.
- html5shiv.min.js adds HTML5 compatibility for older browsers.
- superfish.js is a script that enables dropdown menu.
- hoverIntent.js is a component for superfish menu.
- jquery.flexslider-min.js is a jQuery plugin for main and bottom sliders.
- jquery.isotope.min.js is a jQuery plugin for filtrable gallery.
- jquery.prettyPhoto.js is a jQuery plugin for displaying lightbox content.
- jquery.ui.totop.js is a jQuery plugin for toTop button.
- jquery.easing.1.3.js is a jQuery plugin for different types of animation
- jquery.scrollTo-min.js and jquery.localscroll-min.js needed for smooth single page navigation.
- jquery.easypiechart.min.js is a jQuery plugin that uses the canvas element to render simple pie charts for single values.
- jquery.jflickrfeed.min.js plugin makes it easy to pull Flickr feeds and display them on your site.
- jquery.tweet.min.js plugin enables twitter widget on your site.
- owl.carousel.min.js is a jQuery carousel plugin for “partners” section
- jquery.bxslider.min.js is a jQuery slider plugin
- jquery.nicescroll.min.js is a plugin used to replace browser's standard scroll bar
- jquery.fractionslider.min.js is a great slider plugin for main slider
- jquery.parallax-1.1.3.js is used for parallax backgrounds.
- jquery.appear.js is used to determine whether the HTML element is inside the browser's viewport
- jquery.countTo.js is used for teasers with counter
- jquery.cookie.js is used for store cookies information in template

### Builder scripts

- jquery-ui.min.js is a popular UI library for jQuery
- jquery.scrollbar.min.js is a jQuery plugin for custom scrollbar
- tinymce.min.js is a popular WYSIWYG editor
- dropzone.js is drag'n'drop file upload library
- bootstrap-select.min.js is s custom select for Twitter Bootstrap using button dropdown
- angular.min.js is a powerfull Google javascript framework
- angular-bootstrap-select.js is a Angular module for select input elements
- angular-dropzone.js is a module for Angular to work with Dropzone lib
- angular-sanitize.min.js is a module for Angular to sanitize HTML code
- angular.ngStorage.min.js is a module for Angular to work with browser Local Storage

### Images

- depositphotos.com
- danielezedda.com
- foodiesfeed.com
- gratisography.com
- magdeleine.co
- picjumbo.com
- picography.co
- unsplash.com
- freepsdfiles.net
- free-logo-design.net

## Documentation

- Visual Builder Files
- Builder Features
- Requirements
- Building Page
  - Creating layout
  - Deleting elements
  - Editing sections and columns
  - Editing content
  - Saving, editing and deleting pages
- Project export and import
- Creating pages and project archive
- Sources and Credits

© copyright 2016 all rights reserved