Create Websites with CHEETAH
A first look at the drag'n drop sitebuilder "Cheetah“ (3)
Note: The side menu is "collapsible" at certain screen sizes. It is then invisible except for a small round button (which serves to expand it). If you click on the pencil icon in the header menu of an element in this state, the edge menu will not be expanded, but the properties of the element will be displayed in a separate, freely positionable window.
Before we try this out, let's take a quick look at the main menu bar.
The function block on the left is used to switch back to the web page view ("small box" - you may be prompted to save the web page beforehand) and on the other hand (the next two buttons to the right of it) to display the web page once in desktop mode and once in smartphone mode in the editor.
A web page is generally designed in desktop mode. The smartphone version is created simultaneously in the background. It is usually immediately "usable" without further changes, but should be edited in smartphone mode, to "prettify" the design and perhaps also adjust the functionality.
Editor in smartphone mode
If you want to have a "look" at the appearance of the website still during the design process, then you can switch to the "Preview Mode" of the "Cheetah" editor ("Preview") at any time via the corresponding button in the main menu. Here you also have the option to switch from the desktop view to the smartphone view.
Note: Before you can switch back to the editor mode, you must have activated the desktop preview. Only there the button "Back to Editor" is visible in the main menu bar on the right.
The editor mode is followed by a drop-down box on the right, which allows you to easily switch to another page of your website. The selection is made via the website name. For this reason alone, it makes sense to give each web page a short, concise (descriptive) name (and not something "cryptic").
Next comes a "functional" menu area that contains, among other things, the global font settings of the web page and the very useful margin ruler. The buttons act like switches that make the corresponding function "fade in" or "fade out" again.
Last but not least, we would like to point out the extremely important "Save" button. You should use this button as often as possible during the design process to save the achieved editing status in the Builderall Cloud. You can decide whether the changes made should be published at the same time (i.e. they are visible on the World Wide Web almost immediately) or only later.
Now let's take a closer look at the template. It obviously consists of a menu area at the top ("Header"), a topic area in the middle and a footer area at the bottom. All these areas consist of individual elements such as texts, boxes, sliders, images, etc., which can be clicked with the mouse and thus "focused". Click once on the text "BARBERSHOP IS A LIFESTYLE" which cannot be overlooked. You see, a frame is drawn around the element in the editor, which has a so-called "head menu" with individual buttons of different meaning (explanation in each case as Hint with mouse pointer touch). At the same time, the border menu shows the individual property categories of the text element, which you can open again by clicking on them with the mouse. They hide the specific element properties. If the properties of the focused element are not currently displayed in the margin menu (e.g. because the template page is open), it is sufficient to click on the pencil icon in the element's header menu:
But a text element has another important function, because you would like to enter texts yourself or change existing texts or text templates ("Lorem ipsum dolor...") or format them explicitly. This function displays a small but powerful text editor - whenever you double-click on a text element:
In this mode you can - as you are used to with a text editor - enter, change or otherwise edit a text: