Top of page

Cover

The Cover Block works like a row or section with a background image, video or color. You can place headings, text, buttons, and other blocks on top to create banners, feature areas, or other visual sections.

Welcome to The Forest

Most blocks in this theme can go on top of the Cover Block to create nice layouts.

Buttons Too

Detailed instructions on adding blocks can be found on Building a Page.

Once you add the Cover Block, you can upload a new image/video from your device or select an image/video you’ve already uploaded to your site’s Media Library. More information about image editing is available on our Photo Editing page. You can also add a URL from YouTube or Vimeo to display a silent background video.

If you don’t want to use image/video, you can also pick a solid color as your cover.

Block Toolbar 

Each block has its own block-specific controls above in the editor that allow you to manipulate the block right in the editor. The Cover Block offers the following options in its toolbar:

Content Nesting

Content placed on top of a Cover Block is nested inside the Cover Block. When making changes, make sure you have the specific block you want to edit selected. You can use List View (the three lines in the upper-left corner of the editor) to see the nested blocks and select the right one.

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘sidebar’ icon next to the Save/Publish button.

Fixed & Repeated Background

You can use the Repeated background toggle in combination with Fixed background, but Fixed background does not necessarily have to be turned on. Feel free to play around with these options to find what suits your needs.

Focal Point Picker

If the fixed background option is turned off, you will see the focal point picker. This tool lets you identify the main point of interest in the photo and highlight. Click on the picker to drag it to the spot you want, or use the horizontal and vertical position percentages below to set it manually.

Alternative Text

To aid visitors using screen readers, every photo that adds meaning to the page should be given concise meaningful Alt Text. Alt Text should briefly convey the contextualized message of the photo. Ensuring the meaning of images is conveyed via Alt Text aligns with the Americans With Disabilities Act.

This phrase or sentence only needs to be a short phrase that conveys the message of the photo in its context. It should not duplicate nearby document text. Images that do not convey meaning and are purely decorative should be left blank. The W3C has produced a decision tree to help you decide if an image is truly and purely decorative or has meaning.

Learn more about what you need to do to ensure your website’s accessibility on our Accessibility page.

Resolution

When you upload your image we go ahead and generate several additional sizes in case you’d like to avoid photo editing altogether. If you have taken the time to edit your photos, choose Full Size. If you uploaded a sufficiently large image but it still looks fuzzy, check to see if you aren’t using a smaller size than you intended. Also, if your image is smaller than one of the generated sizes the larger version won’t be created.

Thumbnail: 300px x 300px square
Medium: 600px on the long side
Large: 2000px on the long side
Full Size: Your original uploaded image

Block Style

Font Size

The cover block automatically comes with a large, centered, serif font as its content, but under the styles you are able to change to other preset font sizes. This is helpful if you’d like to use the cover block as a decorative row background and you want to use regularly sized paragraph (Normal) text in your nested text blocks.

Overlay Color

Using the Overlay Color options, you can add a color overlay to the cover image. By default, this is a gray, transparent overlay, but with the overlay color options, you can switch that color to any other color of your choice.

Opacity

Using the Opacity slider, you can set the opacity of the cover image’s overlay. Moving the slider right toward 100 makes the overlay darker and more opaque, and moving it left toward 0 makes the overlay lighter and more transparent. At 100, the overlay is completely opaque and the cover image is no longer visible. At 0, the overlay disappears completely, leaving only your image.

NOTE: If you’re adding text over your cover image, you need to make sure the overlay is dark (or light) enough for text to be legible.

Layout

You can add most other blocks in this theme inside the Cover Block. Toggling the “Inner blocks use content width” option will either keep the content at a narrow width or let it be the full width of the Cover Block.

Dimensions 

Allows you to change the minimum height of your cover according to your requirements.