Working with header images
The Designer lets us add header images to individual pages. Applying images using this approach has some benefits compared to adding them as traditional images using the page editor.
- Header images can be stretched across the entire page
- We can place text on top of header images
If you want the quick solution, then scroll to the bottom where you will find a video demonstrating how header images are used
To apply a header image to a page, first make sure you are logged in
and upload the image file
. Then browse to the page where you want to add a header image, and open the Designer using Content > Design
Now click in the content area (marked with a red outline in the image below), and open/expand the Header image section. All there is to it, is to select the image you uploaded from the first drop down menu. You can now optionally have it stretch across the page, and change the height of the image.
It is recommended to have the Position option set to Behind content which makes better sense in most cases.
If you do not want the text on the page to be on top of the image, then set Indent content from top to the same value as specified in Height, or higher if you want to add some spacing between the header image and the content below it.
If you do want to place text on top of the header image, you will need to make a minor change to the content page, to make sure the text on top of the header image remains within the boundaries of the image. This is especially important to make header images work properly on mobile devices with smaller screens.
- Go to Content > Pages and open the page with the header image for editing.
- Place the text cursor at the top and use the Table button to create a Fluid Grid Table with just one cell (image 1 below).
- Use the Cell button to set the cell height to the same height we used for the image in the Designer (image 2 below).
- Finally, add some content on top of the header image and save the page (image 3 below).
We have now created a fixed container that will never change size, no matter how the text inside it wraps on different screen sizes, or if the font size is changed when certain resolution breakpoints
are met. The images and video below demonstrates the steps necessary.
The video below demonstrates the entire process in under 2 minutes.