How to build a photography website with gallery and online booking form
Example website:
Wooof! Photography Studio

This website features:
  • Image slideshow
  • Lightbox photo gallery
  • Online appointment booking 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 "Photography Studio"
This website will have a total of 4 pages, let's add a blank placeholder page for each of them.

How to add a new page:
  • Command bar > Add > New Page
  • Name the new page
  • Choose "Save"
Update page file name:
  • Navigate to page
  • Command bar > Settings > Page Properties > Update Title and File Name
Expand to show all pages in the website by clicking on the navigation menu (top left menu icon)

Page listing:
  • Home - Photography Studio
  • Photo Gallery
  • Happy Clients - client reviews and testimonials
  • Book A Photo Session
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 by clicking on section's Settings button ("Gear" icon)
  • Check "Assign as website header" and choose "Save"
Add text box and navigation menu into header section.

Add text box:
  • Click on the section Add icon ("+")
  • Choose "Textbox"
  • For this example, we are going to type in "Wooof! Photography Studio"
  • Customize font style
Add navigation menu:
  • Click on the section Add icon ("+")
  • Choose "Navigation Menu"
Update labels and 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
Center navigation menu:
  • Open Menu Settings
  • Enable "Center" checkbox
Add new section:
  • Command bar > Add > "Add Page Section" > "Single Column Section"
Add slideshow to section:
  • Click on the section Add icon ("+")
  • Choose "Slideshow"
  • Select photos we want for the slideshow
Change slideshow arrow size:
  • Open slideshow properties
  • Change arrow size to 5x
Test slideshow navigation features in Preview

Add new section with gallery:
  • Command bar > Add (+)
  • Add Page Section > Single Column Section
  • Click on the section Add icon ("+")
  • Choose "Gallery"
  • Select photos we want for the 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
Add two new sections:
Command bar > Add (+) > Add Page Section > Single Column Section

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

Add text box to first section:
  • Click on the section Add icon ("+")
  • Choose "Textbox"
  • Add "Happy Clients" to text box
Add client photos and information to columns in the second section
Add title:
  • Command bar > Add (+) > Add Page Section > Single Section, add text box to section and enter "Book A Photo Session"
Add web form objects:
  • Command bar > Add (+) > Page Section > 3 Column Section, add web form objects to section
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)