Accordion section

The Accordion block is a convenient graphical solution for a website in the form of a list of text notes with drop-down elements:

"Accordion" is easy enough to embed on a website and customize to your own needs: it can perfectly fit any necessary requests.

How to add and configure “Accordion”?

To add an item to your site, go to the site settings and click plus to open the menu with the sections available in the Salebot.

Then, in the section menu that opens, find the "Accordion" block:

Next, you will see an empty added block, in which you need to configure the content in the form of cards and the type of the accordion cards themselves:

Content settings

At first, we will add content cards, for which you need to click on the "Content" button, and then add the card itself, which will contain the title and, accordingly, the text:

An empty card was added to your content, where you can add a question text, an image, and an answer text:

The text element of the block has settings similar to those of any text editor: settings for boldness, italics, underscores, font height and font outline, color, and more.

To apply its settings to a text, select the required part of the text and select text settings

Next, upload an image, if necessary, and add a clarifying text - the answer to the question:

You can add the required number of content cards:

Customization of content

After adding the required number of content cards, go to the content settings:

Next, you can select a checkbox so that the first accordion card or only one of the cards is open:

Next, select the vertical padding setting between the questions in the block:

You can also round the corners of the cards using this field, which accepts only numeric values:

The text element (as well as the button) in the card is always in the middle relative to the top and bottom edges. To select the required distance, enter a numeric value in the "Internal padding at the top and bottom" field:

Also, the entire content of the card (including the text and the button for expanding the response text) is located in the middle relative to the right and left edges. To adjust the padding on the left and right, use the "Internal padding on the left and right" field:

To select the size of the icon that opens the response text, just use this Icon “Width field”, which also takes an exclusively numeric value:

If the image inside the card is too large, you can select its width by specifying the required value in the "Image width" field:

Next, select a color palette for each element of your accordion: text, card background, icon, etc.:

Now you know how to install the "Accordion" block on your website and customize the content inside the block.

Customization of the block (section): font, background, and display settings

To customize “Accordion” block, you will need universal section settings (blocks), which include font, background, and display settings.

The settings of the section (block), namely fonts, background and display are the same for all blocks.

Last updated