Startbild

Wo: Menü Startbild der Verwaltung. Wer: Administratoren und Redakteure.

Vorher lesen

Bevor du ein Startbild gestaltest, ist es wichtig zu verstehen, wozu es dient: Es richtet sich an Menschen, die die Website zum ersten Mal entdecken, und soll ihnen einen sofortigen, positiven ersten Eindruck vermitteln.

Wir empfehlen dir sehr, zuerst den Abschnitt Das Startbild: einen positiven ersten Eindruck schaffen der Seite „Philosophie und Gestaltungsprinzipien der Website“ zu lesen. Dann weißt du, welche Botschaft, welches Bild und welchen Ton du wählen solltest.

Das Startbild ist das große Bild oben auf der Startseite, mit seinem Text darüber. Hier stellst du das Bild, den Text und seine Gestaltung ein; eine Live-Vorschau zeigt dir das Ergebnis vor dem Speichern, und mit der Schaltfläche Auf der Startseite ansehen siehst du es unter echten Bedingungen, bevor du es veröffentlichst.

Du kannst mehrere Startbilder anlegen: Bei jedem Besuch zeigt die Website eines davon zufällig. Das ist praktisch, um die Botschaften abzuwechseln (ein Bild pro Aktivität, pro Jahreszeit …).

1 Bildvorschau: die Live-Darstellung, so wie sie auf der Website erscheinen wird. 2 Bildtext: die Botschaft, die auf dem Bild steht. 3 Einstellungen des Textes: Größe, Zeilenabstand, Farbe, Ausrichtungen, Umriss. 4 Einstellungen des Bildes: Spiegelung, Ausrichtung für kleine Bildschirme. 5 Auf der Startseite ansehen: öffnet die Startseite der Website mit diesem Bild, um es unter echten Bedingungen zu beurteilen, auch solange es ein Entwurf ist. 6 Veröffentlichen oder Aktualisieren: speichert das Startbild.

In einer Minute verstehen

• Ein Startbild = ein Bild + ein Text + seine Gestaltung.
• Mehrere können gleichzeitig veröffentlicht sein: Die Website zeigt bei jedem Aufruf der Seite zufällig eines davon.
• Um ein Startbild von der Website zu nehmen, verschiebe es in den Papierkorb oder setze es wieder auf Entwurf.
• Ein Bild im Entwurf (oder mit ausstehender Überprüfung) wird den Besuchern nie gezeigt: Nur die veröffentlichten Bilder werden zufällig ausgewählt. Um es vor dem Veröffentlichen echt zu sehen, verwende die Schaltfläche Auf der Startseite ansehen (siehe weiter unten).

Die Liste

Das Menü Startbild öffnet die Liste der Startbilder. Ein Klick auf eines davon öffnet es zur Bearbeitung; die Schaltfläche Hinzufügen (oder Startbild hinzufügen) legt ein neues an. Unter jeder Zeile öffnet der Link Auf der Startseite ansehen die Startseite der Website mit diesem Bild (siehe Das Bild auf der Startseite ansehen).

Das Feld Titel der Bearbeitungsseite wird nicht verwendet: Die Startbilder unterscheiden sich nur durch ihren Inhalt.

Ein Startbild anlegen oder bearbeiten

1. Klicke auf Hinzufügen (neues Bild) oder auf ein vorhandenes Bild.
2. Stelle das Bild und den Text ein (siehe unten) und lass dich dabei von der Vorschau leiten.
3. Speichere mit Entwurf speichern und klicke dann auf Auf der Startseite ansehen, um das Ergebnis unter echten Bedingungen zu beurteilen.
4. Wenn dir das Bild gefällt, klicke auf Veröffentlichen (oder Aktualisieren).

Die Vorschau wird laufend mit deinen Einstellungen aktualisiert; gespeichert wird nichts, bevor du auf Veröffentlichen oder Aktualisieren klickst.

Bildvorschau

Klicke auf den Vorschaubereich, um das Bild in der Mediathek auszuwählen, oder lade ein neues hoch.

Die richtige Bildgröße

Empfohlene Größe: 1050 x 400 px. Ein Bild mit anderen Maßen wird womöglich zugeschnitten oder wirkt unscharf: Prüfe die Vorschau.

Auf kleinen Bildschirmen (Handy) wird das Bild verkleinert, sein Text aber auch: Das Layout bleibt gleich, nur kleiner. Unter 1000 px Breite nimmt die Höhe proportional ab (mindestens 250 px).

Bildtext

Im Texteditor schreibst du die Botschaft, die auf dem Bild erscheint. Er funktioniert wie der gewohnte Texteditor: fett, kursiv, Zeilenumbrüche.

Ein Zeilenumbruch im Editor ist ein Zeilenumbruch auf dem Bild.

Ein Symbol einfügen

Um ein Symbol in den Text zu setzen, setze den Cursor an die gewünschte Stelle, klicke auf Symbol einfügen (unter dem Feld Bildtext), suche das Symbol und klicke darauf: Sein Code, in der Form [icon name="…"], wird am Cursor eingefügt, und die Vorschau wird sofort aktualisiert.

Einstellungen des Textes

Einstellung	Was sie bewirkt
Textgröße	Größe der Buchstaben, in Pixeln. Standardmäßig 35. Der Text wird auf kleinen Bildschirmen proportional verkleinert.
Zeilenabstand des Textes	Abstand zwischen den Zeilen. Standardmäßig 0 (enge Zeilen); jeder weitere Punkt rückt die Zeilen etwas weiter auseinander.
Textfarbe	Farbe der Buchstaben. Standardmäßig Weiß (#FFFFFF).
Vertikale Ausrichtung des Textes	oben, zentriert oder unten im Bild.
Horizontale Ausrichtung des Textes	links, Mitte (Standard) oder rechts.
Umriss anzeigen	Schalter, standardmäßig eingeschaltet. Fügt einen Rand um die Buchstaben und Symbole hinzu, damit sie auf einem hellen oder unruhigen Bild lesbar bleiben.
Farbe des Umrisses	Farbe des Randes. Erscheint nur, wenn Umriss anzeigen eingeschaltet ist.
Konturstil	weich (Standard): verschwommener Umriss, als Lichthof; durchgezogen: scharfer Umriss. Erscheint nur, wenn Umriss anzeigen eingeschaltet ist.
Konturstärke	Von 1 bis 5 px (standardmäßig 2). Erscheint nur, wenn Umriss anzeigen eingeschaltet ist.

Ein lesbarer Text

Weißer Text mit dunklem Umriss bleibt auf fast allen Bildern lesbar. Für einen dunklen Text wähle einen hellen Umriss.

Einstellungen des Bildes

Einstellung	Was sie bewirkt
Bild spiegeln	ja: Das Bild wird von links nach rechts gespiegelt. Nützlich, um eine Person oder das Motiv zu versetzen, ohne das Bild zu bearbeiten.
Horizontale Ausrichtung des Bildes (in der mobilen Version)	Auf einem kleinen Bildschirm ist das Bild schmaler als der Bildschirm, und sein Ausschnitt wird an den Rändern abgeschnitten. Wähle den Teil, der erhalten bleibt: links, Mitte oder rechts.

Mobile Darstellung (Vorschau)

Der Schalter Mobile Darstellung speichert nichts: Er ändert die Größe der Vorschau, um ein Handy nachzubilden (320 px breit). Prüfe damit vor dem Veröffentlichen, ob der Text hineinpasst und das Bild auf einem kleinen Bildschirm gut zugeschnitten ist.

Das Bild auf der Startseite ansehen

Ein Bild im Entwurf wird den Besuchern nicht gezeigt: Du kannst es also nicht auf der Website sehen, ohne es zu veröffentlichen. Die Schaltfläche Auf der Startseite ansehen löst dieses Problem: Sie öffnet die Startseite in einem neuen Reiter mit dem Bild, an dem du arbeitest, so wie die Besucher sie sehen würden, mit dem echten Layout der Website (das Menü, die Farben, die Bildschirmgröße). So prüfst du am besten, ob der Text lesbar ist, bevor du veröffentlichst.

Sie befindet sich an zwei Stellen:

• im Kasten Vorschau, oben in der rechten Spalte der Bearbeitungsseite (5 auf dem Screenshot);
• unter jedem Bild der Liste, mit dem Link Auf der Startseite ansehen.

Zuerst speichern

Die Website zeigt das Bild so, wie es gespeichert ist, nicht so, wie es auf dem Bildschirm ist. Bei einem neuen Bild speicherst du zuerst den Entwurf (die Schaltfläche erscheint erst danach); bei einem vorhandenen Bild klickst du auf Aktualisieren oder Entwurf speichern, bevor du die Vorschau öffnest, sonst siehst du die alte Version.

Nur du siehst diese Vorschau

Die Vorschau ist nur für dich sichtbar, angemeldet mit dem Recht, das Bild zu bearbeiten. Die Besucher sehen weiterhin die veröffentlichten Bilder, zufällig ausgewählt. Diese Schaltfläche veröffentlicht nichts.

Wo das Bild erscheint

Das Startbild erscheint dort, wo die Startseite den Block Startbild eingefügt hat: Diese Einrichtung ist auf deiner Website schon erledigt. Es erscheint kein Bild, wenn kein Startbild veröffentlicht ist.

Häufige Fragen

Mein Bild erscheint nicht auf der Startseite. Prüfe, ob es veröffentlicht ist (und kein Entwurf oder mit ausstehender Überprüfung): Nur veröffentlichte Bilder werden den Besuchern gezeigt. Um ein noch nicht veröffentlichtes Bild zu sehen, verwende Auf der Startseite ansehen. Lade dann die Seite mit Strg + F5 neu (auf dem Mac: Cmd + Umschalt + R).

Die Startseite zeigt bei jedem Besuch ein anderes Bild. Das ist gewollt: Mit mehreren veröffentlichten Startbildern wählt die Website zufällig eines aus. Um nur eines zu behalten, verschiebe die anderen in den Papierkorb.

Der Text ist schwer zu lesen. Schalte Umriss anzeigen ein oder ändere die Farbe des Textes oder des Umrisses. Prüfe auch mit Mobile Darstellung.

Der Text wird auf dem Handy abgeschnitten. Verkleinere den Text oder kürze ihn. Prüfe mit Mobile Darstellung.

Kann ich einen Link oder eine Schaltfläche auf das Bild setzen? Nein: Das Startbild enthält nur Bild und Text.