Slides Element
The Slides element will provide a graceful display of slides and comes with a handful of options available for customization.
Content Tab
Slides
Here you can choose to display a bountiful number of slides each containing its own settings and options
Background
- Color - Set the colors of the slide's background
- Size - if you choose an Image as your slide then you can set the size of the slide to either be Cover, Contain, or Auto.
- Ken Burns Effect - The Ken Burns Effect is a popular zooming effect, switch the handle on to apply it to your slides.
- Background Overlay - Choose to show a background overlay over your slide's image and then select the color.
Content
- Title & Description - Set the title and description for the slide
- Button Text - Enter the button's text here
- Link - Enter the URL to link the slides or the button
- Apply Link - Once you enter the URL, you can also specify where you want the link to be applied. It can either be Whole Slide or Button Only.
Style
Usually, the style of the slides is done via the element's Style tab which we will cover later in this section. But if you wish to override the styles set there you can style the slides individually by switching the Custom button on.
- Horizontal Position - Set the horizontal positioning for the content to either be Left, Center, or Right
- Vertical Position - Set the horizontal positioning for the content to either be Top, Center, or Bottom
- Text Align - Align the text of the slide either Left, Center, or Right
- Content Color - Set the color for the content
Slider Settings
- Navigation - Choose to show navigation for your slides and decide on a style you find it fit like Arrows&Dots, Arrows, or Dots only.
- Infinite Loop - Have the slides rotating in an infinitive loop without interruption
- Pause on Hover - Have the slides be paused when the mouse hovers over them
- Autoplay - Have the slides be rotated automatically and set the speed
- Content Animation - Set an entrance animation for the content
- Animation Delay - Decide when you want your animation to start
- Transition - You can set the transition of the slides as Slides or Fade
- Transition Speed - Set the time it will take for the slides to rotate
Style Tab
Slides
- Content Width - Set the width of the content in values
- Padding - Set the padding between the edges of the content and the slides
- Horizontal Position - Set the horizontal position of the slides to either be Left, Center, or Right.
- Vertical Position - Set the vertical position of the slides to either be Top, Center, or Bottom
- Text Align - Align the text to either be Left, Center, or Right.
Content
Title
- Color - Set the color of the posts' title
- Typography - Tweak the typography options for the title
- Spacing - Set the spacing between the title and the content
Description
- Color - Set the color of the slides' description
- Typography - Tweak the typography options for the description
- Spacing - Set the spacing between the description and the caption
Button
- Typography - Set the typography options for the button's text
- Border Type - Set a border for the button to choose from Solid, Double, Dotted, Dashed, or Groove
- Border Radius - Set the border radius for the button
- Text Color - Set the color of the button's text
- Background Color - Set the background color for the button
- Border Color - Select a border color, if you've set one
- Padding - Add some padding to the button
Navigation
If you've chosen to add navigation to your slides, then you can customize the styling and design it to your liking.
Arrows
Choose either Normal or Hover state for the arrows
- Icon - Set an icon for the arrows, choose from the library or upload one
- Position - Set the arrow Inside or Outside the slides
- View - Choose the display of the arrows either Default, Stacked, or Framed
- Primary Color - Set the colors for the arrows
- Style - Style the arrows, if you choose either Stacked or Framed you can set the size the padding, and the border-radius.
Dots
Choose either Normal or Hover state for the dots.
- Position - Set the arrow Inside or Outside the slides
- Alignment - Set the alignment for the dots to either be Left, Center, or Right. \
- Color - Set the color of the dots
- Border Color - Set the color of the dots' filling
- Style - Set the padding, border-radius, border width, and determine the space between the dots.
Set the settings for the Advanced Tab that is appropriate for the element.