Corporate-Design-Manual - FLIB - Wir-Portal - Erzbistum-Paderborn
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
FLIB Corporate-Design-Manual Stand: 8. Dezember 2021
2
FLIB-System – Farben
Farbgebung – Primär- und Sekundärfarbe
Die Farbgebung der Websites ist immer in maximal zwei Auf der Website des Erzbistums etwa wird das dunkle Rot
Farben unterteilt, die Primär- und die Sekundärfarbe. Pas- als Primär- und Sekundärfarbe genutzt.
send zu den Farben werden maximal zwei Schriftfarben Das heißt, dass es nicht immer zwei unterschiedliche
gewählt. Farben sein müssen, sondern dass für die Primär- und die
Sekundärfarbe auch dieselbe Farbe verwendet werden
kann. Das Gleiche gilt auch für die Schriftfarben.
Primärfarbe
Die Primärfarbe wird als Akzentfarbe beim Inhalt der
■ RGB* 174/12/33 Elemente verwendet, z. B. für Links, Buttons, Navigation,
■ Web # ae0c21 Eingabefelder und Textgestaltung.
Sekundärfarbe
Die Sekundärfarbe unterstützt die Primärfarbe und wird
hauptsächlich als Strich vor den Überschriften genutzt.
Zudem ist sie noch als Hintergrundfarbe, als Rahmen im
Akkordeon und als „Home“ in der Breadcrumb wiederzu-
finden.
Schriftfarben
Passend zu den Farben werden maximal zwei Schriftfarben
gewählt. Diese sollten immer Schwarz und/oder Weiß sein,
um einen möglichst hohen Kontrast und dadurch eine gute
■ RGB* 0/0/0 Lesbarkeit zu erzielen.
■ Web # 000000
Hintergrund
Neben der Sekundärfarbe als Hintergrund einiger Seiten-
elemente lässt sich bei jedem Element ein Hintergrund ein-
■ RGB* 255/255/255 stellen. So werden Abgrenzungen zwischen den einzelnen
■ Web # ffffff Elementen geschaffen.
Die Hintergrundfarbe der Elemente ist auf Weiß vorein-
gestellt und lässt sich durch den Button „Nein“ in Grau
umstellen. Anstatt der Farbe kann auch ein Hintergrund-
bild mit eingebaut werden.
■ RGB* 245/245/245 Es wird empfohlen, Artikel möglichst mit der Hintergrund-
■ Web # f5f5f5 farbe Weiß aufzubauen. Möchten Sie Inhalt besonders her-
vorheben, können Sie den Hintergrund ändern oder eines
* Farbprofil sRGB der farbigen Elemente (z.B. das Highlight-Element) nutzen.
3
FLIB-System – Seitenelemente
Wichtige allgemeine Informationen
Bevor wir mit der Vorstellung der einzelnen Seitenele-
mente beginnen, werden noch ein paar allgemeine
Themen erklärt, um das Arbeiten mit den Seitenele-
menten zu erleichtern.
Bilder/Dokumente Fügen Sie ein Bild zu einem Element hinzu, steht Ihnen
immer die „Crop“-Funktion zur Verfügung. Sie müssen
(Hinweise über die Bildsprache finden Sie im CD das Bild vorher nicht zuschneiden.
Manual unter: https://wir-erzbistum-paderborn.de/
arbeitstools-downloads/corporate-design-manual/ ) Allgemeine Info zu Bildgrößen
Beim Upload eines Bildes/Dokumentes sollte immer Wenn Sie im Umgang mit Bildern und Bildformaten
darauf geachtet werden, die Metadaten bestmöglich wenig oder keine Erfahrungen haben, empfehlen wir
zu vervollständigen, besonders da die Angaben über die Ihnen allgemein Bilder mit einer Breite von mindestens
Vorlesefunktion mitgelesen werden: 3000 Pixeln bei Desktop bzw. 2000 bei Mobil zu benut-
zen und Ihre Motive passend im System zuzuschneiden.
Alternativtext: Damit lassen sich Alternativtexte für in
die Webseiten eingebundene Bilder angeben. ALT- Experten-Info zu Bildgrößen
Attribute werden u.a. von sehbehinderten Menschen
genutzt, indem sie über die Vorlesefunktion vorgelesen Wenn Sie im Umgang mit eine Bildbearbeitung bereits
werden. Deshalb sollte der verwendete Text das Bild Erfahrung gesammelt haben, können Sie gerne unsere
genau beschreiben. Außerdem kann Google die Bilder Bildvorgaben für dieses Element verwenden. Damit
mit ALT-Attributen besser interpretieren. können Sie die Bilder jeweils passgenau erstellen.
Titel: Wird standardmäßig aus dem Namen der Datei Slidergröße
automatisiert erstellt. Allerdings sollten Sie den Titel in Großer Slider Desktop: 3 zu 1 / 2000 x 667 Pixel
einen beschreibenden Titel des Bildes ändern, denn so Normaler Slider Desktop: 5 zu 2 / 2000 x 800 Pixel
kann das Bild in der Mediensuche einfacher gefunden Mobil: 1 zu 1 / 2000 x 2000 Pixel
werden. Gleichzeitig kann Google das Bild zuordnen
und gibt es bei der Google-Bildersuche aus, wenn der Headergröße
Suchbegriff dazu passt. Desktop: 4 zu 1 / 2000 x 500 Pixel
Der Titel spielt auch bei Dokumenten eine wichtige Mobil: 16 zu 7 / 2000 x 875 Pixel
Rolle, siehe hierzu z. B. die Beschreibung des Download-
Elements auf Seite 10. Videoslider
Für den Videoslider sollte ein mp4 Video im Verhältnis
Beschriftung: Erscheint unter dem Bild als Bildunter- 2000 x 844 (Breite x Höhe) hochgeladen werden.
schrift. Es darf maximal 32 MB groß sein.
Beschreibung: Hier können Sie alles noch einmal aus- Download mit Bildern: 5 zu 3 / 2000 x 1200 Pixel
führlich zusammenfassen oder sogar um Informatio- Ansprechpartner: 3 zu 2 / 2000 x 1333 Pixel
nen wie z. B. komplette Adressen erweitern. Autor: 1 zu 1 2000 x 2000 Pixel
News-Teaser-Bild: 16:9 / 2000 x 1125 Pixel
Autor: Der Name der Person oder Institution, der die Einzelbild (variabel, nur Querformat zulässig): min.
Rechte an dem Bild/Dokument gehören, erscheint im 2000 Pixel breit
Bild am unteren rechten Rand. Je nach Motiv sollte die Text auf Hintergrundbild (variabel, nur Querformat
Schriftfarbe Weiß oder Schwarz sein. Das Copyright zulässig): min. 2000 Pixel breit
zeichen © wird automatisch davor gesetzt.
4
Bitte prüfen Sie nach der Veröffentlichung
auch immer die Darstellung auf dem
Smartphone und Tablet.
Hintergrundbilder Externe/Interne Links
Bei jedem Element ist ein Hintergrundbild einstellbar. Links, die auf eine externe Website führen, werden hin-
Wichtig sind hier eine ausreichende Qualität von min- ter dem Link durch folgendes Icon gekennzeichnet:
destens 3000 Pixel in der Breite und die Auswahl eines
flächigen, ruhigen Motives. Schreibweisen
Texteditor-Funktionen Telefonnummern (+49 5251 125-1100) und Uhrzeiten
(8 Uhr und 16.30 Uhr) sollen einheitlich geschrieben
Textlinks: Es ist gut, in einem Beitrag möglichst viele werden.
Textlinks zu verwenden. Zum einen um das Leseerlebnis
zu steigern und zum anderen um das Ranking in Such- Quellenangaben
maschinen (Stichwort: SEO) zu erhöhen. Diese führen
beim Anklicken auf eine interne Unterseite (öffnet sich Alle Zitate, Bilder oder Verlinkungen müssen mit der
im selben Browserfenster) oder auf eine externe Web- entsprechenden Quellenangabe versehen werden.
site (öffnet sich in einem neuen Browserfenster und Nutzen Sie hierzu z. B. das Autorenfeld bei den Meta-
ist durch das Icon gekennzeichnet). Das Wort oder daten von Bildern oder einen Kursiv-Schriftschnitt im
der Text, der als Link eingestellt wird, sollte so kurz und Texteditor.
prägnant wie möglich sein.
Buttons: Ein Button hat dieselbe Funktion wie ein Text-
link, sollte aber nur am Ende und unterhalb eines Textes
eingesetzt werden. Ein Button ist deutlich auffälliger
als ein Textlink.
Schriftschnitte: Im Texteditor gibt es die Möglichkeit,
Texte gefettet oder kursiv darzustellen. Mit dieser Funk-
tion können Informationen hervorgehoben werden.
Die Textabschnitte sollten möglichst kurz sein und
die Funktion sollte nur in seltenen Fällen verwendet
werden.
Aufzählungen: Aufzählungszeichen können Bullet
Points oder Zahlen sein.
Zwischenüberschrift: Lockern Sie Ihren Text auf, indem
Sie Zwischenüberschriften (H3 und H4) setzen. Je höher
die Zahl, desto untergeordneter die Überschrift.
Highlight: Kennzeichnen Sie Textblöcke oder Sätze, die
Sie besonders hervorheben wollen. Diese erscheinen
dann in der Primärfarbe.
5
FLIB-System – Seitenelemente
Anwendungsbeispiele
In diesem Teil des Design-Manuals werden die verschie- Es werden hier ausschließlich Beispiele dargestellt,
denen Seitenelemente vorgestellt, die für die Erstel- die zeigen, wie die Elemente im Optimalfall aussehen.
lung von Unterseiten auf der Website des Erzbistums Abweichungen sind in gewissem Maße möglich.
Paderborn verwendet werden können. Die Unterseiten
setzen sich also aus einzelnen Elementen des flexiblen Über den folgenden Link gelangen Sie zu einer Demo-
Internetbaukastens (FLIB), der von der Werbeagentur seite, auf der alle Elemente aufgereiht sind:
Mues + Schrewe für die Abteilung Kommunikation im
Erzbischöflichen Generalvikariat https://corporate-design.wir-erzbistum-paderborn.de/
entwickelt wird, zusammen.
Benutzername: egv
Bitte berücksichtigen Sie, dass das FLIB-System sich Passwort: egv123
stets weiterentwickelt. Wir bemühen uns, das hier
verschriftlichte Manual in regelmäßigen Abständen zu
aktualisieren.
Weitere aktuelle Informationen dazu auch in der
wir.desk-Gruppe zum FLIB-Baukasten.
https://erzbistumpaderborn.viadesk.com/do/startpage
?id=540761-737461727470616765
Vorschlag für den Seitenaufbau
Neben dem Seitenelement „Seitenthema“, das auf
jeder Seite verwendet werden muss, wird vorgeschla-
gen, alle Unterseiten mit folgenden Seitenelementen
aufzubauen:
1. Headerbild
2. Breadcrumb
3. Seitenthema
(H1-Überschrift, Teasertext/Untertitel)
So sorgen Sie für eine einheitliche Struktur auf den
Unterseiten. Der User weiß durch die Breadcrumb, wo
genau er sich befindet, und das Headerbild gibt einen
ersten Eindruck bzw. die Stimmung der zu erwartenden
Seite wieder.
Die nachfolgenden Seitenelemente sind alphabethisch
geordnet (Ausnahme: 1 | Seitenthema).
6
1 | Seitenthema
Das Seitenthema-Element muss einmal pro Seite ver- Der Inhalt des Seitenthema-Elementes wird auf der
wendet werden und kann nicht ausgelassen werden. Übersichtsseite als Teaser dargestellt.
Es beinhaltet den Haupttitel (H1) und ein Textfeld, das Das Seitenthema ist für die Suchmaschinenoptimie-
als Einleitungstext, Untertitel und oder Vorschautext rung (SEO) relevant, da dieser Bereich in Suchmaschi-
verwendet werden kann. nen wie z. B. bei Google angezeigt wird.
Mobile Ansicht Es besteht ebenfalls die Möglichkeit, den Einleitungs-
text auf der Seite zu verstecken. Allerdings sollte
bedacht werden, dass der Text trotzdem als Vorschautext
auf der Übersichtsseite zu sehen ist.
7
2 | Akkordeon
Ein Akkordeon besteht aus ausklappbaren Elementen.
Zunächst ist nur die Überschrift zu lesen. Bei Anklicken Die Überschriften sollten
des Pfeiles auf der rechten Seite der Box zieht sich nach kurz und knapp gehalten
unten ein Textfeld auf. Auch Bilder können in das Akkor- werden, um ein einheit
deon aufgenommen werden. liches Bild zu bewahren.
Es ist darauf zu achten, das Text-
und Bildhöhe in etwa gleich sind.
Mobile Ansicht
8
3 | Ansprechpersonen
Die Daten zu diesem Element werden im Backend un- Wenn Sie das Element dann auf Ihrer Seite einbinden,
ter dem Punkt „Ansprechpartner“ gepflegt. Hier können brauchen Sie nur noch die entsprechenden Ansprech-
Sie Name, Position, Telefonnummer, E-Mail-Adresse personen auszuwählen.
und ein Freitext-Feld sowie, falls gewünscht, ein Foto Die passende Größe für die Bilder finden Sie auf Seite 4
einpflegen. im Abschnitt Experten-Info.
Mobile Ansicht Bei der Angabe der Telefonnum-
mer ist die einheitliche Schreib-
weise zu beachten
+49 5251 125-1100.
9
4 | Breadcrumb
Die Breadcrumb sollte, so wie das Headerbild, ein fester
Bestandteil jeder Unterseite und jedes Artikels sein. Es
dient zur Orientierung und bietet der nutzenden Person
die Möglichkeit, zu übergeordneten Seiten zu springen.
Das Element muss nicht gepflegt werden.
Mobile Ansicht Einfach das Element einbinden und
schon wird die Breadcrumb automatisch
generiert.
105 | Downloads
Hier werden Downloads für den User zur Verfügung Nachträgliche Änderungen des Titels wirken sich auf alle
gestellt. verknüpften Dateien auf der Website aus.
Beim Upload wird der Dateiname als Titel automati- Die Größe der Datei wird in dem PDF-Icon automatisch
siert übernommen und auf der Website dargestellt. angezeigt.
Sie sollten daher den Titel entsprechend anpassen.
Mobile Ansicht Es ist hilfreich, das Dokument pas-
send zu benennen, da der Dateiname
beim Upload als Titel übernommen
wird.
116 | Downloads mit Bildern
Dieses Element unterscheidet sich von dem Download-
Element, in dem Vorschaubilder anstatt des Datei-Sym-
bols mit Dateigröße angezeigt werden können. Die Bilder werden beim
Die passende Größe für die Bilder finden Sie auf Seite 4 Einfügen auf die passende
im Abschnitt Experten-Info. Größe beschnitten.
Es ist hilfreich, das Dokument
Mobile Ansicht passend zu benennen, da der Datei-
name beim Upload als Titel über-
nommen wird.
127 | Einzelbild
Mit diesem Element wird ein Bild über die Inhaltsbreite
der Website angezeigt. Im Backend lässt sich das Bild
flexibel zuschneiden. Wichtig ist hier, ein querformati-
ges Bild zu wählen und eine ausreichende Qualität von
mindestens 2000 Pixel in der Breite.
Mobile Ansicht Achten Sie darauf, in den Metadaten
des Bildes eine Beschriftung anzuge-
ben, die unterhalb des Bildes ange-
zeigt wird.
138 | FAQ-Akkordeon
Das FAQ-Akkordeon basiert auf dem Akkordeon-Ele- schnell erreicht werden. Umfangreiche Inhalte können
ment, das durch ein alphabetisches Register erweitert ebenso mit einer integrierten Suchleiste aufgefunden
wurde. So können Inhalte alphabetisch sortiert und werden.
über einen Klick auf den entsprechenden Buchstaben
Mobile Ansicht Die Einpflege der einzelnen Einträge fin-
det im Backend, im Menü auf der linken
Seite unter „FAQs“ statt.
149 | Formular
Das Formular-Element beinhaltet die gängigen Felder Der Betreff kann individuell im Element angelegt und
eines Kontaktformulars wie Name, Telefon, E-Mail- an eine entsprechende E-Mail-Adresse geschickt wer-
Adresse, Betreff und ein Nachrichten-Feld. den.
Mobile Ansicht
Erstellen Sie zu verschiedenen Themen entspre-
chende Betreffs, die direkt an die verantwortliche
Ansprechperson geschickt werden.
1510 | Formular-Baukasten
Über den Formular-Baukasten können individuel- Bitte kontaktieren Sie hierzu Ihren Super-Redakteur, oder
le Formulare erstellt werden. Die jeweiligen Felder, Administrator.
Checkboxen, E-Mail-Empfänger und Texte können von Sie müssen dann nur noch das entsprechende Formular
dem Administrator nach Ihren Wünschen eingerichtet aus dem Drop-down-Menü des Elementes auswählen
werden. und speichern.
Mobile Ansicht
Die Felder können Ihren Wünschen
entsprechend aufgebaut werden.
1611 | Galerie
In einer Galerie werden verschiedene Bilder in einem werden, dass zwischen den Bildern der Abstand nach
sogenannten Masonry-Layout dargestellt. Das heißt, oben und unten immer gleich bleibt. Es stehen stets
dass die Bilder nicht beschnitten und so aufgereiht vier Bilder in einer horizontalen Reihe.
Mobile Ansicht
Vergrößerte Darstellung mit der
Möglichkeit zum Durchklicken.
1712 | Headerbild
Das Headerbild muss auf jeder Seite an erster Stelle Das Bild wird im Backend auf das passende Seiten-
eingebunden werden. Wichtig ist eine ausreichende verhältnis zugeschnitten. Die passende Größe für die
Qualität von mindestens 3000 Pixel Breite, da dieses Bilder finden Sie auf Seite 4 im Abschnitt Experten-Info.
Bild im Vollbild über die komplette Breite des Monitors
angezeigt wird.
Mobile Ansicht Auf dem Headerbild kann ein
kurzer Text stehen.
1813 | Hervorgehobene Links
Dieses Element kann für eine Auflistung von Links ver-
wendet werden, die besonders auffallen sollen.
Mobile Ansicht Externe Links werden durch
dieses Icon gekennzeichnet.
1914 | Highlight
Das Highlight-Element hebt sich durch den flächigen werden dadurch ausgeblendet. Achten Sie daher bei
Texthintergrund (entspricht der im System hinterlegten der Bilderwahl darauf, dass dieses mit der Textlänge
Sekundärfarbe) von anderen Elementen ab. zusammenpasst. Je mehr Text Sie haben, desto mehr wird
Links befindet sich ein Bild, das, abhängig von der Text- vom Bild gezeigt.
länge, den Rahmen komplett ausfüllt. Teile des Bildes
Mobile Ansicht Optional gibt es die Möglichkeit,
das Bild zu begrenzen, wodurch
das Bild nicht beschnitten wird.
Es empfiehlt sich, diese Option nur
bei Logos anzuwenden.
(verkürzte
Darstellung
des Textes)
2015 | Infoliste
Mit diesem Element können Sie Informationen Überschrift oder das Stichwort in Rot, rechts der be-
gegliedert darstellen. Auf der linken Seite steht die schreibende Text bzw. die Information hierzu.
Mobile Ansicht
Versuchen Sie die Überschrift
kurz zu halten.
2116 | Interview
In diesem Element lässt sich ein Interview, bestehend Je Frage oder Antwort kann ein Teil hervorgehoben
aus Fragen und Antworten, darstellen. werden. Dieser erscheint dann unter dem jeweiligen
Links steht der Name der Fragen stellenden und Textblock in weißer Schrift auf rotem Grund.
beantwortenden Person. Fragen werden in Rot Fett- Außerdem ist es möglich, mehrere Bilder in eine Ant-
Schriftschnitt dargestellt, Antworten in Schwarz mit wort oder Frage mit einzubinden.
Regular-Schriftschnitt.
Mobile Ansicht
Es ist darauf zu achten, dass Text-
und Bildhöhe in etwa gleich sind.
2217 | Kirchenpanorama
In diesem Element lässt sich über einen Link ein Pan- (zwei Panoramen nebeneinander) oder über die volle
orama der Firma RLS darstellen. Die Art der Ansicht ist Breite (Breite des Browserfensters).
wählbar: einspaltig (über die Inhaltsbreite), zweispaltig
Mobile Ansicht
2318 | Kontaktleiste In einer Kontaktleiste können Kontaktangaben zum Die Hintergrundfarbe dieses Elementes entspricht der Beispiel von einer Einrichtung dargestellt werden. Zur im System hinterlegten Sekundärfarbe. Auswahl stehen Anschrift, Telefon, E-Mail-Adresse und Website. Mobile Ansicht 24
19 | Logo/Bilder-Karussell
Im Logo-/Bilder-Karussell können mehrere Logos/Bil- Neben den Logos/Bildern wird die Beschriftung mit
der mit Links versehen dargestellt werden. Durch ein angezeigt. Außerdem besteht die Möglichkeit, einen
Anklicken der Pfeile dreht sich das Karussell um eine kurzen Text, der verlinkt werden kann, unter den Bil-
Position weiter. Es sind maximal vier Elemente auf dern einzufügen.
einmal sichtbar.
Mobile Ansicht Versuchen Sie, neben der Beschriftung der Bilder nicht
zu viel Text in das Karussell mit einzubringen, da hier
die Logos/Bilder im Vordergrund stehen sollten.
Achten Sie auch darauf, dass die Logos/Bilder die gleiche
Größe haben, damit nicht zu viele Sprünge zwischen
den einzelnen Logos/Bilder entstehen.
2520 | News-System Das News-System lässt sich auf zwei Arten einbinden: Unterhalb der News kann mit einem Button auf die als Kacheln (Bild oben) oder als Karussell (Bild unten). News-Seite verlinkt werden, wo alle News in der Voll- Zudem kann man noch zwischen „Kompakt“ (Teaser für Ansicht dargestellt werden. Startseiten und Unterseiten), „Voll“ (News-Übersichts- seite mit allen News) und „Benutzerdefiniert“ (Filtern nach Kategorie, Tags, Sektion) wählen. Mobile Ansicht Kacheln Mobile Ansicht Karussell 26
20.1 | News-System – Detailseite
Eine Detailseite beginnt immer mit einem Headerbild. Sie sollten den Artikel möglichst mit der Hintergrundfarbe
Danach folgt das Seitenthema, das sich aus den Infor- Weiß aufbauen.
mationen der News (z. B. Datum, Kategorie, Überschrift,
Teasertext) zusammensetzt. Unterhalb des Seitenthe- Für die Gliederungen eines Textblockes stehen Ihnen
mas steht ein Text-Element ohne H2-Überschrift, das folgende Inline-Überschriften über den Texteditor zur
als Einleitungstext fungiert. Darauf folgt ein Bild-Text- Verfügung: H2, H3 und H4. Es ist zulässig einen Artikel
oder Text-Element mit einer H2-Überschrift. Anschlie- nur mit H1- und H2-Überschrift aufzubauen.
ßend können Sie verschiedene Elemente einsetzen.
Mobile Ansicht
Bei der Verwendung
von Überschriften
beachten Sie fol-
gendes System:
(verkürzte Darstellung des Textes)
2721 | RSS-Feed
Hier können Sie die URL eines Feeds angeben, dessen Sie können ebenfalls angeben, wie viele Feeds Ihnen
Inhalt dann wie folgt dargestellt wird. angezeigt werden sollen. Weiterhin ist unterhalb der
Feeds ein Button verlinkbar.
Mobile Ansicht
2822 | Slider
In der Regel teasert der Slider an oberster Stelle auf Nach ein paar Sekunden wechselt der Slider automa-
der Startseite einer Website verschiedene Themen an. tisch zum nächsten Bild.
Auf einer Unterseite wird im Normalfall ein Headerbild
verwendet. Die passende Größe für die Bilder finden Sie auf Seite 4
Ein kurzer Text kann auf dem Bild stehen. Dieser kann im Abschnitt Experten-Info.
an unterschiedlichen Stellen auf dem Bild positioniert
werden. Unterhalb des Textes kann ein Button einge-
setzt werden.
Mobile Ansicht Achten Sie auf die Positionierung des Text-
bereiches und halten Sie den Text kurz.
2923 | Social Wall
In dem Element Social Wall werden die aktuellsten Anzahl der Beiträge und die Quelle (Facebook und/oder
Social-Media-Beiträge als Kacheln angezeigt. Die Instagram) lassen sich festlegen.
Mobile Ansicht
Versuchen Sie die Anzahl der
Beträge auf drei, sechs oder
neun zu beschränken.
3024 | Teaser
Teaser setzen sich aus einem Bild, einer Teaser-Über- In diesem Layout werden auch die Inhalte des Seiten-
schrift, einem kurzen Teasertext und einem Link zusam- themas auf der Übersichtsseite dargestellt.
men, der zu der Unterseite oder einem externen Link
des angeteaserten Themas führt.
Mobile Ansicht
Überschriften und Texte sollten
möglichst kurz und prägnant sein.
3125 | Text
Das Text-Element bildet über die Inhaltsbreite der Bilder dürfen in diesem Element nicht eingepflegt
Website einen Text mit Überschriften in verschiedenen werden.
Größen ab (H2, H3, H4). Im sogenannten Texteditor sind
aber noch viele weitere Einstellungen möglich (siehe
hierzu Seite 3, „Wichtige allgemeine Informationen“).
Mobile Ansicht
Eine genaue Beschreibung der Möglichkeiten im Textedi-
tor finden Sie unter Seitenelemente | Wichtige allgemei-
ne Informationen (Seite 5).
3226 | Text/Bild
In diesem Element werden Bild und Textinhalte kom- Das Bild steht allerdings immer im oberen Teil des Ele-
biniert. Das Verhältnis von Text zu Bild kann individuell ments, längerer Text fließt um das Bild herum.
eingestellt werden (33 %, 50 % oder 66 %) und auch die Galerie: Dieses Symbol zeigt an, dass bei Anklicken des
Position des Bildes (rechts oder links) ist frei wählbar. Bildes noch weitere Bilder angezeigt werden.
Mobile Ansicht
(verkürzte
Darstellung
des Textes)
3327 | Text/Text Dieses Element bietet die Möglichkeit, zwei Texte ne- 50 % zu 50 % gewählt werden. Es ist darauf zu achten, beneinander darzustellen. Das Verhältnis der Textblock- dass die Textblöcke möglichst gleich lang sind. größen ist variabel. Am häufigsten sollte das Verhältnis Mobile Ansicht 34
28 | Text auf Bildhintergrund
Ein Text steht auf dem Bild in einer weißen Box. Die Die passende Größe für die Bilder finden Sie auf Seite 4
Position der Box (rechts oder links) und der Bildfokus im Abschnitt Experten-Info.
können nach Belieben eingestellt werden.
Mobile Ansicht Bitte achten Sie auf eine ausreichende
Bildqualität (mindestens 3000 Pixel in
der Breite).
3529 | Timeline
Die Timeline besteht aus zwei Bereichen, links und Schnellnavigation: Durch eine Burger-Navigation oben
rechts, und kann dadurch auch in zwei Themen einge- rechts kann man spezielle Daten auf der Timeline
teilt werden. schnell erreichen. Diese Navigation scrollt in Höhe des
Sie können je Eintrag eine Jahreszahl, ein Bild, einen Timeline-Elements immer mit.
Titel und einen Text einfügen. Zudem wählen Sie bei
jedem Eintrag, in welcher Spalte der Text erscheinen
und ob er in der Schnellnavigation auftauchen soll.
Mobile Ansicht
36 3630 | Umfrage
Dieses Element ermöglicht es, mit dem User zu inter- Zudem haben Sie die Möglichkeit, die Auswertung der
agieren. Wählen Sie eine der vorgefertigten Umfragen Umfrage direkt unterhalb der Umfrage auf der Website
aus, um sie an dieser Stelle in Ihre Website einzubinden. zu zeigen. Dieses ist auch als Standard voreingestellt.
Möchten Sie die Auswertung nicht zeigen, setzen Sie
Die Umfrage erstellen Sie im linken Menü unter „Um- den Schalter beim Einrichten des Elementes einfach auf
frage“. Formulieren Sie kurze, kompakte Fragen und „Ja“.
Antworten zu einem bestimmten Thema.
Mobile Ansicht
Sie können die Auswertung der Umfrage
direkt unter dem Element ausspielen.
3731 | Veranstaltungskalender Dieses Element ermöglicht es, Veranstaltungen verschie- Das Element baut sich aus Datum, Ort, Überschrift, dener Quellen auf Ihrer Seite anzuzeigen. So können Sie Teasertext und einem Link zur Unterseite auf. über Reiter interne und externe Termine trennen. Mobile Ansicht 38
31.1 | Veranstaltungskalender – Detailseite
Eine Detailseite beginnt immer mit einem Headerbild. Sie sollten die Detailseite möglichst mit der Hintergrund-
Danach folgt das Seitenthema, das sich aus den Infor- farbe Weiß aufbauen.
mationen der Veranstaltung (z. B. Startdatum, Adresse,
Teasertext) zusammensetzt. Unterhalb des Seitenthe- Für die Gliederungen eines Textblockes stehen Ihnen
mas steht ein Text-Element ohne H2-Überschrift, das folgende Inline-Überschriften über den Texteditor zur
als Einleitungstext fungiert. Darauf folgt ein Bild-Text- Verfügung: H2, H3 und H4. Es ist zulässig einen Artikel
oder Text-Element mit einer H2-Überschrift. Anschlie- nur mit H1- und H2-Überschrift aufzubauen.
ßend können Sie verschiedene Elemente einsetzen.
Mobile Ansicht
Bei der Verwendung
von Überschriften
beachten Sie fol-
gendes System:
3932 | Veranstaltungen vorschlagen Über das Element „Veranstaltungen vorschlagen“ Der Super-Redakteur hat dann die Möglichkeit, den Vor- können User (z. B. Gemeindemitglieder) eigene Veran- schlag zu prüfen, zu bearbeiten und für den Veranstal- staltungen für die Website vorschlagen. tungskalender freizugeben. Mobile Ansicht 40
33 | Video
Ein Video kann über einen YouTube-Link in die Website Es stehen drei verschiedene Ansichten zur Auswahl:
eingebunden werden. Es besteht die Möglichkeit, einen „Volle Breite“, „Aufgeteilt“ (50 % Text und 50 % Video)
Text über dem Video zu platzieren. und „Archiv“, bei dem mehrere Videos eingebunden
Die passende Größe für die Bilder finden Sie auf Seite 4 werden können.
im Abschnitt Experten-Info.
Mobile Ansicht
Bitte binden Sie keine YouTube-Videos
über das HTML-Element ein, da sonst
keine datenschutzkonforme Nutzung
möglich ist.
Mobile Ansicht
4134 | Videoslider
Der Videoslider sollte genau wie der Slider an erster Unterhalb des Textes lässt sich ein Button einfügen.
Stelle auf der Startseite eingesetzt werden. Anders als Nach ein paar Sekunden wechselt der Slider automa-
beim Slider können hier verschiedene Videos anstatt tisch zum nächsten Slide.
Bilder eingebunden werden. Die passende Größe für die Bilder finden Sie auf Seite 4
Auf dem Video kann ein kurzer Text stehen, der an im Abschnitt Experten-Info.
unterschiedlichen Stellen positioniert werden kann.
Mobile Ansicht Das Textfeld kann optional nach ein paar Sekunden einge-
blendet werden. So wird vermieden, dass Bereiche des
Videos verdeckt werden.
4243
CD Manual FLIB - www.mues-schrewe.de - Stand 12/2021
Sie können auch lesen
