Webseiten erstellen mit CHEETAH
Ein erster Blick auf den drag'n drop Sitebuilder "Cheetah" (7)
Sobald Sie das Kontaktformular fokussiert haben, können Sie erst einmal dessen allgemeine Gestaltung durch Änderung der entsprechenden Eigenschaften über das rechte Randmenü vornehmen (betrifft hier in erster Linie die Überschrift des „Sende-Buttons“ – „MITTEILUNG ABSCHICKEN“). Das wollen wir bis auf die Schaltflächenbeschriftung hier im Einzelnen nicht tun, sondern gleich einen Blick auf das Kopfmenü des Elements werfen. Denn hier finden Sie jetzt u. a. ein blaues Zahnradsymbol. Es kennzeichnet bei einem Element, dass es explizit auch funktionell konfiguriert werden kann. Im Fall des Kontaktformulars öffnet sich nämlich bei einem Klick darauf folgender Einstell-Dialog:
Er besteht aus drei Seiten. Auf der ersten Seite („E-Mail“) legen Sie u. a. fest, an wem die E-Mail mit welchem „Betreff“ versendet werden soll. Gewöhnlich ist hier die E-Mailadresse diejenige des Friseursalons. Als „Betreff“ könnte man vielleicht „Terminvereinbarung“ wählen. Die restlichen Felder lassen wir dagegen erst einmal leer.
Auf der zweiten Seite legen Sie die Felder der Kontaktmaske fest. In diesem Fall sind bereits insgesamt vier verschiedene davon im Template angelegt worden, deren Bezeichner („Label“) – da in Englisch – wir nur noch in die deutsche Sprache übersetzen müssen. Selbstverständlich können Sie hier auch Felder löschen („Papierkorb“) oder neue Felder hinzufügen („+ FELD HINZUFÜGEN“ – Button). Über die „Pfeiltasten“ können Sie zusätzlich noch die Positionen der Felder im Kontaktformular umsortieren.
Um die Feldbezeichner zu ändern (und um auch festzulegen, ob es sich um Pflichtfelder handelt oder nicht), müssen Sie auf das Stift-Symbol klicken. Probieren Sie auch einmal aus, einem Label ein Icon zuzuweisen.
Die Seite „Action“ lassen wir hier erst einmal außer Acht, da wir diese Funktion hier nicht benötigen.
Hinweis: Bevor Sie Ihre Webseite endgültig freigeben, testen Sie zuvor alle verwendeten Kontaktformulare auf ihre Funktion! Das ist im Vorschau-Modus nicht möglich, weshalb Sie die komplette Webseite zuvor veröffentlichen und auf der veröffentlichten Seite Ihre Tests vornehmen müssen.
Damit ist das Kontaktformular erst einmal erledigt und wir können uns dem nächsten Banner widmen, der lediglich drei „Logos“ enthält. Aus Gründen, die gleich einsichtig werden und mehr didaktischer Natur sind, sollten Sie erst einmal die beiden rechten Template-Logos von der Webseite löschen. Anschließend tauschen Sie das Bild des verbliebenen Logos mit dem entsprechenden Logo, welches wir bereits in das Builderall Image-Repository hochgeladen haben, auf gewohnte Weise aus. Damit es sich etwas besser vom Untergrund abhebt, können wir hier auch gleich die Farbe des Banners entsprechend anpassen. Also Banner fokussieren und im rechten Randmenü den Bereich „Hintergrund“ öffnen. Dort klicken Sie in das Feld links neben dem „Farbtropfen“, wodurch sich darunter der Farbeinstellungsdialog (der bei allen Elementen in „Cheetah“ gleich aufgebaut ist) öffnet. Dort wählen wir mit der Maus auf dem Farbstreifen eine Grundfarbe aus (z. B. Blau) und bewegen dann im Farbfeld darüber mit der Maus den Auswahlpunkt so lange hin und her, bis uns die Bannerfärbung im Zusammenspiel mit dem Logo gefällt (die Farbänderung im Editor erfolgt simultan mit der Mausbewegung). Und das war es auch schon. Jetzt brauchen wir noch zwei Kopien des Logos, um die ursprüngliche Gestaltung des Templates wieder herzustellen. Und jetzt kommt eine weitere Funktion ins Spiel, die Sie schnell lieben lernen: Sie können nämlich ausnahmslos jedes Element im Editor „klonen“. Und das geht so. Sie fokussieren mit der Maus wie gewohnt das Element und klicken dann im Kopfmenü auf das Klone-Icon – und siehe da, „Cheetah“ erzeugt augenblicklich von dem fokussierten Element (und zwar mit allen Elementen darauf, wenn es sich um ein Banner oder um eine Box handelt) eine 1:1 – Kopie, welches Sie nur noch mit der Maus „anfassen“ und an ihre neue Position verschieben müssen. Und es geht übrigens noch schneller mit der bewährten Tastenkombination
Hinweis: Was das Klonen eines Banners betrifft, gibt es einen kleinen Unterschied. Die Kopie eines Banners wird generell ganz unten auf die Webseite gesetzt (quasi als „Schlussbanner“) und muss dann über die Funktion „Order Panels“ in den Panel-Eigenschaften in die gewünschte Position auf der Webseite verschoben werden.
Das „Klonen“ von Elementen im „Cheetah Sitebuilder“ ist übrigens eine Funktion, welche die Webseitenentwicklung enorm beschleunigen kann. Nichts geht schneller, als ein bereits auf der Webseite vorhandenes Element zu klonen (beispielsweise eine Textbox), es dann mit der Maus an ihre neue Position zu verschieben und schließlich dessen Eigenschaften über das Randmenü (bzw. dem Einstellungsdialog) – wenn nötig – anzupassen.
Kommen wir jetzt noch zu zwei speziellen Bereichen einer Webseite, dem „Header“ (quasi das erste Banner einer Webseite, welches in der Regel das „Hauptmenü“ beherbergt) und dem „Footer“, der oft einer Kontaktmöglichkeit (hier Kontaktadresse, Social Media und Newsletter-Bestellung) und dem Impressum / Datenschutzerklärung vorbehalten ist. Bei sehr großen Webseiten empfiehlt sich an der Stelle des „Footers“ auch eine einfache Menüstruktur zu integrieren, damit der Besucher nicht erst wieder bis nach oben scrollen muss, nur um eine Folgeseite besuchen zu können.