Mit Listings gestaltest du Newsfeeds ohne Grenzen

Letztes Update:
von sanchez.s
Mit Listings gestaltest du Newsfeeds ohne Grenzen

Listings sind Vorschauen auf Beiträge, die in einem Newsfeed nach bestimmten Regeln dargestellt werden, chronologisch oder thematisch, als Kacheln oder untereinander in einer Liste.

Listings teasern deine Inhalte an und eignen sich ideal zum Querlesen .

Du baust die Listings zuerst, weil sie das kleinste Element deiner Seite sind. Alle anderen Seiten enthalten Listings und ließen sich nicht bauen, wenn du die Listings noch nicht gebaut hättest.

1. Listings anlegen

Für das Nachrichten-Portal benötigst du 3 Listings. Wir nennen sie Box, Liste und Feature.

Nummer 1, die Liste, soll eine Vorschau auf deine Nachrichten geben. Das Listing entwickelst du – wie gewohnt – mit dem Elementor Page Builder.

Überprüfe zuerst, ob Elementor die Quelle des Listings korrekt übernommen hat. Du könntest die Breite deines Listings in der Vorschau verändern, um ein besseres Gefühl zu bekommen, wie es nachher aussieht.

Die tatsächliche Breite des Listings entscheidest du nicht hier. Sie ergibt sich an der Stelle, an der du es auf deiner Website einbindest und ist abhängig von der Spaltenanzahl und der Bildschirmgröße des Endgeräts. 

Du sorgst dafür, dass das Listing auf den Beitrag verlinkt, dessen Inhalte es anteasert.

Du könntest einzelne Elemente, wie die Überschrift und das Bild verlinken.

Jetzt ist das Listing ganzflächig verlinkt, sodass große Finger auf kleinen Bildschirmen trotzdem klarkommen. 

Du könntest dem Listing befehlen, immer in einem neuen Tab zu öffnen und ein bestimmtes Link-Attribut standardmäßig zu hinterlegen. 

Das ist praktisch, wenn du eine Affiliate-Seite mit vielen externen Links bauen und diese auf Nofollow setzen möchten.

Ich benutze diese Funktion für das Nachrichten-Portal nicht.

Weitere geht’s: Lege die beiden anderen Listings mit den gleichen Einstellungen an.

  • Die Liste
  • Und das Feature

Öffne alle 3 Listings in verschiedenen Tabs.

2. Listings gestalten

Liste

Du startest mit dem Listing namens Liste.

Vorsetzer

Den Vorsetzer baust du mit einem Dynamic Field. Es zieht sich den Vorsetzer aus den Meta-Daten der jeweiligen Nachricht und zeigt ihn an.

Der Vorsetzer erhält das HTLM-Tag H4, also Überschrift 4, und damit auch Schrift und Farbe für H4, die wir vorher zentral im Theme definiert haben.

Titel

Der Titel, ebenfalls ein Dynamic Field, hat die Quelle Post und das Objekt-Feld Title.

Der Titel erhält das HTML-Tag H3.

Auszug

Es folgt der Auszug, also ein kurzer Teaser auf die eigentliche Nachricht.

Ich habe für meine Fake-Inhalte keine Auszüge festgelegt, deshalb generiere ich einen automatischen Auszug aus den 30 Wörtern meiner Nachricht. Der HTML-Tag bleibt DIV, weil der Auszug in normalem Body-Text dargestellt werden soll.

Autor

Den Autor der Nachricht stellst du mit einem anderen dynamischen Feld dar: Dynamic Terms.

Kannst du mit Dynamic Field Post-abhängige Daten, wie Titel, Auszug und den Content selbst sowie Meta-Daten, wie unser selbst-definiertes Meta-Feld Vorsetzer anzeigen, benötigst du für das Anzeigen von Taxonomien der jeweiligen Nachricht das Widget Dynamic Terms.

Der Dynamic Term zieht sich den Autor der jeweiligen Nachricht. Sind es mehrere Autoren, zeigt er alle an und trennt sie mit einem Komma.

Außerdem leitet er unsere Leser beim Klick auf den Autor in das jeweilige Autoren-Archiv weiter.

Vor dem Autor steht das Wort von.

Wenn kein Autor gesetzt ist, bleibt das ganze Feld unsichtbar.

Datum

Für die hauseigenen Meta-Daten von WordPress – wie Datum, Kommentare oder Autor (falls du die Autoren-Funktion von WordPress nutzt) – benötigen wir ein weiteres Widget namens Dynamic Meta.

Du bist bescheiden und setzt nur das Datum. Allerdings soll das Datum auf kein Archiv verlinken und ein anderes Format haben.

Jetzt geht’s ins Fein-Tuning.

  1. Platziere einen Abstand zwischen Auszug und Autor.
  2. Setze die Zeilenhöhe des Vorsetzers auf 0, um den Abstand zwischen Vorsetzer und Titel zu verringern. Leider lässt sich das nicht zentral im Theme festlegen.
  3. Der Autor und das Datum soll etwas dezenter wirken. Das erreichst du, in dem du die Schrift verkleinern und grau färbst.

Bild

Als nächstes folgt das Bild.

Füge eine neue Spalte hinzu und verkleinere sie auf 30 Prozent Breite.

Das Widget Dynamic Image stellt das Beitragsbild der jeweiligen Nachricht dar.

Du änderst die vertikale und horizontale Ausrichtung der Spalte auf mittig und richtest das Bild selbst mittig aus.

Mobile Check

Am Ende kontrollierst du die Darstellung des Listings auf unterschiedlichen Bildschirmgrößen.

Während das Listing auf dem Tablet gut dargestellt wird, springt auf dem Smartphone das Bild unter die Textinhalte.

Ich finde es sinnvoller, wenn zunächst das Bild und dann die Textinhalte angezeigt werden, deshalb kehre ich die Spalten in der mobilen Darstellung um.

Mit deinem ersten Listing, der Liste, bist du fertig. Die Box und das Feature fehlen noch.

Box und Feature

Du sparst Zeit und kopierst die Liste in den Page Builder der Box hinein. Lösche die Spalte mit dem Bild und voila, du bist fertig. Auch auf dem Tablet und Smartphone macht deine Box einen guten Eindruck.

Dasselbe Spiel für das letzte Listing: das Feature.

Zuerst Copy+Paste. Dann verschiebst du das Bild unter den Titel und löscht die leere Spalte.

Setze zuletzt einen kleinen Abstand zwischen Bild und Auszug.

Der Mobile Check sieht ebenfalls gut aus.

Mit den Listings bist du fertig.

Im nächsten Schritt zeige ich dir, wie du Templates für deine Nachrichten anlegst.

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...
Deine Besucher starten immer seltener auf der Startseite – auch...
Footer-Seiten erstellen Bevor du deinen Footer entwickelst, sollten zunächst alle...

Kommentare

{{ reviewsTotal }} Review

{{ reviewsTotal }} Reviews

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