Hero Image as Slideshow
- Hanna Aanjesen
Step 1. Create a template
To make it easier to change images and links are we creating our slideshow as a template. This is also beneficial if we later want to clone the template and e.g. have winter theme of our hero section.
Go to the template section and click on 'Create', if you already have a slideshow clone go to the given template and click 'Clone'. Open the Cloned template, give it a new name, and go to Step X.
Step 2. Add Slideshow and Images
Give the new template a good and representative name, and add the first Slide Show widget to your new structure.
To be able to use the Slide Show as a hero we need edit the Widget.
Click on 'Use as hero banners' and set the height to 80, as shown on the image below. Click save and go out of the widget.
Now we need to add a Flexbox for every image we want to have in our slideshow.
In this example I've added three.
Before adding the image widgets to the flexboxes we need to remove the padding. By default the 'Spacin below the container' is set to 'Extra Large Spacing', change this to 'Default' on all Flexboxes.
Add the Single Image widget under every flexbox you have added.
Open the image widget and select the image you want to use on your first slider.
Go to the 'Content' tab and choose 'Use the options for content'. We can now add the text we want to use!
Go to the 'Styling' tab and make sure 'Use as a background image (note: use style on container)' is choosen. Click Save and repeat this for every image widget you added.
Step 2.1. Add links in the carousel
Add another Slide show and flexboxes to your hierarchy, configure them as you did in the previous step.
We also need to do one more thing. As in this example we want to have the links in the bottom right corner we need to add styling.
In this example the styling needed is already on our page, and the only thing we need to do is to set the label 'banner-bottom-links'. If you need help with creating the styling elements ask someone in the Maxxton team.
Add Web Contents under the flexboxes.
We then need to add our links in the Web Content boxes. In this example these are simple Web Contents that consists out of text that is linked to the pages we want.
Add the web content to web content widgets and click save.