Layout Slider

Design responsive slider frames with unique layouts, backgrounds, and content built with Page Builder.

Requirements

To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Layout Slider Widget.

The Layout Slider Widget is ready to be used anywhere:

Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.

Slider Frames

Click the Add link to begin adding your first slide. Click the down arrow icon to edit a slide, the page icon to edit a slide, and finally, the cross icon to delete a slide. When clicking the down arrow icon to edit, you’ll find the following settings:

Content

Click the Open Builder button to add content to the slider frame. The builder is a mini instance of Page Builder. Use the Add Row and Add Widget buttons to get started.

Layout Slider Frame Specific Animation Event
The SiteOrigin Premium Block Animations addon offers an animation event for frame rows and widgets. To make use of this event, edit a Layout Slider widget, open a frame, and click the Open Builder button. Edit a row or widget, open the Animations section in the right column, and check the Animation Event drop-down. In addition to Element Enters Screen, Element In Screen, Page Load, and Hover, you’ll find a new event option labeled Slide Display. If selected, your animation will be triggered when the slide is displayed.

Background

Background image
Use the Choose Media, Image Search, or External URL fields to add a background image.

Background image type
Set the background image type. Choose between cover, tile or parallax. Parallax is added by the Parallax Addon in SiteOrigin Premium.

Background image opacity and background color
Use these settings to insert an overlay on your background image. For example, if you set your background color to black and set the opacity to 80, your background image will be darkened. This effect is used to make the content that appears on top of the background image, easier to read. It’s also a nice way to standardize a series of images.

Destination URL
If you’d like to link the slide, enter a destination URL, or use the Select Content button to do so.

Open in new window
Enable to open the above link in a new window.

Background videos

Use this section to add a background video to your slide frame. Click the Add link to begin adding your first video. Click the down arrow icon to edit a video, the page icon to edit a video, and finally, the cross icon to delete a video. When clicking the down arrow icon to edit, you’ll find the below settings. Please note that only one background video is suitable. If you’d like to add more than one background video format, this can be done using the Add link.

Video file
Select the video file from your media library or upload a video.

Video URL
Optionally enter the URL of an externally hosted video.

Autoplay
Enable to autoplay the background video, currently only for YouTube videos.

Video format
Use the drop-down menu to select the video format being used.

Loop slide background videos
Enable to loop the slide background videos.

Background video opacity
Set the slide background video opacity.

Slider Controls

Autoplay
Change slides automatically without user interaction.

Autoplay pause on hover
If autoplay is enabled, pause the slider on hover.

Animation speed
Slider animation speed in milliseconds.

Timeout
How long each frame is displayed in milliseconds.

Navigation color
Select the slider navigation color. The navigation refers to the left-right arrows and dots at the bottom right, representing each slide.

Navigation style
Choose from the following options:

  • Ultra thin
  • Thin
  • Medium
  • Thick
  • Rounded ultra thin
  • Rounded thin
  • Rounded medium
  • Rounded thick

Navigation size
Sets the size of the navigation arrows only.

Always show navigation on desktop
Navigation is normally displayed on hover. Enable to always show the slider navigation on desktop devices.

Always show navigation on mobile
Navigation is normally displayed on hover. Enable to always show the slider navigation on mobile devices.

Swipe Control
Allow users to swipe through frames on mobile devices.

Unmute icon
Slide background videos are muted. Enable to display an unmute/mute icon. Only applies to self-hosted videos.

Unmute icon position
This setting will be displayed if the Unmute icon setting is enabled. Select the Unmute icon position. Choose between Top right, Bottom right, Bottom left, or Top left.

Show slide background videos on mobile
Allow slide background videos to appear on mobile devices that support autoplay.

Layout

Desktop

The layout settings section for desktop devices.

Height
Optionally enter a height for the Layout Slider.

Top and bottom padding
Enter a top and bottom padding for the slider. This can be used to position content.

Extra top padding
Use this setting to add extra padding to the top of the slider.

Side padding
Use this setting to set the right and left side padding.

Maximum container width
Set the content maximum container width. This applies to the width of the content area within the slider and not the background image. Perfect for controlling the size of each slide’s content.

Mobile

The layout settings section for mobile devices.

Height
Optionally enter a height for the Layout Slider.

Top and bottom padding
Enter a top and bottom padding for the slider. This can be used to position content.

Extra top padding
Use this setting to add extra padding to the top of the slider.

Side padding
Use this setting to set the right and left side padding.

Vertically center align slide contents
For perfect centering, consider setting the Extra top padding setting to 0 when enabling this setting.

Navigation Shortcode

View a demo of the navigation shortcode in use.

Download the demo JSON layout.

Unzip after downloading. JSON layouts can be imported in Page Builder via LayoutsImport/ExportSelect Import File.

The Layout Slider offers a navigation shortcode, [slide_control]. The shortcode can be inserted into each slide as required and offers the following options:

  • label: Optional label to use as navigation text.
  • slide: Which slide to navigate to. Options are:
    • first
    • last
    • prev
    • previous
    • next
    • A numerical slide number, e.g: 3

The slide number is not zero-based. Linking to slide 3 will take the user to the third slide.

Example shortcode:

[slide_control slide="3"]

Using the Shortcode in a Button Widget

It’s possible to indirectly apply the slide control shortcode in a SiteOrigin Button widget within the Layout Slider. The following Button widget fields are required:

Button text
Insert button text as required. For example “Show Slide 1”.

Destination URL
Enter a hash followed by the slide number you’d like to navigate to. For example, to navigate to the first slide, insert #1.

Button classes
Open the Other attributes and SEO section to locate the Button classes field. Insert the following class name:

sow-slide-control

Custom CSS Customizations

CSS rules can be inserted at AppearanceCustom CSS if you’re using SiteOrigin CSS or CustomizeAdditional CSS.

Navigation on Desktop and Mobile

.sow-slide-nav[style],
.sow-slider-base .sow-slider-pagination[style] {
	display: block !important;
}

Center Pagination

.sow-slider-base .sow-slider-pagination {
    text-align: center;
}

Advanced Customizations

Change to a Specific Slide Using a Text Link

View a demo of this advanced customization.

Download the demo JSON layout. advanced-layout-slider-customizations

Unzip after downloading. JSON layouts can be imported in Page Builder via LayoutsImport/ExportSelect Import File.

This customization allows for a text link to be inserted into one of your SiteOrigin Layout Slider frames (slides). When clicked, the link will change the Layout Slider to the chosen slide.

* We’ll be using the terms frame and slide interchangeably. “slides” are labeled “frames” in the Layout Slider widget.

In this example, we’ll use a Layout Slider with three slides. In each slide, we’ll insert a text link that links to the next slide.

Somewhere on your page, the following script should be inserted. One option is to use a Custom HTML widget above or below the Layout Slider. Other options include using a Header and Footer scripts plugin to insert the script in the header or footer of your chosen page. You could also use a plugin like Code Snippets or a child theme if you have experience with PHP conditional statements, and using WordPress hooks.


<script>
	jQuery( function( $ ) {

		$( '.direct-2' ).on( 'click', function( event ) {
			event.preventDefault();
			$( '.sow-slider-images' ).cycle( 1 );
		} );

		$( '.direct-3' ).on( 'click', function( event ) {
			event.preventDefault();
			$( '.sow-slider-images' ).cycle( 2 );
		} );

		$( '.direct-1' ).on( 'click', function( event ) {
			event.preventDefault();
			$( '.sow-slider-images' ).cycle( 0 );
		} );

	} );
</script>

$( '.sow-slider-images' ).cycle( 1 ); is used to select the slide that the text link with class name direct-2 will go to. The index is zero-based so the 1 you see above will take the user to the 2nd slide.

Next, edit the first slide and insert the following text link using a Custom HTML, Text, or SiteOrigin Editor widget.

<a class="direct-2" href="#">Show slide 2</a>

Repeat the process for the second slide; the link is as follows:

<a class="direct-3" href="#">Show slide 3</a>

Finally, insert the text link into the last slide as follows:

<a class="direct-1" href="#">Show slide 1</a>