This is an old revision of the document!

The Masthead

The masthead sits at the head of your page, serving as an anchor in your design, and factoring into both your personal branding and your site's search engine optimization. CE2 engines offer three unique styles of masthead: Traditional, Nuovo and Retro. The masthead and navigation menu together comprise the site header.

The Masthead controls are located in the Site Info control pane, and each of the three styles contains some basic controls in common:

Masthead Basic Controls

Display Masthead determines whether the masthead is displayed on the page at all. In most cases, you will want to keep this enabled.

Background-color, when enabled, determines the color of the masthead background. If disabled, the masthead background will be transparent, allowing the page background to show through.

Masthead Height determines the total height of the masthead's box. This should be large enough to accommodate the full size of your masthead's graphic, plus as much negative space as you deem necessary.

Margin-top allows you to put some space between the top of the browser window and the top of your masthead's box.

The Identity Plate controller, unlabeled but pictured above containing The Turning Gate's graphic masthead, allows you to create or embed a logo in your masthead. A textual logo may be created within Lightroom, or you may important a graphical identity plate created in another image-editing program, such as Photoshop. The latter typically yields the best results. Click the controller and select 'Edit' to get at the options here. These are the same as for Lightroom's first-party web engines, so see Lightroom documentation for more information on how to use these features.

Alt Text for Identity Plate allows you to embed text into the source code for your graphic. While this text will rarely, if ever, be seen, it does help with search engine optimization. You will typically want to write out whatever text appears in your logo graphic, along with any other information – such as a slogan – that may be relevant. For the TTG logo pictured above, I would write in “THE TURNING GATE - Adobe Photoshop Lightroom Web Engines, Tutorials & Resources”.

Hyperlink for Identity Plate allows you to make your masthead clickable. The most typical use for this would be to allow the user to easy return to your Home page, The hyperlink should be written as an absolute URL beginning with http://.

Note that some masthead layouts disable this hyperlink.


The Traditional style masthead is the CE2 default, and is visually similar to the masthead seen in CE and some earlier versions of TTG web engines, though source code changes give this new version some extra weight for SEO.

Masthead, Traditional style

Masthead, Traditional controls

The traditional masthead may be positioned above or below the navigation menu. Additionally, the traditional style is the only choice that allows the identity plate to be placed within the navigation menu, though the hyperlink then becomes unavailable.

The identity plate may be positioned anywhere within the masthead using the percentage controls, ID Plate X Position for horizontal control and ID Plate Y Position for vertical control. For both, a value of 50% is perfectly center along the horizontal or vertical axis, respectively.

For ID Plate X Position, a value of 0% is fully aligned to the left, and a value of 100% is fully aligned right.

For ID Plate Y Position, a value of 0% is top aligned, while a value of 100% is bottom aligned.

When setting Masthead Position to either Nav Container or Nav Content, use the Navigation controls to add padding to the navigation menu bar, creating space for your identity plate.