Teil 4 = Schriften und Banner und Elemente in Cheetah

Kommen wir jetzt endlich wirklich zu unserer ersten Seite – doch auch hier gibt es vorweg noch ein paar Grundeinstellungen – nämlich die Schriftarten für diese WebSeite – und einen eventuellen generellen Hintergrund.

Beginnen wir mit dem

SeitenHintergrund

der wird sicher nicht so oft verwendet, daher nur kurz erwähnt:

ACHTUNG: hier kannst du keine externen Bilder verlinken, sondern musst eines verwenden, welches du bei Cheetah hoch lädst (gilt auch für FavIcons und ShareImages – mehr dazu später) Eins meiner Beispiele für Hintergrundbilder:

EnerQi.rocks

Auf dieser WebSeite habe ich für jede DetailSeite jeweils ein eigenes Hintergrundbild fest gelegt – aus den Images, welche von Builderall zur Verfügung gestellt werden – und habe darüber einzelne verschiedenfarbige und unterschiedlich intensiv transparente Banner gelegt.

Globale SchriftEinstellungen

Entgegen des Hintergrundes, der nur jeweils für die jeweils aktuelle Seite gilt, gelten die SchriftEinstellungen für alle DetailSeiten dieser einen WebSeite.

!!! ACHTUNG: Du solltest unbedingt die Schriften hier global fest legen und nicht jeweils händisch formatieren – weil dadurch für deine Seite ein gleichmäßiges und einheitliches Bild entsteht. Und wenn du später die Schriftgrößen – speziell auch für die mobile Ansicht – anpassen willst, kannst du es auch hier jeweils generell für alle DetailSeiten machen. !!!

Und nicht die Schrift Symbol verwenden, weil die auf vielen Browsern dann genau das macht – Symbole = Hyroglyphen – statt einer leserlichen Schrift.

Es gibt 6 Überschriften und einen normalen TextAbsatz – in der Bearbeitung sieht das dann so aus wie ganz rechts am Foto – also, wenn du dann Texte rein holst:

In der direkten TextBearbeitung dann nennen sich die Überschriften Headings – der normale Absatz Paragraph – und es gibt dann noch welche mit Neutral davor, die sind für freie NachBearbeitung gedacht – und können nicht global eingestellt werden – also du hast:

  • Heading 1 = Überschrift 1
  • Heading 2= Überschrift 2
  • Heading 3= Überschrift 3
  • Heading 4= Überschrift 4
  • Heading 5= Überschrift 5
  • Heading 6= Überschrift 6
  • Paragraph = normaler TextAbsatz
  • Neutral Heading 1
  • Neutral Heading 2
  • Neutral Heading 3
  • Neutral Heading 4
  • Neutral Heading 5
  • Neutral Heading 6
  • Neutral Paragraph

Noch etwas ist wichtig – du solltest in einer Seite nur einmal die Überschrift 1 = Heading 1 verwenden – ansonsten für HauptÜberschriften eben 2 – und dann abgestuft, je nachdem, wie deine Seite aufgebaut ist.

Neu – Einstellungen – Vorlagen

Der nächste wichtige Punkt – wenn du irgend etwas Neues in die Seite einfügen möchtest, beginnst du entweder mit – NEU – oder Vorlagen. Um zu Einstellungen zu gelangen, musst du einen Banner oder ein Element anklicken, dann erhältst du die Bearbeitungsmöglichkeiten – nachstehend nur ein Überblick – die jeweiligen Erklärungen folgen dann bei der Beschreibung der einzelnen Elemente:

Dies nur als erster kurzer Überblick, damit du siehst, dass sich diese Bearbeitungsmöglichkeiten von Element zu Element ändern können – also die vom Banner gibt es immer – aber es kommen dann noch andere hinzu.

Zu den Vorlagen – du siehst in den Bearbeitungsmöglichkeiten die Diskette – immer ganz links – die bewirkt, dass du einen kompletten Banner – mit allen Inhalten – oder auch nur ein einzelnes Element – abspeichern kannst – und dies dann unter Vorlagen in anderen WebSeiten wieder rein holen kannst – indem du dort ann eben nicht auf NEU klickst, sondern auf – VORLAGEN.

Banner – Elemente

Wenn du auf – NEU – oder – VORLAGEN – kickst, wirst du danach gefragt, ob Banner oder Elemente. Dazu ist wichtig, dir vorweg noch etwas bewusst zu machen:

Cheetah arbeitet fast vollautomatisch responsiv – unter Einhaltung einiger grundlegender „Regeln“

  • Alles, was sich in einem Banner befindet, gehört in irgend einer Form zusammen
  • Alles, was sich in einer Box befindet, gehört in irgend einer Form zusammen
  • Es gibt keine Elemente, die sich nicht in einem Banner befinden
  • Eine Box ist ein zusätzliches Mittel, um responsiv noch automatischer zu funktionieren

Ich erklärs immer gern so – wenn du einkaufen gehst, legst du deine Einkäufe in einen Einkaufswagen (Banner) – kunterbunt durch einander. Wenn du dann fertig bist, könnte es sein, dass du im Auto so Klappboxen (Boxen) hast, in der du dann etwas sortierst beim einräumen.

Genauso ist es in Cheetah – Banner sind immer größere Einheiten, in denen unterschiedliche Elemente rein getan wird – Boxen sind kleinere Behältnisse von zusammengehörenden Elementen. Ich möche es dir am praktischen Beispiel eines meiner OnePager zeigen:

ChrisTina.Maywald.rocks

Ich habe jeden Part in einem einzelnen Banner gemacht – wenn du dir die Seite selbst anschaust, ich habe sie auch farblich unterteilt – also die einzelnen Banner – und dort, wo ein Bild über die ganze Breite geht, ist auch jeweils ein Banner mit einem Hintergrundbild.

Hier jetzt gibt es auch noch zusätzlich 5 Boxen – jeweils

  • Überschrift
  • Bild des Buches
  • Untertitel

Und ich hab die erste Box so gemacht, wie sie mir gefällt – habe sie mir dann mobil angeschaut, ob alle Elemente in der richtigen Reihenfolge untereinander stehen – und habe dann die komplette Box mit den Inhalten kopiert – und dort dann jeweils die Texte und Bilder geändert.

Dadurch sind dann mobil auch die einzelnen Boxen in der richtigen Reihenfolge – weil die werden so angezeigt, wie sie eingefügt worden sind – von daher ist es auch hier wichtig, sich vorher zu überlegen, was man wie machen möchte.

Die beiden Textblöcke unten habe ich dann auch in einer Box zusammen gefaßt – weil in der Mobilansicht können

  • entweder die Elemente in einer Box
  • oder die ganze Box

nach oben oder unten verschoben werden in der Reihenfolge – wenn also der Inhalt einer Box mobil passt – und diese erst danach kopiert wird, passt der Inhalt der anderen Boxen automatisch auch.

Du kannst auch Boxen in einander verschachteln – wie auch im realen Leben die Einkaufstüten dann in die Einkaufskörbe kommen 😉

Hier noch ein Beispiel aus obiger Seite – hier gibt es pro Banner 2 Boxen, die über die ganze Breite des Banners gehen – also pro Blog eine Box – und für den Text gibt es dann noch eine eigene Box – in der Box:

Noch ein Bild, welches den direkten EinstiegsBildschirm, sobald du eine Seite öffnest – inkl. ein paar Ergänzungen – anzeigt 😉

Elemente

Hier kurz vorweg – welche Elemente gibt es?

ACHTUNG: für ALLE Elemente braucht es vorher ein Banner, in welches sie hinein gezogen werden können.

Konkretes Beispiel – es gibt zwar die Möglichkeiten

  • Big Menu
  • Drip Menü

aber ein ganz normales Menü finden wir in den Elementen nicht. Das hat den Grund, weil cie normalen Menüs bereits im Banner – Header – mit drinnen ist – bzw. eben dort dann ausgewählt werden kann, welche Art von Menü man haben möchte.

Hier findest du alle bisher erschienen Teile dieses Projektes

Falls du mal deine eigene Webseite basteln möchtest – hier klicken und im 1. Monat für € 1,– testen


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