The Slides widget allows you to create and customize slide presentations or carousels directly within your WordPress website. With this widget, you can easily showcase images, content, or any other media in a list of slides. It’s a popular feature for creating sliders, testimonials, product showcases, and more.
Adding Slides widget
- Find the Slides widget under the Elementos section of your 10Web Builder page.
- Drop the widget onto your preferred location on the canvas.
- In the Content tab, under the Slides section, you’ll find the list of slides.
- Use drag-and-drop feature to rearrange, duplicate, remove, or add new slides.
- Click on the individual slides to display its specific settings. Within each slide, you can customize its Background, Content, and Styling.
Background sub-tab
Color: Click the Color tab to pick a background color.
Image: Click the + icon under the Image tab to choose a picture from your site’s media library.
Size: Decide how the background image should be showcased. You can choose from three options: Auto, Cover, and Contain.
- Cover: The image will scale to cover the entire area of its slide while maintaining its aspect ratio. This might result in parts of the image being cropped if the slide’s aspect ratio doesn’t match that of your image. This option is ideal for more abstract and atmospheric images, where showing the entire image is less important.
- Contain: The entire image is displayed within the slide, ensuring the image’s entire content is visible. This method scales the image so that it fits entirely inside the container, maintaining its aspect ratio. This option works best if you want the entire image to appear in the slider.
- Auto: The Auto option allows the browser or software to choose the most appropriate scaling method based on the slide’s size and the image’s aspect ratio.
Ken Burns Effect: Enable this zoom effect for a dynamic touch to your background image. If active, you can also pick if the Zoom Direction goes In or Out.
Background Overlay: Enable to add a colored layer over the image for style. If active, you can further personalize the overlay by selecting your preferred Color and Blend Mode.
Content sub-tab
Title: Add the title for the slide.
Description: Add a brief description for the slide.
Button text: Define the text you want displayed on the button.
Link: Add the URL where the slide or button should redirect users.
Apply link on: When a link is added, you can choose if the link should apply to the Button only or to the Whole Slide.
- Link Options: Click the ⚙️ to set the link to either open in a new window or to Add nofollow to the link.
- Custom attributes: Use the Custom Attributes option to assign custom attributes to the link element. Use the | (pipe) for key-value separation and commas to separate pairs.
Style sub-tab
By default, each tab inherits global styles from the widget’s main Style tab. However, if you want to customize a specific slide differently, toggle the Custom switch to ON. This allows you to personalize the following slide attributes:
Horizontal position: Align the content to the left, right, or center.
Vertical position: Adjust the content’s placement to the top, middle, or bottom.
Text alignment: Determine the text alignment as left, center, or right.
Content color: Select the desired color for the slide content.
Text shadow: Click the 🖋️ icon to add a shadow to the title.
Additional settings
Slider inner position:
- Inside: The content of the slide will appear within the slide background
- Outside: The content of the slide will be separated and shown under the background (color/image)
Height: Use the Height field to adjust the height of the slides.
Slides per view: Set the number of slides you prefer to be visible as per view.
Slides to scroll: Set how many slides are scrolled per swipe.
Slider options
Navigation: Choose to display arrows, dots, both, or none.
Autoplay: Get the slides to rotate automatically according to the speed you set.
Pause on hover: Make the slide pause when the mouse hovers over it.
Pause on interaction: Determine if autoplay should pause when a user interacts with the slide.
Autoplay speed: Set the time it takes for the slide to start rotating.
Infinite loop: Make the slides rotate in an infinite loop without stopping.
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.
Style tab
The Style tab provides options to customize the visual appearance of slides, including background settings, text alignment, content color, and slide height.
Slides:
Space between: Set the space between the slides.
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, and bottom.
Text align: Align the text to the right, left, or center.
Text shadow: Add a shadow and blur to the text.
Title:
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.
Description:
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.
Button:
Size: Set the size of the button from extra small to extra large.
Typography: Set the typography of the button.
Note:
The below options can be separately chosen for Normal and Hover modes.
Text color: Set the text color.
Background type: Choose the background type of the button. Choose a Solid color or create a Gradient effect.
Background color: Set the background color of the button.
Border color: Set the border color of the button.
Border width: Set the border width of the button.
Border radius: Set the border radius to control corner roundness.
Navigation:
Arrows:
- Position: Set the position of the arrows inside or outside the slider.
- Size: Set the exact size of the arrows. Size can be in PX, EM, or REM.
- Color: Set the color of the arrows.
Pagination (Dots):
- Position: Set the position of the dots inside or outside the slider.
- Size: Set the exact size of the dots. Size can be in PX, EM, or REM.
- Color: Set the color of the dots.
- Active color: Set the color for the currently active dot.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.