Masthead Frame Image

This particular option can be found by logging into your site's admin area and going to:
"ProPhoto" > "Customize" > "Header" > "Masthead Image & Slideshow"

In this area you can optionally upload an image that will be used to “frame” your masthead image or masthead image slideshow. Using a masthead frame image can simplify some masthead designs, allowing static design elements to be incorporated into the frame image rather than be replicated in every masthead image. The end result is that you can have complicated visual effects in your masthead area that don’t require you to do a ton of heavy-lifting in Photoshop for every masthead image. This includes anything from simple solid borders around the masthead to semi-transparent overlay effects.

A helpful example:

A good example is the masthead area from the “Emilie” built-in starter design, which looks like this:

This masthead is actually composed of two parts: 1) a masthead frame image, shown below:

…plus 2) a simple masthead image:

When the masthead image is positioned correctly within the masthead frame, you get the completed look.

Building the masthead this way makes it much easier to add and edit masthead images. All you need to do is upload a simple, properly-sized masthead image like this:

… and the complex border and overlaid “tape” effects remain consistent because they are a part of the frame image, not the masthead itself.

the new image sits “within” the masthead frame

A couple more examples:

Some other examples from other built-in starter designs can give you a feel for what can be done with a masthead frame image. Not all of the effects are complicated.

Elegant starter-design

The header from the “Elegant” built-in starter design is composed of a masthead frame image with a raised-shadow effect, plus a simple masthead image:

masthead frame image from Elegant design

actual masthead image (not frame) from Elegant design

the completed effect, with the masthead image overlaying the frame image

Maxwell starter-design

The Maxwell built-in starter-design makes use of an extremely simple solid white masthead frame to produce the thick, white border around the masthead slideshow.

the white-border effect from the Maxwell design header…

…is a simple, solid-white frame image with the slideshow positioned within

Late August starter-design

The Late August built-in starter design uses a masthead frame image to maintain the continuity of the purple blog border effect, leaving the masthead image as a simple image:

masthead frame includes the purple border elements

simple masthead image from Late August

the completed effect

Masthead frame sizing

Your masthead frame image must be sized properly based on your site width and header layout to look correct, so pay careful attention to the recommended image size details.

In general, the masthead frame needs to be exactly the same as your blog width, and can be any height you want. If you’re using one of the few header layouts where the logo shares the same horizontal space with the masthead, the masthead frame will need to be the same height as your logo, and may need to be narrower than you blog width, to allow room for the logo.

Masthead frame position:

The default is for the masthead frame to lie behind your masthead image or slideshow. This is how most of the examples above work, including the Maxwell starter design.

in the Maxwell design, the white masthead frame image lies behind the masthead image

However, in certain cases when you have a frame image that is a .png file with alpha transparency, you can also place the frame image in front of the masthead images. This allows certain elements of the frame image to float “above” or in front of, the masthead images. For this to work correctly, you will need to leave a sizeable portion of the frame image transparent, to allow your masthead image/s to be visible through it. The “Emilie” starter design makes use of this, utilizing a semi-transparent frame image positioned “in front” of the masthead image so that the tape elements to be seen above the masthead images.

the Emilie masthead frame image sits in front of the masthead image so that the “tape” effect can be seen over the masthead image

Several of the built-in starter designs make use of masthead frames, although some do not. For certain simple designs, there is no need. Also, many of our paid, add-on starter designs make use of masthead frames, so you may find yourself working with one while editing your masthead area. You can always remove the frame, or upload a new version, or create your own framing effects out of any image you create.


This particular option can be found by logging into your site's admin area and going to:
"ProPhoto 4" > "Customize" > "Header" > "Masthead Image & Slideshow"

In this area you can optionally upload an image that will be used to “frame” your masthead image or masthead image slideshow. Using a masthead frame image can simplify some masthead designs, allowing static design elements to be incorporated into the frame image rather than be replicated in every masthead image. The end result is that you can have complicated visual effects in your masthead area that don’t require you to do a ton of heavy-lifting in Photoshop for every masthead image. This includes anything from simple solid borders around the masthead to semi-transparent overlay effects.

A helpful example:

A good example is the masthead area from the “Emilie” built-in starter design, which looks like this:

This masthead is actually composed of two parts: 1) a masthead frame image, shown below:

…plus 2) a simple masthead image:

When the masthead image is positioned correctly within the masthead frame, you get the completed look.

Building the masthead this way makes it much easier to add and edit masthead images. All you need to do is upload a simple, properly-sized masthead image like this:

… and the complex border and overlaid “tape” effects remain consistent because they are a part of the frame image, not the masthead itself.

the new image sits “within” the masthead frame

A couple more examples:

Some other examples from other built-in starter designs can give you a feel for what can be done with a masthead frame image. Not all of the effects are complicated.

Elegant starter-design

The header from the “Elegant” built-in starter design is composed of a masthead frame image with a raised-shadow effect, plus a simple masthead image:

masthead frame image from Elegant design

actual masthead image (not frame) from Elegant design

the completed effect, with the masthead image overlaying the frame image

Maxwell starter-design

The Maxwell built-in starter-design makes use of an extremely simple solid white masthead frame to produce the thick, white border around the masthead slideshow.

the white-border effect from the Maxwell design header…

…is a simple, solid-white frame image with the slideshow positioned within

Late August starter-design

The Late August built-in starter design uses a masthead frame image to maintain the continuity of the purple blog border effect, leaving the masthead image as a simple image:

masthead frame includes the purple border elements

simple masthead image from Late August

the completed effect

Masthead frame sizing

Your masthead frame image must be sized properly based on your site width and header layout to look correct, so pay careful attention to the recommended image size details.

In general, the masthead frame needs to be exactly the same as your blog width, and can be any height you want. If you’re using one of the few header layouts where the logo shares the same horizontal space with the masthead, the masthead frame will need to be the same height as your logo, and may need to be narrower than you blog width, to allow room for the logo.

Masthead frame position:

The default is for the masthead frame to lie behind your masthead image or slideshow. This is how most of the examples above work, including the Maxwell starter design.

in the Maxwell design, the white masthead frame image lies behind the masthead image

However, in certain cases when you have a frame image that is a .png file with alpha transparency, you can also place the frame image in front of the masthead images. This allows certain elements of the frame image to float “above” or in front of, the masthead images. For this to work correctly, you will need to leave a sizeable portion of the frame image transparent, to allow your masthead image/s to be visible through it. The “Emilie” starter design makes use of this, utilizing a semi-transparent frame image positioned “in front” of the masthead image so that the tape elements to be seen above the masthead images.

the Emilie masthead frame image sits in front of the masthead image so that the “tape” effect can be seen over the masthead image

Several of the built-in starter designs make use of masthead frames, although some do not. For certain simple designs, there is no need. Also, many of our paid, add-on starter designs make use of masthead frames, so you may find yourself working with one while editing your masthead area. You can always remove the frame, or upload a new version, or create your own framing effects out of any image you create.

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us