Choose a hero banner style
The hero banner is the large banner at the top of your homepage. It introduces your site to your website visitors and points them to the most important action or information.
Click Hero banner, then click Hero banner style. You can choose from five styles:
Hero Banner layout | Description | Customisation options |
Gradient (Default) | Text over a full-width image with a dark gradient overlay. | Quick links (up to 4) |
Block | Text on a brand-coloured block beside an image. | Image position: Left / Right; Edge: Straight / Curved |
Large image | Text over a large, full-width image. | — |
Floating | A text card that overlaps the image. | — |
Carousel | 2–4 rotating slides, each with its own image, text and buttons. | Style: Block / Gradient |
To start editing your homepage, click Home and choose your preferred style.
Add your hero text
Every style needs hero text. The description is optional.
Hero text: up to 100 characters
Description: up to 300 characters
Best practice: Keep your text short: the more you write, the taller the banner, and the more of your image it covers.
Add buttons
Buttons, also known as calls-to-action (CTA), take your website visitors to a page, file or external link. Buttons are available for all styles, except a Gradient hero banner with quick links.
For CTA button to appear in the preview, the button text and button destination must be filled.
Best practice: Use descriptive button text, and avoid generic text such as "Click here" or "Learn more".
Choose the right image
These apply to every style:
Use high-quality, professional images. Avoid pixelated, over-compressed or poorly lit photos.
Don't put text in images. Text in images doesn't resize on smaller screens, can't be read by screen readers, and is hard to update. Use the hero text and description fields instead.
Choose images that fit your brand. For example, if you're a community-focused agency, use an image with real Singaporeans.
Keep the main subject in the safe zone. Hero banner images are cropped to fit each screen size, so the edges of your image may not show. Each style below says where to keep your main subject.
For recommended sizes, please refer to the specific styles below. Note that the recommendation is a practical target, not a limit. You can upload larger images. After you add your image, check how it looks in Full screen preview on desktop, tablet and mobile.
Hero banner styles
1: Gradient (Default)
A full-width image with a dark gradient behind your text, so your text stays easy to read on any image.
Use it when you want to feature an image without it competing with your text. It works for most sites.
To set it up:
Under Hero banner style, select Gradient (Default).
Add your hero image and hero text.
Under Layout, select Buttons only to add buttons, or Quick links to add quick links.
[Quick Link Option] For each quick link, choose an icon and fill in the Title, Description and Call-to-action destination. Add up to four.
[Quick Link Option] Turn off Show icons if you want quick links without icons.
Preparing your image:
Recommended image size: 1920 × 960px (2:1). This is a starting point, not a requirement.
Advice: Keep your main subject in the centre or right of the image, away from the top and bottom edges as the gradient is on the left.
2: Block
Your text on a block of your brand colour, with the image beside it on desktop and above or below it on mobile.
Use it when you want to emphasise your agency's brand colours. On mobile your text shows before the image (unless you put the image on the left), so your website visitors see your message first.
To set it up:
Under Hero banner style, select Block.
Add your hero image and hero text.
Under Image position, select Right or Left. On mobile, Right shows your text above the image, and Left shows the image above your text.
Under Image edge, select Straight or Curved.
Preparing your image:
Recommended image size: At least 1280 × 500px, with an aspect ratio between 3:2 and 2:1.
Advice: Keep your main subject in the centre of the image. With a curved edge, the corners nearest your text are trimmed, so keep your main subject away from that side.
3: Large image
A large, full-width image with minimal text, so your image does the talking.
Use it when the image carries the main message, such as a campaign or initiative. If you don't have a strong image, use Gradient instead.
To set it up:
Under Hero banner style, select Large image.
Add your hero image and hero text.
Preparing your image:
Recommended image size: 1920 × 960px (2:1). Because this style shows your image with little text over it, use a larger version, such as 2560 × 1280px, if you have one.
Advice: Keep your main subject, such as faces, within the middle half of the width and the middle three-quarters of the height, as the image becomes square on mobile. Avoid weak filler images, like a generic landscape.
4: Floating
A text card that overlaps the image, blending your message and image into one layout.
Use it when you have a short, impactful message and an image that can share space with it.
To set it up:
Under Hero banner style, select Floating.
Add your hero image and hero text.
Preparing your image:
Recommended image size: An aspect ratio of 3:2.
Advice: Keep your main subject toward the top and right of the image, as your text card covers its bottom-left corner on desktop.
5: Carousel
Two to four slides that rotate after a few seconds, each with its own image, hero text, description and buttons.
Use it when you have a few equally important messages, such as several campaigns running at once. If you have one main message, use another style, as many website visitors won't wait for the slides to change.
To set it up:
Under Hero banner style, select Carousel.
Under Layout, select Block or Gradient. The layout applies to every slide.
[Block option] Choose the Image position: Right or Left.
[Gradient option] Choose the Content alignment: Left or Center.
Under Slides, add an image, hero text and any buttons to each slide. Add up to four slides, and drag them to reorder.
Preparing your image:
Recommended image size: Follow the Block size for the Block layout, or 1920 × 960px (2:1) for the Gradient layout.
Advice:
Follow the advice for Block or Gradient above.
With Center content alignment, your text sits in the middle of the image, so keep your main subject away from the centre.
Put your most important message on the first slide, use images with a similar tone and framing, and keep your text a similar length across slides, as the slide with the most text sets the height for all slides.