Carousel

8 min read Updated

The Carousel addon adds features to the carousel widgets of the SiteOrigin Widgets Bundle. You can build Anything Carousel items with Page Builder, show posts in the Post Carousel with the Overlay theme, and show posts as cards with the Post Carousel Cards widget.

For the other carousel settings, see the Anything Carousel and Post Carousel widget documentation.

Requirements

Go to SiteOriginPremium Addons and activate Carousel. While the addon is active, it keeps the Post Carousel and Post Carousel Cards widgets active. To use the Anything Carousel features, also activate Anything Carousel at PluginsSiteOrigin Widgets.

The addon adds a Content Type setting to each item of the Anything Carousel widget. Use it to build an item with Page Builder rows, columns and widgets, for example a testimonial with an image and a button.

  1. Open an Anything Carousel widget and expand an item in Items.
  2. Below Title, set Content Type to Layout builder.
  3. Under Content, click Open Builder.
  4. Add rows and widgets, then close the builder.
  5. Save the widget.

A carousel item with Content Type set to Layout builder

Content Type
Text shows the normal text editor. Layout builder shows a Page Builder field in its place. Default: Text.

Rows in the item builder have no Row Layout setting, because full width rows don’t fit in a carousel item. If Page Builder is not active, a Layout builder item shows “This field requires Page Builder.” on the page.

Post Carousel: Overlay Theme

The addon adds a Theme setting to the Post Carousel widget. The Overlay theme shows each post as a tall image. The post categories and title show on the image, over a dark shade at the bottom. The arrows and navigation dots show below the carousel.

The Premium Overlay theme in the Post Carousel widget

Theme
At the top of the Design section. Choose Default or Overlay. Default: Default.

When you choose a theme, the widget loads that theme’s values into its settings. This replaces the values you set before. The change can take a couple of seconds. The addon also moves the Post Title section above Post Thumbnail in Design, for both themes.

Overlay sets Featured Image Size to a 360 by 476 pixel crop. WordPress creates this size when you upload an image while the addon is active. For older images, use a plugin that regenerates thumbnails.

Overlay Settings

These settings show only when Theme is Overlay. The defaults are the values the Overlay theme loads.

Settings: Navigation Dots
Show navigation dots below the carousel. The Default theme has no dots. Default: on.

Post Thumbnail: Thumbnail Overlay Color
The color of the shade at the bottom of each image. The shade fades from clear to this color. Default: #000.

Post Thumbnail: Border Radius
The corner rounding of each image, from 0 to 100 pixels. Default: 8.

Category: Color
The text color of the category labels. On hover, the text and background colors swap. Default: #F14E4E.

Category: Font Size
Default: 12px.

Category: Background Color
The background of the category labels. Default: #ffffff.

Navigation: Dots Color
Default: #bebebe.

Navigation: Dots Selected and Hover Color
The color of the current dot and of a dot on hover. Default: #f14e4e.

Navigation: Navigation Top Margin
The space between the posts and the navigation. Default: 38px.

Responsive: Slides to Show
The number of posts in view. Each device group has this setting. The fields show the default value in grey: Desktop 3, Tablet Landscape 3, Tablet Portrait 2 and Mobile 1.

Responsive: Navigation Dots
Show the dots on this device. Each device group has this setting.

Overlay also sets values in free settings. Post Title: Font Montserrat 600, Font size 20px, Color #ffffff. Navigation: Arrow Color #626262, Arrow Hover Color #f14e4e. Responsive > Desktop: Slides to Scroll 3.

Overlay hides Thumbnail Overlay Hover Color, Thumbnail Overlay Hover Opacity, and the arrow Background and Hover Background.

Post Carousel Cards Widget

The addon adds the SiteOrigin Post Carousel Cards widget. It shows posts in a carousel of cards. By default, each card has the featured image, the title, the post meta (date and categories) and an excerpt. In Settings, you can turn off the image, the date, the categories and the content. The arrows show at the sides of the carousel, and the dots show below it.

The Post Carousel Cards widget with three post cards, navigation arrows and dots

You can use the widget in three places:

Page Builder: Add the SiteOrigin Post Carousel Cards widget to a Page Builder layout in the Classic Editor or in the SiteOrigin Layout block.
Block Editor: Add the SiteOrigin Post Carousel Cards block. It is in the SiteOrigin category of the block inserter.
Widget areas: Add the widget to any theme or plugin widget area.

The widget has the settings of the Post Carousel widget, without Link Target, the Post Thumbnail design section, and the arrow Background and Hover Background. It also has Navigation Dots in Settings, and Slides to Show and Navigation Dots in each Responsive device group. The settings below are the ones the widget adds.

Settings

These fields are at the end of the Settings section.

Featured Image
Show the featured image at the top of each card. Posts with no featured image use the Default Thumbnail, if you set one. Default: on.

Post Content
None, Post Excerpt or Full Post Content. Choose Full Post Content if your posts use the “more” tag. The card then shows the content up to the “more” tag. Default: Post Excerpt.

Excerpt Length
The number of words in the excerpt. Shows when Post Content is Post Excerpt. Default: 55.

Post Excerpt Read More Link
Add a read more link below the content. Shows when Post Content is Post Excerpt or None. Default: off.

Post Read More Link Text
The text of the read more link. Shows when Post Excerpt Read More Link is on. Default: Read More.

Show Post Date
Default: on.

Post Date Format
Default (the Date Format at SettingsGeneral), yyyy-mm-dd, mm/dd/yyyy or dd/mm/yyyy. Shows when Show Post Date is on. Default: Default.

Show Post Categories
Show the post categories. Below the title, the card shows the first category. On the featured image, it shows up to two. Default: on.

Add Link Overlay
Make the whole card a link to the post. Default: off.

Open Link in New Window
Open the card link in a new browser tab. Shows when Add Link Overlay is on. Default: off.

Equal Card Heights
Make the cards in view as tall as the tallest card in view. Default: on.

Dynamic Navigation Position
When on, the arrows and dots move up or down as the height of the cards in view changes. When off, the carousel keeps the height of its tallest card, so the navigation stays in one place. Shows when Equal Card Heights is on. Default: on.

Design

Container styles the card box:

  • Background: Default: #fff.
  • Border Radius: Default: 8px.
  • Drop Shadow Color: Default: rgba(0,0,0,0.08).
  • Drop Shadow Horizontal Offset: Default: 0.
  • Drop Shadow Vertical Offset: Default: 4px.
  • Drop Shadow Blur: Default: 8px.
  • Drop Shadow Spread: Default: 0.

Content Container has Padding, the space around the text in each card: top, right, bottom and left. Default: 24px 24px 32px 24px.

Post Title has the Post Carousel settings with other defaults: HTML Tag H3, Font Montserrat 600, Font size 18px and Color #2d2d2d. It adds Title Hover Color. Default: #626262.

Post Meta sets where the date and categories show. At the top of the section, choose one:

  • Below Title: the post meta shows below the post title. Default.
  • On Featured Image Hover: the post meta shows over the featured image when a visitor hovers over it.

Some Post Meta settings show only for one placement:

  • Bottom Margin: the space below the post meta. Below Title only. Default: 20px.
  • Featured Image > Overlay Color: the color over the image on hover. On Featured Image Hover only. Default: rgba(45,45,45,0.8).
  • Date: Font Size (default 14px), Font (default Open Sans) and Color (default #929292 below the title, #fff on the image).
  • Post Categories: Font Size (default 13px below the title, 14px on the image), Font, Color (default #2d2d2d below the title, #fff on the image) and Color Hover (default #f14e4e). At the moment, the Font setting has no effect.

Post Content styles the excerpt or content:

  • Font: Default: Open Sans.
  • Font Size: Default: 14px.
  • Color: Default: #626262.
  • Read More > Color: Default: #f14e4e.
  • Read More > Color Hover: Default: #626262.

Navigation has Arrow Color (default #2d2d2d) and Arrow Hover Color (default #626262), and adds these settings:

  • Dots Color: Default: #bebebe.
  • Dots Selected and Hover Color: Default: #f14e4e.
  • Dots Top Margin: the space between the cards and the dots. Default: 40px.

Advanced Customizations

Add PHP snippets with a plugin such as Code Snippets, or in a child theme’s functions.php file.

Change the Space Between Cards

The Post Carousel Cards widget adds 12 pixels of space on each side of each card. This snippet changes it to 20 pixels.

add_filter( 'siteorigin_premium_carousel_card_item_gap', function() {
	return 20;
} );

Match All Card Heights

With Equal Card Heights on, only the cards in view match. This snippet makes every card in the carousel as tall as the tallest card.

add_filter( 'siteorigin_premium_post_carousel_cards_equal_heights_across_carousel', '__return_true' );

Change the Number of Categories

The Post Carousel Cards widget shows one category below the title and up to two on the featured image. This snippet shows up to three in both places.

add_filter( 'siteorigin_widgets_post_carousel_number_of_categories_to_show', function() {
	return 3;
} );