The Slides widget allows you to quickly create simple slides that work perfectly, without a fuss.
Slides: Shows the list of slides. You can drag and drop them to change their position, duplicate, delete or add a slide. When you click on a single slide, its options open up. Each slide has Background, Content and Style settings.
- Color: Set the background color for the slide
- Image: Choose an image from the media library
If an image is chosen as a slide background, additional options appear:
- Size: Choose whether to display the background as cover or auto. The auto image is for situations where you have the exact sizes needed, and also where you would want the entire image to appear in the slider. The cover size is for more abstract and atmospheric images, where the showing of the entire image is less important.
- Ken Burns Effect: Choose YES to enable this popular zooming effect on the background image.
- Background Overlay: Choose YES to set a background overlay that will appear on top of the image. If set to YES, you have the option of choosing the overlay’s color.
- Title & Description: Insert the title and description for the slide
- Button Text: Set the text for the button
- Link: Add a URL the slide or button will link to
- Apply Link On: If a link is set, this option appears. Choose if the link applies to only the button or to the whole slide
Styling for individual tabs is OFF by default, relying on the global styles which are set on the widget’s Style tab. If you wish to override the global slide styles, turn the Custom switch to ON. This will enable you to set custom styles for that individual slide. The custom styles for individual slides are:
- Horizontal Position: Position the content horizontally: Left, right or center
- Vertical Position: Position the content to the top, middle or bottom
- Text Align: Align the text left, center or right
- Content Color: Choose the color of the content
- Height: Set the exact height of the slide in either PX, VH, or EM
- Navigation: Choose to display arrows, dots, both or none
- Pause on Hover: Make the slide pause when the mouse hovers over it
- Autoplay: Get the slides to rotate automatically, according to the speed you set
- Autoplay Speed: Set the time it takes for the slide to start rotating
- Infinite Loop: Have the slides rotate in an infinite loop and without stopping
- Direction: Choose a direction for the slider as left or right
- Transition: Set the transition of the slides as slide or fade
- Transition Speed: Set the time it takes for the slides to rotate
- Content Animation: Set the animation effect of the content’s display when the slide is shown: None, Down, Up, Right, Left, or Zoom
- Content width: Set the width of the content inside the slide
- Padding: Set the inner spacing between the edge of the content and the edge of the slide
- Horizontal Position: Set the position of the content as right, left and center
- Vertical Position: Set the position of the content as top, middle or bottom
- Text Align: Align the text to the right, left or center
- Text Shadow: Add a shadow and blur to the text
Note: If an individual slide has Custom styles set, these global styles will have no effect upon that slide.
- Spacing: Set the spacing between the title and the description
- Text Color: Set the color of the title
- Typography: Set the typography of the title
- Spacing: Set the spacing between the description and the button
- Text Color: Set the color of the description
- Typography: Set the typography of the description
- Size: Set the size of the button, from extra small to extra large
- Text Color: Set the text color for the button
- Typography: Set the typography of the button
- Border Width: Set the border width of the button
- Border Radius: Set the border radius, to control corner roundness
Normal state / Hover State
- Text Color – Set the text color
- Background Color – Set the background color of the button
- Border Color – Set the border color of the button
- Arrows position – Set the position of the arrows inside or outside the slider
- Arrows size – Set the exact size of the arrows
- Arrows color – Set the color of the arrows
- Dots Position – Set the position of the dots inside or outside the slider
- Dots size – Set the exact size of the dots
- Dots color – Set the color of the dots
Note: Autoplay is affected by Google’s Autoplay policy on Chrome browsers.
Note: Using Elementor template shortcodes within the widget may sometimes work, but it is not a supported feature.
Set the Advanced options that are applicable to this widget
Credits: Elementor Docs