Banner Slider

This widget allows the creation of an animated and interactive Banner Slider that comes with multiple styles and customization features.

How To Add Banner Slider Widget To Your Page

1. Click the   icon to create a Section
2. Set your Column structure 
3. Right-click to Edit, Duplicate, Copy, Delete, etc.
4. Insert Widget  using drag and drop inside your Columns

5. Select Widget style (Banner Slider 16) in the Layout section.

6. Customize widget and add content in Content Section.  Here you can also customize content Typography.

Content Settings

Banner Slider 16 Layout

Use custom font for heading? - Turn on the switcher if you want to customize heading typography.

Banners:

Add item - Please, add the item to create and edit the slide.

Items Settings:

• Add additional image - Here you can add the additional image for the current banner slide.
• Background Image - Here you can add the image for the background.
• Element tag for title - Please select title tag.
• Title - Here you can add title text for the current banner slide. To Highlight text insert text between [[ Your Text Here ]].
• Description - Here you can add the first line text for the current banner slide.
• Align - Please, select the alignment of the title.
• Select overlay color for images - Here you can choose the overlay color from the color palette for the banner images.
• Add button - Turn on the switcher to add the button for the current banner slide.

Button Settings:

• Layout - Please, select the button layout.
• Name - Please, enter the button text.
• Link - Please, add a URL to the button.
• Style - Here you can select the button style (primary, dark, or light).
• Size - Here you can select button size (standard, small, or large).
• Type - Here you can select the button type (reverse or transparent).
• Box shadow - This option allows you to add the box shadow to the button. It only works if the box-shadow is specified in the skin generator.
• Enable Full Width - Turn on the switch if you want to display the full-width button.

• Add additional button - Turn on the switcher to add the button for the current banner slide.

Additional Button Settings:

• Layout - Please, select the button layout.
• Name - Please, enter the button text.
• Link - Please, add a URL to the button.
• Style - Here you can select the button style (primary, dark, or light).
• Size - Here you can select button size (standard, small, or large).
• Type - Here you can select the button type (reverse or transparent).
• Box shadow - This option allows you to add the box shadow to the button. It only works if the box-shadow is specified in the skin generator.
• Enable Full Width - Turn on the switch if you want to display the full-width button.

Use custom font for description? - Turn on the switcher if you want to customize description typography.

Use custom font for arrows? - Turn on the switcher if you want to increase the size of the arrows.

How to customize typography you can check in Typography Settings Category:

• Heading Typography
• Description Typography
• Arrow Typography

Slider Options:

Change slider options? - Turn on the switcher if you want to add the options of the slider.

• Arrows - Turn on the switcher if you want to add arrows.
• Pagination - Turn on the switcher if you want to add pagination.
• Effect Type - Please, select the effect type of the slider:

• Loop - Turn on the switcher if you want to add a loop effect.
• Simulate Touch - Turn on the switcher if you want to add a simulated touch effect.
• Autoplay - Enter autoplay speed(in ms). 0 - autoplay off.
• Speed - Enter speed(in ms).
• Lazy load image - Amount of next/prev slides to preload lazy images in (if 0 - lazy load off).

Advanced Settings:

The following options can be set independently for both the normal and hover states.

1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
2. Border Radius: Set the border-radius to control corner roundness
3. Box Shadow: Adjust box-shadow options

Positioning

1. Width: Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom. 
2. Custom Width: Only available if Custom is chosen. Use the slider to adjust the width of the element within the column.
3. Vertical Align: Only available if Full Width (100%) or Inline (auto) is chosen. Select to display the element at the Start, Center, or End.
4. Position: Select the position of the element, choosing either Default, Absolute, Fixed, or Custom. Absolute positions an element absolutely to its first positioned parent. Fixed positions an element relative to the user’s viewport. 

If either Absolute or Fixed is selected, the following options also become available.