Slider Setup

After creating a new slider, select the “Edit Settings” button as shown in the following screenshot to adjust your slider’s main settings.

You’ll then have the option to choose your slider’s content source.  “Default Slider” will be selected by default, but as described below, there are several additional options you can choose from.

Where the slider’s Title and Alias are defined.

The famous, traditional Slider Revolution.

Essentially a “one slide” Slider.  When selected, multi-slide options such as navigation, autoplay, etc. will be hidden from the slider’s main settings automatically.

When selected, a new Carousel Settings section will become visible where you can setup a wide variety of carousel views.

Load a settings preset template for your current slider, or save the slider’s currently selected settings as a preset template to be used for future sliders.

The default “responsive” layout.  The slider will always inherit the width of its immediate HTML container, allowing it to fit seamlessly inside your theme’s page layout.

Slider will always stretch across the entire width of the screen.

Slider will always become the same size as the entire screen size.

In order to properly resize content in the slider, the slider needs starting point size values in order to make the responsive calculations.

For example, let’s say you have an “Auto” layout, with a “Layers Grid Width” of “1000px”.  But then let’s say the slider is placed inside your web page, which has a content container width of 2000px.  In this example, because the theme’s content container width (2000px) is literally 2x the slider’s “Grid Width” (1000px), all of the slider’s content will scale up to 200% its original size.

So let’s say you have a text layer with a 24px font-size.  In the above scenario, the text size would scale up to 48px.

But now let’s say the slider were viewed on a mobile device with a screen width of 250px wide.  Because 250px is 1/4 the size of the slider’s “Grid Width”, the content would be scaled down to 1/4 its original size, which means a text layer with a 24px font-size would then become 6px.

Now in the above scenario, text with a 6px font size is often too small to visibly read, which is why we decided to create “Dynamic Grid Sizes” (shown in screenshot below).  Essentially what this does is allow you to style your content for 4 different screen sizes.  For example, instead of the default resizing behaviour described in the scenario above, you could specifically set the font size for “Tablet” to be 16px, allowing for a much better text-readability experience.

An easy way to think about this is to compare it to CSS Media Queries, where the “max-width” in a media query would be the “Grid Width” in the screen options below.

In order to enable the ability to design content for multiple screen sizes, you first need to set the “Custom Grid Size” to “On” as shown in the screenshot above.

Then once you’ve activated at least one “Custom Grid Size”, when you edit a slide, you can set different styles (such as varying font-sizes) for each enabled “Custom Grid Size”.

For advanced layout options, click the “Show Advanced Size Options” button: