How to build a business website with portfolio showcase and contact form
Example website:
Daniel's Interior Design

This website contains the following pages:
  • Home page
  • Portfolio showcase
  • Contact form
What we used to build this website:
  • Hazel Pro
  • Stock photos from pexels.com
Create a blank website:
  • Launch the Hazel app and choose the "New Blank" template
  • Name and save your new website
Set home page title:
  • Command bar > Settings > Page Properties
  • Update Title to "Daniel's Interior Design"
Let's use the index page as the home page and create two new pages for "Portfolio Showcase" and "Contact form".

Expand to show all pages in the website by clicking on the navigation menu (top left menu icon)

Add a new page by going to:
  • Command bar > Add > New Page
  • Name the new page
  • Choose "Save"
Add a new section and assign it as a "website header" so it appears on all pages in this website.

  • Command bar > Add > "Add Page Section" > "Single Column Section"
  • Open Section Properties
  • Check "Assign as website header" and choose "Save"



Add a navigation menu into header section:
  • Put section in "Edit" mode (button with "Pencil" icon)
  • Click on the section Add icon ("+")
  • Choose "Navigation Menu"
Customize navigation "Brand":
  • The "Brand item" is the left most item in the menu. You can also optionally choose to add a logo image as your navigation brand icon.
  • Right click on "Brand" and choose "Edit"
  • Update label to "Daniels's Interior Design"
  • Update link to "index.html"
Update links so all pages are linked to the menu:
  • Right click on each navigation menu item
  • Update item label and item link
  • Delete any extra menu items we do not need
We want to change the background color from solid white to semi-transparent.

Update navigation menu color and hover selection color:
  • Menu Settings > Background Color
  • Drag on transparency slider
  • Update Hover background color



Add background image:
  • Command bar > Page Properties
  • Background Image
  • Choose Save
Add new section
Command bar > Add (+)
Add Page Section > Single Column Section

Add text box to section
  • Click on the section Add icon ("+")
  • Choose "Textbox"
  • Click inside text box to enter content
  • For this example, we are going to type in "Daniel's Interior Design"
Select characters "Daniel's" for text formatting:
  • Format bar > Font > Update font style
  • Format bar > Size > Update font size
  • Format bar > Update text color
Select characters "Interior Design" for text formatting:
  • Format bar > Font > Update font style
  • Format bar > Size > Update font size
  • Click on the section Add icon ("+")
  • Choose "Action Button"
Customize button:
  • Right click on button and choose "Button Settings"
  • Scroll down to the "Label" field and update the button text. For this example, let's enter "Get in touch"
  • Update font style and font size
  • Update button colors and border style
  • Update button width to 250
Apply link to button:
  • Scroll down to "Link to page in website"
  • Select "Contact.html"
  • Choose "Save"
We are going to add a web form to the "Contact" page to make it easy for our visitors to get in touch with us.

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

Add form objects
Add field for "Name"
  • Click on the section Add icon ("+")
  • Choose "Form Objects">"Input Field"
  • Update "Text Field Label" label to "Name"
Add field for "Email"
  • Click on the section Add icon ("+")
  • Choose "Form Objects">"Email Text Field"
  • Update "Email Text Field Label" to "Email"
Add field for "Comments"
  • Click on the section Add icon ("+")
  • Choose "Form Objects">"Paragraph"
  • Update "Paragraph Label" and "Comments"
Add and customize "Submit" button
  • Click on the section Add icon ("+")
  • Choose "Form Objects">"Submit" button
  • Click on "Submit" button menu and choose "Button Settings", enter your email address under "Email for form submissions".
When someone completes this form and clicks submit, you will receive an email at this address.

Please note you have to upload this page to your website in order to test out the form submission features. (Submission features are not active in local preview)

Let's customize the "Portfolio Showcase" page by adding a big title banner with section background image and a lightbox gallery, perfect for displaying portfolio images.

Command bar > Add (+) > Add Page Section > Single Column Section

Add text box to section
  • Click on the section Add icon ("+")
  • Choose "Textbox"
  • Click inside text box and type in "Portfolio Showcase"
  • Update font style, size and text alignment
Update section background image and padding
  • Click on the section Properties button ("Gear" icon)
  • Choose "Background Image"
  • Scroll down to "Section Padding" and change Top Padding and Bottom Padding to 200
Add new section with gallery
  • Command bar > Add (+)
  • Add Page Section > Single Column Section
  • Click on the section Add icon ("+")
  • Choose "Gallery"
  • Select photos to be added to gallery
  • Arrange photos
  • Right click on gallery and choose "Gallery properties" to adjust for number of rows and columns
  • Test image click-to-enlarge features in Preview