The slideshow section makes it possible for you to add a slider section anywhere within your theme. The slideshow section has 3 different layouts for your slides, which can be set up per slider!
To activate this section you first have to add the section to your page. This can be done in a few small steps.
1) Click on 'add section' which can be found in your left sidebar
2) Scroll down, or search for 'Slideshow', then click on 'Slideshow'
3) Done, your Slideshow section is added.
General settings
The general settings contains the settings for the styling and layout of the Slideshow section.
Simply click on the 'section' to open the settings.
On the right sidebar, the following settings will show
Height:
Select the height for the slideshow section.
Width:
Select the height for the slideshow section, this can be full width or regular width.
The regular width will make it looked aligned in with the other sections.
Enable autoplay:
Check the box if you want the enable the autoplay function for the slides, so the slides will cycle automaticly.
Seconds between slides:
If autoplay is enabled, you can set the seconds you want between the slides.
Show play / pause button:
Show a play/pause button, this will only show when autoplay is enabled.
Height:
Select the height for the slideshow section on mobile.
Spacing
Bottom spacing desktop/mobile:
Set the spacing on the bottom for desktop and mobile.
That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.
How to configure the slideshow and change the images & text?
By default, there is 1 images/banners added, you can edit them, remove them or add more.
1. Editing the slides
To edit the slides you simply click on the block you want to edit in your sidebar on the left of your screen. In this case it will be 'Banner heading'
After you clicked the block, on the right of your screen the following sidebar will open.
Image:
Upload the image you want to use for your slider image
Layout:
As stated in the beginning, the section comes with 3 layouts.
Background image:
Image will be the background of the slide, the text will show on top.
Image left, content right:
The image will show on the left, your text and button show on the right.
Image right, content left:
The image will show on the right, your text and button show on the left.
Image overlay opacity:
Want to show an colored overlay over the image? Set the opacity here.
This comes in handy when you use text over the banner image to make it easier to read. (only applies when using the 'background image' layout)
100% = full color
0% = no overlay
Color scheme:
Select the color scheme for the overlay + text colors. You can select the color pallets here.
Button color scheme:
Select the color scheme for the button colors. You can select the color pallets here.
Video .mp4 file link:
Want to use a video instead of an image? Paste your YouTube or Vimeo link in here!
Video alt text:
Fill in a text that describes the video in short, to make it accessible for customer using screen readers.
Image position:
Set the position of the image, what we mean by that is how the image will behave.
For example: The image is too big for the field, do you want the image to align in the center, set it to center center.
Content position:
Set the position of the content within the image (text + button)
Heading size:
Select the size of the heading from a range of small to extra large. When you choose for "Extra large", the size of the description will also be a bit larger than normal.
Heading:
Fill in the title of your banner. Don't want to show a title? Simply leave the field empty!
Text:
Fill in the text for the banner. Don't want to show a description/text? Simply leave the field empty!
Button label:
This text will show on the button, for example: 'View products'
Link:
Enter a link for the button, for example to your products sale page.
Show link instead of a button:
Check this box if you don't want a button to show, but only a clickable text.
Mobile Layout
Image position:
Set the position of the image, what we mean by that is how the image will behave.
For example: The image is too big for the field, do you want the image to align in the center, set it to center center.
Heading size:
This heading setting will determine the size of the section title on mobile.
2. How to remove a slide?
Do you have multiple slides, but want less? You can always remove the banners one by one to fit in your needs.
To remove the blocks you simply click on the block you want to remove in your sidebar on the left of your screen.
After you clicked the block, on the right of your screen the sidebar will open.
On the bottom left of this sidebar, the following button 'Remove block' shows.
Simply click on this button and your banner/image will be deleted.
3. How to add a more slides?
Do you want to use more sliders? That's possible, no worries!
To add blocks you simply click on the 'Add Slide' button in your sidebar on the left of your screen.
After you clicked on 'Add Slide', a new block will be added. You can edit the block like explained in step 1.