Startseite: Der König der Webseiten

Letztes Update:
von sanchez.s
Startseite Der König der Webseiten

Deine Besucher starten immer seltener auf der Startseite – auch wenn der Name anderes vermuten lässt.

Der Grund: Das Surfverhalten der Menschen hat sich verändert. Wir geben immer seltener die URL einer Seite ins Browserfenster ein. Wir nutzen ganz einfach Suchmaschinen.

Die Suchmaschinen zeigen nicht deine Startseite an, sondern die Seite, die am besten zu dem Suchbegriff passt. Deshalb starten Menschen tief in deiner Website und die Startseite ist meist der 2. Klick.

Mit diesem Wissen übernimmt die Startseite heutzutage eine andere Funktion. Sie ist weniger Mittel zur Navigation, sondern soll deine Besucher entweder auf der Seite halten oder zum Abschluss bewegen.

Für Nachrichten-Portale gilt ersteres: Die Startseite soll Menschen auf der Seite halten, indem sie Leseempfehlungen gibt.

Genug geredet: Los geht’s.

Startseite öffnen

Öffne die Startseite mit Elementor und lösche die Inhalte, die du zur Konfiguration des Themes erstellt hast, heraus.

Die Startseite ist komplexer und länger als alle Seiten, die wir bisher gebaut haben. Ich empfehle dir, zuvor eine Seitenstruktur mit Platzhaltern zu etablieren.

Nutze dafür Überschriften. Wenn es passt, kannst du die Überschriften in der finalen Version übernehmen.

Nach einem Feature mit 3 Boxen zeigst du eine Liste mit allen restlichen Nachrichten.

Die Klammer mit den „(restlichen)“ erinnert dich daran, dass du die oberen 4 Nachrichten, also das Feature mit den 3 Boxen in der Liste ausblendest.

Danach folgen die Videos und Podcasts, die Ressorts und ein exemplarisches Thema.

Feature mit 3 Boxen

Du startest mit dem Feature und den 3 Boxen.

Platziere ein Listing Grid mit dem Listing „Box“ in 3 Spalten.

Begrenze die Anzahl der angezeigten Nachrichten auf 4.

Wichtig: Sorge dafür, dass das Listing Grid nur Beiträge des Post Types „Nachrichten“ anzeigt. Das war beim Bau der Archive und Templates bisher nicht wichtig, weil die Archive und Templates selbst dem Post Type „Nachrichten“ zugeordnet waren.

Jetzt befinden wir uns aber auf der Startseite, einer allgemeinen Seite, die auch andere Post Types anzeigen könnte, zum Beispiel Produkte aus einem Online-Shop oder Kleinanzeigen aus einem Marktplatz.

Für den nächsten Schritt müssen wir Elementor kurz verlassen.

Aktiviere in den Optionen von JetEngine das Modul Listing Grid Injections. Damit diese Änderung wirksam wird, musst du Elementor speichern (!) und neustarten.

Öffne das Listing Grid und aktiviere die alternativen Listing Items.

Jetzt kannst du weitere Listings auswählen

  • alternativ zum ausgewählten Listing
  • an einer oder mehreren Stellen in deinem Listing Grid
  • nach einer bestimmten numerischen Reihenfolge oder, wenn das Listing Item einem bestimmten Meta-Feld entspricht 

Du setzt das Listing Feature genau 1x an der ersten Stelle. Das Feature soll dabei 3 Spalten einnehmen.

Liste mit (restlichen) Nachrichten

Weiter geht’s mit den restlichen Beiträgen. Lösche die Klammer aus der Überschrift.

Platziere ein weiteres Listing Grid mit dem Listing „Liste“ und einer Spalte.

Du möchtest auf deiner Startseite 10 Nachrichten anzeigen.

Übrigens: Ändere die Not Found Message beliebig ab. Sie erscheint, wenn das Listing Grid keinen Beitrag nach den Spezifikationen findest, die du ihm befohlen hast. Das wird in unserem Fall nie passieren, aber sicher ist sicher.

Ändere den Post Type auf „Nachrichten“.

Im ersten Listing Grid zeigst du die 4 neuesten Nachrichten deines Nachrichten-Portals. In dieser Liste möchtest du die restlichen Nachrichten zeigen, also Nummer 5 bis 14.

Schließe deshalb mithilfe des Post Offsets die ersten 4 Nachrichten nach Datum von neu nach alt aus.

Videos

Bei den Videos folgst du demselben Spiel.

Zuerst das Listing Grid mit dem Listing „Box“. Setze 4 Spalten, Um ein bisschen Variation hineinzubringen.

Wähle 5 Beiträge, weil du die erste Nachricht des Typs „Video“ mit dem alternativen Listing Feature darstellst.

Um tatsächlich die aktuellsten Nachrichten des Typs „Video“ darzustellen, wähle in den Abfrageoptionen die Taxonomie „Typ“ mit dem Begriff „Video“.

Podcast

Für deine Podcasts hast du genug von Boxen und Listen und stellst sie in einem Slider dar.

Platziere wie gewohnt ein Listing Grid und wähle als Listing „Box“.

Stelle die korrekte Abfrage ein.

Aktiviere nun den Slider.

Ich persönlich mag Slider mit Autoplay-Modus nicht besonders. Ich schiebe den Slider lieber selber von rechts nach links. Das ist natürlich Geschmackssache.

Färbe die Pfeile des Sliders in die Grundfarbe deiner Website und den Hintergrund auf 100 % Transparenz. Justiere die Pfeile des Sliders mit den Reglern nach, bis dir die Position gefällt.

Ressorts

Die Ressorts stellst du zweispaltig dar.

Jedes Ressort erhält ein Listing Grid mit dem Listing „Box“, einer Spalte und 3 Nachrichten.

Nachdem du die korrekte Abfrage eingestellt hast, setze das Ressort als Überschrift über das Listing Grid.

Kopiere nun Überschrift und Listing Grid in die neue Spalte und ändere beides – die Überschrift und die Abfrage des Listing Grid – entsprechend ab.

Ergänze so viele Spalten, wie du Ressorts hast und wiederhole den Schritt, bis alle Ressorts dargestellt sind.

Leider habe ich eine ungerade Anzahl an Ressorts, sodass eine Spalte freibleibt.

Falls das bei dir ebenfalls der Fall ist, kannst du die Spaltenanzahl ändern oder das letzte Ressort über die komplette Breite darstellen, falls du den Weißraum vermeiden möchtest.

Die leere Spalte wäre auch ein geeigneter Ort für ein bisschen Werbung oder eine Box zur Newsletter-Anmeldung.

Verlinke nun die Überschriften der Ressorts zum jeweiligen Ressort-Archiv.

Schließlich hast du weder eine Seitennavigation noch ein „Lade mehr“-Button unter den Listing Grids und dein Leser möchte vielleicht ältere Nachrichten des Ressorts lesen.

Thema

Kommen wir zum letzten Abschnitt deiner Startseite.

Du möchtest ein bestimmtes Thema pushen und es prominent auf deiner Startseite platzieren.

Platziere ein Listing Grid mit Boxen in drei Spalten und 5 Nachrichten. Die erste Nachricht soll als „Liste“ über zwei Spalten erscheinen.

Vergiss nicht, in der Abfrage die Taxonomie „Thema“ mit dem Thema einzustellen, das du besonders pushen möchtest. Ändere die Überschrift entsprechend und verlinke sie zum Themen-Archiv.

Inhaltlicher Check

Lösche den Platzhalter mit dem Feature verlinke die Videos und Podcasts auf die die jeweiligen Archive.

Lösche die Überschrift „Ressort“, stehen doch die Ressortnamen für sich und bedürfen keiner weiteren Erklärung.

Die verlinkten Überschriften auf der Startseite sind bisher noch nicht als solche erkennbar. Ergänzen bei allen verlinkten Überschriften einen Pfeil hinter dem Wort.

Mobile Check

Der obligatorische Responsiv-Check zur Ansicht auf Tablet und Smartphone ist auf deiner Startseite besonders wichtig Du verwendest viele Spalten und Slider, die sich auf kleineren Bildschirm besonders verhalten müssen.

In der Tablet-Ansicht sieht soweit alles gut aus. Stelle lediglich bei deinen Videos die Spalten von 4 auf 2, damit die Boxen unter dem Feature etwas breiter werden.     

Der Slider könnte etwas mehr inneren Abstand vertragen, damit die Pfeile zu sehen sind.

Die erste Nachricht in deinem exemplarischen Thema sieht auch noch nicht optimal aus. Das Bild ist zu klein geraten. Diese Änderung stellt uns vor ein Dilemma.

Wir können die 2 Spalten des alternativen Listings nicht für einzelne Endgeräte anpassen, also zum Beispiel nur für das Tablet.  Stellen wir die Spalten in der Tablet-Ansicht insgesamt von 3 auf 2, entsteht Weißraum neben der ersten Nachricht.

Wir entscheiden uns für die zweite Variante und springen weiter zur Smartphone-Ansicht.

Auf dem Smartphone sehen mehrere Spalten fast nie gut aus. Deshalb stellen wir alle unsere Listing Grids auf dem Smartphone auf 1 Spalte.

Gute Nachrichten: Die leere Spalte im Ressort-Bereich springt auf dem Smartphone nach unten. Jetzt hast du die Möglichkeit, die Spalte auf dem Smartphone auszublenden, damit sie keine unschöne Lücke hinterlässt.

Das Thema funktioniert auch in der Smartphone-Ansicht nicht.

Stelle zunächst die Spalten für das gesamte Listing auf 1.

Da unser alternatives Listing mit 2 Spalten weder auf dem Tablet noch auf dem Smartphone aussieht, korrigiere es auf 3 Spalten und reduziere die angezeigten Nachrichten auf 4.

Es war ein Versuch wert, hat aber nicht geklappt. Mit einer 3-spaltigen ersten Nachricht sieht es nun in jeder Ansicht rund aus und wir können zufrieden sein.

Mit der Startseite ist zumindest die Grundausstattung deiner Website fertig.

Im nächsten Schritt sprechen wir darüber, was jetzt die nächsten Schritte sind, um deine Seite erfolgreich an den Start zu bringen.

Das könnte dich auch interessieren

WordPress-Plugins erweitern deinen Blog um bestimmte Funktionen – und das...
Du hast dein eigenes Nachrichten-Portal gebaut. Nimm dir jetzt einen...
Footer-Seiten erstellen Bevor du deinen Footer entwickelst, sollten zunächst alle...
Der Header, also der obere Bereich deiner Website, der im...

Kommentare

{{ reviewsTotal }} Review

{{ reviewsTotal }} Reviews

{{ options.labels.newReviewButton }}
{{ currentUserData.canReviewMessage }}