Create Websites with CHEETAH
A first look at the drag'n drop sitebuilder "Cheetah“ (4)
Note: The editor will be closed as soon as you click in an area outside the text element.
Alternatively, you can also use a special editor window to change or enter longer texts in particular. It is opened as soon as you click on the "T" symbol in the header menu of the text area. Please note that the text is displayed in the same color as in the web editor ("white" may be the problem here - simply select the text area in the editor with the mouse and the text will be visible despite the white background).
As you can see from this example, the new text is too long. To arrange it optimally on the web page, the font size would have to be reduced somewhat. This can be easily done in the editor using the "Size" drop-down box. However, since this is a heading of the 1st hierarchy level, another possibility is to change the Heading 1 format in general (i.e. for all H1 headings on the website). To do this, click on the button labeled "A" in the main menu of the editor (i.e. at the very top) and use the slider of the H1 heading to reduce the font size until the heading takes up only one line on the web page. This should be the case with a font size of 80 pixels. If you want, you can also globally change the font size for the smartphone version, the font type and the font color. And of course you can do this separately for each heading 1 to 6 as well as for the paragraph font (try it out!).
For practice, you can now replace all other texts with your own texts and your own text formatting in this way.
Now you might want to change the position of a focused element on the web page. The easiest way is to move the focused element with the mouse to the exact place you want on the web page. To do this, you just need to move the mouse with the left mouse button pressed (be careful - the cursor shape changes) and in this way move the element to the new location. When you do this, green guides are often displayed, which are based on other elements on the web page, among other things, which can be very useful. Fine-tuning can then be done with the cursor keys, which can be used to move the focused element with pixel precision. By the way, the size of an element (for texts the circumscribed rectangle) can be changed in the same way with the mouse (and often via the "Height" and "Width" properties in the margin menu). Only here the "point of attack" is the small blue circle in the lower right corner, which you can grab with the mouse pointer (here, too, its shape changes specifically) and move back and forth with the left mouse button pressed, which simultaneously changes the size of the element ("fine tuning" possible with many elements via their property category "Size" - margin menu).
Furthermore, you will find a blue circle with a white triangle at the lower left edge of almost all elements (e.g. box, image, etc.). If you place the mouse there, you can only move the element vertically, i.e. the x-coordinate remains as it is. And all elements that are below or above the element, depending on the direction of movement, and overlap with it in this direction, will be moved along with it. This way you can easily create space for new elements on the web page, which otherwise could quickly degenerate into work for longer web pages...
Now let's turn to the logo. It is obviously also only a template and must therefore be replaced by one of your own. Here it makes sense to have already prepared a suitable image file beforehand with the help of a paint program. Since we need a transparent background here, the png image format is best suited for this (by the way, the "photo manager" of Builderall is the ideal tool to provide images with a transparent background). At this point we assume that such a file in the correct size (approximately, because the image size is of course infinitely variable in the Sitebuilder) is already in a folder provided for these purposes on your computer. So let's first click on the logo in the web editor and focus it in this way (a blue frame and the header menu will be visible). In the right side menu all element properties of the "image element" are now visible and can be changed if necessary.
Note: You may need to click the pencil icon in the header menu beforehand to update the Settings page in the Edge menu. Make sure that the correct name of the focused item type (in this case, Image) appears at the top of the Edge menu.
Note: The first thing we want to do now is simply change the image. To do this, we go to the "General settings" section in the side menu and then to "Change image" (clicking on this blue button). The "Builderall Image Repository" will now open. This is the place where you upload your own images and also the place where Builderall offers extensive image collections (images, icons, buttons and gif's) for use. Before we continue here, you should click around a bit in this window to get a small overview of it.
Uploading" an image is very simple - click the "Select file" button and select "Image" (or images, multiple selection possible) via the file selection dialog. The selected image(s) will then be displayed in the repository. The images must be in jpg, png or gif format and must not be larger than 4 MB.
If you now move the mouse pointer over an image, four icons will appear within the image, representing different functions: Edit file name - Load image into a small paint program - Display image in large size - Delete image.