Stadt Bayreuth

Absatz und Fließtextformatierung

Ich bin eine Verlinkung im Text.
Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin eine Fettformatierung im Text.
Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin eine Kursivformatierung im Text.
Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Zitat und man darf mich lesen und wiedergeben.

Unsorted List

  • Listenpunkt 1
  • Listenpunkt 2
    • Unterlistenpunkt 2.1
    • Unterlistenpunkt 2.2
  • Listenpunkt 3

Sorted List

  1. Listenpunkt 1
  2. Listenpunkt 2
    1. Unterlistenpunkt 2.1
    2. Unterlistenpunkt 2.2
  3. Listenpunkt 3

Überschriften nach Priorität

Dies ist eine Überschrift erster Priorität

Die „Überschrift 1“ sollte nur einmal auf der Seite vorkommen und das „Fokus-Keyword“ (Thema der Seite) beinhalten.

Dies ist eine Überschrift zweiter Priorität

Die „Überschrift 2“ darf mehrmals eingesetzt werden und kann z. B. für verschiedene Themengliederungen genutzt werden. Auch hier sollte jedoch das Fokus-Keyword zum Einsatz kommen.

Dies ist eine Überschrift dritter Priorität

Die „Überschrift 3“ dient der weiteren strukturellen Gliederung des Inhaltes.

Dies ist eine Überschrift vierter Priorität

Die „Überschrift 4“ dient der weiteren strukturellen Gliederung des Inhaltes.

Dies ist eine Überschrift fünfter Priorität

Die „Überschrift 5“ dient der weiteren strukturellen Gliederung des Inhaltes.

Dies ist eine Überschrift sechster Priorität

Die „Überschrift 6“ dient der weiteren strukturellen Gliederung des Inhaltes.

Buttons nach Verwendungszweck

Die Grundeinstellungen (flat, square etc.) sind nun alle vordefiniert. Einzig der Text auf dem Button, die URL und das Icon müssen nach Bedarf ausgewählt bzw. ergänzt werden.

Der „weiter-Button“ stellt einzig noch die Ausnahme dar, dass das Icon nach rechts ausgerichtet werden muss.

ext. Link-Button

zurück-Button

z. B. bei Contentnavigationen auf Seiten, welche nicht im Menü erscheinen.

weiter-Button

z. B. bei Contentnavigationen auf Seiten, welche nicht im Menü erscheinen

Link-Button

Button für interne Links welche nicht in einem neuen Fenster geöffnet werden.

Info- und Kontaktboxen

Infobox

Dieses „Nachrichtenfeld“ wird in Verbindung mit dem „Info-icon“ für Hervorhebungen genutzt. Die Standardvorlage beinhaltet alle Einstellungen außer das Icon. Dieses muss nach Bedarf ausgewählt bzw. ergänzt werden.

Ich bin eine Nachrichtenbox. Klicken Sie den Bearbeiten Button um diesen Text zu ändern

Kontaktbox

Dieses „Nachrichtenfeld“ wird in Verbindung mit dem „Envelope-icon“ für Kontaktadressen genutzt. Die Standardvorlage beinhaltet alle Einstellungen außer das Icon. Dieses muss nach Bedarf ausgewählt bzw. ergänzt werden.

Ich bin eine Nachrichtenbox. Klicken Sie den Bearbeiten Button um diesen Text zu ändern

Trenner und Linien

Einfache Trennlinie

Die einfache Trennlinie kann für die optische Trennung zwischen einzelnen Bereichen verwendet werden. Die Standardeinstellungen werden hierfür einfach übernommen.

Trennlinie mit Text

Die Trennlinie mit Text kann für die strukturelle Trennung einzelner Bereichen verwendet werden. dient allerdings nicht als „Hauptüberschrift“. Der Text ist einfach zu ergänzen, während alles andere unverändert bleibt.

Trennertext

Bilder und Medien

Einzelbild auf voller Breite

Dieses Element bezieht sich in der Größe IMMER auf die Spalte, die zur Verfügung steht. In diesem Beispiel wird eine Header-Grafik eingesetzt, welche über die komplette Breite der Seite geht. Das Bild sollte hier mindestens eine Breite von 700px haben.

Der Aufbau eines Seiten-Kopfes beinhaltet in folgender Reihenfolge über die gesamte Contentbreite (1-spaltig):
– H1-Überschrift
– ggf. Unterüberschrift (H2)
– Anleser oder Einleitungstext in Fett-Formatierung
– Header-Grafik
– ggf. Bildunterschrift in Kursiv-Formatierung

Anschließend kann es mit dem normalen Inhalt (H2- bzw. H3-Struktur) im normalen Verfahren weiter gehen.

stadtradeln

Optional können Bilder mit „Click-Events“ ausgestattet werden, um beispielsweise auf andere Seiten zu verweisen oder das Bild in Originalgröße zu betrachten.

Einzelbild in 1/3-Spalte

Dieses Element bezieht sich in der Größe IMMER auf die Spalte die zur Verfügung steht. In diesem Beispiel wird eine Stimmungs-Grafik eingesetzt, welche sich ebenfalls an der Breite der Spalte anpasst und sich inhaltlich am Text orientieren soll. Das Bild sollte hier mindestens eine Breite von 640px haben. Die Aufteilung sollte immer 2/3 (Text) zu 1/3 (Bild) sein.

stadtradeln

Optional können Bilder mit „Click-Events“ ausgestattet werden, um beispielsweise auf andere Seiten zu verweisen oder das Bild in Originalgröße zu betrachten.

Bilderkarussell

Dieses Element dient zur Darstellung von mehreren Bildern in einem Slider. Es soll jedoch nicht als „Bildergalerie“ verwendet werden und wir empfehlen eine maximale Anzahl von fünf Bildern.

Die Bildgröße aller Bilder sollte die selbe sein (max. 640px Höhe)

Das Clickevent (Bild öffnet sich in Originalgröße) sollte nicht geändert werden.

Ein Einsatz auf voller Contentbreite ist zu empfehlen.

Videoplayer auf voller Breite

Dieses Element bezieht sich in der Größe IMMER auf die Spalte, die zur Verfügung steht. In diesem Beispiel wird ein Youtube-Video eingesetzt, welche über die komplette Breite der Seite dargestellt wird.

Wir empfehlen Videoelemente immer auf voller Contentbreite zu integrieren.

Google-Maps

Zur optischen Darstellung von Kontakt- oder Anfahrtsinformationen, kann das Element „Google-Maps“ verwendet werden. Auch hier wird die Darstellung auf voller Contentbreite empfohlen.