How to Use the Banner Block in UniLink (Add a Full-Width Hero to Your Page)

The Banner block lets you place a full-width hero image or video at the top of your UniLink page — with a headline, sub-headline, and CTA button built right in.

Most visitors decide whether to scroll within the first two seconds of landing on a page. The Banner block is the tool that wins — or loses — those two seconds. It sits at the very top of your UniLink page as a full-width hero: your image or video fills the screen edge to edge, your headline sits over it, and a button tells people exactly what to do next. When it is configured well, it stops the scroll. When it is not, it looks like a generic placeholder. This guide covers every setting, every mistake, and every decision you need to make to get it right.

What the Banner block does

The Banner block renders as a full-bleed section that stretches from the left edge to the right edge of the viewport, making it the most visually commanding element available on a UniLink page. Unlike image blocks that sit inline with your content, the Banner is designed specifically to be the opening statement — the equivalent of a magazine cover or a cinema title card. It anchors the entire page visually and sets the tone for everything below it.

Behind the scenes the block has two layers: a background layer and a content layer. The background layer holds your image or video and applies an optional color overlay on top. The content layer sits above the overlay and contains your headline, sub-headline, and CTA button. You control every aspect of both layers independently: what the background shows, how much the overlay dims or tints it, what the text says, and where the button sends visitors.

The block also handles responsiveness in a way that most standard image blocks do not. Because a landscape image looks fine on desktop but shows only a sliver on mobile, the Banner includes mobile crop controls so you can define exactly which part of the image remains visible on smaller screens. This matters far more than most people realize — the majority of UniLink visitors arrive on a phone, and a poorly cropped banner will cut off the most important part of the photo.

How to add the Banner block

1. Open the Dashboard editor: Navigate to your UniLink page editor at your dashboard. You should see your current blocks listed in the center panel.
2. Click "Add block": Tap the plus button or the "Add block" button at the top of the block list — or drag from the block panel on the left.
3. Select "Banner" from the block picker: Scroll through the block categories or use the search field. The Banner block appears under the Media or Hero category depending on your plan tier.
4. Upload your background image or paste a video URL: In the block settings panel, click the image upload area to add your own photo. To use a video instead, toggle to "Video" and paste an mp4 URL or a hosted video link (direct file links work best — avoid embed URLs).
5. Set the overlay color and opacity: Click the overlay color swatch and choose a color. Then drag the opacity slider until the background is readable but still visible. A value between 30% and 50% works for most images.
6. Write your headline and sub-headline: Click directly on the text fields in the preview, or edit them in the settings panel. Keep the headline under 60 characters so it wraps cleanly on mobile.
7. Add your CTA button: Enable the button toggle, then fill in the button label (keep it to 3–5 words) and the destination URL. You can also choose button style — outlined or filled — and button color in the design settings.
8. Adjust height and mobile crop: Choose a height preset (Short, Medium, Tall, or Fullscreen) and then switch to the mobile preview to check the crop. Drag the focal point marker over the most important part of the image.
9. Save and preview: Hit Save, then open your public page link in a mobile browser to verify the full result before publishing widely.

Key settings to configure

Best practices for the Banner block

The single most important decision you will make for the Banner block is your background image choice. The image carries the emotional weight. High-contrast, high-resolution photos of real subjects — a person, a product, a place — outperform abstract or stock imagery in virtually every creator niche. If your image looks like it came from a generic photo library, visitors will feel that immediately. Use original photography, on-brand graphics, or a video clip that is specific to you and what you do.

Contrast between your text and the background is non-negotiable. Even if your overlay is on, test your headline by viewing the page on a real phone screen in a bright environment. If you squint and still cannot read it clearly, adjust the overlay opacity upward. Accessibility guidelines recommend a contrast ratio of at least 4.5:1 for body text — headlines should be even stronger. Dark overlay with white text is the most reliable combination because it works across nearly any background image.

Treat the CTA button as the whole point of the banner. Your headline exists to make the button click feel obvious. Everything — image, overlay, headline, sub-headline — is in service of getting one action. That action should be singular. Do not add two buttons ("Shop" and "Contact Me") in the Banner section. Pick one objective per page visit and send every element toward it. If you genuinely need two calls to action, use a second block below the banner for the secondary option.

Height choice affects how much of the page is visible without scrolling, which in turn affects how much your audience trusts there is more to see. Fullscreen height looks dramatic but can be risky if your content is short — visitors may feel like they have seen everything. Medium height shows a sliver of the next block below the fold, which visually signals "scroll for more." If you are unsure, Medium is the safer default.

Common mistakes and how to fix them

Frequently asked questions