Skip to main content

Hero

A Hero widget is a great tool for making a strong first impression on your visitors.

Use this widget to create a prominent, eye-catching section with a large title, a brief introduction and a clear call-to-action. You can add multiple hero sliders to create a dynamic slider (carousel).

note

Custom widgets are described as they are defined for our standard (Mosaic) front-end theme. If the description does not match what you see on the screen, this is due to further customization that has been carried out specifically for your webshop's theme.

Hero slides​

Click + ITEM for every hero slide you want to add to the widget.

note

At least one hero is required for the widget to be functional. There is no fallback behavior if no hero is configured.

  • Under Choose media type, choose Image to show a static image or CMS video to show a video that is stored in the DAM. 
  • For an Image:
    • Select the Background image that appears as the background of the widget.
    • Enter the Background alt text for screen readers and search engines.
  • For a CMS video:
    • Select the Video CMS from the DAM. This video appears as the background of the widget.
  • Set the Background color of the entire widget. If Show gradient layer over image is checked, an overlay is added to the widget.
  • The Slide title will appear as the main heading of the widget. You can use HTML coding if you wish.
  • The Slide intro appears below the Slide title. You can use HTML coding if you wish.
  • Under Content alignment, specify the alignment of the hero content relative to the widget: Left, Right, or Center.
  • You can add up to two buttons to the widget. Click + ITEM for each button you want to add.

Buttons​

note

You can delete the most recently added button by clicking - LAST ITEM. Any button also has a button at the end of the list of fields with the word ITEM and an icon of a trash can: click this to delete the button.

  • If you enter a Button text, this appears inside the button.
  • A Font Awesome Button icon can be added, that is shown in front of the button text. Use the Font Awesome names (e.g. map-marker, clock). If Button icon right is checked, the icon is displayed to the right of the button text instead of in front of it.
  • Select the Button type. The choice that you make is translated to an actual color on the basis of your front-end's style sheet.
  • If you enter the target of a Button URL, clicking the button will take the user there. This can be a webshop page or an external URL. If Open link in a new tab is checked, the link will open in a new browser tab.