Cover Block
Capture your users attention with a full height hero block.
Quick links
Overview
In the Gutenberg editor, open the block section and click or drag the Cover Block to the editor area. Main elements of the block are:
- Subtitle
- Title
- Paragraph
- Link
- Scroll Down
Note: Because of the frequency of use, the first three elements (Subtitle, title and paragraph) of the Text Block are integrated in almost every Sana block.


Settings
If the settings side panel is not visible while working on your page or post, click on the Settings icon in the top left corner of the editor toolbar. Once opened you will see all the available options of the selected block, organized into collapsible tabs.
General
To add, change or remove the cover background image, click the button in the top right corner of the block.
- Content Align – Align the entire block content left, center or right
- Background Color – Select a solid color instead of the image
- Focal Point – Set the center position of the background image (%)
Tip: Play around with the Focal Point of the background image and see how the Cover Block behaves on different screen sizes.
Note: Content Align positions containers within the block, while Text Align positions text within its own container.

Subtitle, Title, Paragraph
- On/Off toggle – Display or hide the element
- Text Align – Align text left, center or right within its own container
- Font Size – Choose from nine preset sizes or add a custom font size
- Text Color – Select a color for the subtitle, title and paragraph

Link
- On/Off toggle – Display or hide the link/button and set a URL
- Style – Show the link as a button or hyperlink with an arrow
- Font Size – Choose from nine preset sizes or add a custom font size
- Text Color – Select a color for the link/button label
- Background Color – If the link style is set to Button, choose a color
- Border Radius – If the link style is set to Button, edit the corner roundness (px)

Scroll Down
- On/Off toggle – Display or hide the Scroll Down button
- Color – Select a color for the text and down arrow

Responsive
- Hide on Desktop – Block is visible on mobile, but not on desktop screens
- Hide on Mobile – Block is visible on desktop, but not on mobile screens
Tip: You can create two separate blocks for a section of your page and load each block on a different screen size.
