Webseiten erstellen mit CHEETAH
„Rapid Design“ einer ersten Website (2)
Nun sollten Sie im Eigenschaftenbereich des „Internen Hintergrunds“ noch die speziellen Eigenschaften "Origin", "Position", "Wiederholen" und „Größe“ durchprobieren und beobachten, was dabei im Editor mit dem Bild passiert.
Auf dem Content-Banner befindet sich oben noch eine blaue Box mit einem Texttemplate, welche den oberen Teil des Bildes abdeckt. Diese Box sollten Sie als Nächstes über die Papierkorb-Funktion des dazugehörigen Kopfmenüs löschen.
Nun werfen wir schnell noch einen Blick auf den Header. Da wir weder Logo noch Menü benötigen, löschen wir beide Elemente auf die gleiche Weise wie eben die Box. Das verbleibende Header-Banner wollen wir stattdessen mit einem hübschen Werbespruch versehen: "Der Luxus an einer Zigarre ist nicht deren Preis, sondern die Zeit, die man mit ihr verbringt". Und auch das ist schnell geschehen. Dazu wechseln wir in der Elementeauswahl in die Kategorie „Text“ und ziehen von dort eine H6-Überschrift auf das Banner und richten das umschriebene Rechteck linksbündig etwas auf dem Banner aus. Anschließend wechseln wir mit einem Doppelklick darauf in den Texteditor, wo wir als Erstes den Beispieltext mit der Maus markieren und die Textfarbe in „Gelb“ wechseln. Anschließend ersetzen sie diesen Text durch den Werbespruch (kann auch in der üblichen Weise über die Zwischenablage aus einer Textdatei heraus erfolgen). Nun muss nur noch die Textausrichtung auf „linksbündig“ gestellt werden. Auch sollte man die Grundformatierung in der entsprechenden Klappbox von „H6“ auf „Neutral Paragraph“ stellen, um einen Suchmaschinen-Crawler nicht unnötig zu verwirren… Den Zeichensatz (Font) und die Fontgröße sollten Sie übrigens hier so wählen, dass der gesamte Schriftzug ungefähr den Seiteninhaltsbereich ausfüllt (Text vorher mit der Maus vollständig markieren! Ansonsten zeigt die Änderung der Fontgröße (Size) keine Wirkung). Am besten, Sie nutzen hier gleich einmal die Gelegenheit, um mit diesem Editor etwas herumzuspielen…
Tipp: Anstelle dieses „Inlineeditors“ können Sie auch ein separates Editorfenster über das Kopfmenü (Symbol „T“) des entsprechenden Textelements aufrufen und darin ganz bequem ihren Text formatieren. Nur beachten Sie, dass – wenn die Fontfarbe auf „Weiß“ eingestellt ist – der Text erst dann sichtbar wird, wenn Sie ihn im Editor mit der Maus markieren!
Nach der gleichen Methode können Sie jetzt auch den Text auf der Banderole austauschen und eventuell umformatieren. Zuvor sollten Sie noch den Aktion-Button löschen und die blaue Hintergrundfarbe der Banderolen-Box durch ein passendes Braun ersetzen (Farbcode HEX „3C3427“).
Hinweis: In der einheitlichen Farbauswahl der „Cheetah“-Elemente können Sie explizit immer auch einen Farbcode entweder im HEX- oder RGB-Format eingeben. Solche Farbcodes kann man leicht aus FLAT UI – Farbpaletten oder mittels eines „Color-Pickers“ direkt aus Webseiten entnehmen. In diesem Zusammenhang sollten Sie die Chrome-Erweiterung „ColorPick Eyedropper“ oder ein analoges Tool installieren und einmal ausprobieren. Sie werden es irgendwann nicht mehr missen wollen.
Am Ende könnte der Content-Banner dann folgendermaßen aussehen (Boxlänge auf 570 Pixel kürzen, rechte Ecken gerundet mit Radius 10 darstellen):
Sie haben sicherlich beim Anklicken bemerkt, dass die Texte auf vollkommen durchsichtigen Boxen liegen. Auf diese Weise lassen sie sich quasi im Ganzen neu positionieren (oder als Vorlage speichern etc.), in dem man einfach die komplette Containerbox und nicht jeden einzelnen Text separat an den gewünschten Ort verschiebt.
Bleibt noch das Bestellformular für den Newsletter. Nach der Beschriftung des Kopfmenüs handelt es sich hier um ein spezielles „Eingabe-Formular“, was übrigens auch Sinn ergibt, denn mit dieser Website wollen wir ja u. a. die E-Mailadressen von Zigarrenliebhabern einsammeln, um sie später gezielt im Rahmen von E-Mail-Marketingaktionen ansprechen zu können. Konkret bedeutet das, dass – sobald jemand über dieses Formular einen Newsletter bestellt – dessen E-Mail-Adresse in einer speziellen Liste im E-Mail-Autoresponder „“ von Builderall landet. Eine solche Liste können Sie entweder separat in anlegen, eine dort bereits vorhandene mit dem Eingabeformular verbinden oder eine Liste direkt über das Eingabeformular anlegen. Dazu müssen Sie in dessen Kopfmenü die Schaltfläche mit dem Zahnradsymbol anklicken, worauf sich ein kleines Dialogfenster öffnet.