Customizing the Look of Events

The Events feature is limited to users on the Advanced plan.

The Events feature is used to display photos from events with many participants and potential clients. This includes events like school photos and sports events like marathons.
  • See this guide for more details on creating and setting up an Event.
  • Click here for more information on how Zenfolio can help with your school photography business.
  • You may also be interested in our guide for School Photographers.

Like Groups and Galleries, the pages displayed in Events can be customized with different Layouts, Themes and Options. And like those pages, the Event is customized via Customize Website View.

Events consist of two types of pages:
  1. The Landing Page
  2. The Search Page

The Landing Page is the page through which the client can search for their images in the event. The Search Page is where the results are displayed.

This guide covers how to customize both types of pages within an Event.


Please click the links below to jump directly to the desired section:  
For Zenfolio users that signed up after May 10 2018, please click here for updated instructions using the new Photos Page in the Dashboard.

Customizing the Event Landing Page

The Event Landing page is customized through Customize Website View.
  1. In the Dashboard, go to Photos.
  2. Under the Organizer, go to the Event that you would like to edit.
  3. Hover the mouse pointer over Preview then click on Customize.

The page will refresh with customization tools at the top, confirming that you are in the Customize Website View.
 

List of available customization tools

  1. Layout controls the placement of different elements displayed on the Event Landing page.
  2. Themes control the colors and fonts used on the Event Landing page. You can apply any pre-made theme or create your own custom theme.
  3. Options allow you to show or hide various elements on the Event Landing page. This is used to further fine tune the site based on the Layout applied to the Event Landing page.
  4. Save as Default - allows you to save the settings applied to this Event as the default settings for all other Event Landing pages. See this guide for more details on using Save as Default.
  5. Click Publish to apply the customization settings in Customize Website View to the live website view of the Event Landing page.
Customize Events Landing Page
Feel free to experiment with different Layouts, Themes and Options in Customize Website View. The changes that you make will not apply to your live site until you Publish your changes.


 

Hiding or Displaying Thumbnails of Galleries on the Event Landing Page

In the Event Landing page, thumbnails of the galleries contained in the Event can be displayed in the Event landing page. The galleries are not shown by default but if the change has been made to display the galleries, the setting can be changed at anytime and the galleries can be hidden again from the Event Landing page.

Please note that displaying the galleries in the Event Landing page is not recommended for Restricted Events as this allows site visitors to view images without the necessary passcodes. For this reason, the display of galleries should only be done for Open Events. See this guide for more details on Restricted Events.

To Hide or Show thumbnails of galleries in the Event Landing page, start by going to Customize Website View.
  1. In Dashboard, go to Photos.
  2. Under the Organizer, go to the Event that you would like to edit.
  3. Hover the mouse pointer over Preview then click on Customize.

The page will refresh with customization tools at the top, confirming that you are in the Customize Website View.


To display the thumbnails, a layout that supports the display of thumbnails must be applied to the Event Landing page.
  1. In Customize Website View, go to Layout.
  2. Apply one of these three layouts.
    Centered with banner layout
    Left side Spotlight area
    Right side Spotlight area
  3. Click Apply.
  4. Click on Save as Default to save the current settings as the default settings for other Events. This will apply the same Layout to all other events that use default settings as well as apply the layout to all newly created Events.
  5. Publish the changes then move on to the next steps below.
Events Landing Page Change Layout

If you've chosen either the Left side Spotlight area or Right side Spotlight area layouts, make sure to go back to Customize Website View and select the content you would like displayed in the Spotlight Content area.
 


Choosing which galleries are displayed in the Events Landing Page

After following the steps above to choose a layout that supports the display of thumbnails, you'll need to mark the galleries you would like to display in the Events Landing Page. That is done through the Dashboard.
  1. In the Dashboard, go to Photos.
  2. Select the gallery within the Event under the Organizer.
  3. Under the Toolbox column on the right, locate Cover Photo then, in that area, check the box for Show on the Event Page.
Show Gallery on Event Landing Page

Repeat for any other galleries within in the Event that you would like to display in the Events Landing Page.

To hide galleries from the Events Landing Page, follow the steps above but this time, uncheck the box for Show on the Event Page.


 

Editing the Spotlight Content of the Events Landing Page

On the Events Landing Page, you can display a Spotlight Content area. In that area, you can display a single photo or video or a slideshow of images from one of your galleries. You can also choose to embed HTML code content into that area.

To display an Events Landing Page with a Spotlight Content area, you'll need to first apply a layout that contains the Spotlight Content area. That is done through Customize Website View.
  1. In the Dashboard, go to Photos.
  2. Under the Organizer, go to the Event that you would like to edit.
  3. Hover the mouse pointer over Preview then click on Customize.

The page will refresh with customization tools at the top, confirming that you are in the Customize Website View.
  1. In Customize Website View, go to Layout.
  2. Apply one of these layouts.
    Left side Spotlight area
    Right side Spotlight area
  3. Click Apply.
  4. Click on Save as Default to save the current settings as the default settings for other Events. This will apply the same Layout to all other events that use default settings as well as apply the layout to all newly created Events.
Events Landing Page Change Layout Spotlight

After applying the layout, click on the desired content type to add that content to the Spotlight Content area.

Events Landing Page Select Content Spotlight

Please see these links for more details on setting up these Spotlight Content types:

How to configure a single Photo or Video
How to configure a Slideshow
How to embed content


Publish your changes before exiting Customize Website View to make those changes live on your site.




Editing the Background Content of the Events Landing Page

On the Events Landing Page, you can display a Background Content area. In that area, you can display a single photo or video or a slideshow of images from one of your galleries. You can also choose to display a Photo Strip in that area.

To display an Events Landing Page with a Background Content area, you'll need to first apply a layout that contains the Background Content area. That is done through Customize Website View.
  1. In Dashboard, go to Photos.
  2. Under the Organizer, go to the Event that you would like to edit.
  3. Hover the mouse pointer over Preview then click on Customize.

The page will refresh with customization tools at the top, confirming that you are in the Customize Website View.
  1. In Customize Website View, go to Layout.
  2. Click on the Full Screen layout.
  3. Click Apply.
  4. Click on Save as Default to save the current settings as the default settings for other Events. This will apply the same Layout to all other events that use default settings as well as apply the layout to all newly created Events.
Events Landing Page Change Layout Background
  1. After applying the layout, click on Background Content.
  2. Click on the desired content type to display in the Background Content area.

Please see these links for more details on setting up these Background Content types:
Publish your changes before exiting Customize Website View to make those changes live on your site.
 



Customizing the Events Search Page

After searching for content in the Events Landing Page, the search results are displayed in the Event Search Page. This page can also be customized via Customize Website View.
  1. In the Dashboard, go to Photos.
  2. Under the Organizer, go to the Event that you would like to edit.
  3. Hover the mouse pointer over Preview then click on Customize.

The page will refresh with customization tools at the top, confirming that you are in the Customize Website View.
 

List of available customization tools

  1. Use the Customize View Switcher to switch to the Search Page view. That is done by clicking on Landing Page in the top left corner then clicking on SearchAll customization changes to the Event Search page must be made in the Search Page view.
  2. Layout controls the placement of different elements displayed on the Event Search page.
  3. Themes control the colors and fonts used on the Event Search page. You can apply any pre-made theme or create your own custom theme.
  4. Options allow you to show or hide various elements on the Event Search page. This is used to further fine tune the site based on the Preset or Layout applied to the Event Search page.
  5. Save as Default - allows you to save the settings applied to this Event as the default settings for all other Event Search pages. See this guide for more details on using Save as Default.
  6. Click Publish to apply the customization settings in Customize Website View to the live website view of the Event Search page.
Customize Events Search Page
Feel free to experiment with different Layouts, Themes and Options in Customize Website View. The changes that you make will not apply to your live site until you Publish your changes.

 

Displaying Photo Results in a Dynamic Grid on the Event Search Page

The search results can be displayed in dynamic grid. This allows for a better presentation of the photo as well as allowing for displaying larger thumbnails of each photo.

To do this, use the steps above to view the Event Search page in Customize Website View.

After opening the page in Customize Website View, follow these steps.
  1. Go to Options.
  2. Uncheck Use Default Settings For Layout, Theme, and Options if necessary.
  3. Go to the Grid Options tab.
  4. Choose Grid Style A, B or C. For Portrait Images, Grid Style A and C are recommended.
  5. Choose the desired settings such as thumbnail height, width, spacing around cells and margins around each image.
  6. Go to the Thumbnails tab for additional grid customization options.
  7. Click Apply to close the Options panel. Review your changes and redo steps 1 to 6 if needed.
  8. Click Save as Default to save the new setting as the default setting for all other Event Search Pages.
  9. Click Publish before exiting Customize Website View to make those changes live on your site.
Event Search page Show Grids

See this guide for more details on the various Dynamic Grid options available.