User Tools

Site Tools


masthead

Masthead

The masthead appears at the top of your page, immediately above your navigation. The masthead is marked in red in the image below.

The masthead serves two important purposes:

  1. It provides visual branding for your website.
  2. It yields search engine optimization benefits.

You control options look like this:

Disabling Display Masthead allows you to remove the masthead completely from the page.

The Background-color allows you to specify a background-color for the masthead.

Use a Graphical Identity Plate allows you to create or supply a PNG image file for use as your masthead graphic or logo. Lightroom can create a textual logo on the fly, but using a custom masthead graphic is a great way to provide visual branding, utilizing your brand mark and/or colors.

To add a Graphical Identity Plate, click the graphic field and select “Edit” from the menu. If supplying your own graphic file, you may provide a PNG image file of any size. Files should be saved in PNG-24 format.

By disabling the Use a Graphical Identity Plate checkbox, you may opt to use pure text in place of a graphic.

Either way, you should write-in your business name for Alt Text for Identity Plate, as this will factor into SEO as your page's highest level H1 heading, even if it doesn't display on the page.

The masthead's Alignment may be Center, Left or Right.

The color and font options only apply when not using a graphical identity plate.

Mantle Width and Core Width allow you to control the overall width of the masthead, while the Margin and Padding controls allow you to create space around your masthead. Some width examples follow. In all of these examples, the Page Container width is set to “auto” so that we may observe the full effect of the Masthead's width settings.


In this first example, both Mantle and Core widths are set to “auto”, so that our numerical values are ignored. The masthead occupies the full width of the viewport, and our graphic aligns all the way to the left.


In this second example, the Mantle width is set to “auto” so that our colored block will occupy the full width of the browser. Our Core width is “fixed” at 1140-pixels, so that our masthead will remain within a space of constrained width. With the graphic left-aligned, this is a great way to keep our identity place aligned flush with our page content, as you can see in the relationship between the masthead graphic and navigation menu in the image below.


In this final example, our Mantle width is “fixed” at 1140-pixels and the Core width is set to “auto”, so that it uses the full width of the Mantle. Because the Mantle is a fixed width, our masthead background is constrained to the fixed space and our page background is visible outside. I've set 16-pixels of Padding on the sides of the masthead to prevent the graphic from sitting on the very edge of the block.

I've also set the navigation to a fixed width according to the same principles, so that things stay nicely in line.


So now you've seen some examples, but I encourage you to adjust these settings on your own so that you can see the impact they have on your own design. These things are much easier to grasp in practice than by my simply telling you about them.

masthead.txt · Last modified: 2012/12/08 10:50 by admin