Slides

One frame of a slider: its background, its copy and its buttons. Slides belong to a Slider.

You will find it in the WordPress admin menu as Slides, stored as canvas_slide.

What You Get

These decide where items appear and what you can do with them:

• One item is called a Slide.
• Items have no page of their own: they are placed inside other pages.
• Editor features: autosave, editor, page-attributes, title.

Demo

A panel on the Slide edit screen, holding these settings:

• Demo

  Load this demo's stylesheet, fonts and scripts on this content, and add its body class. Leave as None for content that is not part of a demo.

• Demo Role

  Marks this content as the demo's cart, checkout or other named piece, so the demo can link to it without storing an ID. Free-form; used with the Demo above.

  Shown when Demo is set

Slider Assignment

A panel on the Slide edit screen, holding these settings:

• Assign to Slider

Background

A panel on the Slide edit screen, holding these settings:

• Background Type

• Background Image

• Background Position

  CSS background-position for the photo, e.g. "center 20%" to hold a subject near the top of the frame. Leave empty for the theme default.

  Shown when Background Type is "image"

• Background Gradient Overlay

  CSS gradient painted over the background image, e.g. to darken a photo behind light caption text. Leave empty for the image alone.

  Shown when Background Type is "image"

• Gradient Overlay Output

  Which CSS property paints the gradient and the photo together. Shorthand also restates the repeat, position and size inline; Image only writes background-image and leaves the sizing to the stylesheet. Both render the same slide.

  Shown when Background Type is "image"

• Video URL

  Shown when Background Type is "video"

• Video Loop

  Shown when Background Type is "video"

• Video Muted

  Shown when Background Type is "video"

• Video Autoplay Attribute

  Adds the HTML autoplay attribute to the tag so the browser starts it without waiting for the slider script.

  Shown when Background Type is "video"

• Preferred Format

  Which encoding the browser is offered first. It plays the first one it supports.

  Shown when Background Type is "video"

• Video URL (WebM)

  Optional second source served to browsers that prefer WebM. Emitted after the MP4 source.

  Shown when Background Type is "video"

• Video Overlay Colour

  Tint painted over the background video so caption text stays legible. Empty renders no overlay.

  Shown when Background Type is "video"

• Video Element ID

  HTML id put on the video tag so a play control or your own styles can address it. Empty leaves the tag unidentified.

  Shown when Background Type is "video"

• Play / Pause Control

  Adds a play button over the caption that starts and stops this slide's video.

  Shown when Background Type is "video"

• Control ID

  HTML id on the play control. It is also the styling hook, so keep the default unless you are styling it yourself.

  Shown when Play / Pause Control is "1"

• Play Icon

  Shown when Play / Pause Control is "1"

• Pause Icon

  Shown when Play / Pause Control is "1"

• YouTube URL

  Shown when Background Type is "youtube"

• YouTube Quality

  Shown when Background Type is "youtube"

• YouTube Start Time (s)

  Shown when Background Type is "youtube"

• YouTube Stop Time (s)

  Shown when Background Type is "youtube"

• Vimeo URL or ID

  Renders as a muted, looping background embed. The Background Image is used as a fallback while the video loads.

  Shown when Background Type is "vimeo"

Buttons

A panel on the Slide edit screen, holding these settings:

• Button Text

• Button URL

• Button Classes

  CSS classes on the button. Empty keeps the default slider button styling.

• Button Animation

• Button Delay (ms)

• Button Text

• Button URL

• Button Animation

• Button Delay (ms)

Caption

A panel on the Slide edit screen, holding these settings:

• Title

• Title Tag

• Title Animation

• Title Delay (ms)

• Title Classes

  Extra CSS classes on the caption heading, e.g. font/transform utilities.

• Description

• Description Classes

  Extra CSS classes on the caption paragraph. Empty keeps the default d-none d-sm-block.

• Description Animation

• Description Delay (ms)

Nested Slider

A panel on the Slide edit screen, holding these settings:

• Slider

  Renders this slider inside the slide. The slide's own caption and background are not used.

• Nested Slider Class

  Class on the nested slider, so each column can be styled and addressed separately.

  Shown when Slider is set

• Direction

  Shown when Slider is set

• Slides Per View (Tablet)

  Shown when Slider is set

• Slides Per View (Desktop)

  Shown when Slider is set

• Arrow ID Prefix

  Gives the nested arrows ids like sw1-arrow-top and sw1-arrow-bottom. Empty renders no arrows.

  Shown when Slider is set

• Previous Arrow Icon

  Shown when Slider is set

• Next Arrow Icon

  Shown when Slider is set

Slide Settings

A panel on the Slide edit screen, holding these settings:

• Color Scheme

• Caption Position

  For meta-based slides only. Slides with block-editor content control their own layout.

Related

Other Canvas content types: Copyrights, Events, Footers, Forms, Headers, Heroes.