Create Websites with CHEETAH

The most important design elements at a glance (13)

The accordion element

Especially on smartphones, containers that help save space are a great help if you want to accommodate as much information as possible. One such container, which of course also looks good on "normal" websites, is the accordion element. It consists of a vertical arrangement of buttons, each of which is assigned its own display area (container), but which only becomes visible when the associated button is clicked:

You can find these special object containers in the right margin menu in the Elements palette under "New" - "Elements" in the "Accordion" section in various preconfigured shapes.

It is simply dragged onto the web page with the mouse, just like any other element. The only thing to note here is that it is an element composed of several parts. You can see this by clicking on the frame at the top left. If you then notice a "+" button in the header menu, then the actual accordion element is focused. If, on the other hand, you click in the header line, then the header menu of the header line opens.

Now to fill the object container of the respective header line, you only need to open it and place the desired elements such as images, videos, iFrames or text lines on it and arrange them accordingly - and of course configure them in the usual way.

Note: You should make sure that the accordion element is always at the top in the z-order ("Layer position"), so that the opened containers are placed above the elements below (such as the text here) when they are opened. You can set the layer position for the corresponding elements via the "Advanced" section in the element properties. By default "Layer Level" is set to "auto", but in this case you have to change it. The "Low" and "Top" buttons are used for this purpose.


There are a large number of applications in which a certain function is only to be triggered or enabled at a predefined time. So-called "timers" serve exactly this purpose.

Maybe you have seen a "countdown counter" on a website that counts down the time in hours, minutes and seconds until a livestream to a webinar or similar is started.

You can find a larger number of such "timers" in the elements selector, but strictly speaking they are just different design forms of a basic form (property "Theme"):

Note: The size of the timers, unlike other elements, can only be adjusted to a limited extent and results primarily from the selected font size.  

TB Amazon