Understanding the Opening Fold of a Website (and Why It Matters!)

The opening fold refers to the part of a webpage that is visible before a user starts scrolling.

On most event websites, this area is made up of the top section of the page, often including:

• the header or navigation

• the hero banner or hero panel

• the main headline

• supporting text

• a primary call to action such as Register Now or Book a Stand

It is one of the most important areas of any webpage because it forms the visitor’s first impression. In many cases, it only takes a few seconds for a user to decide whether your website feels relevant, clear and worth exploring further.

Why the Opening Fold Matters

The opening fold is valuable because it sets the tone for the rest of the user journey.

If this area is too tall, too unclear, or too focused on visuals without enough useful information, visitors may not immediately understand:

• what the event is

• who it is for

• why they should care

• what they should do next

If that happens, there is a greater chance they will leave the website without engaging further.

A well-balanced opening fold helps visitors quickly understand the purpose of the page and encourages them to continue.

Why It Matters for Marketing Campaigns

Most marketing campaigns are designed to drive traffic to your website. That might be through:

• email campaigns

• paid social

• PPC

• partner promotions

• social posts

• organic search

Once a visitor lands on the page, the opening fold is where your campaign either starts to work harder, or begins to lose momentum.

If the page immediately reinforces the message from the campaign, users are more likely to stay engaged. If not, they may leave before exploring the rest of the page.

For example, if your advert promotes:

• keynote speakers

• free registration

• awards entries

• exhibitor opportunities

then those messages should be clearly reflected in the opening fold of the landing page.

This consistency helps improve campaign performance because users can instantly see they have landed in the right place.

How the Opening Fold Can Reduce Bounce Rate

Bounce rate is the percentage of visitors who leave a page without taking any further action.

A poor opening fold can contribute to higher bounce rate when:

• the hero section is too large and pushes key content too far down the page

• the messaging is too vague

• there is no clear call to action

• the page feels slow, cluttered or confusing

If a user lands on a page and only sees an oversized image with very little context, they may leave before scrolling.

A stronger opening fold helps reduce bounce rate by making the page feel immediately useful. It gives visitors an instant reason to stay.

This could be through:

• a clear event headline

• the date and location

• a short value-led strapline

• a CTA button

• a visual cue that there is more content below

In simple terms, the opening fold should invite the user in, not make them work to understand the page.

How the Opening Fold Supports CRO

CRO stands for Conversion Rate Optimisation, which means improving a webpage so that more visitors complete a desired action.

For event websites, those actions may include:

• registering

• buying a ticket

• downloading a brochure

• submitting an enquiry

• entering an awards programme

The opening fold plays a major role in CRO because it is where the user first decides whether to continue towards conversion.

A strong opening fold supports conversion by:

• making the page purpose clear

• showing the most important value points quickly

• placing the CTA in a visible position

• building trust early through strong branding and relevant content

• making the next step feel simple and obvious

If the fold is too tall, users may not see your CTA or supporting content without scrolling. That extra friction can reduce conversions, especially for users arriving from high-intent marketing activity.

How the Opening Fold Increases Engagement

Engagement is not just about getting a click. It is about encouraging visitors to interact with the page and move through the site.

A well-designed opening fold can improve engagement by:

• encouraging visitors to scroll

• helping them understand what content comes next

• drawing attention to key messages

• supporting a stronger visual hierarchy

• making the page feel more relevant from the start

This is especially important for event websites, where visitors are often making quick decisions about whether the event looks worth their time.

If the opening fold is too large or too empty, it can create a barrier between the visitor and the content that would normally persuade them.

Finding the Right Balance

There is no single perfect height for an opening fold. It depends on:

• your website template

• your branding

• the type of campaign traffic you are driving

• the amount of content in the hero

• the purpose of the page

In general, though, the goal is to create a fold that feels:

• visually strong

• clear in purpose

• not overly tall

• focused on action

A large hero can work well when used intentionally, especially with strong imagery or video. But if it takes up too much vertical space without giving visitors meaningful information, it can weaken performance.

A more compact hero often allows users to see more of the page immediately, which can improve clarity, engagement and conversion.

Editing the Opening Fold in the CMS

The height of the opening fold can be edited in the CMS, but the location depends on which template your website is built on.

Custom Sites

For custom websites, the opening fold may be adjusted in different locations depending on how the site was built.

This could be managed:

• directly within the Hero panel

• within the website’s Design & Appearance settings

Your Project Manager will normally provide guidance during the launch phase of the website to show where this can be edited.

If you are unsure where to manage this on your site, please contact Support for assistance.

Classic Composer Sites

For Classic Composer templates, the opening fold height is edited in the CMS here:

Settings > Design & Appearance > Sections > Hero

Within this area, you will find a field called:

Height (preferably in vh, e.g. 80vh)

Here, you can enter a value from 0 to 100.

The lower the value, the smaller the hero section will appear on the front end. This allows more page content to become visible within the opening fold.

For example:

• 100vh means the hero is very tall and fills the full visible screen height

• 80vh means the hero takes up around 80 percent of the visible screen height

• 60vh creates a shorter hero, allowing users to see more of the content below

Composer 2 Sites

For Composer 2 templates, the opening fold height is edited directly within the Hero panel.

To update this:

1. Locate the relevant Hero panel

2. Open the Settings tab

3. Find the Height option

You will see three height settings:

Auto

The Auto option means the height of the hero is determined by the amount of content added to it.

For example, if you add:

• a long strapline

• introductory copy

• additional text content

the hero will naturally become taller on the front end.

This is useful when you want the panel height to adapt to your content, but it is worth checking the result carefully to make sure the fold does not become too deep.

Custom

The Custom option allows you to enter a height value manually in either:

• pixels

• vh

VH stands for viewport height. This is a unit that measures height as a percentage of the visible browser window.

For example:

• 100vh = 100 percent of the visible screen height

• 50vh = half of the visible screen height

In Composer 2, you can enter a value from 1 to 100 when using vh. The smaller the number, the shorter the hero will appear.

This option gives you more control over how much of the page is visible when a visitor first lands on it.

Fill

The Fill option expands the hero so it fills the full opening fold regardless of how much content has been added.

This can work especially well when using:

• strong photography

• motion-led design

• engaging video content

A full-height hero can create a bold first impression and bring movement and energy to the page. This is often effective for brand-led homepage experiences where the visual impact is part of the campaign strategy.

That said, it is still important to make sure the page includes clear messaging and a visible next step so the fold supports engagement rather than slowing it down.

Best Practice Tips

When reviewing your opening fold, ask yourself:

• Can a new visitor understand what the event is within a few seconds?

• Is the most important message visible straight away?

• Is there a clear call to action?

• Is the hero helping the page perform, or just taking up space?

• Can users see enough of the page to feel encouraged to scroll?

A visually impressive fold is useful, but only if it also supports your campaign goals.

Final Thoughts

The opening fold is one of the most valuable parts of your website because it is the first thing users see when they arrive.

It has a direct impact on:

• marketing campaign performance

• bounce rate

• engagement

• conversion rate optimisation

A strong opening fold helps visitors quickly understand the event, feel confident they are in the right place, and take the next step.

In ShowOff, the height of this area can be adjusted in different ways depending on your website template. Reviewing and refining it is a simple but important way to improve how your website performs for both users and campaigns.