Create Websites with CHEETAH
A first look at the drag'n drop sitebuilder "Cheetah“ (7)
As soon as you have focused on the contact form, you can first of all change its general design by modifying the corresponding properties via the right-hand side menu (here, this primarily concerns the heading of the "Send button" - "SEND MESSAGE"). We do not want to do that here in detail except for the button label, but take a look at the header menu of the element right away. Here you will find, among other things, a blue gearwheel symbol. It indicates that an element can be explicitly configured functionally. In the case of the contact form, clicking on it opens the following settings dialog:
It consists of three pages. On the first page ("E-mail") you specify, among other things, to whom the e-mail is to be sent and with which "Subject". Usually, the e-mail address here is that of the hair salon. As "Subject" you could perhaps choose "Appointment". We leave the remaining fields empty for the time being.
On the second page you define the fields of the contact mask. In this case, a total of four different ones have already been created in the template. Of course, you can also delete fields here ("trash") or add new fields ("+ ADD FIELD" - button). Using the "arrow buttons" you can additionally rearrange the positions of the fields in the contact form.
To change the field labels (and also to specify whether they are mandatory fields or not), you need to click on the pencil icon. Also try assigning an icon to a label.
We will disregard the "Action" page for now, since we do not need this function here.
Note: Before you finally release your website, test all contact forms used for their function beforehand! This is not possible in preview mode, so you have to publish the complete website before and do your tests on the published page.
With that, the contact form is done for now and we can move on to the next banner, which contains only three "logos". For reasons that will become clear in a moment and are more didactic in nature, you should first delete the two template logos on the right from the web page. Then, replace the image of the remaining logo with the corresponding logo that we have already uploaded to the image repository in the usual way. To make it stand out a bit better from the background, we can also adjust the color of the banner accordingly right here. So focus the banner and open the "Background" section in the right margin menu. Click in the field to the left of the "Color drop", which opens the color settings dialog (which is the same for all elements in "Cheetah"). There we select a basic color (e.g. blue) with the mouse on the color strip and then move the selection point back and forth in the color field above with the mouse until we like the banner coloring in interaction with the logo (the color change in the editor follows simultaneously with the mouse movement). And that's it. Now we need two more copies of the logo to restore the original design of the template. And now another feature comes into play that you will quickly learn to love: namely, you can "clone" any element in the editor without exception. And it works like this. You focus the element with the mouse as usual and then click on the clone icon in the header menu - and lo and behold, "Cheetah" instantly creates a 1:1 copy of the focused element (including all elements on it, if it is a banner or a box), which you only have to "touch" with the mouse and move to its new position. And by the way, it is even faster with the proven key combination
Note: As far as cloning a banner is concerned, there is a slight difference. The copy of a banner is generally placed at the bottom of the web page (as a "final banner") and must then be moved to the desired position on the web page using the "Order Panels" function in the panel properties.
By the way, "cloning" elements in Cheetah Sitebuilder is a feature that can speed up website development enormously. Nothing is faster than cloning an element that already exists on the web page (for example, a text box), then moving it to its new position with the mouse and finally adjusting its properties via the margin menu (or the settings dialog) - if necessary.
Now we come to two special areas of a website, the "header" (quasi the first banner of a website, which usually houses the "main menu") and the "footer", which is often reserved for a contact option (here contact address, social media and newsletter order) and the imprint / privacy policy. For very large websites, it is recommended to integrate a simple menu structure in the place of the "footer", so that the visitor does not have to scroll all the way to the top again just to be able to visit a subsequent page.