Create Websites with CHEETAH
Web pages are built in "Cheetah" from banners (5)
If you center the button first, it will be centered inside the box, because the box acts as a container for the button. If you center the box, then the box and its contents will be centered on the banner.
Another quick method of positioning or aligning elements are the position lines that appear as soon as you touch the element with the mouse and move it in the editor while holding down the left mouse button. These position lines, shown in green, are oriented to the edge of the banner, to its center and also to the "edges" of other elements already positioned on the band. In this way, optimal alignment of a design element on the web page is usually achieved quite quickly. Finally, for "finetuning" you can use the cursor keys, with the help of which you can move the focused element pixel by pixel in any direction.
Tip: You can use the cursor keys to move a focused element pixel by pixel in all directions in the editor.
Now we come to the "Ruler", which you can show and also hide again via the corresponding button in the main menu of the editor. It is displayed as a horizontal pixel scale at the top and a vertical pixel scale at the left, the zero point of which is fixed at the top left corner of the internal banner area of the topmost banner. The main thing, however, is that you can use this ruler to create horizontal and vertical guides to which, in turn, your design elements can be docked due to their "magnetic" effect.
To create a new guide, simply click with the mouse pointer in the corresponding ruler at the desired position. The auxiliary line is then immediately drawn over the entire editor area at this position and the mouse cursor changes to a cross. If you now hold down the left mouse button again, you can position the guide exactly where you want it. In the case of a vertical guide, the absolute y-position in pixels is displayed as a hint.
By the way, the ends of the auxiliary line lying on the ruler are provided with a blue "knob". If you touch them with the mouse pointer, the "delete cross" will appear on them, i.e. if you click on them now, the guide will be deleted from the editor.
What makes working with guides so pleasant is their already mentioned "magnetic" effect. So if you come with an element into the immediate vicinity of such a guide or the intersection of two guides, then the element flicks quite automatically into the corresponding position.
How to create your own element and banner templates
Well-designed element containers and banners lend themselves to be reused on other websites. Exactly to enable such a reusability, in "Cheetah" you can build up your own cross-website library from your own templates. This is especially useful if you intend to maintain a consistent corporate design across all your websites.
By the way, creating your own element or banner template is as easy as cloning it: Focus element or banner and then click the disk icon in the header menu. A window will then open asking you to give the template a unique name. As soon as you have done this and saved the template, you will find it again in the margin menu in the "Templates" area either under "Banners" or "Elements" (categorized accordingly again, of course). Its use is analogous to that of all other banners and elements in "Cheetah" ("drag'n drop", position, adjust properties, etc.).
Tip: Consider a naming convention for your own templates. Because they will not be displayed graphically in the template library, unlike the banners and elements included by default in "Cheetah", but only the identifiers you have assigned.