The "Nav"

Your project's content, sectioned per Page and ordered to show all elements.

Workspace Top Bar Styles

Pages

You can add as many Pages as you need to create your perfect Website. The Page Tree helps you keep an overview.

To see your Page Tree → Click the Arrow icon in the Navigator so that it points down.

To hide your Page Tree so that you can see only the elements of the current page → Click the Arrow icon in the Navigator so that it points up.

Navigator
Page1
Page2
Page3
Page4
Element Style
Div Identifier Style
Element Identifier Style
Element Style
Element Style
Element Style
Element Style
Element Style
Page Actions

Right click to assign a new homepage, duplicate, or rename a page.

To add a new page → Click the little plus icon next to the Page Title

The Page Name is your internal name for the Page, and also the slug of the Page. The Page Title is the public name of your Page.

New Pages are by default blank. If you want to use one of your existing pages as a template, you can easily duplicate the original page.
Navigator
Page1
Page2
Page3
Page4

To assign a Page as the Home Page of your website → Right-click on the Page Name. You will see the Home icon switch to the Page you selected.

The Home Page is the first Page your site visitors see when they visit your domain.

To duplicate a Page → Right-click on the Page Name. This will create a copy of your Page, including it's name and contents. You can duplicate a Page as often as you like, and edit each of the copies independently.

Make copies to create your content, and duplicate the template Page whenever you need a new Page of the same layout.

To rename a Page → 
  1. Right-click on the Page Name, select to Rename the Page. Alternatively, double-click the Page label to initialize name editing.
  2. Use the backspace to remove the current name if needed, or simply start typing to add to the current name. 
  3. To save the new name, hit the Enter key.

To delete a Page → Right-click on the Page Title. This will delete the Page immediately.

If you want to delete the Page that you currently have assigned to be the Home Page, you must first assign another Page to be the Home Page.

Once a Page is deleted, it cannot be restored!

To make sure you always delete the right Page, consider renaming Pages prior to deleting them. The new name can for example contain "To Delete". This way you can double check that you've marked the correct Page for deletion first.

Page Attributes

When you highlight a Page in the Navigator, the Attribute Panel opens at the bottom of the Navigator. For each Page you can set the below Page Attributes.

Page Settings
Title
Description
Language
Favicon
Webclip
Open Graph
Title

The title is the public name of the Page and shows in the browser's tab.

Description

The description is a piece of text shown to help people decide whether or not your website provides the information they're looking for.

Language

Indicate the language of the Page.

Favicon

Add a Favicon to help site visitors easily find your Page amongst their many open tabs.

The correct size for the Favicon is 32 x 32 pixel. You can upload the following formats: PNG, GIF, JPG or ICO.
Webclip

Configure the Webclip for your Page, to make sure your Page can be easily found amongst people's bookmarks.

The correct size for the Webclip is 256 x 256 pixel. You can upload the following formats: PNG, GIF, JPG or ICO.
Open Graph Image

Attach the URL of the Open Graph Image for your Page, to make sure your Page can be visually seen in search results 

The correct size for the Open Graph Image is more than 1200px x 630px at 1.91:1 ratio.
Hide from search engines

Coming Soon

Exclude the page from appearing in any search results.

Elements on your page

Elements are the building blocks with which you create the content of your Pages.

Some of the Elements allow for further attributes, which will be available in the Attribute Panel at the bottom of the Navigator.

The Navigator is interactive! Go ahead and click on elements to see them highlighted in the Stage. 
Navigator
Element Style
Div Identifier Style
Element Identifier Style
Element Style
Element Style
Element Style
Element Style
Element Style

To add a new Element → Click on the plus icon in the top-bar, or use the A key and type the name of the Element you're looking to add.

To remove an Element → Click on the Element in the Navigator and hit the Backspace key.

Where the new Element appears on the Page, depends on what you currently have highlighted in the Navigator: 

  • If you've highlighted the Page, the new Element will appear as the first Element on the Page.
  • If you've highlighted a nested Element, the new Element will appear last in the list of nested Elements.

To reorder Elements → Drag and drop the Element(s) to its new position.

Navigator
Element Style
Div Identifier Style
Element Identifier Style
Element Style
Element Style
Element Style
Element Style
Element Style

To hide or show child Elements → Click on the Arrow icon left of the Element.

Navigator
Element Style
Div Identifier Style
Element Identifier Style
Element Style
Element Style
Element Style
Element Style
Element Style

To select multiple Elements → Use Command-Click (for Mac) and Control+Click (for Windows) to select all of the Elements to be removed in the Navigator. 

You can then →

  1. Hit the Backspace key to remove the elements.
  2. Drag and then drop them alongside another element
  3. Cut/Copy, and then Paste them alongside another element.
  4. Apply and edit Styles combination on multiple Elements at once 
Navigator
Element Style
Div Identifier Style
Element Identifier Style
Element Style
Element Style
Element Style
Element Style
Element Style

To Turn an Element into another Element → Use the settings panel. 

You can then →

  1. Swap between different Text Elements to define formatting.
  2. Turn a block into different type of block to define layout.
  3. Toggle between Ordered Lists to Unordered Lists.
  4. Apply and edit Styles combination on multiple Elements at once 
Div

To apply Styles to your Elements

  1. Click on the Element in the Navigator or Stage.
  2. Configure your Style using the Styles Manager on the right side of the screen.
Add Style
Breakpoints
States