1.1 Hero Image

The 'Hero Image' element is often used on the start page (but can also be used on subpages). The element can be found below 'Content elements' when creating a new element. (1.1.1)

How to create 'Hero Image' with animation

To create a 'Hero Image' with animation, you need to fill out necessary fields in 'General' tab. Images 1.1.2a (above), 1.1.2b and 1.1.3 (below) gives you an understanding of which fields that can be used (These fields are located below the 'General' tab).

  1. The 'Header' is not using the regular header field and as such, it does not have any size or alignment options. The size and font is set by the styling of the website.
  2. The 'Sub Header' field, is the same as the header, where the size and font is set in the styling sheet of the website.
  3. There is a text field which only allows plain text, so no formatting or linking can be done here.
  4. 'Link text' that can be shown as a text link or a button.
  5. 'Link' target is where you set link/button click destination. 
  6. You will find settings to adjust the height of the element (using pixel measurement)
  7. If you wish the link to be shown as a button, simply check the box.
  8. 'Element overlay color' allows you to set a color on top of the image, for example if the image is very light, and you need to make the text more visible. Learn more about how to add this color overlay
  9. Alignment of the text horisontally.
  10. Alignment of the text vertically.
  11. Finally you can select different types of animations for the text, like for example sliding or fading in on top of the image. 

The image is added below the 'Image' tab.

How to create "Hero Image" inside of Slider Container

Vel mollis massa varius sed

Mauris tristique mollis orci

Aliquam nibh nibh, egestas quis elit quis, efficitur suscipit nisl. Vestibulum mattis eu tortor vitae sollicitudin. Proin sed imperdiet tortor, sed elementum dolor. Mauris pellentesque ac augue fringilla suscipit. Nam eu nibh a sapien auctor ullamcorper ac eu sapien. Donec hendrerit pretium sem vitae mollis. Maecenas cursus vitae mi eu suscipit.

Vel mollis massa varius sed

Mauris tristique mollis orci

Aliquam nibh nibh, egestas quis elit quis, efficitur suscipit nisl. Vestibulum mattis eu tortor vitae sollicitudin. Proin sed imperdiet tortor, sed elementum dolor. Mauris pellentesque ac augue fringilla suscipit. Nam eu nibh a sapien auctor ullamcorper ac eu sapien. Donec hendrerit pretium sem vitae mollis. Maecenas cursus vitae mi eu suscipit.

Vel mollis massa varius sed

Mauris tristique mollis orci

Aliquam nibh nibh, egestas quis elit quis, efficitur suscipit nisl. Vestibulum mattis eu tortor vitae sollicitudin. Proin sed imperdiet tortor, sed elementum dolor. Mauris pellentesque ac augue fringilla suscipit. Nam eu nibh a sapien auctor ullamcorper ac eu sapien. Donec hendrerit pretium sem vitae mollis. Maecenas cursus vitae mi eu suscipit.

You can create a slider based on the  'Hero Image' element, by first creating the 'Slider container' (2) that you find below the 'Grid Element' tab (1). (1.1.4)

The 'Slider container' has multiple settings to fill your needs. You can decide if the buttons, to see next or previous slide, should be visible (1) and if there should be a pagination (2). You can also set if the slides should be in a loop (3) when autoplay is set (4). If you have smaller elements in the slider container, you can select to show more than one in each slide (5). You are able to set the transition time between each slide (6). Finally, if you have one slide per carusel view set, you can also ad slider effects (7). (1.1.5)

When the slider container has been created, you can create new content elements inside the container. (1.1.6)

To create the slider with 'Hero Image', follow prevoius instructions as shown in images 1.1.1, 1.1.2b and 1.1.3.