Slideshow Widget

The Slideshow 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.

I. How to add a slideshow widget to the layout builder

You can add a slideshow widget to your layout builder by simply adding a new element in the layout and selecting the widget from the Astroid library.

Simply choose the Slideshow widget from the Widget list, then it'll be added to the layout's section where you want to add the widget.

The Slideshow widget settings come with 4 main settings tabs:

General Settings
Design Settings
Responsive Settings
Menu Assignment

1. General Settings

1.1 Add slideshow items

From the General Settings tab, you can click on Add Item button to add new slideshow items.

Select image: Upload an image or select an image from your media library.
Title: Input a title for the slide
Meta: Add a meta description for the slide
Description: Input the description for the slide
Link: Add a link to a call-to-action button on the slide
Link Text: Add the link text for the call-to-action button
Link target: Choose a type of link target from the drop-down list of options

1.2. Slideshow Options

Min height: Set the min-height of the slide images
Effect type: Choose an effect type
Autoplay: Enable this option to activate the autoplay feature
Interval: Set the interval time
Border radius: Select an option for the border-radius.
Box Shadow: Choose a shadow type
Hover box shadow: Choose an option for hover box shadow.

1.3 Slideshow's Overlay Options

Max-Width: Choose an option for the overlay's max-width
Overlay Position: Select a position for the overlay
Overlay Text Color: Set the color of the text on the overlay
Overlay Color: Set the overlay color on both light and dark mode
Overlay Padding: Choose an option for the overlay's padding

1.4 Slideshow's Title Options

In the Title options, you will see a bunch of options to configure the title of the slideshow including HTML element, font styles (font family, alt font family, font weight, font size, letter spacing, line height, font color, text transform, font style).

You can also adjust the margin-top, right, bottom, and left of the slideshow titles.

1.5 Slideshow's Meta Options

In the Meta options, you also see the same options as the Title options to configure the meta text on the slideshow including HTML element, font styles (font family, alt font family, font weight, font size, letter spacing, line height, font color, text transform, font style).

You can also adjust the margin-top, right, bottom, and left of the meta.

1.6 Slideshow's Content Options

In this part, you can configure style options for the content of the slideshow.

1.7 Slideshow's Readmore Options

In this part, you can see options related to Read more (Call-to-action button) on the slideshow.

Style: Choose a style from the list for the button.
Outline Style: Enable the option to outline an element, outside the border.
Styles: Choose an option for the button size.
Border radius: Set the border radius of the read more button.

2. Design Settings

Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".
Animation: Choose an animation for the widget.
Max Width: Set the Max Width for the widget.
Text Alignment: Set the alignment of the text of the widget.
Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.
Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

3. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

Hide on Extra Small Devices
Hide on Small Devices
Hide on Medium Devices
Hide on Large Devices
Hide on Extra Large Devices

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

On all pages: the widget will be visible on all pages of your website
No pages: the widget will be invisible on all pages
Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.