A key feature of your Livingston website theme is the ability to add one or more “header images.” These photographs sit at the top of your page, just below the header nav and above the page’s content.

Header photos will automatically be cropped and scaled to fit on any screen size. 

How to add a header image for a single page

In order to match your header image to your page’s content, and create visual distinction between pages on your website, Livingston allows you to assign a unique header image per page.

To add a header image to your page, navigate within NationBuilder’s control panel to Website > Pages > [The Page] > Settings > Feature content sliders. 

There, create a new “slider” as follows:

• Label: Header Image
• Headline / Action text: [leave intentionally blank]
• Page to feature: [enter the slug of the current page]
• Image: Upload your preferred image.
• Status: Published

The “slider” will not appear as a “slider” in the traditional sense. It will appear as the header image, only.

How to add a site-wide header image

In addition to a per-page header image, you may also opt for a site-wide header image. This image would show, by default, on every page (except the homepage). 

To add a site-wide header image, navigate within your NationBuilder control panel to Website > Site settings > Header image. There, upload your preferred image. 

Note: If you have specified a header image for an individual page, as described above, then that image will override the site-wide header image for the relevant page.

Optimizing header images

To ensure that your header images are optimally sized, and that they load quickly, we recommend the following:

• Crop your image to a 16:9 aspect ratio (ex: 1600 x 900 pixels).
• Use a service like TinyPNG to compress the image to its smallest possible size.
• Finally, upload your image within your NationBuilder control panel.