Using the Homepage Spotlight Layout

Put your most important message front-and-center where it can’t be missed.

Spotlight is a homepage layout option that pairs a full-screen image with a text box overlay, making it ideal for websites that have a single or focused call-to-action.

Learn more about Spotlight’s features »

This layout is achieved by condensing the header, uploading a larger-than-usual featured image and overlaying the image with a text box.

Prepare the homepage

If you haven’t already, select which page is the homepage.

Also check that the homepage’s Template is set at Full Width Page. (To set the page template, edit the page in default mode and look for the page attributes on the right side of the screen.)

Condense the header to enable Spotlight

The condensed header must be selected for Spotlight options to appear when editing your homepage.

  • Go to Dashboard > Appearance > Customize; or, from the black admin bar at the top of any page, click Customize.
  • Click Header.
  • Select Condensed.
  • Click Publish /  Save & Publish.

Good to know: The affiliation field will not display if the condensed header is selected, as shown in the screenshots below.

The default header (left) displays the affiliation above the site title. The condensed header (right) does not display the affiliation field.

Set the featured image (expanded size)

The Spotlight layout uses an expanded featured image that is much larger than the standard featured image.

  • Ideal size: 2880 x 1440 pixels (w x h)
  • Minimum: 1440 x 720 pixels (w x h)

Choose a high-quality image that will make an impact. Environmental shots, scientific images and textures may work best since the center of the image is overlaid with a text box and the edges cut off at different sizes, depending on a visitor’s browser window and device (e.g. tablets, smartphones).

To insert featured image:

Edit the text box overlay

The text overlay fields are in a featured image module below the site title.

Overlay content:
Click the “Add Element” button to add a heading, subheading or button. 

Add more content elements until your desired text is in place. (We recommend a heading, subheading and button.)

Overlay color:
The default color is red to distinguish the overlay as a primary call-to-action. You may change the color to better suit the featured image’s color palette or change the content’s emphasis.

Save, update or publish your page

The featured image and text overlay appear at the top of your homepage. Any additional content on your homepage – added via Tailor or the default editor – appears below the featured image.

 

RELATED TUTORIALS

Setting a Homepage

When your new website is set up, it already has a homepage just waiting for your edits. If this page is deleted, you can set a new homepage. 

Adding Tailor Elements

Use the Tailor page builder to drag and drop elements onto a page to create a custom layout.

Adding Images

Insert photos or graphics on a page.

Saving Photos for Web

Crop and optimize your photos before uploading them to your website for better-looking, faster-loading images.