Setup the Module's Layout/Size, Responsive Breakpoints and Background
Choose 'Slider' for a Module with multiple Slides, "Scene" for a single-scene Module, and Carousel for a Module with multiple Slides presented as a traditional slider carousel.
Choose 'Auto' to have the Module inherit the same width as your page's content container, 'Full Width' to have the module always stretch across the page, and 'Full Screen' to have the module adapt to the same size as the window.
How the Breakpoints Work
Breakpoints are essentially "reset" points for the module's resizing. They are similar to CSS media queries, where content sizing/styles can be adjusted depending on the screen size.
Activate a breakpoint for the device size. The module will then be resized based on the width (#2) and height (#3).
The width the Module should adapt to when the breakpoint occurs.
The height the Module should adapt to when the breakpoint occurs.
3. Advanced Sizes
1. Max Width
Set an optional maximum width for the module, regardless of the size of the container its placed inside. (Only available on "Auto" layout)
2. Min Height
Set an optional minimum height for the Slider. (Only available on "Auto" and "Fullscreen" layout)
3. Wrapper Max Height
Set an optional minimum height for the Slider. (Available on all three layout)
4. Keep Breakpoint Heights
The Module's height will always equal the height(s) set in the breakpoints.
5. Respect Aspect Ratio
Normally a module's height will never grow larger than its designated breakpoint height. Enabling this option effectively removes this restriction.
6. Grid = Module
The Layer's Area values will always equal the same size as the Module's outer container, which is based on how the Module fits inside your web page's content container.
7. Force Overflow Visible
Allow content to bleed outside the Module's outer container.
8. Fixed on Top
The Module will always be positioned at the top of the page. Useful for "sticky" menus.
4. Fullscreen Options
For FullScreen Layouts, you may want the Module to fit perfectly inside the window's viewport between a top menu, footer or other content. #1 and #2 below can be used to achieve this.
1. by Container
Enter a jQuery selector for the content you wish to make space for. For example, this could be your main menu's tag name or class name.
2. by PX or %
Decrease the Fullscreen Module's height by a specific amount of pixels.
3. Don't Force Fullwidth
Useful for when you'd like a "Full screen height" but still want your Module to fit inside the page's content container, which may have a boxed width.
5. Module Position within Wrapper
Useful if the module has a max-width and is placed inside a page's content container that's larger than the module's width.
2. Top/Bottom Margin
Add space above and below the module relative to the other content on your web page.
6. Module Background
7. Border, Overlay & Shadow
Add an optional mesh-type overlay to the Module for additional styling.
2. Shadow Type
Add one of 8 predefined shadow graphics to give the Module a 3D visual.
3. Gap (Border)
A value entered here will act as CSS padding for the module.