2.1.5. Hero Carousel

Owned by Karol Schönsee
Last updated: Mar 15, 2022 by Paweł Tylek
3 min read

This CC component allows displaying hero images which is especially useful for landing pages. Hero images do contain following elements (depending on the styling and the configuration in the admin panel):

 

 

·       A headline displayed on the hero image

·       A subheadline displayed on the hero image

·       A text paragraph displayed on the hero image

·       A call-to-action (“CTA”) button including a link on the hero image

 

In order to display the hero carousel component you firstly have to select a MOBILE DEVICES SCENARIO[1]. Here you can select following options:

 

·       LARGE TEASER: On mobile devices the hero images are displayed in vertical order, i.e. the first hero will be displayed on top.

·       SLIDER: On mobile devices only one hero image will be displayed. There is a slider functionality which allows rotation of proceeding hero images.

·       HIDDEN: On mobile devices this CC component will not be displayed.

 

In the CONTENT area you can now add and configure hero images by clicking the “+” icon. The following settings can be made here:

 

  1. In the image upload area on the left-hand side you can insert an image using the Magento 2 media explorer[2]. If you already have a hero image, you can remove it using the “bin” icon. There is also a possibility to add video - more 2.16. Video Teasers. If you have more than one hero image (added using the the “+” icon) you can move the given hero image using the “arrow up” and “arrow down” icons. Also you can change the existing hero image by clicking “change”.

  2. Select the DISPLAY VARIANT, which controls the text location on the hero image. Depending on the styling of the Magento 2 instance, the options are

                                      i.     Text vertically centered on the left

                                     ii.     Text on the bottom, left corner

                                    iii.     Text vertically centered in the middle

                                    iv.     Text on the bottom – centered

  1. Select TEXT COLOR SCHEME, which controls the font color of the text depending on the styling.

  2. Enter the HEADLINE text which will be the most prominent text element on the hero image (depending on the styling).

  3. Enter the SUBHEADLINE text which will be the text element located underneath the headline on the hero image (depending on the styling).

  4. Enter the PARAGRAPH text which will be the text element located underneath the subheadline on the hero image (depending on the styling).

  5. Enter a CTA LABEL text in case you want to include a CTA button on the hero image.

  1. Enter a URL in the CTA TARGET LINK input in case you want to add a link to the CTA button (also the Magento 2 widget types CMS Page Link, Catalog Category Link, Category Product Link, File URL are supported).

 

 

When the settings have been made, click SAVE.

 

 



[1] The breakpoints for the devices are: mobile up to 767px, tablet 768 - 1023px, desktop 1024px

[2] It is recommended to use JPG and PNG (RGB format) file types for images