Layout Slider

The Layout Slider widget builds a slider where each frame is a full Page Builder layout. Each frame can have its own rows, columns and widgets, and its own background image, color and video.

Requirements

The frame content is built with Page Builder, so Page Builder must be active. Without it, the widget form only shows a message that asks you to install Page Builder.

To use this widget, go to PluginsSiteOrigin Widgets and activate Layout Slider.

You can use the Layout Slider widget in three places:

Page Builder: Add the SiteOrigin Layout Slider widget to a Page Builder layout in the Classic Editor or in the SiteOrigin Layout block.
Block Editor: Add the SiteOrigin Layout Slider 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 form has three sections: Slider frames, Slider Controls and Layout.

The Layout Slider widget form with Frame 1 open

Slider frames

Click Add to add a frame. Click a frame to open it. Use the icons on the right of a frame to duplicate or delete it. Each frame is one slide.

Content
Click Open Builder to build the frame’s layout. The builder works like Page Builder. Use Add Row and Add Widget to build the frame.

Background

Background image
Choose an image from the Media Library, or enter an external image URL. The widget uses the full size image.

The next three settings appear after you set a background image.

Image Alt Text
A text alternative for screen readers. Leave it empty for decorative images.

Background image type
Cover fills the frame with the image. Tile repeats the image at its own size. Default: Cover.

Background image opacity
A value from 0 to 100. Default: 100. Use a lower value with a dark Background color to darken the image and make text easier to read.

Background color
The frame background color. Default: #333333.

Destination URL
Makes the whole frame a link.

Open URL in a new window
Opens the Destination URL in a new tab. Default: off.

Background videos

Click Add below Background videos to add a video. Video files play muted.

Video file
Choose a video from the Media Library.

Video URL
An external video URL, such as a YouTube link. It overrides the Video file.

Autoplay
Autoplay can only be disabled for YouTube videos. This setting applies to embedded videos, such as YouTube. Video files always play automatically. Default: off.

Video format
The format of the video: MP4, WebM or Ogg. Default: MP4.

Loop slide background videos
Play the frame’s background videos in a loop. Default: off.

Background video opacity
A value from 0 to 100. Default: 100.

Slider Controls

The autoplay and navigation settings apply when the slider has more than one frame. The video settings also apply to a single frame.

Autoplay
Change frames automatically. Default: on.

Autoplay pause on hover
Pause autoplay while the pointer is over the slider. Appears when Autoplay is on. Default: off.

Animation speed
The length of the frame transition, in milliseconds. Default: 400.

Timeout
How long each frame shows, in milliseconds. Appears when Autoplay is on. Default: 8000.

Navigation color
The color of the arrows and pagination dots. Default: #FFFFFF.

Navigation style
The arrow style: Ultra thin, Thin, Medium, Thick, Rounded ultra thin, Rounded thin, Rounded medium or Rounded thick. Default: Thin.

Navigation size
The arrow size. Default: 25.

Always show navigation on desktop
Show the arrows and pagination dots at all times. By default, they show when the pointer is over the slider. Default: off.

Always show navigation on mobile
Show the arrows and pagination dots on mobile devices. By default, they are hidden on mobile. Default: off.

Pagination alignment
The position of the pagination dots: Left, Center or Right. Default: Right.

Swipe control
Let visitors swipe between frames on touch devices. Turn it off if it conflicts with another swipe script. Default: on.

Unmute icon
Show a button that unmutes and mutes background videos. Default: off.

Unmute icon position
Top right, Bottom right, Bottom left or Top left. Appears when Unmute icon is on. Default: Top right.

Use FitVids
Scale embedded videos, such as YouTube, to fill the width of the frame and keep their aspect ratio. Default: on.

Show slide background videos on mobile
Show background video files on mobile devices that support autoplay. Embedded videos, such as YouTube, always show. Default: on.

Layout

Desktop

Height
The frame height. Leave it empty to fit the content.

Top and bottom padding
The space above and below the frame content. Default: 50px.

Extra top padding
Extra space added above the content. Default: 0px.

Side padding
The space to the left and right of the content. Default: 20px.

Maximum container width
The maximum width of the content area. The background still fills the full width. Default: 1280px.

Mobile

These settings apply at and below the Responsive Breakpoint global setting (default 780px).

Height
The frame height on mobile. Leave it empty or set 0 to use the Desktop height.

Top and bottom padding
The space above and below the content on mobile. If you leave it empty, the frame has no top and bottom padding on mobile.

Extra top padding
Extra space added above the content on mobile.

Side padding
The space to the left and right of the content on mobile. Leave it empty to use the Desktop value.

Vertically center align slide contents
Center the content vertically in the frame. For exact centering, set Extra top padding to 0. Default: off.

A Layout Slider frame on the front end

Global Settings

Go to PluginsSiteOrigin Widgets and click Settings on the Layout Slider widget.

Responsive Breakpoint
The screen width at which the Mobile layout settings apply. Default: 780px. This is a widget setting. It is separate from the Page Builder Mobile Width setting.

The [slide_control] shortcode adds a link that moves the slider to another frame. Add it inside a frame, in a widget that runs shortcodes, such as the SiteOrigin Editor widget. The link controls the slider it is in.

The shortcode has two options:

  • slide: the frame to show. Use next, prev, previous, first, last or a frame number. Frame numbers start at 1. Default: next.
  • label: the link text. By default, the link text is “Next slide”, “Previous slide”, “First slide”, “Last slide” or “Show slide 3”.

Examples:

[slide_control]
[slide_control slide="3" label="See our pricing"]
[slide_control slide="first" label="Back to start"]

View a demo of the shortcode, or download the demo layout. To import it, open Page Builder and go to Layouts > Import/Export.

A slide_control shortcode in an Editor widget inside a Layout Slider frame

SiteOrigin Premium

SiteOrigin Premium adds these features to the Layout Slider widget:

  • Parallax Sliders: adds Parallax and Fixed to Background image type.
  • Block Animations: animate rows and widgets inside a frame. In the frame builder, the Animation Event setting adds a Slide Display event, and a Slide Out Animation setting runs when the frame leaves.
  • Multiple Media: select several images at once to create one frame for each image.
  • Anchor ID: adds Add slide anchor ID in the URL and Anchor ID to Slider Controls, so you can link to a frame.

Background image type options, including Premium Parallax