Slides Widget (Pro)

The Slides widget allows you to quickly create simple slides that work perfectly, without a fuss. 


Content

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.   

Background

  1. Color: Set the background color for the slide
  2. 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.

Content

  1. Title & Description: Insert the title and description for the slide
  2. Button Text: Set the text for the button
  3. Link: Add a URL the slide or button will link to
  4. 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

Style

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:

  1. Horizontal Position: Position the content horizontally: Left, right or center
  2. Vertical Position: Position the content to the top, middle or bottom
  3. Text Align: Align the text left, center or right
  4. Content Color: Choose the color of the content
  5. Height: Set the exact height of the slide in either PX, VH, or EM

Slider Options

  1. Navigation: Choose to display arrows, dots, both or none
  2. Pause on Hover: Make the slide pause when the mouse hovers over it
  3. Autoplay: Get the slides to rotate automatically, according to the speed you set
  4. Autoplay Speed: Set the time it takes for the slide to start rotating
  5. Infinite Loop: Have the slides rotate in an infinite loop and without stopping
  6. Direction: Choose a direction for the slider as left or right
  7. Transition: Set the transition of the slides as slide or fade
  8. Transition Speed: Set the time it takes for the slides to rotate
  9. Content Animation: Set the animation effect of the content’s display when the slide is shown: None, Down, Up, Right, Left, or Zoom

Style

Slides

  1. Content width: Set the width of the content inside the slide
  2. Padding: Set the inner spacing between the edge of the content and the edge of the slide
  3. Horizontal Position: Set the position of the content as right, left and center
  4. Vertical Position: Set the position of the content as top, middle or bottom
  5. Text Align: Align the text to the right, left or center

Note: If an individual slide has Custom styles set, these global styles will have no effect upon that slide.

  Title

  1. Spacing: Set the spacing between the title and the description
  2. Text Color: Set the color of the title
  3. Typography: Set the typography of the title

Description

  1. Spacing: Set the spacing between the description and the button
  2. Text Color: Set the color of the description
  3. Typography: Set the typography of the description

Button

  1. Size: Set the size of the button, from extra small to extra large
  2. Text Color: Set the text color for the button
  3. Typography: Set the typography of the button
  4. Border Width: Set the border width of the button
  5. Border Radius: Set the border radius, to control corner roundness
Normal state / Hover State
  1. Text Color - Set the text color
  2. Background Color - Set the background color of the button
  3. Border Color - Set the border color of the button

Navigation

Arrows
  1. Arrows position - Set the position of the arrows inside or outside the slider
  2. Arrows size - Set the exact size of the arrows
  3. Arrows color - Set the color of the arrows
Dots 
  1. Dots Position - Set the position of the dots inside or outside the slider
  2. Dots size - Set the exact size of the dots
  3. Dots color - Set the color of the dots
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.