Hero Space/Banner Component

Adding a Hero Space Component

A Hero Space Component is an place where you can add one or more banner images to a page. To add one, go to the style editor by selecting the button by that name on the top of the page. Once in the style editor, click on the blue button with a plus sign.

Add Component Button example

Scroll down until you find the ‘HERO SPACE / BANNER’ component. You have 2 layouts to choose one. Clicking on one of the layouts adds it to the page.

Adding a hero space example

Editing a Hero Space Component

When the component is added to the page a sidebar with options for the hero space component appears on the left side of the screen. These options include Layout, Colors, Options, and Banners. This sidebar can be accessed again by hovering over the component while in the design editor and clicking the edit button that will appear at the top of the component.

Hero space editing example

Layout

You can switch between the two layouts of the component here.

Colors

A background color for areas of the component not covered by the banner image can be set with this.

Options

The options in this area apply only if more than one banner image added to the component. In the case of multiple banner images, the different banners will act like a slide show with one being displayed at a time.

Animation Type: This affects how each banner transitions to the next banner. You can have a fading effect or a sliding effect.

Rotational Interval: The period of time each banner is shown before moving on to the next. If ‘0s’ is chosen then the banners will not automatically transition to one another and must be manually rotated by the viewer.

Banners

You add the banners here. Each banner has some options applying specifically to itself.

Banner: You upload the image here by clicking on the blue ‘UPLOAD’ text. Use a JPG, PNG, or SVG file for the banner image. A size of 2400px by 800px is recommended.

Gradient Effect: Applies a gradient effect to the banner so that it appears darker at the bottom.

Link: If a URL is entered here the whole banner will become a click-able link to that URL.

When you are done editing, save your work by clicking the save & publish button at the top right of the page.