Capitan's masthead builder allow you to easily design pages with heading areas containing headline text, descriptions buttons and background images.

This page uses the masthead type "Full Screen" and the configuration shown below:

How the image scales up and down

If you have selected an image for the background of the masthead, the selected image will be scaled to fit to the edges of the browser window. The height of the masthead will be based on the height of the selected media and limited to be no taller than the browser height (100vh). The exact behaviour of this component can be adjusted in your CSS file.

If no image is selected

By default a colour from your brand colour palette will be used as the background of the component.

Alternative image/video formats for tablet/mobile devices

Alternative images/videos are enabled for this type of masthead and are activated using the same file name suffixing system as Capitan galleries.

_SQ. suffix for square image/video

If your standard file name is my-new-masthead.jpg you should save your square file with the file name my-new-masthead_SQ.jpg and upload it to the same folder as my-new-masthead.jpg.  

The _SQ suffixed image will replace the standard image when the browser width is around the same as the browser height - somewhere between desktop and mobile, which is usually occupied by tablets.

_MOB. suffix for portrait image/video

If your standard file name is my-new-masthead.jpg you should save your portrait file with the file name my-new-masthead_MOB.jpg and upload it to the same folder as my-new-masthead.jpg.

The _MOB suffixed image will replace the standard image when the browser becomes portrait in format.

Remember:

The suffix is added to the end of the file name, but before the file type.

File names are case sensitive and the suffixing must be uppercase.

Masthead Menu & Button Style

You can insert 2 manual buttons through the interface, auto buttons based on page content, or auto navigation.

Choose from Capitan's 3 default button styles. Remember, these will use your brand palette as standard, but can be further tailored to fit your brand.

Darkmode

Choosing darkmode will let Capitan know that the image or background colour are dark, so it should make your text white.

Media Filter

Capitan comes with some default overlay filters for your images, these are translucent gradients incorporating your brand colour palette and can be useful for strengthening brand aesthetic if you use images from many sources. The filter itself can be adjusted in your CSS file.

Transparent Nav

Make the main navigation bar transparent so you can see the masthead media behind it