On this page, edit the settings for the slider (carousel) on the homepage of your website. The slider consists of two or more slides.

There are several groups of settings:

Remember to click the Save button to commit your changes. Click the Reset button to return to the default settings.

Upload the slides in Content > Home Slides

Homepage Slider Settings

These are the general settings for the homepage slider:

  • Transitions: Select the drop-down to choose the type of transition.

  • Autoplay: Select the toggle “On” to have the slider automatically rotate through the slides.

  • Play mode: Select the drop-down to choose the play mode.

  • Shuffle: Leave the toggle “Off” to have the slider transition sequentially through the sliders. Click the toggle “On” to have the slider randomly transition to the next slide.

  • Slide duration: Use the - and + buttons to specify the number of seconds that each slide will remain on the screen before the next transition.

  • Animation speed: Use the - and + buttons to specify the delay (in milliseconds) for the transition to the next slide.

Homepage Slider Styling

These are the style settings for the homepage slider:

Slider Layout

  • Background type: Select the drop-down and choose a light, dark, or other type of background.

  • Background color: Select the drop-down and then use the color picker to choose a specific background color. You can also enter the hex color code into this field.

Slider Size

  • Border Width: Use the - and + buttons to adjust the width of the button border.

  • Border Color: Select the drop-down and then use the color picker to choose a specific color for this block. You can also enter the hex color code into this field.

  • Box shadow: Choose the type of shadow for this block.

Slider Padding

In Mobile size, click on a screen type. Then, use the - and + buttons to specify the Slider Width and the Slider Height.

Slider Border

  • Border Width: Use the - and + buttons to adjust the width of the slider border.

  • Border Color: Select the drop-down and then use the color picker to choose a specific border color. You can also enter the hex color code into this field.

Slider Container Background

Background color: Select the drop-down and then use the color picker to choose a specific background for the container. You can also enter the hex color code into this field.

Slider Container Padding

In Mobile padding, click on a screen type. Then, use the - and + buttons to specify the padding width for the Top & Bottom and the Left & Right.

Slider Full-Screen Offset

Enter a percentage/proportion value for the amount of offset that you want for the slider in full-screen mode.

Homepage Slider Arrows

These are the settings for the left and right navigation arrows on each end of the slider. Click the toggle to “ON” to enable the slider navigation arrows, and then make changes to the settings below.

Slider Arrow Background

Background type: Select the drop-down and choose a light, dark, or other type of background.

Slider Arrow Style

  • Arrow style: Select the drop-down and choose an arrow style.

  • Arrow color: Select the drop-down and then use the color picker to choose a specific background color. You can also enter the hex color code into this field.

Slider Arrow Visibility

Left toolbar — click the drop-down and choose the device visibility for the navigation arrows.

Homepage Slider Dots

These are the settings for the clickable dots that provide the other method for navigating in the slider.

Click the toggle to “On” to enable the slider navigation dots, and then make changes to the settings below.

Slider Dots Background

  • Background type: Select the drop-down and choose a light, dark, or other type of background.

  • Background color: Select the drop-down and then use the color picker to choose a specific background color. You can also enter the hex color code into this field.

  • Click the Choose File button and locate the file containing the image that you want to use for the dots background.

Slider Dots Style

  • Dots style: Select the drop-down and choose a style for the dots.

  • Dots color: Select the drop-down and then use the color picker to choose a specific color for the dots. You can also enter the hex color code into this field.

Slider Arrow Visibility

Left toolbar: Select the drop-down and choose the device visibility for the dots.