Allgemein

• Überschriften
• Textformatierung
• Bilder
• Elemente

Beispiele Formatierung

• Beispiel 1: Text aus einem News Post / Linie / Text (aus einem Block)
• Beispiel 2: Text aus einem Block / Linie / Text
• Beispiel 3: Text / Linie / H2
• Beispiel 4: Text / Linie / H3
• Beispiel 5: Buttons / Linie / H2

Meta Titel und Meta Description

• Aufbau und Beispiele

Allgemein

Überschriften

H1 = Hauptüberschrift

H2 = Absatzüberschrift

H3 = Gliederung innerhalb von einem Absatz z.B. Produkte

Textformatierung

Schriftart im Shop ist Open Sans. Der Textausrichtung sollte immer linksbündig sein.

Wörter sollen nur fett geschrieben werden, um relevante Keywords hervorzuheben. Das Fetten von "allgemeinen" Wörtern (neu, Vorteile, LED´s) und kompletten Sätzen sollte vermieden werden.

Beispiel:

Display --> Digital Signage Display o.ä.
Kamera --> IP-Kamera, 4K-Kamera, HD-Kamera o.ä.
Das Gerät --> Die IP-Kamera, der Netzwerkrekorder o.ä.

Bilder

Wird ein Bild in einen Textabschnitt hinzugefügt, sollte das Bild nicht tiefer sein als der Text sein.

In Bluefoot werden zwei Bildelemente angeboten. Image und Driver. „Image“ ist der Standardblock um Bilder auf Webseiten zu veröffentlichen. „Driver“ wird nur eingesetzt, wenn das Bild verlinkt werden soll.

Elemente

Um einen Text optisch aufzulockern oder einzelne Bereiche hervorzuheben sollte der Block „Horizontal Rule“ bzw. eine Linie verwendet werden.

Farbe: #199575
Höhe: 1px
Breite: 90%
Formatierung: Zentriert

Der Abstand wird nur über das „Padding“ definiert, nicht über Leerzeilen.

Das Padding für die Linie sollte nur in dem Element „Horizontal Rule“ definiert werden, nicht in den Elementen drüber oder drunter (Screenshot). Wenn es in mehreren Elementen definiert wird, stimmen die Abstände nicht mehr!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Padding links und rechts bei jedem Modul: 10 Pixel

Padding am oben Button: 10 Pixel

Padding links und rechts bei jedem Modul: 10 Pixel

Padding am oben Button: 10 Pixel

Padding links und rechts bei jedem Modul: 10 Pixel

Padding am oben Button: 10 Pixel

Padding links und rechts bei jedem Modul: 10 Pixel

Padding am oben Button: 10 Pixel

Padding: Oben 35 Pixel / Unten 15 Pixel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.