Using the Expandable section
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

The expandable section is a useful tool that allows you to create content that can be opened or closed by the user. This can help make your content more organized and user-friendly.

Adding an Expandable section

  • From the top menu bar, click on the Add Menu (Shortcut: M)

  • Search for and select Expandable section

  • Select it

  • Hover over the canvas and click where it says Add section here

Styling an Expandable section

  • Spacing top: Add padding to the top of the Expandable section in pixels or % to keep spacing between sections

  • Spacing bottom: Add padding to the bottom of the Expandable section in pixels or % to keep spacing between sections

  • Width: The width of an Expandable section can't be altered, it'll always be set to cover the 100%

  • Height: Set the height of the Expandable section in Pixels, % or set it to Auto so that it grows as you add content to it

  • Min H: Sets the minimum amount of height pixels an Expandable section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • Clip content: Toggle to hide the content that goes beyond the section's edges

  • Resize to fill vertically: Click to set the section's height to 100%

  • Background:

    • Container: Change the background of the section's container

    • Expand: Change the background of the section's bottom

  • Color: Change the color of the expand icon

  • Margin: Add margin to the expand icon

  • Effects: Add different types of shadows or blur effects (learn more about effects)

  • Transform: Change the width and height of the expand icon

  • Icons:

    • Set custom shape: Replace the network's logo with a shape or a custom SVG

    • Set custom image: Replace the network's logo with an image

Aspect Ratio

Specifying and locking the aspect ratio of an Expandable section will allow you to adjust and resize it but still maintain the overall relationship between height and width.

Tip: Right-click the aspect lock to open up a menu of popular aspect ratios.

Configuration options

Parameter

Description

Desktop

Set the collapsed height of the section in pixels for the desktop layout

Tablet

Set the collapsed height of the section in pixels for the tablet layout

Mobile

Set the collapsed height of the section in pixels for the mobile layout

Trigger

Choose an element as the trigger to expand and collapse the section

Easing

The acceleration of the transition animation

Duration

The length of the animation in milliseconds

Organizing Expandable sections

Once an Expandable section has been added it'll appear in the layers panel, you can drag it above or below other sections to place it where you need it in your project. Follow the steps below to learn how to do it.

  • Select the section in the layers panel

  • Click and hold it

  • Drag it above or below the section you want

Did this answer your question?