Create Websites with CHEETAH
The most important design elements at a glance (1)
"Cheetah" is designed for "fast web page design". It therefore not only provides "native" elements such as one element each for "lines", one element to insert images and one element to design a button, but often several, pre-configured variants of them. In addition, composite elements such as complete mailing boss forms, various contact forms, blog components or image galleries are also offered for drag'n drop. And you can expect that with (almost) every new release of Sitebuilder the number of such preconfigured elements will continue to increase. And, what's really revolutionary, you can also create your own composite elements (up to a fully featured banner) and store them permanently in your own element library.
Boxes as design element and element container
The "Box" element type of the "Cheetah" site builder serves both as a native design element and as a container for other elements. This means that if you place other elements (text, buttons, images, etc.) within or overlapping a box, they form a unit in such a way that they can be repositioned with the box as a whole and are also deleted as soon as you delete the box - i.e. its container. Functionally designed boxes can also be saved very well as individual templates and thus made available for other websites.
The extensive set of properties of a box allows a wide range of design options:
Among other things, you can set the size of a box to the exact pixel, color a box as you like (color gradients are also possible), equip it with an image, add a frame with and without shadows, round off the corners of the box with adjustable radii, and also equip boxes with various parallax and animation effects. We recommend that you try out for yourself the individual possibilities that this offers.
If you look at the header menu of a box, you will find the "Pin" function in it. As the name suggests, you can use it to "pin" a box and its contents anywhere on the screen, i.e. it remains fixed in this position when the web page is scrolled (the reference frame is always the part of the web page visible on the screen).
Note: The "stick" function is not available in the mobile view of the website!
If you click on the pin function in the header menu, the following small settings dialog will open, allowing you to set the position by clicking in the corresponding box:
However, if you want to set the position of the sticky box manually, you must click the "Manual Stick" button here instead. It's best to try this out for yourself right away. By the way, the use of "sticky boxes" is always appropriate if, for example, you want to display advertising on a web page that always remains visible on the page at the same screen position when the page is scrolled.
Boxes as element containers
Boxes are primarily used to combine different elements into a new object (i.e. they serve as element containers). To do this, you simply have to arrange various elements on a box (which can be completely "transparent" - a template for this can be found in the box area of the right-hand side menu). If you now move the box with the mouse, you will see that all elements on the box keep their relative position to the box and are moved along with it. If you delete the box, all the elements on it will also be deleted. This is a very easy way to create compound objects, which can also be saved as your own templates (by the way, many elements in the element selection of "Cheetah" are such compound objects).
The following image shows a simple call-to-action template based on a completely transparent box
Note: The centering function in the header menu of most elements always centers the corresponding element relative to the right and left boundaries of its container (i.e. either the banner or the box).
Furthermore, it is still important to know that the "Layer" property can be used to specify the z-position in relation to other, overlapping boxes. Also a copy (header menu "Clone element") of a box consists not only of the box itself, but of the box with all elements arranged on it. You should also definitely try out the various animation effects (element property "Animation"), which give your website a certain "kick" without much effort. For testing you have to switch to the preview mode in the Cheetah editor.
Tip: If you get into the habit of always placing logically related elements on (transparent) boxes, you can move them more easily with the box as a whole and thus do not need to reposition them individually each time.