Die Startseite anpassen

Template prüfen | Informationen zum Hero-Header | Hero-Header einfügen | Tipps zur Seitengestaltung | Startseiten-Beispiele

Nach der Theme-Aktivierung ist die Startseite in der Regel leer, da die meisten Elemente nicht direkt im Inhaltsbereich, sondern an verschiedenen anderen Stellen gepflegt oder aktiviert wurden. Wir fügen nun die fehlenden Elemente (Seitenleisten-Inhalte, Blogroll, Bildlinks) wieder ein. Zunächst überprüfen wir die grundlegenden Einstellungen der Startseite:

Template und Hero-Header

Sowohl die Startseite als auch die Inhaltsseite verwenden das Standard-Template. Prüfen Sie zunächst, ob das korrekte Template ausgewählt ist.

Template-Auswahl in den Seiteneinstellungen
  1. Öffnen Sie die Startseite im Bearbeitungsmodus über Admin-Leiste | Seite bearbeiten.
  2. Öffnen Sie die rechte Seitenleiste über das Icon links neben dem Speichern/Veröffentlichen-Button.
  3. Navigieren Sie in der rechten Seitenleiste zum Reiter Seite.
  4. Wählen Sie unter Template das Standard-Template aus, falls dieses noch nicht gesetzt wurde.

Tipp: Lassen Sie die rechte Seitenleiste beim Bearbeiten Ihrer Seiten stets geöffnet. Hier finden Sie wichtige Seiten- sowie Block-Einstellungen, die Sie über die Block-Werkzeugleiste nicht erreichen können!

Information zum Hero Header

Ein Hero Header wird verwendet, um Aufmerksamkeit zu ziehen und Besucherinnen und Besuchern mitzuteilen, welches Angebot sie auf einer Website erwartet. Er enthält idealerweise den Titel der Website, einen aussagekräftigen Beschreibungstext, einen Button zum Verweis auf weiterführende Informationen und ein Bild.

Stellen Sie sicher, Fotos in einer geeigneten Auflösung bereitzustellen! Für den Hero Header wird ein Bild im Seitenverhältnis 16:9 mit einer Abmessung von < 1920 x 1080px verwendet. Mehr Informationen erhalten Sie auf der Anleitungsseite zu Bildern.

Hero-Header einfügen
Vorlagen im Block-Editor
Vorlagen-Auswahl über den Block-Inserter
  1. Öffnen Sie im Block-Editor den Block-Inserter oben links über das Plus-Symbol und navigieren Sie zum Reiter Vorlagen.
  2. In der Kategorie FAU Elemental finden Sie alle zum Theme relevanten Designvorlagen.
  3. Wählen Sie die Vorlage Hero: Front Page. Der Hero: Front Page darf nur auf Ihrer Startseite verwendet werden.
  4. Bearbeiten Sie den Hero Header nach Ihren Wünschen.

Wichtig: Position des Hero Headers

Zwischen Ihrem Seitentitel und dem Hero-Header darf kein anderes Element stehen, auch kein leerer Absatz. Der Hero Header wird sonst auf der Startseite nicht korrekt dargestellt. Überprüfen Sie Ihren Seitenaufbau anhand der Listenansicht.

Aktuell wird auf Lehrstuhlseiten wird der Startseiten-Hero Header farblos dargestellt. Nur auf Unterseiten und bestimmten Designelementen wie Buttons, wird Ihre Fakultätsfarbe angezeigt.

Button ausblenden

Wenn Sie den „Mehr erfahren“ Button nicht nutzen, können Sie ihn ausblenden. Gehen Sie dazu folgendermaßen vor:

  1. Markieren Sie den Button im Hero Header.
  2. In der Listenansicht sollte der Hero: Front Page nun aufgeklappt sein, sodass Sie die einzelnen verschachtelten Ebenen sehen können.
  3. Markieren Sie die „Buttons“ Ebene und klicken Sie auf das Kontextmenü über die drei Punkte.
  4. Wählen Sie „Verbergen„, um den Button auszublenden. Fertig!

„Blogroll“ einfügen

Fügen wir jetzt Ihre aktuellen Beiträge ein. Im neuen Theme benutzen wir dafür den Block FAU Teaser Grid. Gehen Sie dazu folgendermaßen vor:

  1. Navigieren Sie zum Block-Inserter und tippen Sie im Suchfeld „FAU Teaser Grid“ ein.
  2. Klicken Sie oder ziehen Sie den Block in den Inhaltsbereich, um ihn einzufügen.
  3. Passen Sie das Teaser Grid nach Ihren Wünschen an. Alle Einstellungen können Sie auf der Anleitungsseite zum Teaser Grid nachlesen.

Tipp

Das Teaser Grid kann auf einer Seite mehrfach verwendet werden. Für eine News-Übersicht können Sie zum Beispiel Teaser Grids zu verschiedenen Kategorien ausgeben lassen.

Seitenleisten-Inhalte einfügen

Auf jeder Seite, auf der zuvor Inhalte auf der rechten Seite eingepflegt waren, sehen Sie in der Editorleiste neben dem Veröffentlichen- bzw. Speichern-Button ein neues Icon in Form eines Transporters oder Umzugswagens. Hierbei handelt es sich um den Migrations-Assistenten.

So fügen Sie die Seitenleisten-Inhalte wieder ein:

  1. Klicken Sie auf das Umzugswagen-Icon in der Editorleiste des Block-Editors. Dieses Icon erscheint nur dann, wenn auf einer Seite ursprünglich Sidebar-Inhalt vorhanden war.
  2. Eine Vorschau der Seitenleisten-Inhalte wird angezeigt. Scrollen Sie anschließend nach unten und klicken Sie auf den Button „Insert as Blocks“.
  3. Ihre Sidebar-Inhalte werden direkt in den Inhaltsbereich übertragen.

„Bildlinks“ einfügen

Wenn Sie auf Ihrer Startseite bisher Bildlinks für das Verlinken von externen Seiten, z.B. Kooperationen verwendet haben, können Sie im neuen Theme den FAU Elemental Block „Logo Grid“ verwenden. Gehen Sie dazu folgendermaßen vor:

  1. Öffnen Sie den Block-Inserter über das blaue Plus-Zeichen oben links im Block-Editor.
  2. Wechseln Sie zum Reiter „Vorlagen“ | FAU Elemental.
  3. Fügen Sie die Vorlage per Klick oder Drag & Drop in den Inhaltsbereich der Seite ein.
  4. Navigieren Sie zu den Block-Einstellungen in der rechten Seitenleiste.
  5. Ersetzen Sie das Logo bzw. setzen Sie ein Logo ein und hinterlegen Sie eine externe URL.

Verschaffen Sie sich zur Gestaltung Ihrer Startseite und generell Ihres Webauftritts einen Überblick über die neuen FAU Elemental Blöcke, oder lernen Sie mehr über die RRZE Elements Blocks und Block-Typen des Editors.

Tipps zur Seitengestaltung

  • Achten Sie darauf, Ihre wichtigsten Infos, zentrale Botschaften oder die Handlungsaufforderung wenn möglich „above the fold“ zu platzieren – also im sichtbaren Bereich der Website, bevor gescrollt wird.
  • Strukturieren Sie Ihre Inhalte sinnvoll mit passenden Überschriften – Website-Besucher wollen für sie relevante Infos schnell finden .
  • Verwenden Sie Akkordeons z.B. um sekundäre oder optionale Inhalte kompakt darzustellen. Primäre Informationen sollten für Nutzer stets sichtbar sein.
  • Verwenden Sie als Trennelement den neuen Block „Meta Headline“. Dieses Element dient als visuelle Auflockerung und leitet neue Abschnitte auf Ihrer Website ein.
  • Sie können manche Blöcke, die unter Vorlagen zu finden sind, auch als „Dark“ Variante ausspielen – so können Sie Struktur in Ihre Seite bringen und sie visuell auflockern
  • Sie können auch eigene Vorlagen erstellen, indem Sie häufig zusammen genutzte Elemente gruppieren und als Vorlage speichern

Lehrstuhl-Startseite Beispiele

Klicken Sie auf die Pfeile, um die Screenshots in vollständiger Größe anzuzeigen.