Create Websites with CHEETAH

A first look at the drag'n drop sitebuilder "Cheetah“ (9)

Note: By the way, it is a good idea to abbreviate the element type with one or two letters (e.g. "B" for banner, "BO" for box, etc.) and then assign a unique name for the corresponding template.

As soon as you have done this, switch to the "About" page via the page selection drop-down box and there again to the "Templates" page in the right-hand side menu. If you now open the "Banner" category, you will find the "B Footer Hairdresser Site" banner just saved on the homepage as a template in it. And now just click on "+" - and the banner will be copied to the end of the current web page. And you surely already guessed it. Now all you need to do is delete the "original banner" above it via its header menu. And do exactly the same with the remaining two pages (don't forget to save!).

Note: By the way, if you do not need the template anymore (not even in the future), then you can of course delete it again. It was then only a "temporary template"…

If you like, you can also save the menu element of the start page as a temporary template and then replace it on the other three web pages using the same method. Only here you have to use (for the first time) the drag'n drop method that gave the "Cheetah Sitebuilder" its name.

So save the already customized main menu as "M Main Menu Hairdresser Site" and then switch back to the "About" web page. There you can first delete the main menu in the header. Then open in the right side menu the page "Templates" and in it the category "Elements" here you will find the just saved "Menu Element" again, only that the "+" for selection is missing.

And now the "drag'n drop" comes into play, i.e. you "grab" it with the mouse by holding the mouse pointer over it and then dragging it with the left mouse button pressed to the approximate position on the web page where you finally want to drop it (release the mouse button). When you do this, any container elements - such as banners and boxes - will be highlighted with a light blue border to help you see exactly where you are dropping the element.

By the way, this is exactly how all elements (except banners) are transferred from the elements palette of the Edge menu to the web page in the designer. This method is fundamental for the "Cheetah Sitebuilder".

As an exercise, you should now complete the hairdresser's website page by page using the methods just described in detail. Also look at the preview from time to time to see how the web pages will look later on the net.

Once you're done with the desktop version of the website, all that's left to do is spruce up the smartphone version. Even if you do without it (which you shouldn't), it already looks quite passable in the preview. Even the animation effects of the template work exactly as intended...

To enter the "Smartphone" mode, click on the smartphone icon in the upper left corner of the editing mode. Now you see the (narrow) smartphone variant in the editor, which was automatically derived from the desktop variant of "Cheetah". You can now edit this, although any changes you make here (mostly) have no effect on the desktop variant (vice versa does).

Let's click around a bit. Just as in the desktop version, you can also focus on individual elements here, whereby the side menu only displays their properties, which are now relevant to the smartphone. To select a banner, you need to pay attention to the left edge of the view, which, when the mouse touches the smartphone view, is distinguished by a narrow border rectangle at banner length. If you click inside this rectangle, the header menu of the corresponding banner will appear.

Note: If you select an element in the described way, then note that you always have to press the pencil icon in the header menu of the selected element first to refresh the "Settings" page in the side menu.

Of all the categories displayed there, the "Advanced (and Mobile)" category is by far the most important. To see this, focus for example on the "Salvador Dali - Saying", press the pencil icon in the header menu and watch what happens when you move the sliders in the category "Advanced (and Mobile)". I think you don't have to say much more about it then...

TB Amazon