Module Configuration Panel

• Module Configuration Panel
  • Basic Tab
    • Title/Alias
    • Module Embedding Window
    • Type Section
    • Responsive Behavior Section
    • Size Limitations Section
  • Content Flow Tab
    • Content Flow Container Section
  • Advanced Tab
    • HTML Settings Section
    • Module Spacing Section
    • Module Position Section
    • 3D Perspective Section
    • Layer Scaling Between Devices

Module Configuration Panel

The Module Configuration panel is accessed by going to the Top Bar, then clicking Settings to open the Settings Sidebar.

In the Module Configuration panel you can configure core module settings such as the title, the type of module, and key layout and responsiveness controls.

The panel is split into three tabs:

• Basic ¹
• Content Flow ²
• Advanced ³

Basic Tab

In the Basic tab you can configure core settings, such as the module title and type, and key layout controls.

Title/Alias (Text)

Set the module’s title and alias.

By default the field is in title mode, and allows you to type in a plain language title. From this title an alias will automatically be generated.

To view this alias, or to manually edit it, click the # button at the end of the field to switch it into alias mode.

Module Embedding Window (Button)

Click the up arrow icon to the right of the title field to open the Module Embedding Window.

This window provides information on embedding the module, as well as copy-paste ready shortcodes and PHP snippets.

Type Section

In the Type section you can choose whether you want to create a Hero, Slider or Carousel type module. You can also opt to set it to use a full width or full height layout.

Type Buttons (Tab Switch)

Select the Type for the module.

Options:

• Hero: Single slide, navigation controls not active.
• Slider: Multiple slides, one slide visible at a time, navigation controls active.
• Carousel: Multiple slides, multiple slides visible at a time, navigation controls active.

Full Width (Toggle)

Set if the module should expand to the full width of the browser window.

Options:

• On: Module width always matches the width of the browser window.
• Off: Module width controlled by Content Flow Container settings.

Full Height (Toggle)

Set if the module should expand to the full height of the browser window. If so, the module will also expand beyond that height should the content require it.

The total height can have custom reductions set via the Decrease Module Height & Module Height Offset settings.

Options:

• On: Module height expands to at least the browser window height.
• Off: Module height controlled by Content Flow Container settings.

Responsive Behavior Section

In the Responsive Behavior section you can toggle a small set of key responsive controls.

Fixed Breakpoint Heights (Toggle)

Set if the module’s height should remain fixed between breakpoints.

If so, module height at each breakpoint is determined by the Content Flow Container height for the associated device size.

Options:

• On: Module height fixed between breakpoint.
• Off: Module height may be fluid between breakpoint.

Keep Aspect Ratio (Toggle)

Set if the module should keep its aspect ratio between breakpoints.

If so, at each breakpoint the module adopts the aspect ratio defined in the Content Flow Container for the associated device size. Between breakpoints the module maintains that aspect ratio by scaling height proportionately with width.

Options:

• On: Module maintains the aspect ratio.
• Off: Module height and width scaled independently.

Layer Upscaling (Toggle)

Visibility: Visible when Full Width = On and Full Height = Off. Hidden when Full Width = Off or Full Height = On.

Set whether layers can upscale if viewed on a screen larger than the largest of your Content Flow Container device sizes.

For example, if your largest Content Flow Container is Wide Screen size set to 1600px wide, layers viewed on a screen size of 1920px can expand up to the full width of that screen.

Options:

• On: Layers can upscale larger than the highest Content Flow Container size.
• Off: Layers cannot upscale larger than the highest Content Flow Container size.

Ignore Mobile Height Changes (Toggle)

Visibility: Visible when Full Height = On. Hidden when Full Height = Off.

Set whether to ignore viewport height changes caused by the mobile browser’s address bar being shown or hidden.

Options:

• On: Mobile browser address bar ignored in height calculations.
• Off: Mobile browser address bar included in height calculations.

Keep Content Flow Width (Toggle)

Visibility: Visible when Full Width = Off. Hidden when Full Width = On.

When Full Width is off, set whether the module’s maximum width should be the width of the Content Flow Container.

Options:

• On: Auto-adjusting module width caps at the current Content Flow Container width.
• Off: Auto-adjusting module width can exceed the current Content Flow Container width.

Size Limitations Section

In the Size Limitations section you can optionally cap the possible maximum height and/or width of the module.

Decrease Module Height (Toggle)

Visibility: Visible when Full Height = On. Hidden when Full Height = Off.

Enable the Module Height Offset setting, such that full height modules can have their total height decreased.

Options:

• On: Module height can be decreased according to the Module Height Offset setting.
• Off: Module height not decreased.

Module Height Offset (Text)

Visibility: Visible when Full Height = On and Decrease Module Height = On. Hidden when Full Height = Off or Decrease Module Height = Off.

Specify the amount by which full height modules should have their total height decreased.

The reduction amount can be set in a fixed pixel value, e.g. 50px.

The reduction amount can also be set to match the height of one or more elements on the page, specified by their CSS selectors.

For example, you could reduce a full height module by the combined height of the page’s header and top menu by providing their CSS selectors in a comma separated list such as #header,.top_menu

Options:

• CSS Selector(s), e.g. #header,.top_menu
• Pixel value, e.g. 50px

Min/Max Limitations (Toggle)

Enables settings (Max. Width, Min. Height, Max. Height) that allow minimum and maximum module height and width to be set.

Options:

• On: Min/max limitation settings enabled.
• Off: Min/max limitation settings disabled.

Max. Width (Number, px, range)

Visibility: Visible when Min/Max Limitations = On and Full Width = Off. Hidden when Min/Max Limitations = Off or Full Width = On.

Sets the maximum width of the module in pixels.

Options:

• 1px: Minimum value for maximum module width.
• 2400px: Maximum value for maximum module width.

Min. Height (Number, px, range)

Visibility: Visible when Min/Max Limitations = On and Full Height = On, or when Min/Max Limitations = On and Full Height = Off and Full Width = Off. Hidden when Min/Max Limitations = Off, or Full Height = Off and Full Width = On.

Sets the minimum height of the module in pixels. ¹

Options:

• 1px: Minimum value for minimum module height.
• 50000px: Maximum value for minimum module height.

Max. Height (Number, px)

Visibility: Visible when Min/Max Limitations = On. Hidden when Min/Max Limitations = Off.

Sets the maximum height of the module in pixels. ¹

Options:

• 1px: Minimum value for maximum module height.
• 50000px: Maximum value for maximum module height.

Content Flow Tab

In the Content Flow tab you configure the behavior of the Content Flow Container.

The Content Flow Container is the area within a module in which your content is laid out.

Content Flow Container Section

There are five possible device sizes you can activate Content Flow Container controls for:

• Wide Screen ¹
• Desktop ²
• Notebook ³
• Tablet ⁴
• Mobile ⁵

Each device size Content Flow Container has a toggle switch to enable it, and once active you can specify the width and height you want for that device.

You will then also be able to preview the layout for enabled device sizes on the stage via the Stage Size Switcher in the Top Bar.

Each of the listed sizes has a corresponding breakpoint that triggers it’s appearance for viewers. These breakpoints are set via the Plugin Dashboard, under Settings -> Global Settings -> Breakpoints -> Default Responsive Breakpoints.

Note that the widths of breakpoints and Content Flow Containers do not have to be the same. A breakpoint can trigger a smaller width Content Flow Container.

For example, a breakpoint of 1200px width could be configured to trigger a Content Flow Container of 1000px width.

Device Size (Toggle)

Activate width & height controls and for the Content Flow Container of the corresponding device size, i.e. Wide Screen, Desktop, Notebook, Tablet or Mobile.

Options:

• On: Width & height controls and previewing enabled for the device size.
• Off Width & height controls and previewing disabled for the device size.

Device Size Width (Number, px)

Set the width of an active device size’s Content Flow Container.

Options:

• 1px: Minimum value for the device size’s width.
• 2400px: Maximum value for the device size’s width.

Device Size Height (Number, px)

Set the height of an active device size’s Content Flow Container.

Options:

• 1px: Minimum value for device size’s height.
• 2400px: Maximum value device size’s height.

Advanced Tab

In the Advanced tab, you can configure a selection of HTML attributes, and additional layout & responsive controls.

HTML Settings Section

In the Advanced tab’s HTML Settings section, you can optionally specify custom selector names for the module, and set whether layer content should allow selection.

Module ID (Text)

Specify a custom ID for the module element.

Module Class (Text)

Specify a custom class for the module element.

Wrapper Class (Text)

Specify a custom class for the wrapper element.

Allow Layer Selection (Toggle)

Set whether layer content can be selected, e.g. using a mouse to select text content in text layer.

Options:

• On: Layer content can be selected.
• Off: Layer content cannot be selected.

Module Spacing Section (Toggle)

The Module Spacing section, if active, provides settings to control margin and padding for the module.

Options:

• On: Module Spacing settings enabled.
• Off: Module Spacing settings disabled.

Margin

Visibility: Visible if Module Spacing = On. Hidden if Module Spacing = Off.

Set margin size for the module via four fields, each of which controlling margin on one side: top, right, bottom, left.

When you hover over one of the margin fields, the icon on the left will light up the side being controlled by that field.

Options:

• 0px: Minimum value for module margin.
• 1500px: Maximum value for module margin.

Padding

Visibility: Visible if Module Spacing = On. Hidden if Module Spacing = Off.

Set padding size for the module via four fields, each of which controlling padding on one side: top, right, bottom, left.

When you hover over one of the padding fields, the icon on the left will light up the side being controlled by that field.

Options:

• 0px: Minimum value for module padding.
• 1500px: Maximum value for module padding.

Module Position Section (Toggle)

The Module Position section, if active, allows you to fix the module at the top of the page, and to determine the visibility of overflowing portions of the module.

Options:

• On: Module Position settings enabled.
• Off: Module Position settings disabled.

Fixed on Top (Toggle)

Visibility: Visible if Module Position = On. Hidden if Module Position = Off.

Set whether the module’s position should be fixed at the top of the page. For example, you may wish to create a navigation menu module and have it always stay accessible.

Options:

• On: Fix module at top of page.
• Off: Module in normal page flow.

Overflow (Dropdown)

Visibility: Visible if Module Position = On. Hidden if Module Position = Off.

Set whether layer content that overflow outside the Content Flow Container should be visible or hidden.

Options:

• Visible: Overflowing layer content is fully visible.
• Hidden: Overflowing layer content is hidden.

3D Perspective Section (Toggle)

The 3D Perspective section, if active, gives configuration settings for the type and depth of 3D projection used where 3D transforms area applied to a layer.

Options:

• On: 3D Perspective settings enabled.
• Off: 3D Perspective settings disabled.

Projection (Dropdown)

Visibility: Visible if 3D Perspective = On. Hidden if 3D Perspective = Off.

Sets the type of 3D projection used on layers with 3D transforms applied to either isometric or perspective, and whether that projection should apply to all layers or be set per layer.

Options:

• Isometric (All Layers): Sets projection depth to zero. Creates isometric projection.
• Perspective (All Layers): Allows you to set a custom projection depth across all layers, via the All Layers setting.
• Perspective (Per Layer): Allows you to set projection depth on a per layer basis.

All Layers (Number, px, range)

Visibility: Visible if 3D Perspective = On and Projection = Perspective (All Layers). Hidden if 3D Perspective = Off or Projection = Isometric (All Layers) or Projection = Perspective (Per Layer).

Options:

• 0px: Minimum 3D projection depth. Creates an isometric projection, i.e. the minimum illusion of depth.
• 2400px: Maximum 3D. Creates a perspective projection with the maximum possible illusion of depth.

Layer Scaling Between Devices (Toggle)

The Layer Scaling Between Devices section, if active, provides settings that enable additional layer scaling between device sizes.

Options:

• On: Layer Scaling Between Devices settings enabled.
• Off: Layer Scaling Between Devices settings disabled.

Position (Toggle)

Visibility: Visible if Layer Scaling Between Devices = On. Hidden if Layer Scaling Between Devices = Off.

Set whether layer positions should be smoothly recalculated in between device sizes, or whether they should stay in place and adjust positions only at breakpoints.

Options:

• On: Layer positions recalculated between device sizes.
• Off: Layer positions fixed between device sizes.

Size & Motion (Toggle)

Visibility: Visible if Layer Scaling Between Devices = On. Hidden if Layer Scaling Between Devices = Off.

Set whether layers and their animations should be smoothly resized in between device sizes, or whether they should stay at a fixed size adjusted only at breakpoints.

Options:

• On: Layers and their animations resized between device sizes.
• Off: Layers and their animation sizes fixed between device sizes.

Text (Toggle)

Visibility: Visible if Layer Scaling Between Devices = On. Hidden if Layer Scaling Between Devices = Off.

Set whether text font sizes and line-heights should be smoothly recalculated in between device sizes, or whether text should stay fixed and be adjusted only at breakpoints.

Options:

• On: Text sizing recalculated between device sizes.
• Off: Text sizing fixed between device sizes.

Padding (Toggle)

Visibility: Visible if Layer Scaling Between Devices = On. Hidden if Layer Scaling Between Devices = Off.

Set whether layer padding amounts should be smoothly recalculated in between device sizes, or whether padding should stay fixed and be adjusted only at breakpoints.

Options:

• On: Layer padding recalculated between device sizes.
• Off: Layer padding fixed between device sizes.