How to download and install Hazel

Hazel is a universal windows platform (UWP) app, it can be installed directly from the...

Download and install Hazel
Compatible devices

Hazel Website Designer is compatible with devices running Windows 10 and Windows 11....

Download and install Hazel
How to install app updates from the Microsoft Store

Please see update steps below: 1. Close this app if it’s currently open...

Download and install Hazel
How to install this app on multiple devices

Downloads from the Microsoft Store are linked to your Microsoft account. Once installed, you...

Download and install Hazel
How to add PayPal payment buttons

How to create a PayPal payment button Log in to your PayPal account at...

Sell online
How to save designs

File format Each website is saved in a file with "hazel" extension, this is...

Getting started with Hazel
Responsive section layouts

What is a responsive section A page is made up of many responsive sections....

Getting started with Hazel
How to create links to emails and phone numbers

Email links: For emails, please add a hyperlink in the following format: mailto:me@domain.com...

Create web links
How to export a page

How to export a page to HTML (for publishing) Open page Go to...

Export web design to HTML format
How to import a page / merge pages between websites (PRO)

Open your website in Hazel Go to Command Bar > Publish > Import Page...

Upgrade to Hazel Pro
How to create a dropdown navigation menu

Add a navigation menu: Click on the section Edit button ("Pencil" icon) Click...

Menu and web navigation
How to add custom code

How to add custom code into the Body section Add "HTML Snippet" object...

Add custom code
How to link to a PDF file

To link to a local PDF file, all you have to do is create a...

Create web links
How to add Google Analytics

Google Analytics is a popular tool used for measuring and tracking visitor traffic. To...

SEO and web traffic
How to use shared header and footer sections

How to add a shared website header and footer If you have multiple pages...

Website header and footer
How to customize the default footer section

Headers and footers are just regular responsive sections. The default footer in most templates...

Website header and footer
Add, delete and duplicate page

How to add a new page To add a new page to the website,...

Getting started with Hazel
How to generate a sitemap (PRO)

You can generate a sitemap file directly from the app by going to...

Upgrade to Hazel Pro
How to export, publish and test your new website

Export web design to HTML To export your design to HTML, please go to...

Getting started with Hazel
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...

Embed website widgets
How to embed YouTube video

1. Add section to page 2. Add "HTML Snippet" to section 3. Enter...

Embed website widgets
How to embed Vimeo video

1. Add section to page 2. Add "HTML Snippet" to section 3. Enter...

Embed website widgets
How to add a website header section

Add a new section and assign it as a "website header" so it appears on...

Website header and footer
How to add a navigation menu

Add a navigation menu into header section: Put header section in "Edit" mode (button...

Menu and web navigation
How to apply a background image to an entire page

Add background image: Command bar > Page Properties Background Image Choose Save...

Getting started with Hazel
How to add a new text box

Add text box to section Click on the section Add icon ("+") Choose...

How to add and format link button

Click on the section Add icon ("+") Choose "Action Button" Customize...

Create web links
How to add a web form

In this example, we going to add a web form to the "Contact" page to...

How to create a title section with background banner image

In this example, we want to add a big title banner with section background image....

Getting started with Hazel
How to add a lightbox gallery

Add new section with gallery Command bar > Add (+) Add Page Section...

Images, galleries and slideshows
How to add a new page to a website

Add a new page by going to: Command bar > Add > New Page...

Getting started with Hazel
How to create a new website from scratch using a blank template

Create a blank website: Launch the Hazel app and choose the "New Blank" template...

Getting started with Hazel
How to change page title

Set home page title: Command bar > Settings > Page Properties Update to...

Getting started with Hazel
How to set photos to click-to-enlarge

Right click image and choose "Image Properties" Set Style to "Rounded" Check checkbox...

Images, galleries and slideshows
How to set navigation menu to center alignment

Center navigation menu: Open Menu Settings Enable "Center" checkbox This will center...

Menu and web navigation
How to add an image slideshow

Add new section: Command bar > Add > "Add Page Section" > "Single Column...

Images, galleries and slideshows
How to create a section with video background

Add new section: Command bar > Add > "Add Page Section" > "Single Column...

Getting started with Hazel
How to create a gallery with circle shaped image thumbnails

Add new section and gallery: Command bar > Add (+) > Add Page Section...

Images, galleries and slideshows
How to create a multi-page website and add placeholder pages

For this example, we will create a website with a total of 4 pages and...

Getting started with Hazel
How to create text links

There are two types of text links: 1. Links applied to phrases...

Create web links
How to link to different sections within a page (anchor links)

⦁Open Section Properties and assign an ID to the section. Please select a unique...

Create web links
How to add custom Javascript and custom CSS style

Command bar > Settings > Page Properties > scroll down to the "Custom Header Code"...

Add custom code
How to upgrade to Hazel Pro

Upgrading to Pro edition removes watermarks and unlocks advanced features. How to...

Upgrade to Hazel Pro
How to restore existing in-app upgrades after a reinstall

All downloads and purchases from the Microsoft Store are linked to your Microsoft account....

Upgrade to Hazel Pro
Add custom HTML using a HTML snippet object

Hazel Pro is a visual website designer that allows you to create websites without needing...

Add custom code
How to add font icons from Font Awesome

Font Awesome provides vector icons and social logos for your website. This is one...

Add custom code
Privacy Policy | More Apps From Us
Created using Hazel Blog Writer