INTRODUCTION
Feature Summary: Display a hero image as a full-width banner on the Member Portal home page.
Use Cases: System users can create and publish a full-width banner on the Member Portal home page with links to high-interest content.
PREREQUISITES
Understand how to create a member portal page with rows.
SETUP REQUIREMENTS
Log in to the admin dashboard.
Click SETTINGS > PORTAL SETTINGS on the side menu.
Click the Website icon. A new page displays.
On the new page, click the Rows tab and then click the Create Row button.
Creating the Hero Row for the Member Portal
On the new page:
Enter a unique name for the hero row.
Click the Type field and select Hero.
Click the Display Type field and select an option (all site visitors, non-logged viewers, or logged-in members)
Adding Call-To-Action (CTA) Buttons
Systems users can display up to three call-to-action buttons on the hero image.
Add button text (i.e. label) and then paste in a unique page URL for each button.
Copying URLs
There are two ways to find and copy a page URL from the CourtReserve platform.
Go to the Member Portal and open a page (e.g. book a court). Copy the URL in the address bar.
If the button links to a new page created by a system user, go to the Portal Settings Website page (SETTINGS > PORTAL SETTINGS > Website icon) and then click the Page Builder tab. Locate a page and click the Copy URL button.
Formatting a Button
Choose a button style and then format the color of the button and text.
A contained button has a solid background color and typically includes white or contrasting text. It stands out prominently and is used for high-priority or primary actions.
An outlined button has a transparent background with a border around it and colored text. It offers a more subtle appearance and is usually used for secondary actions.
When customizing the appearance of your buttons, there are several ways to choose your desired colors:
1. HEX Code Input
You can manually enter a HEX code (e.g., #284b74) into the field provided.
2. Color Picker Tool
Use the built-in color picker:
The main color field allows you to adjust shade and brightness.
The vertical slider lets you select the hue (color family).
3. Basic Color Presets
Click the artist palette icon to quickly select from a set of standard colors. These are useful for quick selections and consistent choices across the platform.
Uploading an Image
Click the Upload button to insert an image into the hero row. Click the last field and select an option. Normally, the Fit to Screen option produces the best display results, but that varies with the image type.
There is also a Display Overlay on Image option. Enabling this checkbox will add a semi-transparent layer over the image. This is done to better emphasize any text or buttons that display over the image.
The optimal size/ratio of the image for the hero row background is 1920px x 620px. Different image ratios could distort the image. The platform adds a dark filter to very light background images to keep the white headings visible. Dark-dominant images produce better display results.
Adding Text Copy
System users can display text on the hero image. Add text to the Header and Sub-Header fields. Optionally, check the box to insert a divider line between the header and sub-header. Click Save changes.
The screenshot below shows the final result: a hero row with three CTA buttons on the Member Portal home page.
Important Last Step
When designing your Member Portal website, you can create various types of content rows to display—such as a Hero Image row. To include a row on the Home Page, you’ll need to let CourtReserve know which rows to show.
After creating your Hero Image row, drag and drop it into the Home Page row settings to make it visible. Click and hold the crossbars icon to move the row into the Home Page table.
Once added, click the Preview button to see how the content will appear to members. You can reorder the rows at any time using the up and down arrow icons.
