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.
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.
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 homepage in the default editor.
- On the right side of the screen, click Set featured image.
- Upload the image and set its attributes.
Edit the text box overlay
The text overlay fields are in a featured image module below the site title.
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.)
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.