Layer Panel

• Layer Panel
  • Slide Background Section
  • Text Section
  • Image Content Section
  • Audio Content Section
  • SVG Content Section
  • Video Content Section
  • Container Structure Section
  • Position & Size Section
  • Content Behavior Section
  • Layout Behavior Section
  • Resize Between Devices Section
  • Set Layer Sizes Section

Layer Panel

To access the Layer panel, select a layer via the Canvas or Layers sidebar, and in the Right Sidebar click the Design icon ¹ to enter Design Mode. Then click the Layer tab icon ² to open the Layer Panel.

In the Layer panel you can configure several fundamental aspects of your layer, such as text content, image & video content, and layout behaviors.

Slide Background Section

Select the Slide Background layer then use the Slide Background section to configure its content.

Content Type (Dropdown)

Set whether the Slide Background should be filled with color, an image, or a video.

Options:

• _Color: Enables the Slide Background Color setting below, where you can set a flat color or a gradient.
• _Image: Enables an Image Content section below, where you can set the Slide Background image.
• _Video: Enables a Video Content section below, where you can set the Slide Background video.

Slide Background Color (Color Swatch)

Displays the currently applied Slide Background color. Click the color swatch to open a Color Picker window and set a new Slide Background color.

Text Section

Use the settings in the Text section to configure Text layers.

Note that font icon layers are also configured via this section, as they are standard Text layers used to display font icons.

Text Align (Align Switch)

Set the horizontal alignment of the text layer.

Options:

• _Left
• _Center
• _Right
• _Justify

Icon (Button)

Click to open a font icon browsing panel.

Select an icon to insert it into the Content text area as an HTML snippet.

Meta (Button)

Click to open a meta tag browsing panel.

Meta tags fetch data such as WordPress site and post info, social media feed details, WooCommerce product information, and event specifics.

Select meta tag to insert it into the Content text area as an HTML snippet.

Content (Text Area)

Enter the content that should appear in the Text layer.

AI Text Generation (Button)

Located in the bottom right corner of the Content field. Click to open the AI Text Generation tool.

AI Text Generation Tool

Opens the text ¹ from the Content text area, such that it can be edited with the assistance of integrated AI.

Select a type of AI processing to apply ², then click Generate ³ to initiate processing.

Once processing is complete, choose an option (if multiple options were generated) or continue editing.

Line Wrap (Dropdown)

Configure how text lines wrap and break within the layer.

Options:

• _Auto: Lines wrap to stay within the layer’s width. Lines break if there are line-breaks, new lines or <br> tags in the Content text area.
• _{Content Width}: Lines wrap to stay within the layer’s width. <br> tags create line-breaks, but line-breaks or new lines in the Content text area are ignored.
• _{Any Content Breaks}: Lines break only if there are line-breaks, new lines or <br> tags in the Content text area.
• _{Only <br> tags}: Lines break only where <br> tags are placed in the Content text area.

Image Content Section

Use the settings in the Image Content section to configure Image layers.

Thumbnail (Image Preview & Buttons)

Displays a preview of the currently selected image.

Hover over the preview image to access buttons to replace the current image via the WordPress library ¹, the Slider Revolution Elements library ², or with a new AI-generated image ³.

Image Alignment (3×3 Checkbox Grid)

Set the alignment of the image within its own layer. This is useful when the image has a different aspect ratio to the layer, allowing you to control which portion of the image is visible.

The 3×3 grid represents the corners and edges of the layer, e.g. to align top left choose the top left checkbox.

Custom Align (Checkbox)

When active, allows you to use the Image X Position and Image Y Position settings to configure an alignment not provided for by the Image Alignment setting.

Options:

• _Enabled: The Image X Position and Image Y Position settings become editable, allowing you to configure custom image alignment.
• _Disabled: The Image X Position and Image Y Position settings are read only, showing the alignment set via the Image Alignment setting.

Image Size (Dropdown)

Set how the image is sized, and if it repeats, within the layer.

Options:

• _Cover: Ensure the image covers the whole layer, even if some areas are not visible.
• _Contain: Ensure the full image is contained inside the layer and visible, even if some areas of the layer are empty.
• _Auto: Image displays at its actual dimensions, regardless of layer dimensions.
• _%: Set the image width, relative to the layer’s width.
• _px: Set the image width in pixels, independently of the layer’s width.
• _{Repeat X}: Tile the image horizontally within the layer.
• _{Repeat Y}: Tile the image vertically within the layer.

Image X Position (Number, percentage)

Shows the horizontal position of the image within the layer, as a percentage.

When the Custom Align setting is disabled Image X Position is read only, showing the alignment settings drawn from the Image Alignment setting.

When Custom Align is enabled Image X Position can be edited with a custom percentage value.

Image Y Position (Number, percentage)

Shows the vertical position of the image within the layer, as a percentage.

When the Custom Align setting is disabled Image Y Position is read only, showing the alignment settings drawn from the Image Alignment setting.

When Custom Align is enabled Image Y Position can be edited with a custom percentage value.

Image URL (Text)

Shows the URL of the currently selected image, and allows editing of the URL if needed.

Image Variant (Dropdown)

In the event there are multiple sized variants of the image, select which version to use.

Options:

• List of each available version, e.g. “Original Source”, “Thumbnail Source”.

Prefer Feed Image (Toggle)

If using WordPress/WooCommerce posts or a social media feed as the module’s content source, set whether or not to prefer images drawn from this feed.

Options:

• _On: The layer will use an image from the module’s content feed, if one is available.
• _Off: The layer will always use the image selected for the layer, even if a feed image is available.

Audio Content Section

Use the settings in the Audio Content section to configure Audio layers.

File Name (Text)

Set the name of the audio file to load. Click a button to the right to choose a new audio file from the WordPress library ¹, or the Slider Revolution Elements Library ².

Preload (Dropdown)

Set which aspects of the audio file should be preloaded.

Options:

• _None: Prevents any preloading. The audio file will load only when it’s played.
• _Auto: Loads the whole audio file in advance, even if it is never listened to.
• _{Meta Data}: Preloads meta data about the audio file, i.e. information such as its length. The audio file itself will still only load when played.

Controls (Dropdown)

Set whether to show controls or have the layer be invisible to visitors.

Options:

• _None: Hide controls, and therefore hide the layer from visitors.
• _HTML5: Show HTML5 based controls.

Autoplay (Dropdown)

Set a trigger that will initiate playback of audio.

Note that browsers do not allow autoplay of audio without an interaction-based trigger, unless it starts muted.

Options:

• _{On Interaction}: Audio will only play when triggered by a user interaction, e.g. pressing play on HTML5 controls, or clicking a custom button created using Actions.
• _{Every time}: Audio will automatically play, muted, every time the parent slide loads.
• _{1st Time}: Audio will automatically play, muted, the first time the parent slide loads only.
• _{Skip 1st Time}: Audio will automatically play, muted, the second time the parent slide loads and each time thereafter.

From (Timestamp)

Set the time from which the audio track should start playing.

Note that this refers to the time in the audio track itself, not the time in the slide’s timeline playback.

For example, start playback 30 seconds into the audio clip by setting the value to 00:30.

Till (Timestamp)

Set the time until which the audio track should play.

Note that this refers to the time in the audio track itself, not the time in the slide’s timeline playback.

For example, end playback 2 minutes into the audio clip by setting the value to 02:00.

Playzone (Waveform)

Shows a waveform representing the audio file’s sound, and provides drag handles on the left and right ends with which you can shorten the playback zone of the clip.

Note that a valid audio file is required, of format mp3, wav, ogg, or m4a/aac.

Moving the left and right handles automatically updates the From and Till settings for the audio layer, and correspondingly, modifying the From and Till settings updates the Playzone display.

Default Volume (Number, range)

Set the volume for audio playback.

Options:

• ₀: Minimum. No audible sound.
• 100: Maximum. Loudest volume.

Skip Preload (Number, seconds, range)

Delay preloading of the audio file for a specified time.

Options:

• _0sec: Minimum. No delay of preloading.
• _100sec: Maximum. Longest delay of preloading.

Playback Settings (Expander)

Click to expand the Playback Settings area and access more playback configuration settings.

Stop Other Media (Toggle)

Set whether to stop other layers’ playback when this audio layer starts playing.

Options:

• _On: Stop other playing media when this audio layer starts playing.
• _Off: Allow other playing media to run while this audio layer plays.

Pause Module Timer (Toggle)

Set whether to prevent the module from progressing while this audio layer plays.

Options:

• _On: The slide will be paused while the audio layer plays.
• _Off: The slide will continue progressing while the audio layer plays.

Rewind On Slide Start (Toggle)

Set whether or not to rewind the audio layer when the parent slide loads each time.

Options:

• _On: The audio layer will start playing at the beginning each time the parent slide loads.
• _Off: The audio layer will remember its position and resume playback when the parent slide loads.

Restart on End (Loop) (Toggle)

Set whether to start audio playback again once the clip is complete, i.e. looping.

Options:

• _On: Audio layer will start playing again once finished.
• _Off: Audio layer will play once and then stop.

Next Slide When Ends (Toggle)

Set whether to proceed to the next slide after the audio finishes playing.

Options:

• _On: When the audio completes the module will progress to the next slide.
• _Off: Completion of the audio will have no impact on slide progression.

SVG Content Section

Thumbnail (Image Preview & Buttons)

Displays a preview of the currently selected SVG image.

Hover over the preview image to access buttons to replace the current image via the WordPress library ¹, or the Slider Revolution Elements library ².

Video Content Section

Use the settings in the Video Content section to configure Video layers.

Video Type (Tab Switch)

Set the type of video to use for the layer.

Options:

• _HTML5: Use a locally hosted video.
• _YouTube: Use a video from YouTube.
• _Vimeo: Use a video from Vimeo.

File Name (Text)

Set the name of the video file to load. Click a button to the right to choose a new audio file from the WordPress library ¹, or the Slider Revolution Elements Library ².

YouTube ID (Text)

• Visible when Video Content section is visible, and Video Type is set to YouTube.
• Hidden when Video Content section is hidden, or Video Type is set to HTML5/Vimeo.

If loading a YouTube video, enter the ID of the video.

To find a YouTube video’s ID, look in its URL for the string of letters and numbers after: watch?v=

A YouTube ID should look something like: mn5hC07aGvE

Vimeo ID (Text)

If loading a Vimeo video, enter the ID of the video.

To find a Vimeo video’s ID, look at the end of its URL for the numbers after the trailing /.

A Vimeo ID should look something like: 4446067

Prefer Feed Video (Toggle)

If using a social media feed as the module’s content source, set whether or not to prefer videos drawn from this feed.

Options:

• _On: The layer will use a video from the module’s content feed, if one is available.
• _Off: The layer will always use the video selected for the layer, even if a feed video is available.

Preload (Dropdown)

Set which aspects of the video file should be preloaded.

Options:

• _None: Prevents any preloading. The video file will load only when it’s played.
• _Auto: Loads the whole video file in advance, even if it is never watched.
• _{Meta Data}: Preloads meta data about the video file, i.e. information such as its length. The video file itself will still only load when played.

Autoplay (Dropdown)

Set a trigger that will initiate playback of video.

Note browsers do not allow autoplay of audio without an interaction based trigger, unless it starts muted.

Options:

• _{On Interaction}: Video will only play when triggered by a user interaction, e.g. pressing play on HTML5 controls, or clicking a custom button created using Actions.
• _{Every time}: Video will automatically play, with audio muted, every time the parent slide loads.
• _{1st Time}: Video will automatically play, with audio muted, the first time the parent slide loads only.
• _{Skip 1st Time}: Video will automatically play, with audio muted, the second time the parent slide loads and each time thereafter.

Fit (Dropdown)

Set how the video is sized within the layer.

Options:

• _Contain: Ensure the full video is contained inside the layer and visible, even if some areas of the layer are empty.
• _Cover: Ensure the video covers the whole layer, even if some areas are not visible.

Aspect Ratio (Dropdown)

Set the aspect ratio of the video. Should be set to match the aspect ratio of the original video. In most cases it will be set to the correct value automatically.

Options:

• _16:9
• _4:3
• _1.85:1
• _2.39:1

From (Timestamp)

Set the time from which the video should start playing.

Note that this refers to the time in the video itself, not the time in the slide’s timeline playback.

For example, start playback 30 seconds into the video by setting the value to 00:30.

Till (Timestamp)

Set the time until which the video should play.

Note that this refers to the time in the video itself, not the time in the slide’s timeline playback.

For example, end playback 2 minutes into the video by setting the value to 02:00.

Default Volume (Number, range)

Set the volume for the video’s audio track.

Options:

• ₀: Minimum. No audible sound.
• ₁₀₀: Maximum. Loudest volume.

Speed (Dropdown)

Change a YouTube video’s playback speed to be faster or slower than normal.

Options:

• _1/4
• _1/2
• _Normal
• _1.5x
• _2x

Video Poster (Expander)

Click to expand the Video Poster area and configure the image that acts as a placeholder until video playback starts.

Thumbnail (Image Preview & Buttons)

• Visible when Video Content section is visible, and Video Poster expanded.
• Hidden when Video Content section is hidden, or Video Poster collapsed.

Displays a preview of the currently selected Video Poster image.

Hover over the preview image to access buttons to replace the current image via the WordPress library ¹, Slider Revolution Elements library ², or to capture a frame from the video ³.

If Video Paused (Toggle)

Set whether the Video Poster should appear when the video is paused.

Options:

• _On: The Video Poster will appear when the visitor presses a pause button, or when the video is paused due to changing slides.
• _Off: The Video Poster will only appear before playback commences.

Hide on Mobile (Toggle)

Set whether to hide the Video Poster on mobile devices, in order to minimise loading time.

Options:

• _On: Hide the Video Poster on mobile devices.
• _Off: Show the Video Poster on mobile devices.

Keep on Mobile (Toggle)

Set whether you want to show only the Video Poster on mobile devices, without any video playback being possible.

Options:

• _On: On mobile devices the Video Poster will still appear, but there won’t be any video playback.
• _Off: On mobile devices video playback will be possible, unless Hide on Mobile is toggled on.

Prefer Feed Cover (Toggle)

If using a social media feed as the module’s content source, set whether or not to prefer a video poster image drawn from this feed.

Options:

• _On: The layer will use a video poster image from the module’s content feed, if one is available.
• _Off: The layer will always use the video video poster image selected for the layer, even if a feed image is available.

Playback Settings (Expander)

Click to expand the Playback Settings area and access more playback configuration settings.

Allow Full Screen (Toggle)

Set whether to allow visitors to set video to full screen.

Options:

• _On: Visitors can set videos to full screen either through HTML5 controls, or custom controls created using Actions.
• _Off: Visitors cannot set videos to full screen, and HTML5 controls for full screen will be hidden.

Use Inline Mode (Toggle)

Set whether to prevent mobile devices automatically setting the video to full screen mode.

Options:

• _On: Prevent mobile devices automatically full screening videos.
• _Off: Allow mobile devices to automatically full screen videos.

Start Media Muted (Toggle)

Set whether to mute the video’s audio each time its parent slide loads.

Options:

• _On: Mutes the video’s audio, even if it was unmuted the previous time it loaded.
• _Off: If the video was previously unmuted, it stays unmuted when its parent slide reappears, even if the visitor has since scrolled to another part of the page.

Stop Other Media (Toggle)

Set whether to stop layers’ playback when this video layer starts playing.

Options:

• _On: Stop other playing media when this video layer starts playing.
• _Off: Allow other playing media to run while this video layer plays.

Pause Module Timer (Toggle)

Set whether to prevent the module from progressing while this video layer plays.

Options:

• _On: The slide will be paused while the video layer plays.
• _Off: The slide will continue progressing while the video layer plays.

Rewind On Slide Start (Toggle)

Set whether or not to rewind the video layer when the parent slide loads each time.

Options:

• _On: The video layer will start playing at the beginning each time the parent slide loads.
• _Off: The video layer will remember its position and resume playback when the parent slide loads.

Restart on End (Loop) (Toggle)

Set whether to start video playback again once the clip is complete, i.e. looping.

Options:

• _On: Video layer will start playing again once finished.
• _Off: Video layer will play once and then stop.

Next Slide When Ends (Toggle)

Set whether to proceed to the next slide after the video finishes playing.

Options:

• _On: When the video completes the module will progress to the next slide.
• _Off: Completion of the video will have no impact on slide progression.

Interaction & Controls (Expander)

Click to expand the Interaction & Controls area and access configuration settings for user accessible video interaction such as playing, pausing, full screen etc.

No Interaction (Frontend) (Toggle)

Set whether it should be possible for visitors to interact with the video through either HTML5 or custom made controls.

Options:

• _On: No visitor interaction with the video is possible.
• _Off: Interaction with the video is possible, and the Controls setting becomes available.

Controls (Dropdown)

Set what kind of interaction controls are shown for the video.

Options:

• _None: No HTML5 controls are shown. Custom controls made with Actions are still possible.
• _Small: A small sized set of controls is shown along the bottom of the video 1.
• _Large: A large play/pause button is shown in the center of the video 2.
• _Both: Small and large controls are both shown.

Video Arguments (Expander)

Click to expand the Video Arguments area in order to add custom YouTube or Vimeo argument strings.

Video Args (Text Field)

Add either YouTube or Vimeo specific argument strings.

For example, add arguments to show or hide the YouTube logo, show or hide the Vimeo author image, etc.

YouTube Args (Button)

Click to show a selection of YouTube Arguments and read what each one does. Click an argument to insert it into the Video Args field.

Vimeo Args (Button)

Click to show a selection of Vimeo Arguments and read what each one does. Click an argument to insert it into the Video Args field.

Container Structure Section

Use the settings in the Container Structure section to configure the layout of Row or Column layers.

Column Widths (Fraction)

For each column in the layout, set its width as a fraction.

Percentage values can be entered and they will be automatically converted to fractions.

If the entered fractions do not add up to a value of 1, an Auto Adjust button will appear that can be clicked to correct the issue.

Add Column (Button)

Click the + button to add another column to the layout.

Column Presets (Image Select)

Click a column preset image to create a column layout that looks like the image.

Uniform Gaps (Toggle)

Set whether uniformly sized horizontal gaps should be automatically added between columns.

Options:

• _On: Gaps can be automatically added between columns, and the Gap setting will appear.
• _Off: Gaps are not added automatically. However spacing can still be added manually via Column layers’ Margin or Padding settings, found under Style -> Spacing.

Gap (Number, pixels, range)

If Uniform Gaps is toggled off, set the width the gaps between columns should be.

Options:

• _0px: Minimum. No gaps.
• _500px: Maximum. Largest size gaps.

Break Down At (Image Select)

Choose the device size at which a multi-column layout should break down into a single column layout.

Options:

• _Laptop: Collapse to single column at Laptop size.
• _Tablet: Collapse to single column at Tablet size.
• _Mobile: Collapse to single column at Mobile size.
• _None: Do not collapse to single column at any size.

Row Position (Vertical Align)

Set the vertical alignment of a Row layer.

Options:

• _Top
• _Middle
• _Bottom

Position & Size Section

Use the settings in the Position & Size section to configure general layout for any layer type.

Layer Bounds (Tab Select)

Set the bounds that layout, i.e. the layer’s size and position, should be relative to.

Options:

• _{Content Flow}: Layout is relative to the Content Flow Container of the current device size. E.g. If the layer’s width is 100% it would be contained to the width of the Content Flow Container.
• _{Full Stage}: Layout is relative to the full editor Stage, i.e. the module width. E.g. If the layer’s width is 100% it would be uncontained, stretching to the full width of the module.

Size Mode (Tab Select)

Set the method for sizing a layer nested inside a Group.

Options:

• _Custom: The layer’s size is fully custom.
• _Inset: The layer will be automatically sized to fully cover the area of the parent Group layer, the option to add Inset Margins.

Inset Margins (Number, pixels)

When using Inset sizing on a layer nested in a Group, optionally set margins, i.e. spacing around the outside of the layer and inside of the Group.

To set all margins to the same size toggle the lock icon before making changes.

X (Number, pixels)

Set the horizontal position of the layer.

Options:

• _-5000px: Minimum. The farthest position to the left.
• _5000px: Maximum. The farthest position to the right.

Y (Number, pixels)

Set the vertical position of the layer.

Options:

• _-5000px: Minimum. The farthest position upwards.
• _5000px: Maximum. The farthest position downwards.

W (Number, pixels/percent/fraction/auto)

Set the width of the layer.

To access width presets hover over the “W” label to see a three dot button, click the button, and choose a preset from the list that appears.

H (Number, pixels/percent/fraction/auto)

Set the height of the layer.

To access height presets hover over the “H” label to see a three dot button, click the button, and choose a preset from the list that appears.

Aspect Ratio Lock (Lock toggle)

Set whether to lock the width and height to scale together.

Options:

• _Locked: If either width or height are changed, the other will scale proportionally.
• _Unlocked: Width and height are changed independently.

Layer Alignment (3×3 Checkbox Grid)

Set the alignment of the layer, relative to its parent container. For example, if the image is nested in a Group, alignment will be relative to the group.

The 3×3 grid represents the corners and edges of the parent container, e.g. to align top left choose the top left checkbox.

Min/Max Width & Height (Toggle)

Set whether to enable minimum and maximum width & height settings.

Options:

• _On: Minimum and maximum width & height settings appear below.
• _Off: No minimum or maximum width or height settings can be configured.

Min W. (Number, pixels)

Set a minimum width for the layer.

Max W. (Number, pixels)

Set a maximum width for the layer.

Min H. (Number, pixels/percent/fraction/auto)

Set a minimum height for the layer.

Max H. (Number, pixels/percent/fraction/auto)

Set a maximum height for the layer.

Content Behavior Section

Use the settings in the Content Behavior section to configure the alignment and masking of layers nested inside Group or Column layers.

Horizontal Align Children (Align Switch)

Set horizontal alignment of child layers, relative to the parent Group or Column.

In a Group, this setting only effects child layers with Position set to Relative and Display set to Inline Block (under Layout Behavior).

Options:

• _Left: Child layers align left.
• _Center: Child layers align center.
• _Right: Child layers align right.
• _Justify: Child layers justify alignment. (Often the same as align left in practice.)

Vertical Align Children (Align Switch)

Set vertical alignment of child layers, relative to the parent Group or Column.

Options:

• _Top: Align to the top.
• _Middle: Align in the middle.
• _Bottom: Align to the bottom.

Force Mask (Toggle)

Force the area of the parent Group layer to act as a mask on its child layers.

Options:

• _On: Child layers will always be masked by their parent Group layer.
• _Off: Child layers may not be masked by their parent Group layer.

Layout Behavior Section

Use the settings in the Layout Behavior section to control layout functionality specific to layers nested inside Groups or Columns.

Position (Tab Switch)

Set the CSS position behavior that should control how the layer and its siblings are arranged in the layout.

Options:

• _Relative: This layer, and any sibling layers also using Relative position, will automatically arrange themselves so as not to overlap. Float and Clear settings become available.
• _Absolute: Rather than being auto-arranged, the layout will be fully controlled by the settings in the Position & Size section.

Display (Tab Switch)

Set the CSS display behavior that determines whether the layer acts more like a paragraph, or more like a line of text.

Options:

• _Block: The layer behaves like a paragraph, i.e. it takes up all available width regardless of its own width, and its alignment cannot be controlled by a parent layer.
• _{Inline Block}: The layer behaves like a line of text, i.e. it will only take up the width it needs, (allowing sibling layers to sit next to it), and its alignment can be controlled by a parent layer.

Line Break After (Toggle)

On layers where Display is set to Inline Block, set whether there should be a line break after the layer.

Options:

• _On: Any sibling Inline Block layers will be forced onto the next line.
• _Off: Sibling Inline Block layers will sit next to the layer, on the same line, if they can fit.

Float (Dropdown)

Set whether the layer should sit on the left/right side of the parent layer area, allowing sibling Inline Block layers to flow around it.

Options:

• _None: The layer stays in its default position.
• _Left: The layer sits on the left side of the parent layer area, pushing sibling Inline Block layers to its right.
• _Right: The layer sits on the right side of the parent layer area, pushing sibling Inline Block layers to its left.

Clear (Dropdown)

If a prior sibling layer has Float set to Left or Right, set whether this layer should be allowed to flow onto the same line as the sibling, i.e. sit next to it.

Options:

• _None: The layer may flow onto the same line as the prior sibling.
• _Left: If the prior sibling has Float set to Left, do not allow this layer to flow onto its line and sit next to it.
• _Right: If the prior sibling has Float set to Right, do not allow this layer to flow onto its line and sit next to it.
• _Both: If the prior sibling has Float set to either Left or Right, do not allow this layer to flow onto its line and sit next to it.

HTML Tag (Dropdown)

Select a different HTML tag to wrap the layer with. Can be useful for SEO purposes.

Options:

• _<sr7-layer>
• _<div>
• _<p>
• _<h1>
• _<h2>
• _<h3>
• _<h4>
• _<h5>
• _<h6>
• _<span>
• _<label>

Resize Between Devices Section

Use the settings in the Resize Between Devices section to configure how layout is effected at viewport sizes in between preconfigured device sizes.

Position (Toggle)

Set whether the layer’s position should smoothly adjust in between device sizes.

Options:

• _On: The layer’s position will incrementally adjust in between layouts defined for different device sizes.
• _Off: The layer’s position will remain exactly the same as defined in a device size layout, until another device size layout is triggered.

Size & Motion (Toggle)

Set whether the layer’s size and movement based animations should smoothly adjust in between device sizes.

Options:

• _On: The layer’s size and motion will incrementally adjust in between layouts defined for different device sizes.
• _Off: The layer’s size and motion will remain exactly the same as defined in a device size layout, until another device size layout is triggered.

Text (Toggle)

Set whether the layer’s font size and line-height should smoothly adjust in between device sizes.

Options:

• _On: The layer’s font size and line-height will incrementally adjust in between layouts defined for different device sizes.
• _Off: The layer’s font size and line-height will remain exactly the same as defined in a device size layout, until another device size layout is triggered.

Padding (Toggle)

Set whether the layer’s padding should smoothly adjust in between device sizes.

Options:

• _On: The layer’s padding will incrementally adjust in between layouts defined for different device sizes.
• _Off: The layer’s padding will remain exactly the same as defined in a device size layout, until another device size layout is triggered.

Set Layer Sizes Section

Inherit Sizes (Dropdown)

Copy and apply the layer’s position, width & height from another device size’s layout.

Only available when previewing a device size other than Desktop.

Options:

• _{From Wide Desktop}
• _{From Desktop}
• _{From Notebook}
• _{From Tablet}