Create Websites with CHEETAH
A first look at the drag'n drop sitebuilder "Cheetah“ (8)
To integrate header and footer areas into a website, "Cheetah" offers two different strategies, which should only be mentioned briefly here. The easiest way is to provide a separate banner on the website. In this template this is done for the "Footer", while the main menu is also placed on the first banner, which is not designed as a separate "Header". You can do it that way if you want. But what if a website consists of, let's say, 20 different subpages, whose header and footer should always look the same because of the corporate design? In principle, this is not a problem at first, because you can clone every page in "Cheetah". It only becomes problematic if you have to make changes to the header or footer afterwards. And that means in this case that the changes have to be made on each page individually (high workload!). Well, you can help yourself by creating a banner template and replacing it on each page in the block. But this is not the ideal solution. It is better to use the solution that "Cheetah" offers natively, namely that you design special headers or footers and then assign them explicitly to web pages. They are then no longer visible in the web page editor in edit mode (they don't need to be), but later (and in the preview) on the web page. This elegant and development time saving technique will be explained in detail later in this book. However, the website template we are currently adapting does not yet use this technology. Here we have to adapt the corresponding banners.
Let's start with the footer, which we have just arrived at. The first thing we do is replace the texts, which is done quickly.
The first interesting element on the footer ribbon is the small menu on the left edge. Its header menu has a gear icon, through which we can open the settings dialog, which is amazingly similar to the one we already got to know in the contact form:
The operation is analog.
First we change the label identifier by clicking on the respective pen icon with the mouse. In the dialog "Add field" you will find the corresponding label identifier, which can be overwritten without any problems. Theoretically, you could also generate submenu entries at this point, but this makes no sense here.
After that we have to set up the linking, because a click on one of the menu items should cause a change to a corresponding web page. The button with the link symbol serves this purpose. When you click on it, the "Configure redirects" dialog opens. And lo and behold, the page links are already correctly entered in the template:
So we don't need to do anything else here. What is still open is the contact form, reduced to one field, in which the website visitor should enter his e-mail address if he should be interested in a newsletter. As you will remember, its settings dialog opens as soon as you click on the gear icon of the corresponding header menu.
All that remains is to translate the menu in the header area. Here you just have to move the menu element down a bit so that its header menu becomes visible. And the rest you already know...
If you now replace (or delete) the image "YOURLOGOHERE" on the left, the first page of our website is already finished. With some preparation and without these explanations here, this would have taken hardly more than 5 minutes in total...
Note: Do not forget to save!
So only pages 2, 3 and 4 of the website remain to be adjusted. In order to first get a small overview of their content, we select them one by one from the drop-down box located at the top left and scroll back and forth a bit. What's noticeable is that the footer is the same on all the web pages. And since we've already customized the footer on the homepage, we can bring another ingenious functionality of the "Cheetah" site builder to bear, namely the use of custom templates. So switch back to the home page via the aforementioned drop-down box, and there to the footer. Here we focus on the footer banner and click on the first icon in the header menu - the floppy disk icon (by the way, you can find it on all elements that "Cheetah" offers for web design). A small window will open where you can give the element a name.