Header and Footer Settings

Headers and Footers appear throughout any website. You have the option on each individual page to make them available. The content of Headers and Footers is defined on a site level. Headers for Pro and Advanced plan subscribers allow the option to add a logo or specific custom content. Footers may also include their own unique logos as well as other content specific to the footer.

Note: Not all header and layout options are available for all subscription levels.  Only Pro and Advanced plan users come with the ability to choose different header and footer layouts.

• Configure the Header
• Configure your own Custom Header Content
• Configure the Footer
• Configure your own Custom Footer Content

 

Configure Header Settings

Headers have a maximum height of 240 pixels. You may upload logo or add custom content depending upon the header layout you have selected.​

​In the Dashboard, hover your mouse pointer over Website then click on Customize Website.

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

1. Select Header.
2. Click the Layout tab.
3. Choose the Header Layout that best fits your needs. 
4. Enter a custom header height if you wish to manually control the available space.
5. Set the vertical alignment if applicable.
6. Click the Elements tab.
7. Use the radial buttons to Show or Hide elements and set their alignment.

A Logo or Content tab will appear depending on which Header Layout was selected. 

1. To upload a logo, click the Logo tab.
2. Select the radial button for Upload logo image.
3. Click Browse and select the image you wish to use. We recommend a PNG file with a transparent background that is 240 pixels in height.
4. Click Upload.
5. Select the logo options you want to use.
6. Click Apply.

​
When you are done customizing click PUBLISH and confirm you would like your changes to be live.
​
Note: Logos can also be uploaded for the footer, homepage, and the mobile version of your site.
Click here for more information on adding logos to various pages of your Zenfolio site.

 

Custom Header Content

For Pro and Advanced subscribers, the option to use a Custom header is available (Header layout C) which allows you to add your own content, and formatting, including the ability to add tables and your own source code.

1. While in Customize Website View, go to Header.
2. Go to the Layout tab.
3. Apply the Header Layout C Create a Custom Header.
4. Click on the Content tab.
5. Use the media tools to add photos, video or slide show using content in your account.  Click Embed to embed HTML code.
6. formatting tools to customize the text appearance, behavior and alignment.
7. Click Apply.

To embed HTML content into the Custom Content area of the Header, click Source in the formatting toolbar to switch to HTML mode.
Then paste the embeddable code into the main editing window.

Click Apply when you've finished embedding the code.

When you are done customizing click PUBLISH and confirm you would like your changes to be live.

Please Note: Although the ability to add your own HTML code is available, we do not support this directly. This is only recommended for those who are familiar with HTML/coding.

Also, since custom content may require more space than automatically given, be sure to manually set your custom header height under the Layout tab (30 – 240px).

 

Configure Footer Settings

For more information on the User Agreement and how to hide or remove the Powered by Zenfolio link, please see this guide.

Footers have a maximum height of 360 pixels with an additional 360 pixels available for custom content. Depending upon the selected layout you may also add a unique logo, social media options as well as contact information.

For Pro and Advanced subscribers, there will be a Simple Footer layout (layout A) and a Multi-column Footer layout (layout B).
 

​In your account, hover your mouse pointer over Website then click on Customize Website.

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

​

Setting up a Simple Footer

The simple footer layout will display the footer elements in a single column. 

1. Select Footer.
2. Click the Layout tab.
3. Choose the Footer Layout that best fits your needs. 
4. Enter a custom Footer height if you wish to manually control the available space and set the vertical alignment if applicable.
5. Click the radial button to hide/show custom content (a Content tab will appear if you choose to show) and enter the custom height of the custom content. 
   Note: If you are showing custom content is is highly recommend you set a custom content height.
6. Click the Elements tab.
7. Select the elements you wish to Show or Hide in the footer.  Also select the alignment of displayed elements.

If content is selected to show under the Layout tab, a Content tab will appear.

Add Custom Content to the Footer

As with the Header, there is a custom content area in the footer.  This can be used to display custom content such as sponsor or affiliate logos.

1. To add the custom content, go to the Content tab.
2. Use the media tools to add photos, video or slide show using content in your account.  Click Embed to embed HTML code.
3. Enter the desired text in the field provided. Use the formatting tools to customize the text and content appearance, behavior and alignment.

To embed HTML content into the Custom Content area of the Footer, click Source in the formatting toolbar to switch to HTML mode.
Then paste the embeddable code into the main editing window.

Click Apply when you've finished embedding the code.

Some Footer Layouts include options for a unique logo, social media buttons, and contact info. If these layouts are selected, tabs will appear to select options such as uploading a logo.

Adding your logo to the footer

Please note, the ability to customize the footer and upload your own logo is only available to Pro and Advanced plan users.

1. Go to the Elements tab.
2. Set the Logo to Show.
3. Go to the Logo tab.
4. Select the radial button for Upload logo image.
5. Click Browse and select the image you wish to use. We recommend a PNG file with a transparent background that is 240 pixels in height.
6. Click Upload.
7. Select the logo options you want to use.
8. Click Apply.

​


You can use Social Media Buttons tab to show or hide popular social media buttons.

Please note, before the social media buttons can be shown, the links to your social media pages must be entered into the Social Media page. This can be found by going to Settings > Social Media.

1. Go to the Social Media Buttons tab.
2. Show or Hide the selected Social Media Buttons.
3. Click Apply.

When you are done customizing click PUBLISH and confirm you would like your changes to be live.

The multi-column footer layout will display the footer elements in a multiple columns. 

 

Setting up a Multi-Column Footer

1. Select FOOTER.
2. Click the Layout tab.
3. Choose Footer layout B - the multi-column layout option. 
4. Enter a custom Footer height if you wish to manually control the available space and set the vertical alignment if applicable.
5. Click the radial button to hide/show custom content (a Content tab will appear if you choose to show) and enter the custom height of the custom content. 
   Note: If you are showing custom content is is highly recommend you set a custom content height.
6. Click the Elements tab.
7. Check the elements you wish to include in the footer and move their position using the dotted handles.
8. Select to show or hide the Search Field and set it to be either expanded or collapsed.
9. Select whether to show login link.

If you are choosing to show Client Access, you may also enter text to appear above the form field as set the access form heading.  This helps to explain to your site visitors that their Gallery ID (Client Access code) should be entered into that field.


To add custom content, click the Content tab.

Use the media tools to enter photos, video, slide shows, or embed code and use the formatting tools for textual settings and the placement of information. 


To embed HTML content into the Custom Content area of the Footer, click Source in the formatting toolbar to switch to HTML mode.
Then paste the embeddable code into the main editing window.

Click Apply when you've finished embedding the code.



Some Footer Layouts include options for a unique logo, social media buttons, and contact info. If these layouts are selected, tabs will appear to select options such as uploading a logo.

1. Click the Logo tab. Here you will be able to upload your own logo.
   Click here for detailed instructions on uploading your own logo into the header!
2. Click the Social Media Buttons tab. Here you will be able to show or hide popular social media buttons.
3. Click the Contact Info tab and select the radial buttons to show/hide contact information.
4. Click Apply.

When you are done customizing click PUBLISH and confirm you would like your changes to be live.