Teil 7 = Menüs & Header & Footer in Cheetah von Builderall

Ich hatte bei den Theorieteilen schon mal geschrieben, dass wir unterscheiden sollten zwischen

  • WebSeiten = meist globale Header & Footer
  • OnePager = meist Header & Footer auf der Seite
  • LandingPages oder SalesPages = selten bis nie Header & wenn, dann ganz schlichten Footer

Hier jetzt aus der Sicht von Header und Footer nochmal vorweg kurz theoretisch betrachtet:

Unter OnePager verstehen wir WebSeiten, die aus einer einzelnen Seite bestehen – das betrifft zwar meist auch LandingPages und SalesPages, aber sie erfüllen einen anderen Zweck 😉

Bei LandingPages und SalesPages verwenden wir beides nicht, um die Besucher nicht vom eigentlichen Zweck der Seite ab zu lenken = etwas zu kaufen – oder ihre Adresse ein zu tragen, um ein sogenanntes Freebie zu bekommen – also irgendwas kostenloses – ein kleines eBoock oder ein Video oder was auch immer.

In diesem Sinne machen wir keinen Header – und oftmals auch keinen Footer, weil wir Impressum und Datenschutzerklärung eher irgendwo klein als TextLink positionieren – oder in einem ganz schmalen Footer, der nur das beinhaltet.

Wenn wir in einem OnePager = eine WebSeite, die nur aus einer einzelnen – meist längeren – Seite besteht – ein Menü haben wollen, macht es Sinn, in der Seite ein entsprechendes Banner mit Menü an zu legen. Wie du dann einzelne Teile dieser Seite anspringen kannst, erklär ich dir später dann unter „Anker“.

Wenn du eine WebSeite mit mehreren EinzelSeiten machen möchtest, dann machts meist Sinn, sowohl Header, als auch Footer nicht direkt in den jeweiligen Seiten an zu legen – sondern global – sprich links im Menü, wo du auch zu den Grundeinstellungen kommst.

In der Seite

Wenn du in einem OnePager ein Menü anlegen möchtest, machst du das als Banner – dort gibt es einen eigenen Punkt

Header

Dies würde – umgelegt auf die MS Office Produkte einer Kopfzeile entsprechen. Wenn du nur eine Seite hast, ist es egal, ob du den Text einfach schreibst. Aber wenn du mehrere Seiten in deinem Dokument – oder hier in der WebSeite – hast, dann machts Sinn, dies global fest zu legen – doch dazu später – aktuell bleiben wir mal als Text – oder Banner – in der Seite – ganz oben:

Du kannst die einzelnen Punkte alle einzeln ändern – wenn du aber ein Design findest, welches schon in etwa dem entspricht, was zum Rest der Seite passt, kannst du gleich das auswählen.

Wenn du schon Banner erstellt hattest, kannst du den MenüBanner dann beim Bearbeiten eines Banners unter

Banner anordnen

in die richtige Reihenfolge bringen, also nach ganz oben schieben – dazu am besten den Banner mit dem Menü anklicken, dann ist er rechts auch umrandet – und dann schiebst du ihn nach ganz oben – und – ganz wichtig – klickst dann auf ==>MOVE

Kommen wir zu den Menüpunkten der Bearbeitung:

  • Speichern
  • Bearbeiten
  • Ebene nach unten
  • Ebene nach oben+
  • Zentrierung in Box oder Banner
  • Konfigurieren der „Items“ = Menüpunkte
  • Kopieren
  • Verbergen
  • Löschen

Mit Bearbeiten sollte rechts dann wieder eine Auswahl kommen, über der – Menü – drüber steht

Hierbei ist wichtig zu wissen, dass mit – ITEM – die jeweiligen Menüpunkte gestaltet werden können – und mit – Submenü – eben die Untermenüs – gestaltet – nicht anders beschriftet. Die Texte der Menüpunkte und SubmenüPunkte können wir mit dem

Zahnrad

bearbeiten – damit kommen wir in folgende Auswahl:

Mit den Pfeilen können wir – auch später noch – die Anordnung der Menüpunkte verschieben und unten mit ´+Item können wir weitere hinzu fügen – mit dem Mistkübel können wir auch welche wieder löschen

Mit den Stiften kommen wir jeweils in die SubMenüs und zur Bearbeitung des angezeigten Textes

Oben bei Label kommt der Name des Menüs rein – und bei SubMenus legen wir eventuell gebraucht UnterMenüs an – es geht aktuell nur eine Ebene.

Und mit dem LinkSymbol weisen wir dann zu, worauf wir hin verlinken wollen – und da haben wir wieder alle bekannten Möglichkeiten zur Verfügung – hier nur die wichtigsten:

  • Web = Seiten im Netz – bitte immer mit http://….. oder https:// … angeben – am besten aus der Adresszeile des Browsers kopieren
  • Seite = eine Seite innerhalb dieser WebSeite
  • PopUp = wenn du möchtest, dass ein PopUp aufploppt
    das verwendet man eher nicht im Menü, sondern, wenn es irgend einen Button gibt und dann eben ein PopUp mit Eintragungsmöglichkeiten aufgehen soll.
    Wenn du beim Scrollen oder wenn wer die Seite schließen möchte, möchtest, dass ein PopUp aufploppt, legst du das PopUp bei den globalen Einstellungen an und definierst dann in den SeitenEinstellungen, wann es aktiviert werden soll.
  • Anker kommen noch
  • Download ist, wenn du jemanden etwas zum Download anbieten möchtest, das ladest du dann auch hier direkt hoch – wird aber auch seltener im Menü verwendet.
  • Im gleichen Tab öffnet die neue Seite eben im gleichen BrowserTab = wird weniger verwendet, bzw. wenn, dann eher nur im Menü – wenn alles, was aufgeht in der selben WebSeite ist.
  • In neuen Tab öffnen macht Sinn, wenn du auf externe Quellen verlinkst, weil dann der aktuelle BrowserTab offen bleibt – und die/der InteressentIn wieder hier her zurück kehren kann.
  • Open in the parent würde auch die aktuelle Seite überlagern und quasi schließen – würde ich persönlich auch nicht unbedingt empfehlen.

Bearbeiten = Stift

Hier findest du jetzt die Gestaltungsmöglichkeiten für die einzelnen MenüPunkte und für das SubMenü

ACHTUNG: wenn das SubMenü nicht im Vordergrund angezeigt wird, verwende bitte die Möglichkeiten, das Menü als Layer oben anzeigen zu lassen.

Damit kommen wir auch gleich zu noch einem wichtigen Punkt – wenn du eine lange Seite hast – und möchtest, dass das Menü immer oben stehen bleibt und alles, was darunter kommt, scrollt, dann fixiere das Menü über den Punkt

Fixieren bei der Bearbeitung des Banners

Beispiele meiner Menüs, in denen ich UnterMenüs verwende – du siehst, du kannst das ursprüngliche Layout lassen – oder etwas ganz Neues kreieren:

Footer

Kommen wir zur Fußzeile, wie sie in den MS Office Programmen bezeichnet wird – nachstehend 3 der Banner, die du als Footer einfügen kannst:

Ich gestehe, mir sind die alle zu knallig – und da du ja sowieso alle Daten anpassen musst, kannst du sie gleich auch selbst als eigenen leeren Banner einfügen – und nach deinen Wünschen gestalten – meine StandardFooter schaut so aus – immer mit kleinen Abwandlungen:

Da siehst du rechts drüben auch noch das Builderall Logo eingeblendet – das ist standardmäßig eingeschalten – ausschalten kannst du es in den Grundeinstellungen beim grünen Punkt – allerdings nur, wenn du einen bezahlten Plan hast:

Ich brauche das nicht, weil ich ja meinen eigenen WerbeBanner drauf habe – da stört mich das rechts unten eher – und ich würde dir auch anraten, CRM ein zu schalten – also es sollte so aussehen:

Zur Erinnerung – Favicon wäre das kleine Symbol in der Anzeige im BrowserTab.#

Den Footer kannst du wirklich ganz individuell gestalten, hier noch ein Beispiel

Das ist von einer meiner ersten Seiten – da hatte ich noch keine Links zu den ganzen Social Media Kanälen dabei – statt dessen aber nochmals das eMail Marketing Formular zum Anfordern meines kostenlosen eBooks.

Globale Header & Footer

Die Gestaltungsmöglichkeiten sind gleich mit den Headern und Footern, die du in einer Seite anlegen kannst – der Unterschied ist, dass du sie einmal erstelllst – und dann allen Seiten deiner WebSeite zuweisen kannst – oder auch nur einzelnen.

ACHTUNG: bei globalen Einstellungen = Header & Footer & PopUp unbedingt die Webseite nochmals neu veröffentlichen – oder eine Einzelseite speichern – damit die Änderungen auch wirklich übernommen werden.

Und dann auch noch mehrmals aktualisieren, wenn du sie dir in der Live-Vorschau anschaust – die Übernahme kann auch noch ein paar Minuten dauern.

Du erstellst sie unterhalb der Grundeinstellungen – also entweder auf Header oder Footer klicken, dann einen neuen erstellen und einen Namen vergeben.

Nachdem du links auf

  • Header

geklickt hast, zuerst mal einen

  • neuen Header erstellen

also einen Namen vergeben – du kannst auch mehrere Header anlegen, wenn du eine umfangreiche WebSeite planst.

Du kannst auch für Desktop und mobil je einen eigenen Header anlegen – kannst aber auch den für Desktop optimieren, dann kannst überall den gleichen verwenden – kommt gleich – zuerst mal das Einstiegsbild:

sobald du auf – Bearbeiten Header – klickst, hast du wieder die gleichen Möglichkeiten zur Verfügung, als wenn er in einer normalen Seite eingefügt worden wäre.

Gleiches gilt für den/die Footer.

Header & Footer zuweisen

Sobald du Header und Footer angelegt hast – funktioniert übrigens auch für PopUps – musst du in jeder einzelnen bereits erstellten Seite diese zuweisen – indem du auf

  • Einstellungen

klickst.

ACHTUNG: Wenn du mehrere ähnliche Seiten hast, macht es Sinn, eine Seite fertig zu machen – inkl. der Zuweisung von Header und Footer – und diese erst dann zu kopieren, weil dann alles mit kopiert wird.

Bei den Einstellungen etwas weiter runter scrollen, dort findest du dann die Möglichkeiten, die vorher angelegten globalen Header & Footer zu zu weisen:

Speichern nicht vergessen 😉

Manchmal kann es sein, dass du danach auch nochmal die WebSeite neu veröffentlichen musst, damit die Seiten dann richtig angezeigt werden.

Anzeige von globalen Header und Footer funktioniert nicht in der Vorschau – nur, wenn du mit

  • diese Seite anzeigen

die danach fertige (Web)Seite anzeigen lässt.

Hier findest du alle bisher erschienen Teile dieses Projektes

Falls du mal deine eigene Webseite basteln möchtest – sichere dir hier deinen Zugang zu Builderall
inkl. kompletten eMail Marketing Programm und sämtlichen Tools, die du für dein Online Business brauchst
ich empfehle dir den Premium Plan – hier kommst du zur PreisÜber


Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s