The Hero component is a unique kind of Section component that includes a number of preset elements, such as a large image, a pair of call-to-action buttons, and more. They are eye-catching, and can help inform and direct visitors to specific areas of your website. In addition to taking up the full width of a page, you can even drag the component into a section like any other component.
To get started, click on the Add Content at the top of the website editor, then drag the component to a page of your site. To edit the title and text in the component, simply click on each and type; all text formatting options are available via the text-editing toolbar.
Next, click on the component to open the options panel.
Image
The Image options group in the options panel contains a few different options for managing the image:
- Hide Image - This option is toggled off by default. Toggle it on to hide the image in the component.
- Image - Click or drag an image onto the box in the options panel to upload an image. To replace the image with a new one, simply click on the image and choose a new one to upload.
- ALT Text - This text is used by screen readers and shown in browsers when image loading is turned off in the browser. It’s best practice to provide descriptive ALT text for an image to improve accessibility.
Primary Button
We provide several options to control the left-side, or primary, button in the component.
- Hide Primary Button - Toggle this option on to hide the primary button.
- Primary Button Label - Edit the text in this field to change the text shown on the button.
- Primary Button Link - Click on Add Link to set a link for the button - the full range of link options are available.
- Primary Button Text Color - To edit the color of the button label text, change this option to custom and select a new color.
- Primary Button Background - By default this will use the primary color from your site design settings. You can override this and choose a color, gradient, image, or image with overlay as the background.
Secondary Button
Much like the primary button, we provide a number of options for the secondary button:
- Hide Secondary Button - You can hide the secondary button by toggling this option on.
- Secondary Button Label - To change the text on the secondary button, edit this text field.
- Secondary Button Link - Click on Add Link to set a link for the secondary button.
- Secondary Button Text Color - Use this option to change the color of the secondary button label text.
- Secondary Button Background - As with the primary button, you can use this option to change the background from the default secondary color of your site design settings.
Design
Under the Design options group are several options to control the overall styling of the component.
- Heading Text Color - To change the color of heading text, change this option to custom and select a new color.
- Subheading Text Color - By default this option uses your site text color. To customize it, change the option to custom and select a new color.
- Shape - This option controls the shape of the image in the component. By default this uses your site design setting, but you can change it to something else. You can also set this separately for different screen sizes by clicking the desktop/mobile icon.
- Background - Use this option to set a background for the component. You can choose a color, gradient, image, or image with overlay.
- Border - To add a border around the component, choose a width. You can also customize the style and color of the border.
Spacing
We provide two spacing options for the component: Margin and Padding. Margin controls the space around the entire component, and Padding controls the space between the border and elements within the component. Both can be set separately for different screen sizes by clicking the desktop/mobile icon.
Hover
A number of the above options can be customized further to display differently when a visitor hovers over the component with a mouse. Click on Hover at the top of the options panel to view and customize the following options:
- Heading Text Color
- Background
- Border
- Subheading Text Color
- Primary Button Text Color
- Primary Button Background
- Primary Button Scale
- Secondary Button Text Color
- Secondary Button Background
-
Secondary Button Scale