(Not rated)

Already rated by you

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) and 1.1.2b give you an understanding of which fields that can be used. The 'Header' (1) is not using the regular header field and as such, it does not have any size or alignment options. It has a 'Sub Header' (2) and a text field (3), both without any formatting options. Finally it has a link function (4) containing 'Link text' and a 'Link' target. 

Futher down on the 'General' tab (1.1.3) you will find settings to adjust the height of the element (5) and apply to show the link as a button or not (6). It is also possible to set alignment of the text both horisontally (7) and vertically (8). Finally you can select different types of animations for the text (9), how it should appear on top of the image, like for example sliding or fading in. 

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.

Comments (0)

No comments yet