Slideshow

Adding a section

In order to add a section, you need to go to Customizer → Add Section → Slideshow.

Section settings

1. Enable rounded corners - the setting is responsible for displaying rounded corners of the media.

Slideshow settings

1. Show arrows - the setting is responsible for displaying the arrows for switching between slides;

2. Show pagination - the setting is responsible for displaying pagination;

3. Enable loop - the setting is responsible for setting the infinite scrolling of the slider;

4. Enable autoplay - the setting is responsible for setting the automatic switching of slides;

5. Autoplay speed - the setting is responsible for the speed of automatic switching of slides;

6. Animation speed - the setting allows you to set the animation speed of switching slides;

7. Animation type - the setting allows you to set the type of animation for switching slides:

   • Fade

• Slide

• Flip

• Creative

• Parallax

Colors

1. Background - the setting allows you to set the background color of the section;

2. Pagination - the setting allows you to set colors for pagination;

3. Arrows background - the setting allows you to set the background color for the arrows for switching between slides;

4. Enable arrows glass effect - the setting allows you to set the glass effect for the arrows background for switching between slides(info: This effect is working only when background opacity less than 1).

5. Arrows color - the setting allows you to set the color for the arrows for switching between slides;

6. Arrows border - the setting allows you to set the color for the arrows border for switching between slides;

7. Arrows background (hover) - the setting allows you to set the background color for the arrows for switching between slides on hover;

8. Arrows color (hover) - the setting allows you to set the color for the arrows for switching between slides on hover;

9. Arrows border (hover) - the setting allows you to set the color for the arrow border for switching between slides on hover.

Layout

1. Container width - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;

2. Desktop section height - the setting is responsible for the height of the section for the desktop;

3. Mobile section height - the setting is responsible for the height of the section for mobile;

4. Subtract header height - the setting is responsible for subtracting the header height from the slideshow size. This will be useful when you set the slideshow size to 100% and turn on the setting, then you will fit the announcement bar, header, and slideshow on one screen;

5. Desktop offset top - top indent of the section on the desktop;

6. Desktop offset bottom - bottom indent of the section on the desktop;

7. Mobile offset top - top indent of the section on the mobile;

8. Mobile offset bottom - bottom indent of the section on the mobile.

Accessibility

Accessibility content is in translations. To go, you need to click on the more options button in the customizer or in the online store (themes) and select edit languages:

General → Accessibility

General → Accessibility slider

Blocks settings

Block Image Slide

Content

1. Image (desktop) - the setting allows you to set the image for the desktop;

2. Image (mobile) - the setting allows you to set the image for mobile;

3. Heading - the setting allows you to set the text for the title;

4. Text - the setting allows you to set the text for the text field;

5. Button label - the setting allows you to set the label for the label;

6. Button aria-label - the setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;

7. Button link - the setting allows you to set a link for the button;

8. Open link in a new tab - the setting allows you to indicate how the link will open, in the current tab or the new;

9. Second button label - the setting allows you to set the label for the second label;

10. Second button aria-label - the setting allows you to set the text for the second button aria-label attribute. The attribute is needed for accessibility;

11. Second button link - the setting allows you to set a link for the second button;

12. Open second link in a new tab - the setting allows you to indicate how the second link will open, in the current tab or the new.

Alignment

1. Text alignment inside block - the setting allows you to set the alignment for the text;

2. Content alignment - the setting allows you to set the alignment for the content;

3. Vertical content alignment - the setting allows you to set the vertical alignment for the content.

Colors

1. Background - the setting allows you to set the background color of the slide;

2. Text content - the setting allows you to set the background for the text content;

3. Heading - the setting allows you to set the color for the header;

4. Text - the setting allows you to set the color for the description;

5. Button label - the setting allows you to set the color for the button label;

6. Button background - the setting allows you to set the background color for the button;

7. Button border - the setting allows you to set the border color for the button;

8. Button label (hover) - the setting allows you to set the color for the button label on hover;

9. Button background (hover) - the setting allows you to set the background color for the button on hover;

10. Button border (hover) - the setting allows you to set the border color for the button;

11. Second button label - the setting allows you to set the color for the second button label;

12. Second button label (hover) - the setting allows you to set the color for the second button label on hover;

13. Overlay - the setting allows you to set the color for the overlay.

Video Slide

General

1. Video (desktop) - the setting allows you to select a video from the picker for the desktop;

2. Video (mobile) - the setting allows you to select a video from the picker for the mobile;

3. Preview image (desktop) - the setting allows you to set the preview image for the desktop;

4. Preview image (mobile) - the setting allows you to set the preview image for the mobile;

5. Heading - the setting allows you to set the text for the title;

6. Text - the setting allows you to set the text for the text field;

7. Button label - the setting allows you to set the label for the button;

8. Button aria-label - the setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;

9. Button link - the setting allows you to set a link for the button.

10. Open link in a new tab - the setting allows you to indicate how the link will open, in the current tab or the new;

11. Second button label - the setting allows you to set the label for the second label;

12. Second button aria-label - the setting allows you to set the text for the second button aria-label attribute. The attribute is needed for accessibility;

13. Second button link - the setting allows you to set a link for the second button;

14. Open second link in a new tab - the setting allows you to indicate how the second link will open, in the current tab or the new.

Video settings

1. Play type - the setting allows you to set the playback type for the video.

Alignment

1. Text alignment inside block - the setting allows you to set the alignment for the text;

2. Content alignment - the setting allows you to set the alignment for the content;

3. Vertical content alignment - the setting allows you to set the vertical alignment for the content.

Colors

1. Background - the setting allows you to set the background color of the slide;

2. Text content - the setting allows you to set the background for the text content;

3. Heading - the setting allows you to set the color for the header;

4. Text - the setting allows you to set the color for the text;

5. Button label - the setting allows you to set the color for the button label;

6. Button background - the setting allows you to set the background color for the button;

7. Button border - the setting allows you to set the border color for the button;

8. Button label (hover) - the setting allows you to set the color for the button label on hover;

9. Button background (hover) - the setting allows you to set the background color for the button on hover;

10. Button border (hover) - the setting allows you to set the border color for the button on hover;

11. Second button label - the setting allows you to set the color for the second button label;

12. Second button label (hover) - the setting allows you to set the color for the second button label on hover;

13. Overlay - the setting allows you to set the color for the overlay.

Video Link Source

General

1. Video url (desktop) - the setting allows you to set a link to the video for the desktop;

2. Video url (mobile) - the setting allows you to set a link to a video for the mobile;

3. Preview image (desktop) - the setting allows you to set the image for the desktop;

4. Preview image (mobile) - the setting allows you to set the image for the mobile;

5. Heading - the setting allows you to set the text for the title;

6. Text - the setting allows you to set the text for the text field;

7. Button label - the setting allows you to set the label for the button;

8. Button aria-label - the setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;

9. Button link - the setting allows you to set a link for the button;

10. Open link in a new tab - the setting allows you to indicate how the link will open, in the current tab or the new one;

11. Second button label - the setting allows you to set the label for the second label;

12. Second button aria-label - the setting allows you to set the text for the second button aria-label attribute. The attribute is needed for accessibility;

13. Second button link - the setting allows you to set a link for the second button;

14. Open second link in a new tab - the setting allows you to indicate how the second link will open, in the current tab or the new.

Video settings

1. Play type - the setting allows you to set the playback type for the video.

Alignment

1. Text alignment inside block - the setting allows you to set the alignment for the text;

2. Content alignment - the setting allows you to set the alignment for the content;

3. Vertical content alignment - the setting allows you to set the vertical alignment for the content.

Colors

1. Background - the setting allows you to set the background color of the slide;

2. Text content - the setting allows you to set the background for the text content;

3. Heading - the setting allows you to set the color for the header;

4. Text - the setting allows you to set the color for the text;

5. Button label - the setting allows you to set the color for the button label;

6. Button background - the setting allows you to set the background color for the button;

7. Button border - the setting allows you to set the border color for the button;

8. Button label (hover) - the setting allows you to set the color for the button label on hover;

9. Button background (hover) - the setting allows you to set the background color for the button on hover;

10. Button border (hover) - the setting allows you to set the border color for the button on hover;

11. Second button label - the setting allows you to set the color for the second button label;

12. Second button label (hover) - the setting allows you to set the color for the second button label on hover;

13. Overlay - the setting allows you to set the color for the overlay.

Block Three-Part Slide

This block (slide) contains three columns. In the first and the last columns, you can set media content (Image, HTML5 video, or YouTube/Vimeo link) and in the second column, you can show the label, title, and button. You can mix media types for different columns. For example, in the first column, you can show an image and in the third column, you can show HTML 5 video.

General

1. Video play type - the setting allows you to set the playback type for the video.

First column

1. Media type - the setting allows you to select a media content type you want to show (Image, HTML 5 video, YouTube/Vimeo);

2. Image desktop - choose the desktop image;

3. Image mobile - choose the mobile image. If not set - the desktop image will be used;

4. Video (desktop) - choose the HTML5 desktop video;

5. Video (mobile) - choose the HTML5 mobile video. If not set - the desktop video will be used;

6. YouTube/Vimeo url (desktop) - add the YouTube/Vimeo desktop video URL;

7. YouTube/Vimeo url (mobile) - add the YouTube/Vimeo mobile video URL. If not set - the desktop video will be used;

Second column

1. Heading - the setting allows you to set the heading;

2. Text - the setting allows you to set the text;

3. Button label - the setting allows you to set the label for the button;

4. Button aria-label - the setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;

5. Button link - the setting allows you to set a link for the button;

6. Open link in a new tab - the setting allows you to indicate how the second link will open, in the current tab or the new.

Third column

1. Media type - the setting allows you to select a media content type you want to show (Image, HTML 5 video, YouTube/Vimeo);

2. Image desktop - choose the desktop image;

3. Image mobile - choose the mobile image. If not set - the desktop image will be used;

4. Video (desktop) - choose the HTML5 desktop video;

5. Video (mobile) - choose the HTML5 mobile video. If not set - the desktop video will be used;

6. YouTube/Vimeo url (desktop) - add the YouTube/Vimeo desktop video URL;

7. YouTube/Vimeo url (mobile) - add the YouTube/Vimeo mobile video URL. If not set - the desktop video will be used;

Colors

1. Background - the setting allows you to set the background color of the slide;

2. Heading - the setting allows you to set the color for the header;

3. Text - the setting allows you to set the color for the description;

4. Button label - the setting allows you to set the color for the button label;

5. Button label - the setting allows you to set the color for the button label when the user hovers over it.