In diesem Tutorial sehen wir uns genauer an, wie du die Darstellung einzelner Beiträge ändern kannst. Wir untersuchen zwei Designs und lernen, wie verschiedene Blocktypen neu strukturiert und verschachtelt werden.
Lernziele
- Aufrufen des Website-Editors und der Vorlage für Beiträge.
- Erkennen des Standardlayouts der Vorlage für Beiträge deines Themes.
- Identifizieren verschiedener Theme-Blöcke, die zum Erstellen des Layouts eines einzelnen Beitrags verwendet werden.
- Anpassen der Vorlage für Beiträge an deine Anforderungen.
- Verschieben und Verschachteln verschiedener Blocktypen.
Verständnisfragen
- Wie sollen die Inhalte deines Beitrags angezeigt werden?
- Welche Theme-Blöcke werden am häufigsten verwendet?
Transkript
Hallo und willkommen bei Learn WordPress. In der heutigen Sitzung sehen wir uns an, wie du das Layout deiner Beitragsinhalte anpassen kannst. Jedes Block-Theme enthält eine Vorlage für einzelne Beiträge, die die Struktur bzw. das Design der Darstellung eines einzelnen Beitrags vorgibt. Du kannst diese Vorlage selbstverständlich an deine Bedürfnisse anpassen.
Derzeit ist das Theme Twenty Twenty-Two installiert. So ist ein Beitrag standardmäßig strukturiert, wenn du eine Vorlage im Website-Editor bearbeitest. Klicke auf die Listenansicht, damit wir die Struktur der Seite besser sehen können. Du wirst nun den Block „Beitragstitel“, den Block „Beitragsbild“, den Block „Beitragsinhalt“ und ganz unten den Block „Beitragsdatum“, den Block „Beitragsautor“, den Block „Beitragskategorien“ und den Block „Beitrags-Schlagwörter“ sehen. Bitte beachte, dass dieses Standardlayout je nach verwendetem Theme unterschiedlich ausfällt. Sehen wir uns an, wie das Ganze im Frontend deiner Website aussieht. Du siehst den Beitragstitel, das Beitragsbild, den Beitragsinhalt, das Beitragsdatum, den Beitragsautor und anschließend ein Schlagwort oder eine Kategorie.
Ich zeige dir, wie du dieses Standarddesign auf zwei verschiedene Arten ändern kannst. In meinem ersten Beispiel siehst du, dass ich die Ausrichtung des Website-Titels geändert und die Blöcke „Beitragsdatum“, „Beitragsautor“ und „Beitragskategorien“ unter den Website-Titel und über das Beitragsbild verschoben habe. Den Block „Beitragsbild“ und den Block „Beitragsinhalt“ habe ich an derselben Stelle belassen.
Im zweiten Beispiel habe ich einen individuellen Beitragskopf erstellt. Dafür habe ich einen Cover-Block verwendet und das Navigationsmenü, das Beitragsbild, den Block „Beitragstitel“ sowie den Block „Beitragsdatum und -autor“ darin verschachtelt.
Sehen wir uns nun an, wie du deine Vorlage für Beiträge anpassen und diese Beispiele nachbilden kannst. Um das Layout aus dem ersten Beispiel zu erstellen, klicke auf „Design“ und anschließend auf „Editor“. Klicke auf das WordPress-Symbol bzw. Website-Symbol, gehe zu „Vorlagen“ und wähle dann die Vorlage für einzelne Beiträge aus. Klicke auf die Listenansicht, um die Struktur der Seite besser zu sehen. Zunächst ändern wir die Ausrichtung des Beitragstitels auf zentriert. Scrolle dann nach unten und suche die anderen Theme-Blöcke. Wähle den übergeordneten Zeilenblock aus. Ziehe den Zeilenblock nun in der Listenansicht unter den Block „Beitragstitel“ und ändere anschließend die Ausrichtung auf zentriert. Wenn du fertig bist, klicke auf „Speichern“. Danach können wir zurück zum Frontend unserer Website gehen, um zu sehen, wie sie für Besucherinnen und Besucher aussieht. Und da ist es.
Um das zweite Beispiel nachzubilden, befinden wir uns wieder im Website-Editor. Gehe zu „Vorlagen“ und wähle erneut die Vorlage für einzelne Beiträge aus. Als Erstes entfernen wir den Header, den Block „Beitragstitel“, den Block „Beitragsbild“ sowie alle anderen Theme-Blöcke. Anschließend fügen wir oben auf unserer Seite einen Cover-Block hinzu. In der Block-Werkzeugleiste gibt es eine Option zum Hinzufügen von Medien und auf der linken Seite die Möglichkeit, das Beitragsbild zu verwenden. Klicke auf „Beitragsbild verwenden“ und wähle anschließend eine Overlay-Farbe aus. Wähle den Cover-Block aus und ändere dann die Deckkraft auf 80. Klicke anschließend auf den Inserter und füge einen Zeilenblock hinzu. In diesem Zeilenblock fügen wir nun das Website-Logo, den Website-Titel und anschließend den Navigationsblock hinzu. Ich wähle eines der Menüs aus, die ich bereits erstellt habe. Wähle anschließend die Blöcke „Website-Logo“ und „Website-Titel“ aus und gruppiere sie in einer Zeile.
Wähle nun erneut den übergeordneten Zeilenblock aus und wähle neben „Ausrichtung“ die Option „Elemente mit Zwischenraum“. Wähle zuletzt den Navigationsblock aus und stelle sicher, dass du die Option „Umbruch in mehrere Zeilen erlauben“ deaktivierst. Wähle anschließend den Block aus und verschiebe ihn an den oberen Rand des Cover-Blocks. Nun füge ich meinen Block „Beitragstitel“ hinzu und richte ihn zentriert aus. Danach füge ich einen weiteren Zeilenblock hinzu, um mein Beitragsdatum und meinen Beitragsautor zusammenzufassen. Zuerst füge ich den Block „Beitragsdatum“ und anschließend den Block „Beitragsautor“ hinzu. Ich wähle erneut den übergeordneten Block aus und ändere die Ausrichtung auf zentriert. Danach fügen wir dazwischen einen Absatz ein, setzen einen Punkt und formatieren ihn fett. Anschließend stelle ich sicher, dass der übergeordnete Block wieder ausgewählt ist, und ändere in den Einstellungen der Seitenleiste den Blockabstand auf 10 Pixel, damit die Elemente näher zusammenrücken. Danach schließe ich die Einstellungen der Seitenleiste und die Listenansicht. Ich stelle sicher, dass ich die Größe meines Cover-Blocks erhöhe. Zuletzt kannst du entscheiden, ob du auch den Trennlinienblock direkt unter dem Cover-Block entfernen möchtest. Danach kannst du zum Frontend der Website zurückkehren, um deine Änderungen in Aktion zu sehen.
Wenn du eine Vorlage geändert hast, siehst du neben dem Namen deines Themes einen kleinen Punkt über dem Bild. Wenn du mit deinen Änderungen nicht zufrieden bist, klicke auf die drei vertikalen Punkte und wähle „Anpassungen löschen“. Nun wurde die Vorlage auf ihren ursprünglichen Zustand zurückgesetzt. Damit sind wir am Ende dieses Tutorials angelangt.
Viel Erfolg beim Anpassen deiner eigenen Vorlage für Beiträge. Besuche Learn WordPress für weitere Tutorials und Schulungsmaterialien.