• Open the builder page.
• Press "Open page manager", which will appear on hovering over the breadcrumbs to the right of Novi logo.
• Press "Add new page" on the appeared panel.
• Enter the page name and press "Create page".

To save changes done to the project, you need to press the "Save changes" button, located in the upper right part of the interface.

Novi interface:

• Open the builder page.
• Press "Open page manager", which will appear on hovering over the breadcrumbs to the right of Novi logo.
• Select the proper page by pressing LMB on the appeared panel.

• Open the builder page.
• Press "Open page manager", which will appear on hovering over the breadcrumbs to the right of Novi logo.
• Press "Delete" on the appeared panel.

To save changes done to the project, you need to press the "Save changes" button, located in the upper right part of the interface.

• Open the builder page.
• Press "Open page manager", which will appear on hovering over the breadcrumbs to the right of Novi logo.
• Press "Duplicate" on the appeared panel.

To save changes done to the project, you need to press the "Save changes" button, located in the upper right part of the interface.

• Open the builder page.
• Press "Open page manager", which will appear on hovering over the breadcrumbs to the right of Novi logo.
• Press "Upload preview" on the appeared panel.
• Press "Choose file" in the appeared modal window.
• Press "Upload Image

To save changes done to the project, you need to press the "Save changes" button, located in the upper right part of the interface.

Page settings will be applied only to the page, opened in the visual editor at the moment.

• Trigger for the current page settings display
• Page name - the title of the page
• Use as home page - set the current page as ‘front’ one
• Favicon - and option to upload the favicon of the website
• Page’s metadata

Press the "Save changes" button after you’re done with the settings. Then save the project by pressing the "Save project" button.

This mode is mainly intended for developers. It provides you with the following options:

• Configure the builder’s plugins
• Edit the source code of the page (HTML, CSS, JS) with the help of the code editor tool
• Manage the project’s presets
• Manage the page’s content using the visual editor

This mode is mainly intended for the end-users. It allows you to use all the visual tools for the content editing, including the builder’s plugins. "Edit Mode" is the one that loads by default.

This mode allows to preview your website.

You can access the project’s setting from the main builder menu directly (via the builder interface).

• Project Name - the title of the project
• Publishment path - the path to the published version of the project on your server
• Image directory path - path to the directory that contains project image files.
• Video directory path - path to the directory that contains project video files.
• New Page Template - basic mark-up of the new page
• Page container - page’s container
• Project Layers - layers’ system setup

To detect the user's interaction with the project layout elements, Novi uses the layer system. A layer is a rule, which defines the logical group of layout elements for manipulations in the visual editor (dragging, pasting, deleting, duplicating, transporting, and others).You can also manipulate any page elements disregarding layers as described in “Extending the features of working with elements”.

To add a layer, you need to:

• Open the builder page.
• Open the main menu (press the Novi Builder logo icon) located in the upper left corner of the interface.
• Select "Project configuration".
• In the "Project Layers" section, press "+" in the bottom of the table.
• Fill in the fields according to the "Rules of creating layers" section.
• Press "Save changes".

To save changes done to the project, you need to press the "Save changes" button, located in the upper right part of the interface.

When creating layers, you need to enter the following parameters:

• Name – a name, which will be displayed on hovering over an element in the visual editor.
• Element – a CSS selector that defines the logical group, to which this rule applies.
• Can be inserted to – a CSS selector determining an area of manipulations with the logical group.

Example of layer usage
Let's take as an example an empty project without any layers. After entering the "Edit mode", you don't have the ability to interact with layout elements, and you need to add a layer.

Create a layer according to the paragraph "How to add or change a layer" with the following parameters:

• Name - Section
• Element - .section
• Can be inserted to - body

Thus, a layer called "Section" is created, which will contain all elements of HTML layout with .section class. All manipulations (dragging, adding etc.) will be happening in the context of its parent - .

After saving the layer in "Edit mode" (when elements with .section class are present on the target page), and while hovering over the layout element, which corresponds to the created layer, for example:

<section class="section">
    ...
</section>  

an editor panel will be shown with options of dragging, duplicating, and deleting.

The area of dragging, in this case, will be limited to the "body" tag listed in the parameters of Section layer, i.e. you will not be able to move an element with .section class outside the borders of , for example to

Novi uses the layer system for visual editing of elements.
If you need to edit elements that are not described in the layer system, you can use Ctrl button in Windows OS or Cmd in Mac OS.

When this key is pressed, you get access to all elements of the current page. Let us consider the following example:

Here we need to place a button before the text.

If “Design Mode” is enabled, then:

• Press and hold Ctrl on Windows OS or Cmd on Mac OS
• Select the button by clicking LMB
• Click and hold LMB on the appeared panel

Release LMB and Ctrl on Windows OS or Cmd on Mac OS
If “Edit Mode” is enabled:

• Press and hold Ctrl on Windows OS or Cmd on Mac OS, then hover over a button
• Click and hold LMB on the icon of the appeared panel

Release LMB and Ctrl on Windows OS or Cmd on Mac OS.

Please pay your attention! This method allows you to manipulate any layout elements. Follow the rules of HTML code validity and semanticity.

A preset is a separate independent part of an HTML page. Actually, it is a set of HTML tags with its own structure, CSS classes, and nesting. Any part of HTML page may act as a preset but for the convenience, it is better to store independent components of a page in presets, for example, a banner, a section, a form, a column, a sidebar etc. You can learn more about working with presets in this section below. [#br] Before starting to work with presets, we recommend you to read the section "Rules of creating layers".

Presets panel includes the following items:

• Developer’s panel
• ‘Create a preset’ option
• Existing presets list
• Presets categories and a search bar

There are 2 ways of creating a preset:

• Create a preset using the preset panel
• Use the context menu of visual editor

In the first case you need to:

• Open the builder page.
• Go to the "Design Mode" by pressing a proper button in the middle of the upper panel.
• Open the bottom panel by pressing "Presets".
• On the appeared panel, press "Add new preset".
• Fill in the fields as shown in the paragraph "How to correctly set the parameters when creating a preset" of this section.
• Press "Save preset".

In the second case:

• Open the builder page.
• Go to the "Design Mode" by pressing a proper button in the middle of the upper panel.
• Select the necessary area.
• Open the context menu by pressing RMB.
• Choose "Save as preset".
• Fill in the fields as shown in the paragraph "How to correctly set the parameters when creating a preset" of this section.
• Press "Save preset".

In the first case, you need to set the preset layout. In the second case, the layout will be taken from the element you selected in the "HTML Code" text field.

In the "Preset name" field, specify the preset name.[#br] You also need to specify keywords in the "Keywords" field that allows finding the proper preset. We recommend you to state the preset keys relying on the content written in them. For example, the section with our clients will have the key named "Clients" or "Partners".

The text area "HTML Code" displays the HTML code, which will be inserted into the selected page after the preset is applied.

Checkbox "Deploy on preset insertion" defines whether the page will be reloaded when the preset is inserted.

• Open the builder page.
• Go to the "Design Mode" by pressing a proper button in the middle of the upper panel.
• Open the bottom panel by pressing "Presets".
• On the appeared panel, select "Upload preview" from the context menu of the target preset.
• Press "Choose file" in the opened modal window.
• Press "Upload Image"

• Open the builder page.
• Go to the "Design Mode" by pressing a proper button in the middle of the upper panel.
• Open the bottom panel by pressing "Presets".
• On the appeared panel, select "Edit" from the context menu of the target preset.

• Open the builder page
• Go to the "Design Mode" by pressing a proper button in the middle of the upper panel.
• Open the bottom panel by pressing "Presets".
• On the appeared panel, select "Duplicate" from the context menu of the target preset.

• Open the builder page
• Go to the "Design Mode" by pressing a proper button in the middle of the upper panel.
• Open the bottom panel by pressing "Presets".
• On the appeared panel, select "Delete" from the context menu of the target preset.

There are 2 ways to add a preset to the page:

• With the help of the preset panel.
• Using the preset insertion module.

In the first case you need to:

• Open the builder page
• Go to the "Design Mode" by pressing a proper button in the middle of the upper panel.
• Open the bottom panel by pressing "Presets".
• On the appeared panel, find the necessary preset.
• Drag the preset into the visual editor area by holding LMB, therewith the area of insertion will be highlighted by a solid blue line.
• In the second case:
• Open the builder page
• Go to the "Edit Mode" by pressing a proper button in the middle of the upper panel.
• Hover over the area where you need to add the preset.
• If the preset is present and if it meets the layer rules, "+" will be displayed, press it.
• Select a necessary preset in the appeared dialogue window.

You can use the page editing tools only on the items located on the visual editor working area (see the "Overview" section). Access to the items in the visual editor area is defined at the project’s layers system settings (see the "Project Settings" section).

The basic content editing operations available at the visual editor are the following:

• Removing
• Pasting from a preset
• Duplicating
• Replacing

All of these options are available on the item hover - just place the mouse cursor on the item in the visual editor.

Hover the target item in order to delete some of the page’s content and press the "Remove layer" button.

Hover the target area in order to add some content from a preset. In case there is a preset, matching the layers adding rules requirements (listed in the "Project Settings" section), you’ll see the ‘+’ icon. Press it and choose the preset among the list of the available ones.

Hover the target item in order to duplicate some of the page’s content and press the "Duplicate layer" button.

Hover the target area in order to replace some of the page’s content. In case there is a preset, matching the layers adding rules requirements (listed in the "Project Settings" section), you’ll see the ‘Replace layer’ icon. Press it and choose the preset among the list of the available ones.

Drag & Drop Tool allows you to re-arrange the items within the visual editor area.
The items dragging rules are described in the Novi layers system in the "Project Settings" section, the dragging area is specified at the Projects Settings under the ‘Page Container’.

First, you should hover the target item within the visual editor area, click on the "Move Layer" and then drag the item to any visual editor area keeping the left mouse button pressed.

The areas, available for dragging will be pointed up with the solid blue border line.

Text editor allows you to edit the text within the visual editor area.
It provides you with the following options:

• Make the text bolder
• Change the text to italic
• Underline the text
• Link the text
• Change the text color
• Change the text size
• Change the height of the line
• Change the font

Novi code editor is available in the design mode only.

You may find the list of its features below:

• Enables the source code editing (HTML, CSS and JS)
• Is fully compatible with Emmet
• Includes the HTML, CSS validation by default
• Applies your edits right away when the "Autodeploy" is enabled
• Provides an option to switch between all the HTML, CSS, JS files used on the target page
• Highlights the source code of the items in the code editor when you press on them with the left mouse button in the visual editor for the intuitive navigation on the HTML code.

Context menu allows you to manage the items in the visual editor.
A set of the operations performed with the help of the context menu depends on the current Novi mode.

Context menu in the "Edit mode" allows you to do the following:

• Cut an item
• Copy an item
• Paste before, within or after the selected item
• Remove an item
• Duplicate an item
• Check the source code of the item

In order to cut the item you should hover it with the mouse cursor, click on it with the right mouse button and choose the "Cut" operation in the context menu.

In order to copy the item you should hover it with the mouse cursor, click on it with the right mouse button and choose the "Copy" operation in the context menu.

In order to paste the item that was previously cut or copied you should hover the target area with the mouse cursor, click on it with the right mouse button and choose the "Paste" operation in the context menu. You’ll also need to specify the place to insert the item.

In order to remove the item you should hover it with the mouse cursor, click on it with the right mouse button and choose the "Delete" operation in the context menu.

In order to clone the item you should hover it with the mouse cursor, click on it with the right mouse button and choose the "Duplicate" operation in the context menu.

In order to check the source code of the item you should hover it with the mouse cursor, click on it with the right mouse button and choose the "Source Code" operation in the context menu. Builder will switch to the Design mode and the item’s source code will be highlighted in the code editor.

Below you may find an example of using the visual editor context menu:

The context menu of the Novi "Design mode" is an extended version of the one, available in the "Edit mode".

The additional options are the following:

• Select the parent item
• Save the item as a preset

Below you may find an example of using the visual editor context menu in the Design mode:

Media library contains all the graphic files that are used in the template. It allows you to easily add and delete all graphic and video files of the project.

To access the media library use the main Novi Builder menu.

Media library looks the following way:

• category panel, 3 categories are reserved by Novi ("Show all", "Images Only", "Videos Only");
• custom project categories;
• button for adding custom categories;
• media panel;
• media upload panel;
• context menu of the media panel.

* Custom categories are those that were created by the user. Custom categories support the following functionality:

• changing category name;
• category media cleanup;
• category removal;
• adding media files to the category.

To add a file to the media library, you should:

• open the main menu of the Novi Builder;
• choose "Media Library" item;
• press the "Upload Files" button;
• select a file, press the "Upload" button.

To save changes, use the "Save" button that resides in the right corner of the top bar.

*When you’re uploading a new file to the media gallery, it's added to the currently active category, except for the case of uploading a video file when the active category is "Images Only" and vice versa.

To crop an image in the media library, you should:

• open the media library;
• call the context menu of the target file by right-clicking the file;
• choose the "Crop Image" item;
• select the needed area;
• press the "Crop image" button.

To delete files from the media library you should:

• open the media library;
• choose the needed file(s) (the library supports multiple selection with Ctrl or Shift);
• call the context menu of the selected file(s) by pressing right mouse button;
• choose the "Delete file completely" item.

To save changes, use the "Save" button that resides in the right corner of the top bar.

To add a media file to the category, you should:

• open the media library;
• choose the necessary file(s) (media library supports multiple selection with Ctrl or Shift);
• press the right mouse button, drag file(s) to the target category name area.

To save changes, use the "Save" button that resides in the right corner of the top bar.

To remove a media file from a category, you should:

• open the media library;
• select a custom category;
• select the needed file(s) (media library supports multiple selection with Ctrl or Shift);
• call the context menu of the selected file(s) by pressing right mouse button;
• choose the "Delete file from category" item for the target file(s).

To save changes, use the "Save" button that resides in the right corner of the top bar.

To add a category to the library, you should:

• Open the media library;
• Press the "Add new Category" button.

To save changes, use the "Save" button that resides in the right corner of the top bar.

To remove a category from media library, you should:

• open the media library;
• select the needed custom category;
• call the context menu of the selected category by right-clicking it;
• select the "Delete category" item.

To save changes, use the "Save" button that resides in the right corner of the top bar.

To rename a category, you should:

• open the media library;
• select the needed custom category;
• call the context menu of the selected category by right-clicking or double-clicking the left mouse button on the category name;
• choose the "Rename category" item, enter the needed name, press Enter.

To save changes, use the "Save" button that resides in the right corner of the top bar.

To delete all media files from the category, you should:

• open the media library;
• select the needed custom category;
• call the context menu of the selected category by right-clicking it;
• choose the "Clear category" item.

To save changes, use the "Save" button that resides in the right corner of the top bar.

This tool provides you with an option to manage the project's iconic fonts. By default, the builder has 7 popular iconic fonts available for use:

• FontAwesome
• Material Design Icons
• Material Icons by Google
• Flat Icons Bigmug Line
• Flat Icons Budicons Launch
• Flat Icons Budicons Free
• GlyphIcons Halflings

Use the main Novi Builder menu to reach the icons manager.

Icons manager looks the following way:

• Select option to choose the font family (among the 7 basic font families, included by default).
• Search field to search within the selected font family.
• Output area of the selected iconic fonts.
• Button to upload the archive of a custom iconic font.

In order to add a custom iconic font to the project, perform the following steps:

• Open the icons manager, it can be reached from the main builder menu.
• Click the "Upload icon Pack" button
• Browse your font archive. It should meet the requirements, listed in the "Creating an archive for an iconic font import" section.
• Import the font and save the changes by pressing the Save Project button in the top right corner of the main builder panel.

You should prepare the font archive to successfully import the font into the builder. It has to comply with the following rules:

• The archive should not include parent directories for the files.
  • Incorrect:
    • font-awesome.zip
      • font-awesome
        • font-awesome.css
        • fonts
          • FontAwesome.otf
          • fontawesome-webfont.eot
          • fontawesome-webfont.ttf
  • Correct:
    • font-awesome.zip
      • font-awesome.css
      • FontAwesome.otf
      • fontawesome-webfont.eot
      • fontawesome-webfont.ttf
• The archive must have a CSS font file.
• The CSS font file has to contain a @font-face rule with all the references to font files and font-family property specified.
• The CSS font file has to contain a set of classes to define the icons.

You should use the icons replacement plugin to change the icons within the project. The detailed description of the plugin is available at the Icons plugin section, under the Plugins.

You can find the resizer tool at the main Novi interface. It can be used for previewing the visual editor on the different screen sizes.

Resizer has 7 different dimensions, by default the “Desktop Full-HD” is active. There are also the following dimensions available:

• Mobile Portrait 320x480 px
• Mobile Landscape 480x320 px
• Tablet Portrait 768x1024 px
• Tablet Landscape 1024x768 px
• Notebook 1280x720 px
• Desktop PC 1600x900 px

Keep in mind, the resizer shows your project on the different screen sizes, but it does not emulate the devices. Therefore, in certain cases the resulting display might differ on the real devices.

You can export the Novi Builder project from the main builder interface, using the "Export Code" option in the main menu.

Export allows you to save the .zip archive of your project to the specified destination. The template structure will be completely saved.

Same, you can publish the Novi Builder project from the main builder interface. The project will be published at the specified path that you set at the Project Settings under the "Publishment path".

At this moment the project can be published exclusively on the server where the Novi Builder is installed.

Be careful! Re-publishing will update the content of your website if you don’t change the "Publishment path" attribute at the project settings section.

There is a range of useful hotkeys in various Novi Builder modules.

• Ctrl + S - Save the project

• Ctrl + Enter - deselect the current element
• Esc - deselect the current element

• Alt + ~ - navigate to the parent container of the selected item
• Ctrl + X - cut the selected item
• Ctrl + C - copy the selected item
• Ctrl + Alt + V - paste before the selected item
• Ctrl + V - paste into the selected item
• Ctrl + Shift + V - paste after the selected item
• Delete - remove the item
• Ctrl + D - duplicate the selected item
• Ctrl + Q - save the selected item as a preset

• Ctrl + S - Save in the editor
• Ctrl + L - file formatting
• Ctrl + D - remove the entire line
• Ctrl + Shift + D - duplicate the entire line
• Ctrl + Z - undo the last change
• Ctrl + C - copy into the clipboard
• Ctrl + V - paste from the clipboard
• Alt + Down - shift the line down
• Alt + Up - shift the line up
• Alt + Delete - remove to the end of the line
• Alt + Backspace - remove to the start of the line
• Ctrl + A - select all
• Shift + Left - select one symbol to the left
• Shift + Right - select one symbol to the right
• Shift + Home - select to the start of the line
• Shift + End - select to the end of the line
• Ctrl + Shift + Home - select to the start of the file
• Ctrl + Shift + End - select to the end of the file
• Ctrl + LMB (left mouse button) - set multicursor
• Ctrl + Alt + Right - select the next reiteration setting of multicursor
• Ctrl + Alt + Left - select the previous reiteration setting of multicursor
• Ctrl + F - find
• Ctrl + H - replace
• Ctrl + K - find the next item
• Ctrl + Shift + K - find the previous item

Builder updates are available starting from the v. 0.8.3.

By default Novi updates are disabled, you should tick the "Check for updates" item under the system settings in order to enable them.

If there is a newer version of the Novi Builder, you will see the dialog window after the loading of the builder. You’ll be able to update the builder by following its instructions.

The current project will remain unchanged after the update applied.

Novi system settings are accessed via the main builder menu.

• ‘Show tips on startup’ defines whether to load the start presentation while the builder loads.
• ‘Check for Updates’ indicates whether to check for the builder updates (starting from v.0.8.3).
• Setting of the project font size limit (is applied in the text editor)
• Table of the fonts used in the template, by default includes the 13 popular Google Fonts service fonts.