Carousel

Introduce overlay themes, customizable navigation, and Layout Builder integration to carousels, enriching visuals and user interaction with detailed content control. Additionally, the Carousel Addon includes the Post Carousel Cards widget, which displays posts in sleek, elevated card layouts with flexible meta display options, further enhancing your site’s content presentation.

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:

• Anything Carousel Widget Documentation
• Post Carousel Widget Documentation

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.

Post Carousel Cards

View Cards Carousel Widget demo.

The Carousel Addon adds a new widget – Post Carousel Cards – that displays your posts in a sleek carousel with modern, elevated card layouts. This widget features clean typography and flexible meta display options, allowing you to show post meta details either Below Title or On Featured Image Hover.

The following settings are available in the Post Carousel Cards Widget:

Design

Container
Customize the card container appearance with options for background color, border radius (default: 8px), and drop shadow settings including color, horizontal offset, vertical offset, blur, and spread.

Content Container
Adjust the padding for the content area within each card. Defaults to 24px 24px 32px 24px.

Content Options

Featured Image
Toggle the display of the post’s featured image within each card.

Post Content
Select how to display the post content. Options include displaying nothing, a post excerpt (with a configurable excerpt length), or the full post content. Optionally, enable a “Read More” link and customize its text.

Post Meta

Display
Choose the placement for post meta information. Select between displaying meta details Below Title or On Featured Image Hover.

Post Date
Enable the post date display and configure the date format.

Categories
Toggle the display of post categories and adjust their styling—including font, size, color, and hover color.

Navigation

Arrow Color
Customize the navigation arrow color and hover color.

Dots
Set the navigation dots color and the selected/hover color, as well as the top margin between the cards and the navigation elements.

Responsive

Configure settings for various devices:

• Desktop: Set the number of slides to show and scroll per navigation click or swipe. Enable or disable navigation arrows and dots. Defaults: 3 slides.
• Tablet – Landscape: Define the breakpoint, slides to show and scroll, and toggle navigation arrows and dots. Defaults: breakpoint at 1366px with 3 slides.
• Tablet – Portrait: Define the breakpoint, slides to show and scroll, and toggle navigation arrows and dots. Defaults: breakpoint at 1025px with 2 slides.
• Mobile: Set the breakpoint, slides to scroll, and enable or disable navigation arrows and dots. Defaults: breakpoint at 480px with 1 slide.

Equal Card Heights

Equal Card Heights
Enable this option to ensure all cards in the carousel maintain a uniform height. When activated, the widget automatically adjusts card heights to match the tallest card.