Getting started
File format
Each website is saved in a file with "hazel" extension, this is the native file format for this app.

Save your design
To save your design, go to command bar > "Save"
Reopen saved design
To resume work on your saved website:
1. Launch the Hazel App
2. Choose “Open Saved”
3. Select the website file you had saved previously, then choose “Open”. This will reopen your website design in the Hazel app.
Export to HTML
Export all HTML source code as well as media files used in the design by going to command bar > Publish > Export
What is a responsive section
A page is made up of many responsive sections. A "responsive section" auto resizes its layouts when viewed on a mobile size client. For example, a "two column" responsive section will automatically fold to form a stacked single column. All contents inside the sections inherit the responsive properties.

How to adjust spacing between sections
  • Select "Section Properties"
  • Adjust "Paddings"
Section backgrounds
  • Section background image - this automatically fits the image horizontally to the device width
  • Section video background - this fits the video as the section background
  • Section background color - this fills the entire section with the selected color
How to add an image background to a section
  • Choose "Section Properties"
  • Choose "Background Image"
  • Select the image you wish to use as background
How to add a video background to a section
  • Choose "Section Properties"
  • Choose "Background Video"
  • Select the video you wish to use as background
  • If you wish to display the video in full width, please set the section to 100% width with no left and right padding.
  • Test video background in "Preview". (Please note video backgrounds do not show in the editor, please use "Preview" or publish the page in order to test the video background)
Design tips:
  • When using a video background, we also recommend adding a photo as the "image background", this allows the page to display the image background while the video is downloading, providing the web visitor with a better experience.
  • While you can technically add any sized video as the background, please keep the file size in mind as you select videos. A smaller video will load faster and will consume less server bandwidth. Try to keep your video file size under 10 mb. If you're looking for examples of videos suitable for website backgrounds, check out https://coverr.co
How to link to my email and phone number
For emails, please add a hyperlink in the following format:
mailto:me@domain.com

Replace me@domain.com with your own email address.

For phone numbers, please use a link in the format of "tel:123456789", this link will only trigger the phone app if used on a device that supports calls. For example, this link will allow users to call if the user activates the phone link on a mobile device. If the user activates the link on a computer not capable of making phone calls, the link will not trigger any action.
How to link to different sections within a page
  • Open Section Properties and assign an ID to the section. Please select a unique section ID, we recommend an ID that does not contain any spaces. (For example: "AboutMeSection")
  • To link to section, please create a link in the format of: page1.html#sectionID, please replace "sectionID" with your own section ID, and replace "page1.html" with your web page file name.
How to export a page to HTML (for publishing)
  • Open page
  • Go to Command Bar > Publish > Export Page As HTML
  • Select export folder
  • Export files will include the HTML file for the web page as well as a folder containing scripts and media files (such as photos)
  • Exported files are ready for publishing
  • If you are sharing the source files with someone directly instead of publishing, the person can click on the HTML file to launch the page in a web browser (no special software needed)
How to export a page to hazel format (for sharing with another designer)
  • Open page
  • Go to Command Bar > Publish > Export Page As Hazel File
  • This will export a single page in hazel file format
  • Use this export option if you wish to share only a single page and not the entire website
  • The person you share this file with will need to have the Hazel app installed in order to open the "hazel" file
  • Open your website in Hazel
  • Go to Command Bar > Publish > Import Page From Hazel File
  • From the file selection panel, select and open import design file
  • Use this feature if you wish to merge in a page from another design file
Tip:
When used in combination with "Export Page As Hazel File", this feature is excellent for sharing designs between multiple people working in a team.
Add a navigation menu:
  • Click on the section Edit button ("Pencil" icon)
  • Click on the section Add icon ("+")
  • Choose "Navigation Menu" (if you're not able to see the "Navigation Menu" Item, please make sure you're working in a "Single Column Section")
Add submenu items:
  • Right click on a menu item and choose "Add Sub Menu Item", repeat this action to add multiple submenu items
Update item labels and links:
  • Click on each sub menu item
  • Update menu label and link
Tips:
  • When working with dropdown menus, always assign links to the "second level" menu items, do not assign links to the "top level" items. Links assigned to top menu items will be ignored as top level clicks are designed to open the associated submenu.
  • Do not test link navigations using preview. The preview feature is designed for previewing a single page at a time (only the current one you are working on). Please export pages and test link navigations using exported files.
  • Whenever possible, add the navigation menu to a shared "header section" so the menu is automatically inherited by all pages in the website.
How to add custom code into the Body section
  • Add "HTML Snippet" object
  • Copy and paste custom code into HTML Snippet
For snippets that contain "div" tags, please make sure the code is enclosed with the appropriate number of matching closing "div" tags. If the tags are mismatched, this custom code can potentially cause layout issues for the page.

Please consider using the shared header or shared footer if you wish to add custom code that needs to be inherited by multiple pages.

How to add custom code into the Header section
The "Custom Header Code" field is designed to incorporate custom code that should be included in the
section of the page, this typically includes CSS styling and Javascript code. To add custom code into the "header" section of the page, please go to "Page Properties" > "Custom Header Code".

Tips: Any code added into “Custom Header Code” will be added directly into the html header tags during code generation. This field is helpful for incorporating widgets and external code snippets where code segments need to be added directly into a page header.

Please make sure any custom code added is appropriately formatted. Enclose Javascript code with opening and closing "script" tags. Enclose CSS code with opening and closing "style" tags.

Please check to make sure your code is surrounded by the appropriate opening and ending tags. For example, any JavaScript should be surrounded by opening and closing script tags, any CSS style formatting should be surrounded with opening and closing style tags.
To link to a local PDF file, all you have to do is create a link to the PDF file (i.e. myPDF.pdf) and place this file in the same folder as the exported HTML file. If your PDF file name contains spaces, please rename it and replace spaces with dashes or underscores. When publishing your website, please upload this PDF file together with the rest of your website.
Google Analytics is a popular tool used for measuring and tracking visitor traffic. To learn more, please see https://www.google.com/analytics
Instructions here shows you how to add Google Analytics into your website:
1. Open Page Properties
2. Scroll down to the “Google Analytics” section
3. Please copy and paste tracking code from your Google Analytics account into the “Google Analytics” section
4. Select "Save"
How to add a shared website header and footer
If you have multiple pages in a website, you will find it’s easier to maintain a consistent style by adding common elements that are shared across all pages.

Hazel makes this process simple by allowing you to designate selected sections as the shared website header or footer. You have flexibility to make changes to this designation at any time.
How to designate a shared header
1. Create a section as your header, move it up so it’s the top most section on your page, open “Section Properties”
2. Scroll down in “Section Properties” and check the “Assign as website header” checkbox
3. Click on “Save”
4. A blue line will appear underneath this section, this indicates the section has been successfully designated as the header. All changes made to this section will be automatically transferred to other pages.

Tips: elements most suitable for a shared header section include items such as navigation menu, site-wide news announcements and site logo.
How to designate a shared footer
1. Create a new section for your footer elements, move it so it’s the bottom most section on your page, open “Section Properties”
2. Scroll down in “Section Properties” and check the “Assign as website footer” checkbox
3. Click on “Save”
4. A blue line will appear on top of this section, this indicates the section has been successfully designated as the footer. All changes made to the section will be automatically transferred to other pages.

Tips: elements most suitable for a shared footer section include items such as copyright information and quick contact links.
Headers and footers are just regular responsive sections. The default footer in most templates is a plain single column section, but you can use any column layout.

You can assign any section as the footer with these steps:
- create new section with footer content
- move section to the bottom of the page
- go to “Section Properties” and select “Assign as footer”
- you can assign more than one section as the footer
- header and footer sections are automatically inherited by all pages in the website
How to add a new page
To add a new page to the website, please go to command bar > Add > New Page
To link a new page into the navigation menu, please add a new menu item and assign the link to your newly added page:
  • in this example, we are going to link to a page within the website, you may choose the page directly from the link drop down list. When linking to a page from an external website, please enter in the full URL to the page into the link field.
  • test for new navigation menu link in “Preview”
How to delete a page
  • Open the page you wish to delete, go to command bar > Settings > Page Properties
  • Scroll down in Page Properties until you see the "Delete This page" check box
  • Check the "Delete This Page" check box, choose "Save"
  • Confirm the delete page confirmation alert
How to duplicate a page
  • Open the page you wish to duplicate, go to command bar > Settings > Page Properties
  • Choose "Duplicate Page"
1. Add section to page
2. Add "HTML Snippet" to section
3. Edit the HTML Snippet to the following code, please replace video URL with your own:
How to find embed video URL from YouTube?
1. Open YouTube and navigate to the video you wish to embed
2. Click on the “Share” button and then click on “Embed”, copy the video URL in the embed code, this URL starts with the prefix https://www.youtube.com/embed/
Sample YouTube embed code showing a video of Hazel app trailer:
YouTube Player Parameter Description
rel=0 Do not show related videos from other channels after video player finishes playing.
mute=1 Mute audio
autoplay=1 Auto plays video
vq=hd720 Requests YouTube to load video definition at HD 720p
loop=1 Plays video in a loop (need to be used together with playlist=VIDEO_ID)
playlist=PLAYLIST_ID Plays playlist. When set to a video ID, will play video on repeat (when used together with loop=1)
Support for parameters in this list may change over time. For information on the most up to date YouTube video player parameters, please see YouTube's official guide page at https://support.google.com/youtube/answer/171780?hl=en
1. Add section to page
2. Add "HTML Snippet" to section
3. Edit the HTML Snippet to the following code, please replace video URL with your own:
How to find embed URL from Vimeo?
1. Open Vimeo and navigate to the video you wish to embed
2. Click on the “Share” button and copy the “Embed” code
3. From the embed code, identify the Video URL, this video URL will start with the prefix https://player.vimeo.com/video
How to embed another page into your web page using iFrame:
Tap on the Add (+) button for the section you wish to embed the web page and choose "HTML Snippet"
Copy and paste in the following code:
Please replace the website address with the URL of the web page you wish to embed
Preview or publish this web page to check out your embedded page.

Important notes:
  • Using the above code, the embedded page defaults to 100% of the section width. If your design requires the embedded page to be framed in a specific box size, please adjust the width and height parameters.
  • Please note some websites do not allow remote embed. If a website does not allow embed, your connection will be refused and the iframe will be rendered blank.
We recommend checking out Paypal.com for the latest information on this topic.

How to create a PayPal payment button
  • Log in to your PayPal account at paypal.com.
  • At the top of the page, select Tools > All Tools > PayPal buttons
  • Choose "Create new button"
  • Choose the button type you wish to use. For example: "Shopping Cart" allow customers to choose one or more items for a single checkout, "Buy Now" let customers click once and quickly purchase one item at a time.
  • Customize button with your product information
How to customize your PayPal payment button
Product quantity
  • If you are working with a "Shopping Cart" style button, the payment button will automatically display the "Quantity" selector after customer clicks on "Add to cart"
  • If you are working with a "Buy Now" style button and you wish for customers to have the option to adjust purchase quantity, please choose "Customize Advanced Features (optional)". For option "Do you want to let your customer change order quantities?", please choose "Yes".
Copy payment button code
  • Choose "Save Changes"
  • Copy code generated
How to add Paypal button code to your web page
  • Launch Hazel Website Builder and navigate to the web page you wish to add the payment button to
  • Add a new object to the web design, choose "+" and select "HTML Snippet"
  • Paste the generated payment button code into the "HTML Snippet box"
  • Go to "Web Preview" to preview the payment button. Please note the payment button is "not" active in local preview, this means if you try to click on the button in local preview to run a test purchase, it will not work. Please publish this page online to test button.
You can generate a sitemap file directly from the app by going to Command Bar > Settings > “Website Sitemap”.
The built-in sitemap feature will list all pages available in the website, you can also manually choose which pages to include in the sitemap.
Font Awesome provides vector icons and social logos for your website. This is one of our favorite web design resources. Learn more at https://fontawesome.com
Link your website to Font Awesome:
  • Launch Hazel Pro
  • Open any page
  • Go to Settings > Page Properties
  • Check "Custom Header Code"
  • To link the entire website, paste the linking code into "Custom Header Code - Site Level"
  • To link a single page at a time, paste the linking code into "Custom Header Code"
Example linking code:
Your code may look different, you should always follow the latest instructions from Font Awesome:
Add Font Awesome icons:

You can add icons into any text box or HTML snippet box. Test for icons using "Preview" mode.

Maple leaf:
Upward arrow:


Change icon color and size:

When adding icons into a text box, you can customize the color of icons by changing the "Text color" of the icon code.
Include a code modifier such as "fa-3x" to customize icon size (i.e. fa-3x, fa-4x, fa-5x, etc)