INTRODUCTION
Feature Summary: Display a hero image on the 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
Know 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
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 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.
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.
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.
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 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.
