Create Websites with CHEETAH
A first look at the drag'n drop sitebuilder "Cheetah“ (5)
You can recognize the selected image in the repository window by its blue border. If you now click the "Save" button at the bottom right, the selected image will be loaded into the image container of your website and will also immediately be visible in the editor. Now you can resize or rotate the logo (anchor points), change its position (note the automatically displayed alignment lines) or set other properties of the image using the border menu (try drawing a red border with a width of 5 pixels and rounded corners around the logo image).
If you have come this far, then you have already grasped the principle of how to customize web page templates in "Cheetah" to eventually get your own web page without much effort. Of course, you will have to learn a bit about the elements that build the web page and their properties (we will come back to this in detail). But it is certainly not difficult to create your own distinctive website from a website template using "Cheetah".
Important: Do not forget to save the website from time to time!
Alright, let's continue. Let's leave the slider as it is for now (to see how it works, you only need to switch to the web page preview, by the way. The button for this can be found in the top right corner of the editor's main menu bar). Let's turn our attention to the area below, which is made up of three boxes, one next to the other. They are located on a so-called "banner" just like the elements in the blue line above them, which is delimited by a blue line in the editor. To see this, click with the mouse on the left box ("Professional Barber Kit") and drag it down a bit while holding down the left mouse button until the light gray background is visible. If you now click with the mouse in this light gray background area, exactly this banner will be focused and its header menu will be displayed.
Banners are the basic structure element of web pages in "Cheetah" at all. Banners are first of all only height-adjustable areas on which the individual elements that make up the website are placed. These elements then become the "property" of the banner on which they are placed.
Attention: a given element can belong to only one banner at a time (its "owner"), so you should avoid overlaps.
Furthermore, banners and their content can be moved vertically, which makes "rearranging" the functional areas of a web page a simple exercise. You can also add new banners to a web page at any time and position them exactly where you want them. The corresponding setting option can be found in the banner properties in the category "Arrange banners" (try it out!). And banners can be saved together with their elements as "banner templates" for reuse, which may contribute to enormous time savings in website development.
A banner itself also has a lot of properties, as you can easily see from the extensive marginal menu. By far the most important property is the "Size", which allows you to adjust the height of the banner with pixel precision via keyboard input or very quickly via the slider. And that is ingenious. For example, if you later want to replace a text on your website with a longer one, but there is not enough space for it, simply increase the height of the banner underneath and you will have enough space again to extend texts or insert new elements like images, boxes, etc. And, as already briefly mentioned, you can save entire "fleshed out" banners as private templates and then reuse them on other web pages or websites...
In our case, however, we will leave the banner as it is and drag the left box element back to its original position. When moving it, you will certainly have noticed that the font on the box and the button below it have also been moved. The same applies here as with a banner: All elements that lie on a box belong to the box, so to speak - or in other words, the box is its owner. And this is just as ingenious. Because in "Cheetah" you can of course also save boxes already equipped with the most diverse elements as private templates and thus reuse them in the same or in other web projects. This makes it an easy exercise to ensure a uniform "corporate design" across all your websites without much effort, which is especially important for company websites.
Take a quick look at the properties of a box element and then change the texts on all three boxes of the banner. Note in particular that a box can also be explicitly equipped with a background image via the properties of the "General colors" category. In this case, you do not necessarily have to use a separate image element for this purpose.