Slideshow settings


Setting Description
Layout 
  • Full width: The image banner will span the full width of the page.
  • Grid: The image banner will be sized to match the container of other sections.
Slide height

Choose slide height from the dropdown list:

  • Adapt to first image: All images in the carousel will match the height of the first image.
  • Small
  • Medium
  • Large
Pagination style

Three different styles can be used for pagination styles, try to choose the best solution for your design:

  • Dots
  • Counter
  • Numbers

Navigation to rotate slides is displayed at the bottom of the section.
Auto-rotate slides (if enabled) Set the carousel to play automatically.
Auto-rotate slides (if disabled) The images are static, and you can rotate slides using slideshow navigation (dots, numbers, or arrows).
Change slides every Choose in seconds how frequently your slides cycle. The range is from 3 to 9 seconds.

Animations


Setting Description
Image behavior 

Choose how the image behaves:

  • None
  • Ambient movement: This creates a subtle, slow movement effect, making the image appear dynamic.

Mobile layout 


Setting Description
Show content below images on mobile Enabling this option will display text after the image on mobile screens. Disabling it will place the text directly on top of the image on mobile screens.

Accessibility


Setting Description
Slideshow description Enhance accessibility by providing a description for your slideshow, catering to visually impaired customers.

Section overlay


You can add from one to three image overlays to this section.


Setting Description
Image overlay This setting allows you to apply an overlay effect on the banner image, such as a color shape, pattern, line, or transparent image to enhance its appearance or create visual contrast with other elements on the page.
Image width  This setting allows you to adjust image width to ensure it aligns well with other components within the section.
Image vertical position  The setting enables you to control the vertical position of the image within the section. You can adjust it to place the image wherever it fits best within the layout, ensuring optimal visual balance and alignment with other elements.
Image horizontal position  This setting enables you to control the horizontal position of the image within the section. You can adjust it to place the image wherever it fits best within the layout.
Image width mobile  This setting lets you adjust image width on mobile devices separately. It's important for optimizing the visual appearance and layout, as mobile screens have different requirements than desktop screens. Adjustments like decreasing shape width can improve mobile usability.
Image vertical position mobile The setting enables you to control the vertical position of the image within the section. Adjustments like changing placement can improve mobile usability.
Image horizontal position mobile  This setting enables you to control the horizontal position of the image within the section. Adjustments like changing placement can improve mobile usability.
Animation 

Two options:

  • None 
  • Ambient

You can liven up the site using animation.

Shape divider


Setting Description
Shape position

Choose the position of shape:

Top: The shape is displayed only at the top of the section.

Bottom: The shape is displayed only at the bottom of the section.

Both: The shape is shown at both the top and bottom of the section.
Type Select the shape type that enhances the visual appeal of your banner the most.
Color You can select the color of the shape to complement the color of the banner.
Width Adjust the shape width using the slider. But notice that it has an impact on section width. 

Section settings 


Setting Description
Background color There are six options: Background main, Background section 1,2,3,4,5. Colors for these backgrounds can be set in the Theme Settings/Colors block.
Background gradient You can use the gradient picker to create a custom gradient for your section background.
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The 'Bottom padding' setting functions similarly to the "Section top padding" setting but controls the space at the bottom of the section. 
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us