Overview #
The Flexible Hero with Star Rating module allows you to create a customisable hero section with a strong headline, supporting description, call-to-action buttons, hero media, and a star rating/review display.
This module is ideal for homepage hero sections, landing pages, service pages, and promotional sections where you want to present a clear message while also adding social proof through reviews or ratings.
The module also includes flexible background styling options, allowing you to choose between blob, solid colour, gradient, image, or video backgrounds.
Key Features #
- Custom hero header and description
- Primary and secondary call-to-action buttons
- Hero image or media display area
- Star rating display
- Review count/text display
- Reviewer/customer image support
- Multiple background type options
- Blob background with Default, Solid, and Gradient options
- Solid colour background option
- Gradient background option
- Image background with optional Parallax Effect
- Video background support using uploaded video URL, YouTube ID, or Vimeo ID
- Custom typography options for the header and description
Content Settings #
Header #
The Header field controls the main heading displayed in the hero section.
Use this field to add the main headline, offer, or value proposition.
Example:
Your fabulous hero heading goes hereDescription #
The Description field controls the supporting text below the header.
Use this field to briefly explain the offer, service, or key message. Keep the description clear, concise, and focused on the user benefit.
Example:
Use this space to briefly explain your unique value proposition. What problem do you solve, and for whom? Keep it concise, compelling, and focused on the customer's benefit.Primary Button #
The Primary Button is used for the main call-to-action in the hero section.
This button is best used for the most important action you want users to take, such as booking a call, contacting the business, or learning more.
Secondary Button #
The Secondary Button is used for an additional supporting action.
This can be used for a secondary link, such as viewing services, reading more information, or visiting another page.
Hero Image / Media #
The module includes a hero media area that can display supporting imagery, mockups, or visual content beside the text.
This helps make the hero section more engaging and visually balanced.
Star Rating #
The Star Rating area displays the rating score in the hero section.
Example:
5.0Review Text #
The Review Text field displays supporting review information, such as the number of reviews.
Example:
1000+ ReviewsReviewer Images #
The module can display reviewer or customer images beside the star rating/review text.
This helps add credibility and social proof to the hero section.
Style Settings #
Section #
The Section style area controls the overall appearance and background of the hero section.
Background Type #
The Background Type field allows you to select the background style for the hero section.
Available options include:
Blob
Solid Color
Gradient
Image
VideoBackground Type Options #
Blob #
When Background Type is set to Blob, you can choose the blob style.
Available options:
Default
Solid
GradientDefault #
Uses the default blob style for the section.
Solid #
Uses a blob background with a solid colour.
Gradient #
Uses a blob background with a gradient colour style.
Solid Color #
When Background Type is set to Solid Color, you can select the solid colour you want to use for the section background.
This option is useful when you want a clean, simple, single-colour hero background.
Gradient #
When Background Type is set to Gradient, you can apply a gradient background to the hero section.
This option is useful when you want a smoother colour transition or a more dynamic background style.
Image #
When Background Type is set to Image, you can select or upload an image to use as the section background.
Parallax Effect #
When using an image background, you can enable the Parallax Effect.
This creates a subtle scrolling effect where the background image moves as the user scrolls through the page.
Video #
When Background Type is set to Video, you can use a video as the hero section background.
Video Type #
The Video Type field allows you to choose the video source.
Available options:
Default
YouTube
VimeoDefault #
Select Default if you want to use a video file URL from the file manager.
YouTube #
Select YouTube if you want to use a YouTube video.
Enter the YouTube Video ID only.
Vimeo #
Select Vimeo if you want to use a Vimeo video.
Enter the Vimeo Video ID only.
Typography Settings #
Header #
The Header typography settings allow you to customise the appearance of the main hero heading.
You can change the:
Font Family
Text Color
Default typography optionsUse this setting to match the heading style with the website’s branding.
Description #
The Description typography settings allow you to customise the supporting text below the heading.
You can change the:
Font Family
Text Color
Default typography optionsUse this setting to improve readability and keep the description consistent with the overall design style.
Recommended Usage #
Use the Flexible Hero with Star Rating module when you need a hero section that combines a strong message, supporting content, call-to-action buttons, media, and social proof.
This module works well for:
Homepage hero sections
Landing pages
Service pages
Campaign pages
Lead generation pages
Promotional pagesFor best results, keep the header clear, the description concise, and choose a background type that supports readability. For image or video backgrounds, make sure the text remains easy to read across desktop, tablet, and mobile screen sizes.
