Logo Magzmaker

Additional information on the page

Present large amounts of content clearly without the page looking unnecessarily long or busy. This can be done with a hidden content block that becomes visible when the user clicks on it, for example a fold-out block.

Box with chocolat

Text with fold-out

Add and edit block  

Overlay

Comming soon  
 

Text with fold-out

With an fold-out functionality, users can toggle information open and closed. This provides an elegant way to present large amounts of content in an organized manner without making the page unnecessarily long or cluttered.

An expandable block typically consists of a header (the title or question) and a hidden content area that becomes visible when the user clicks on it. This is especially useful for things like frequently asked questions (FAQs), product details, or step-by-step instructions.

  • Start adding a section
    Click here for more information about adding a section
  • Within a section, click + Add block and choose the content block Textblock with fold-out.
  • Under the Content tab, you’ll see an editing field for the visible text and another one below for the hidden text
Text with fold-out

Formatting

You can format the text using headings, styles, links, and images—just like in a regular text block (Click here for more information about editing text)

Under the Settings tab, there is an additional field for Backgroundcolor which lets you change the background color of the expandable section. To give the content in the expandable area some extra space when a background color is applied, you can add extra spacing under the Padding fold-out.

Icon settings

To indicate that a piece of text can be expanded to reveal more information, you can use an arrow icon, for example   to collapse again.

In the Icon Settings, you can configure which arrows you want to use, their color, size, and position.

  • Icon Size: Enter a value (px, rem)
  • Icon Color: Choose a color or paste the hex code into the field
  • Icon Alignment: You can choose left, right, or centered (only available when the icon position is set to “Bottom”)
  • Icon Position:
    -     Inline (on the same line) – This determines whether the arrow icon is shown to the left or right of the text
    -     Bottom - This places the arrow icon below the text. It can be centered, left-aligned, or right-aligned beneath the text
  • The type of icon is set under Icon roll down / Icon roll up. Start typing the name of the icon (e.g., arrow, angle) and select the desired icon. Click here for a list of available icons.
Text with fold-out - icon settings

Examples

This is Question 1

In the fold-out the answer to question 1 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet pulvinar. Phasellus pulvinar quis dolor at tempor. Vivamus sed condimentum lacus, ac volutpat massa. Duis est felis, imperdiet ut risus non, sollicitudin malesuada dui. Pellentesque vitae risus mattis, lacinia lectus non, sagittis turpis.

The secins question

In ultrices aliquet pulvinar. Phasellus pulvinar quis dolor at tempor. Vivamus sed condimentum lacus, ac volutpat massa. Duis est felis, imperdiet ut risus non, sollicitudin malesuada dui. Pellentesque vitae risus mattis, lacinia lectus non, sagittis turpis.

This is question 3

Vivamus sed condimentum lacus, ac volutpat massa. Duis est felis, imperdiet ut risus non, sollicitudin malesuada dui. Pellentesque vitae risus mattis, lacinia lectus non, sagittis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet pulvinar. Phasellus pulvinar quis dolor at tempor.

You can place a Textblock with fold-out between the text so that the text on the page remains compact but you can still provide more background information.

Extra information about the subject you will find here

The extra information in the fold-out

Box with chocolat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet pulvinar. Phasellus pulvinar quis dolor at tempor. Vivamus sed condimentum lacus, ac volutpat massa. Duis est felis, imperdiet ut risus non, sollicitudin malesuada dui. Pellentesque vitae risus mattis, lacinia lectus non, sagittis turpis.

Read more