Slideshow Widget
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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 comes with 4 main settings tabs:
General Settings
Design Settings
Responsive Settings
Menu Assignment
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
Min height: Set the min-height of the slide images
Effect type: Choose an effect type from the list.
Autoplay: Enable this option to activate the autoplay feature.
Interval: Set the interval time.
Show Control: Enable this option to show the control
Show indicator: Enable this option to show the slide indicator.
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.
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
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.
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.
In this part, you can configure style options for the content of the slideshow.
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.
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.
Add margin and padding values over the row to improve its appearance on different devices.
Here in the design settings, you can also add custom CSS to customize the design of the element.
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.
