Unleash your design dreams ✨ Learn about the new editor

Latest version: *.*.*

Buy now

Help center

/

Editor tour

/

Design Mode Tour

Design Mode Tour

In Design Mode you can control the design of your layers through eight different settings panels. Let’s see what each one does in this tour.

Design Mode Panels

Design Mode can be activated by clicking the design mode icon 1 in the Right Sidebar ->.

Once active, Design Mode displays 8 tabs, each of which opens a settings panel through which you can modify the design of your layers.

The Design Mode panels are:

Layer Panel

In the Layer panel, you can configure key attributes such as text and image content, position and size, and core layout settings.

It includes multiple sections, some of which appear only for specific layer types.

The Text section appears for text or font-based icon layers. Use it to set text content, alignment, insert font icons or meta tags, and configure line wrapping.

The Image Content section is visible when an image layer is selected. Use it to set the image source, dimensions and alignment.

The Audio Content section is visible when an audio layer is selected. It contains settings to configure the audio source file, preloading, controls, volume, playback and looping.

The SVG Content section appears when an SVG based icon layer is selected, and is used to set the SVG file source.

The Video Content section displays when a video layer is selected. Use it to set the video source file, preloading, sizing, auto-playing, looping, thumbnail, controls and more.

The Container Structure section is visible when a row or column layer is selected. It can be used to control row & column layouts and spacing, and the device size at which they should collapse to a single column.

The Position & Size section is visible for all layer types except columns, and provides settings for horizontal and vertical position, height & width, layout and alignment.

The Content Behavior section is displayed when a group or column layer is selected. It allows you to set the alignment and masking to apply to any child layers nested inside the selected layer.

The Layout Behavior section allows you to configure extra layout settings related to the CSS attributes position, display, float and clear. It also includes a setting for which HTML tag the layer should use, e.g. <h1>, <p>, <div>.

The Resize Between Devices section lets you choose whether layout attributes and animations adjust in stepped increments at each active device size or smoothly between sizes.

The Set Layer Sizes section appears when any device size other than Desktop is active. It provides a shortcut to copy and apply the layer size and position from another device layout.

Style Panel

In the Style panel you will find core settings related to visual styling of a layer, such as background, border, and spacing controls.

The Text section is visible when a text layer or font based icon layer is selected. Here you can design the typography of the layer, choosing font family, font size, line height, letter spacing, color and so on.

The SVG Style section appears when an SVG based icon layer is selected. Use to control SVG fill and stroke colors & styling.

In the Background section configure the layer background color and image, and with text layers set clipping and text fill.

Use the Border section to set border color, style, radius and width.

In the Spacing section set margin (outer spacing) and padding (inner spacing) for the layer.

Extra Style Panel

The Extra Style panel contains additional, more advanced visual styling settings.

Settings in the Base Transform & Display section allow you to set the base 3D transforms, opacity and backdrop blur for a layer. Animations will begin from these values. Also included is a layer sorting mode to solve iOS quirks.

Use the Color Effect Modes section to set blend and filter modes for the layer.

The Content Overlay section is visible when an image or video layer is selected. It allows you to apply a pattern over the top of the layer.

Use the Box Shadow section to apply one or more rectangular drop shadows.

The Text Shadow section is visible when a text layer or font based icon layer is selected. It allows you to apply one or more text drop shadows.

The Text Stroke section is visible when a text layer or font based icon layer is selected. It can be used to apply a stroke to text layers.

The Spikes section is used to apply “Spike” shapes to the outer edges of layers.

Hover Style Panel

In the Hover Style panel you can configure how layers should behave on mouse hover, setting styling, text content, filter and animation changes.

The Toggled Text section is visible when a text layer or font based icon layer is selected. You can use it to change the text displayed when a layer is hovered.

The Hover section, when activated, provides settings for cursor and animation responses on hover.

The Style section is visible when hover animation is enabled. You can use it to set hover text, background and border styling.

The Filters section is visible when hover animation is enabled. Use it to apply blur, grey-scale and brightness hover effects.

The Animation section is visible when hover animation is enabled. It allows you to create a hover specific animation, without using the Timeline. For example, you might have a button scale up slightly when hovered.

Parallax Panel

The Parallax panel allows you to add parallax effects to a layer, if parallax effects are enabled under Settings -> Scroll & Parallax panel -> Parallax Effect tab.

The On Scroll section, when activated, enables access to settings that apply parallax effects to a layer on page scroll.

The On Mouse Move section, when activated, enables access to settings that apply parallax effects to a layer on mouse move.

Visibility Panel

Use the Visibility panel to configure which device sizes a layer should be visible on, if it should be visible on hover, and if it should stay visible always in a carousel.

Attributes Panel

The Attributes panel allows you to set custom HTML attributes to the layer, as well as additional attributes to the wrapper and to media layers (image or video).

Accessibility Panel

Use the Accessibility panel to set layer specific ARIA information, if you have accessibility settings enabled under Settings -> Accessibility panel -> Screen Reader Support.

In this article

back to overview