Slideshow

This section is to add a slideshow to your homepage.

Configure the section

Select the customize theme option. Click on the dropdown menu at the top of the page to select the Home page template.

From the side menu, select Slideshow.

Click on the dropdown arrow beside the slideshow.

Click on Add Slide.

Customize the slideshow section by utilizing the settings on the right side of the theme editor, as described below:

General

Allow transparent header Select this checkbox to show transparent header in case this section is placed as the first section on page. Section visibility Select from the options to select the visibility of this section: -Always -Small (On selecting this, the section will be visible on mobile devices only.) -Large (On selecting this, the section will be visible on large devices only.) Color scheme Select any color scheme defined in the theme settings>Colors>Schemes. Background Choose the section background from below options: - Solid - Gradient Container width Choose the container width from below options: - Small - Standard - Wide - Edge - Full width Corner style Choose the corners style from following options: - Sharp - Rounded Rounded position Choose the rounded position from following options: - Top - Bottom - Both Rounded: Corner radius Adjust the range bar to determine the radius to be applied in case of rounded corner style.

Section spacing

Choose from Choose spacing for: - Desktop - Mobile Desktop: Top spacing Adjust the range bar to add spacing at the top of the section for desktop view.

Desktop: Bottom spacing Adjust the range bar to add spacing at the bottom of the section for desktop view.

Mobile: Top spacing Adjust the range bar to add spacing at the top of the section for mobile view.

Mobile: Bottom spacing Adjust the range bar to add spacing at the bottom of the section for mobile view.

Slide

Animation style Choose the animation style from the following options: - Fade - Slide Auto rotate slides Select this checkbox to enable the auto rotation of slides. Change slides every Adjust the range bar to choose the rotation time in seconds. Media height Choose the media height from the following options: - Custom height - Full screen Custom height Adjust the range bar to choose the height for desktop. Mobile media height Choose the media height for the mobile, from the following options: - Custom height - Full screen Custom height Adjust the range bar to choose the height for mobile.

Navigation

Navigation style Choose the style from following options: - None - Arrows - Floating arrows - Dots - Progress bar - Arrows with dots - Arrows with progress bar - Floating arrows with progress bar - Floating arrows with dots Color Choose the color from light or dark for the chosen navigation style.

Block settings: Slide

Slide

Media type Choose the media type from following options: - Image - Video Desktop image Select an image to show in the desktop view. Mobile image Select an image to show in the mobile view. Desktop video Select any video to show as a background video in slides, for desktop view only. (Note: It supports .mp4 videos only.) Mobile video Select any video to show as a background video in slides, for mobile view only. (Note: It supports .mp4 videos only.)

Overlay

Enable overlay Select this checkbox to show overlay on slide media. Style Choose from solid or gradient to determine the overlay style. Solid color Choose any color for the solid overlay. Gradient color Choose any color for the gradient overlay.

Content

Text alignment Choose the alignment from below options: - Left - Center - Right Vertical alignment Choose the vertical alignment from the below options: - Top - Middle - Bottom - Justify

Block settings inside Slide

Hero text

Text Add highlight text. Heading size Select the font size from the following options: - XX-Large Display - X-Large Display - Large Display

Content

Subheading Add subheading text. Color Choose any color for the subheading text. Heading

Add heading text. (Note: Enter ++ for a line break and wrap text in [ ] to apply the highlight settings.) Heading tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes. Heading size Select the font size from the following options: - Heading XL - Heading L - Heading M - Heading S - Heading XS - Heading XXS Heading color Choose any color for the heading text. Highlight text Highlight style Choose the style from following options: - None - Underline - Text color - Gradient Font Choose the text font family from the following options:

- Heading - Body - Accent (Note: These fonts can be changed in theme settings>typography.) Highlight color Choose any solid or gradient color for the heading's highlight text.

Description

Description

Add description text. Description font size Choose the font size from following options: - Extra Large - Large - Medium - Regular - Small - Extra small Description color Choose any color for the description text.

Button

Button text Enter the button label. (Note: Leave the label blank to hide the button.) Button link Add the button link to redirect it. Open in new tab Select this checkbox to open the button link in next tab of browser. Set button as a link Select this checkbox to show button as a link. Colors Choose button colors for the text, background, border and their hover.

Last updated