Introduce overlay themes, customizable navigation, and Layout Builder integration to carousels, enriching visuals and user interaction with detailed content control.
Requirements
- SiteOrigin Premium Plugin
- SiteOrigin Widgets Bundle Plugin
- Optional: Page Builder by SiteOrigin Plugin
To make use of this addon, go to PluginsSiteOrigin Widgets and ensure the SiteOrigin Anything Carousel Widget is activated. Next, go to SiteOriginPremium Addons and activate the Carousel Addon.
Usage
The below settings are those added by the SiteOrigin Carousel Addon. Please, find the complete widget documentation links below:
Post Carousel
The Carousel Addon extends the SiteOrigin Post Carousel Widget by offering an additional theme called Overlay. More themes to follow soon! View a demo of the Post Carousel Overlay theme.
Design
Theme
Choose the Post Carousel theme. Currently, Default or Overlay is available. Please, allow a couple of seconds for the theme settings to be applied when changing themes.
Post Thumbnail
Thumbnail Overlay Color
Select the thumbnail overlay color. Defaults to black.
Border Radius
Select the thumbnail border radius. Defaults to 8px.
Post Title
HTML Tag
Select the post title HTML tag. Defaults to H3.
Font
Select the post title font. Defaults to your WordPress theme’s heading font.
Font Size
Select the post title font size. Defaults to 20px.
Color
Select the post title color. Defaults to white.
Category
Color
Select the post category font color. Defaults to #f14e4e.
Font Size
Select the post category font size. Defaults to 12px.
Background Color
Select the post category background color. Defaults to white.
Navigation
Arrow Color
Select the navigation arrow color. Defaults to #2d2d2d.
Arrow Hover Color
Select the navigation arrow hover color. Defaults to #f14e4e.
Dots Color
Select the navigation dots color. Defaults to #bebebe.
Dots Selected and Hover Color
Select the navigation dots selected/current and hover color. Defaults to #f14e4e.
Top Margin
The space between the posts and navigation elements.
Responsive
Desktop
Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on desktop. Defaults to 3.
Slides to Show
Set the number of slides to on desktop. Defaults to 3.
Navigation Arrows
Enable to display the navigation arrows on desktop.
Navigation Dots
Enable to display the navigation dots on desktop.
Tablet
Landscape
Breakpoint
Set the device width in pixels to apply the landscape tablet settings. Defaults to 1366.
Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on tablet devices in landscape mode. Defaults to 2.
Slides to Show
Set the number of slides to on desktop. Defaults to 3.
Navigation Arrows
Enable to display the navigation arrows on landscape tablet.
Navigation Dots
Enable to display the navigation dots on landscape tablet.
Portrait
Breakpoint
Set the device width in pixels to apply the portrait tablet settings. Defaults to 1025.
Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on tablet devices in portrait mode. Defaults to 2.
Slides to Show
Set the number of slides to on desktop. Defaults to 2.
Navigation Arrows
Enable to display the navigation arrows on portrait tablet.
Navigation Dots
Enable to display the navigation dots on portrait tablet.
Mobile
Breakpoint
Set the device width in pixels to apply the mobile settings. Defaults to 480.
Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on mobile devices. Defaults to 1.
Navigation Arrows
Enable to display the navigation arrows on mobile.
Navigation Dots
Enable to display the navigation dots on mobile.
Anything Carousel
Content Type
In addition to a regular content field, you’ll be able to select a Layout Builder field. This will allow you to build a complete Page Builder layout within each Anything Carousel item.
Add item anchor id in the URL
Enable to add carousel item anchor ids in the URL. Anchor ids allow linking to specific carousel items.
Carousel Anchor
Optionally set a custom anchor id. Required if the widget title field is empty.