How To Use The Read More Feature on Containers and Columns

Last Update: July 8, 2026

With Avada 7.15.6, we find the introduction of a Collapsible / Read More feature, available on both Containers and Columns. This feature is enabled with the Collapsible / Read More option, found on the Extras tab on all containers and columns. Read on to find out how to use this interesting and much requested feature (video coming soon).

When To Use

A Collapsible / Read More feature is a good idea any time you’re balancing visual simplicity against content depth. You can determine exactly how much content is displayed, with a Read More button displaying on or below the content to let your users know that more information is available at the click of a button.

Some examples of when this might be useful are when you have long text blocks on pages, such as the example below, when you want to specifically optimise content design for mobile, when you have repeated content structures, such as lots of team member profiles, or even if you just want substantial content on the page for SEO reasons, but not have it all visible at once.

A good rule of thumb is to use the Collapsible / Read More function when:

  • The first 5-10 lines communicate the essential message, and the remaining content is optional, supporting, or deeper detail

  • Or just when reducing visual clutter improves usability.

Example of Read More feature

A simple example of when adding a Read More button improves design and usability.

Options

When you turn the Collapsible / Read More option on, a raft of dependant options appear. These control the look and structure of the Collapsible / Read More section.

  • Collapsible / Read More – Clip the container (or column) to a set height on the chosen screen sizes and reveal the rest with a “Read More” toggle.

  • Collapsed Height – The visible height when collapsed. Enter a value (px, %, vh, em, rem). Leave empty to use the default. This can also be set on medium and small screens independently. Percentage can only be used when height of container or column is defined.

  • Collapsed Fade Effect – Add a fade at the bottom of the collapsed area. “To Transparent” dissolves the content itself, revealing whatever is behind it (and also fades the column’s own background/border) – best over background images, gradients or transparent sections. “To Color” lays a gradient over the content toward a chosen solid color, keeping the background intact – best when blending into a known background color.

  • Collapsed Fade Height – Height of the fade at the bottom of the collapsed area, e.g. 60px. Leave empty for the default.

  • Collapsed Fade Color – The color the content fades into. Set this to match the background behind the column.

  • Collapse Trigger – Use the built-in button, or control the toggle from any external link/button via the “Toggle/Expand/Collapse Container/Column” dynamic data link actions (target the container or column by its CSS ID).

  • Expand Button Text – The text shown on the button while the column is collapsed.

  • Collapse Button – Show a button to collapse the column again after it has been expanded. Set to No for a one-way reveal — the button fades out once expanded.

  • Collapse Button Text – Text shown on the button while the column is expanded.

  • Expand/Collapse Button Position – Where the built-in button(s) sit(s). “Below Content” places it in its own row beneath the collapsed area. “Overlay On Content” floats it over the bottom of the collapsed area (on top of the fade).

  • Expand/Collapse Button Alignment – Horizontal alignment of the built-in button(s). Choose from Left, Center, or Right.

  • Expand/Collapse Button Offset – Fine-tune the button(s) position. With “Below Content” it sets the gap above the button(s). With “Overlay On Content” it lifts the button(s) up from the bottom edge. Note: “To Transparent” fades via a mask, so the button only stays fully visible if the offset is at least the Fade Height. Enter a value with a unit, e.g. 20px.

  • Expand/Collapse Animation Speed – Duration of the expand/collapse animation in milliseconds. From 0 to 5 seconds.

In this article