Twenty Twenty im Theme-Verzeichnis von WordPress

Gestatten: Twenty Twenty.

Veröffentlicht am

|

Aktualisiert am

Diese Website basiert auf dem Standard-Theme Twenty Twenty, das in der vierten Auflage des Buches Einstieg in WordPress 6 ausführlich erläutert wird.

Der Beitrag schildert die Arbeit mit Twenty Twenty, vom ersten Eindruck über die Anpassungen im Customizer und dem Plugin Twentig bis zum Einsatz eines Child-Theme.

Inhaltsverzeichnis

Twenty Twenty im Überblick

Twenty Twenty basiert auf dem Theme Chaplin von Anders Norén, der bereits viele andere tolle WP-Themes wie Hemingway und Fukasawa veröffentlicht hat.

Es ist das erste Mal, das ein Standardtheme nicht von Grund auf neu erstellt wurde, sondern auf einem Theme aus der Community basiert.

Twenty Twenty ist ein einspaltiges Theme und sieht sich als flexibles Fundament für die Gestaltung der Inhalte mit dem Block-Editor. Die Umsetzung der WordPress-Standardblöcke mit verschiedenen Styles und allem drum und dran ist sehr gelungen, und das Arbeiten damit macht einfach Spaß.

Optionen im Customizer

Die Optionen im Customizer sind überschaubar, enthalten aber durchaus verborgene Schätze.

Website-Informationen

In den Website-Informationen kann man wie immer einen Titel der Website und einen Untertitel eingeben. Die beiden stehen im Header nebeneinander, und auf mobilen Geräten wird der Untertitel ausgeblendet.

Man kann ein eigenes Logo und ein Website-Icon hochladen. Die vorgeschlagenen Bildmaße für das Logo sind 120 auf 90 Pixel, aber andere Größen sind möglich. Mit der Option Retina kann man eine doppelt so große Grafik hochladen, damit das Logo auch auf hochauflösenden Bildschirmen, bei Apple Retina genannt, scharf bleibt.

Das Logo ersetzt den Titel der Website. Der Untertitel erscheint auf Desktop und Tablet weiterhin daneben, mobil sieht man nur das Logo.

Ich habe auf dieser Website kein Logo eingebunden, dafür aber ein Website-Icon, das in Browser-Tabs und zahlreichen anderen Stellen sichtbar wird.

Farben

Die Optionen für Farben sind sinnvoll, aber für meinen Geschmack etwas zu spartanisch:

  • Hintergrundfarbe definiert die Hintergrundfarbe für den Inhaltsbereich und ich habe hier eine etwas hellere Farbe eingestellt (#fbf9f3).
  • Als Hintergrundfarbe für Header und Footer habe ich statt weiß die Standardfarbe vom Inhaltsbereich genommen (#f5efe0).
  • Die Akzentfarbe ist voreingestellt auf einen kräftigen Pinkton, den ich erst einmal so gelassen habe. Knallt ordentlich rein, aber das soll ein Akzent ja wohl auch.

Kleine Besonderheit: Wenn Sie die Hintergrundfarbe ändern, passt sich die Textfarbe automatisch an, wenn der Kontrast zu schwach wird. Probieren Sie mal Schwarz oder einen anderen dunklen Hintergrund, um das in Aktion zu sehen.

Um die Akzentfarbe zu ändern, aktivieren Sie die Option Individuell. Dann erscheint ein Schieberegler und beim Verschieben des Reglers sieht man die Änderungen sofort in der Live-Vorschau.

Schön wäre es hier z. B. noch, wenn man die Hintergrundfarbe für Header und Footer getrennt einstellen und für die Akzentfarbe einen Farbwert eingeben könnte. Auf dem Schieberegler für die Akzentfarbe sind längst nicht alle Farben vertreten.

Theme-Optionen

In den Theme-Optionen gibt es folgende mögliche Einstellungen:

  • Suchfeld im Header anzeigen aktiviert eine Suchfunktion im Header.
  • Autor-Biografie anzeigen zeigt unterhalb von Beiträgen die im Benutzerprofil hinterlegten Infos und falls vorhanden auch ein Foto.

Die dritte Option bezieht sich auf die Darstellung von Beiträgen auf Archivseiten. Dort habe ich die Option Vollständigen Text aktiviert, damit der vor dem Block Mehr eingefügte Teasertext ausgegeben wird.

Cover-Template und Hintergrundbild

Die Option Cover-Template ermöglicht es, ein Beitragsbild bildschirmfüllend darzustellen und zu fixieren, sodass es beim Scrollen stehen bleibt (Parallax-Effekt).

Um diesen Effekt einzubauen, muss man im Editor für die gewünschte Seite oder den gewünschten Beitrag zwei Dinge erledigen:

  1. Ein geeignetes Beitragsbild einbinden (Mindestbreite 1980 Pixel)
  2. Im Bereich »Beitrags-Attribute« bzw. »Seiten-Attribute« das »Cover Template« aktivieren

Im »Customizer« kann man dann den Parallax-Effekt und die Overlay-Farbe definieren. Eine Seite mit einem Cover-Template könnte zum Beispiel so aussehen wie im folgenden Bild.

Die Startseite dieser Website mit einem bildschirmfüllenden Foto (Cover-Template)
Eine Startseite mit Logo und Cover-Template

Diese Option ist eines der Highlights von Twenty Twenty und ich hatte mich schon drauf gefreut es einzusetzen, habe aber letzlich doch keinen Gebrauch davon gemacht. Auch die nächste Option, Hintergrundbild, habe ich nicht genutzt.

Mehr Optionen mit dem Plugin »Twentig«

Update vom 25. Juni 2020

Von Haus aus sind die Optionen im Customizer bei Twenty Twenty recht übersichtlich, sodass man sehr schnell Hand ans CSS legen müsste. Abhilfe schafft Twentig.

Das Plugin erweitert den Customizer von Twenty Twenty und macht das Theme wirklich praxistauglich. Von der Breite des Inhaltsbereiches über die Schriftart bis zur Beitragsseite reichen die Optionen von Twentig im Customizer. Eine ausführliche Beschreibung aller Optionen finden Sie im folgenden Beitrag:

Twentig – der perfekte Partner für Twenty Twenty.

Für diese Website hat Twentig einige CSS-Regeln zur Schriftgestaltung und zur Verbreiterung des Inhaltsbereiches überflüssig gemacht.

Fazit: Wenn Sie Twenty Twenty mögen, werden Sie Twentig lieben. Lohnt sich.

In nicht allzu ferner Zukunft wird es möglich sein, Header und Footer eines Themes vom Block-Editor aus zu bearbeiten, aber bis dahin ist man auf die Menüpositionen des Themes angewiesen. Twenty Twenty bietet hier mit insgesamt fünf Menüpositionen reichlich Auswahl.

Die Hauptnavigation im Header

Die ersten drei Menüpositionen sind für die Hauptnavigation im Header:

  • Horizontales Desktop-Menü ist das normale Hauptmenü. Hyperlinks erscheinen ganz rechts oben im Header nebeneinander und bekommen die Akzentfarbe.
  • Erweitertes Desktop-Menü ist optional. Es erscheint rechts neben dem horizontalen Desktop-Menü und wird durch drei horizontale Punkte mit dem Wort »Menü« darunter dargestellt.
  • Mobile-Menü ist für schmale Viewports, und es sieht genauso aus wie das Erweiterte Desktop-Menü.

Für die meisten Sites ist ein horizontales Desktop-Menü wahrscheinlich völlig ausreichend.

Footer-Menü und Social-Media-Menü

Das Footer-Menü erscheint überraschenderweise nicht ganz unten im Footer, sondern zwischen Inhalt und Widgets. Ganz unten, im eigentlichen Footer, ist keine Menü-Position vorgesehen.

Das Footer-Menü bietet zum Beispiel Platz zur Wiederholung von wichtigen Links aus der Hauptnavigation. In breiten Viewports stehen die Links nebeneinander, mobil untereinander.

Das Social-Media-Menü erscheint rechts neben dem Footer-Menü und verwandelt die üblichen Verdächtigen anhand der eingegebenen URL zum Profil in das entsprechende Symbol. XING ist wie so oft nicht dabei und bekommt das Kettensymbol für Hyperlinks.

Widgets in Twenty Twenty

Unterhalb von Footer- und Social-Media-Menü gibt es zwei Widgetbereiche, die am Desktop und auf dem Tablet neben- und mobil untereinander stehen.

Die Links der Widgets kommen allesamt recht auffällig daher, fett und in der im Customizer eingestellten Aktzentfarbe.

Anpassungen per CSS

Anpassungen per CSS können im Customizer im Bereich Zusätzliches CSS oder in der style.css eines Child-Themes gespeichert werden.

Das zusätzliche CSS gestaltet aber nur das Frontend, nicht die Blöcke im Block-Editor. Dazu benötigen Sie eine Datei namens style-editor.css. Wie das geht, steht im z. B. folgenden Artikel:

Ist nicht wirklich schwer, aber will alles gemacht werden.

Was ich in Twenty Twenty wirklich vermisse ist eine Möglichkeit, die Pflichtlinks zu Impressum und Datenschutz irgendwo dezent unterbringen zu können.

UPDATE: In Twentig gibt es einige neue Optionen für den Footer, die es ermöglichen, das Footer-Menü auch wirklich ganz unten in der Fußzeile mit den Credits unterzubringen. Damit wäre das Child-Theme – zumindest zu diesem Zweck – nicht mehr nötig.

Von Haus aus kann man sie entweder irgendwo in der erweiterten Hauptnavigation verstecken, wo sie dann aber nicht mit einem Klick erreichbar sind, oder im Footer-Menü einbauen, wo sie aber sehr prominent sind.

Mit einem Child-Theme kann man die beiden Links ganz unten in der Fußzeile unterbringen. Wie das geht, habe ich in den folgenden Beiträgen ausführlich beschrieben:

  1. Ein Child-Theme für Twenty Twenty herunterladen
  2. Twenty Twenty und Child-Theme: Pflichtlinks im Footer einfügen

Und wenn Sie ein Child-Theme haben, können Sie das CSS auch dort in der style.css speichern. Das ist auf Dauer meist doch übersichtlicher als im Customizer.

Viel Spaß bei der Umsetzung.

Fazit: Twenty Twenty ist echt gut

Twenty Twenty ist ein gelungenes Standardtheme und es ist das erste Mal, dass ich eine meiner Websites tatsächlich mit einem Standardtheme von WordPress betreibe.

Das Theme hat die Standardblöcke perfekt implementiert, und das Arbeiten damit macht einfach Spaß:

  • Fließtext
  • Buttons
  • Zitate und Pullquotes

Die Blöcke sehen gut aus. Da steckt unheimlich viel Liebe zum Detail drin. Schauen Sie sich mal die Trennlinien an. Hübsch, oder?


Die Block-Editor-Optionen wie Weite Breite und Volle Breite sind in Twenty Twenty gut umgesetzt und im Alltag einfach nur praktisch:

  • Eine raumgreifende Tabelle wie die für die Errata bekommt eine weite Breite zugewiesen.
  • Der Gruppe-Block mit Volle Breite macht durchgehende, farbige Abschnitte im Inhaltsbereich zum Kinderspiel.

Und so weiter und so fort. Bei der Arbeit mit Twenty Twenty ahnt man, wohin die Reise mit dem Block-Editor gehen könnte und welche Rolle Themes dabei in Zukunft spielen werden. Und die Sache gefällt mir gut.

Twenty Twenty ist nicht perfekt, aber mit einigen Anpassungen (und besonders mit dem Plugin Twentig) wirklich gut.

Und wie isses? Was haltet ihr von Twenty Twenty? Setzt ihr es selbst irgendwo ein? Die Kommentare sind geöffnet …

Vielen Dank an Anders Norén für das die Design und das WordPress-Team für die Umsetzung.

Der Videokurs zu »Twenty Twenty«

Im Mai 2020 erschien, Corona-bedingt leicht verzögert, endlich mein Videokurs zu Twenty Twenty:

WordPress 5: das Theme Twenty Twenty

Den Videokurs gibt es bei bei LinkedIn Learning im Einzelverkauf oder als Teil des Abos.

Avatar von Peter Müller

Kommentare

35 Antworten zu „Gestatten: Twenty Twenty.“

  1. Hallo Peter,

    danke für den ausführlichen Beitrag zum Twenty Twenty Theme.

    Für mich kommt das Theme leider nicht in Frage. Mag sein, dass viel Wert auf bestimmte Details gelegt wurde, aber für mich als „Nutzer“ bietet mir das Theme zu wenig Optionen. Wenn man schon CSS für die Anpassung der Standardbreite benötigt oder die Pflichtangaben mühsam über Child Themes „reinfrickeln“ muss, dann bin ich als „Nutzer“ raus.

    Auch verstehe ich die Entscheidung, Inter als Font einzusetzen und dem User hier keine Wahl zu lassen, nicht so ganz. Gibt es die Probleme im Zusammenhang mit Chrome noch? Wie dem auch sei: auch hier muss man wieder CSS Code schreiben, um beispielsweise auf System Fonts zu wechseln. Aus Performance Gründen mag ich den Inter Font auch nicht…

    Ja, mit Anpassungen mag das Theme gut und auch zukunftsfähig sein, aber ich persönlich möchte keine Zeit in die Anpassungen des Themes investieren.

    Ich nutze auch ein minimalistisches (Free mit Premium-Upgrade) Theme mit diversen PHP/CSS Anpassungen, aber da bietet schon der Customizer genügend Optionen, diverse „Standard-Sachen“ einzustellen.

    Mein persönliches Fazit: Für Entwickler und Anwender, die sich mit CSS (und ggf. PHP) einigermaßen auskennen und den Entwickler-Modus des Webbrowsers nutzen können oder auch Anwender, denen das Theme schon so gefällt, mögen gefallen daran finden.

    Andere Nutzer werden wahrscheinlich wieder zu „Premium“ Themes auf diversen Marktplätze greifen.

    Daniel

    1. Hallo Daniel,

      danke für dein ausführliches Feedback. Ein Standard-Theme wie Twenty Twenty wird sicher keine Premium-Themes ersetzen, aber das ist auch nicht Ziel der Sache.

      In erster Linie soll das »default theme« die neuesten Features demonstrieren, gut aussehen und ein solides Fundament für Child-Themes und eigene Anpassungen bilden. Deshalb gibt es ja auch (fast) jedes Jahr ein neues.

      Das folgende Zitat aus Why Default Themes Change Each Year vom September 2012 beschreibt die Idee hinter dem jährlich wechselnden Standard-Theme:

      The default theme should show off the latest and greatest features, be flexible enough to gracefully support child themes and encourage customization, work well for a blog or a website, and sport a design that is aesthetically pleasing and a bit different from the last design.

      Under the hood it should represent the best in coding practices and technical excellence.

      That said, the default theme isn’t trying to be an end-all-be-all theme. It won’t please everyone.

      Ein Standard-Theme soll also in erster Linie ein Beispiel für aktuelle »Best Practices« sein, und das macht Twenty Twenty zum Beispiel bei der Ausgestaltung der Standardblöcke echt gut.

      Aber Twenty Twenty macht dabei eine bessere Figur als die meisten seiner Vorgänger, und es ist das allererste Mal, dass ich ein Standard-Theme für eine reale Website nutze.

      Ich habe es einfach mal ausprobiert und war ehrlich gesagt selbst ein bisschen überrascht, dass ich mit dem Ergebnis zufrieden war. Okay, mit Child-Theme und diversen CSS-Anpassungen, aber dazu gibt es diese Möglichkeiten ja.

      Und weil es besser geklappt hat als erwartet, habe ich dann den ganzen Vorgang hier dokumentiert, inklusive Anpassungen und Erstellung des Child-Themes.

      Für meine anderen Websites werde ich aber – genau wie du – auch weiterhin andere Themes nutzen. Es gibt ja mehr als genug gute Freemium-Themes wie Astra, Neve oder meinem persönlichen Favoriten GeneratePress (Affiliate Link).

      Grüße aus Groningen, guten Rutsch und auf das »Twenty Twenty« ein gutes Jahr wird 😉

      Peter

  2. Hallo Peter,

    die Idee, die Standardbreite von 580 auf 720 Pixel zu ändern gefällt mir sehr gut, nur leider muss auch noch etwas CSS für Bilder angepasst werden. Ich habe in meinen Artikeln einige Bilder linksbündig angeordnet und die Standardwerte passen nun verständlicherweise nicht mehr.

    HTML:

    CSS:
    .alignleft {margin-left: calc(( 100vw – 58rem – 8rem ) / -2);}

    Es wäre klasse, wenn du die passenden CSS-Werte in deinem Artikel noch ergänzen könntest (damit die Änderung auf 720 Pixel nicht zu ungewünschten Nebeneffekten führt).

    Danke und Grüße
    Lucien

    1. Vielen Dank für den Hinweis mit den Bildern.

      Ich werde mir das CSS von Twenty Twenty beizeiten wohl nochmal genauer anschauen müssen. Bei einem alignleft ist ja z. B. alignright meist nicht so ganz weit weg…

      Hattest du in deinem Kommentar noch etwas HTML geschrieben? Falls ja, das ist verschluckt worden.

      1. Ja alignright betrifft das dann auch. Leider tue ich mich selbst mit dieser margin-left: calc Berechnung etwas schwer.

        Das HTML wurde rausgefiltert, diente jedoch auch nur der Anschauung.

    2. UPDATE: Statt das CSS zur Änderung der Breite zu perfektionieren (was potenziell ein Fass ohne Boden ist), habe ich es im Beitrag entfernt und durch einen Link zu Twentig ersetzt.

      Das Plugin Twentig bietet drei Optionen zur Gestaltung der Inhaltsbreite.

  3. Avatar von Matthias
    Matthias

    Hi. Danke für die tollen Tipps. Mit dem Update auf die Theme Version (April 2020) klappt die CSS Regel für „Fließtext ohne Serifen“ leider nicht mehr. Es werden wieder die Serifen angezeigt.

    1. Ich werde mir das beizeiten mal anschauen, habe momentan aber leider keine Zeit dazu.

      UPDATE: Stimmt. Nach dem Update zieht die CSS-Regel nicht mehr, aber statt lange zu forschen, was genau das Theme geändert hat, habe ich einfach Twentig installiert und damit die Schrifteinstellung gemacht.

      Das Plugin Twentig bietet diverse Optionen zur Schriftgestaltung.

  4. Hallo Peter.
    Die Startseite mit dem Hintergrundbild über die gesamte Seite gefällt mir sehr gut (https://einstieg-in-wp.de/wp-content/uploads/2019/12/einstieg-in-wp-2020-startseite-mit-coverfoto.jpg).
    Leider komme ich nicht dahinter, wie ich das Hintergrundbild mit dem Theme über die gesamte Fläche inkl. Footer & Header angezeigt bekomme. Muss dazu das CSS angepasst werden?
    Beste Grüße
    Mark

    1. Hallo Mark,
      wie das geht, wird oben im Beitrag beschrieben:

      »Cover-Template und Hintergrundbild«

      Das große Bild ist ein Beitragsbild. Das erstreckt sich aber nicht über die „gesamte Fläche inkl. Footer & Header“, sondern über den Viewport und gilt jeweils nur für einzelne Seiten bzw. Beiträge. Eine CSS-Anpassung ist dazu nicht nötig.

      1. Danke Dir für die sehr schnelle Antwort Peter.
        Ja, das mit der Unterscheidung Content-Template & Hintergrundbild hat mich zugegebenermaßen etwas verwirrt.
        Auch das bei Dir auf dem Screenshot das Bild in den Header bzw. das Menü & Dein Logo übergeht.
        Beste Grüße
        Mark

        1. Das »Cover-Template« heißt so, weil es so ähnlich ist wie ein »Cover-Block« (Text über Bild), nur halt für das ganze Browserfenster. Das Template legt das Bild automatisch hinter den Header.

          Die Seite für den Screenshot zu erstellen war also ganz einfach:

          1. Startseite im Editor öffnen
          2. Beitragsbild einbinden
          3. Cover-Template aktivieren
          4. Speichern

          Die Einstellungen für Overlay-Farbe und Deckkraft im Customizer sind für *alle* Cover-Templates. Das kann man nicht einzeln regeln.

          Viel Erfolg 🍀

      2. Avatar von Esther Phalcard
        Esther Phalcard

        Hallo Peter,
        wie bekommt man bekommt den „doofen“, nach unten zeigenden Pfeil noch weg?

        (Siehe das oben angegebene Cover-Bild „… Einstieg … 5“.)

        Der Pfeil soll wohl jedem zeigen: Achtung, hier unter mir steht was.

        Danke
        Esther

        1. Hallo Esther,

          der „Pfeil nach unten“ erscheint nur auf Seiten, auf Beiträge stehen an der Stelle die Post-Meta-Daten. Auf Seiten hat der Pfeil durchaus eine Funktion, damit Leute sehen, dass es unter dem großen Bild im nicht sichtbaren Bereich der Seite noch etwas kommt.

          Ich habe auf groningen-info.de auf der Startseite (mit einem anderen Theme) auch ein großes Foto und einen Pfeil darunter eingebaut, weil viele Leute den Inhalt darunter nicht gefunden haben.

          Der Pfeil steht in einem div mit der Klasse to-the-content-wrapper. Wenn du den Pfeil also tatsächlich weghaben willst, kannst du ihn per CSS ausblenden: div.to-the-content-wrapper { display: none; }.

          UPDATE: Das Plugin Twentig enthält eine Option zum Entfernen des Pfeils und zur Ausrichtung des Inhalts.

  5. Danke für die Anleitung zum Ändern der Seitenbreite, danach habe ich gesucht!

    1. UPDATE: Statt das CSS zur Änderung der Breite zu perfektionieren (was potenziell ein Fass ohne Boden ist), habe ich es im Beitrag entfernt und durch einen Link zu Twentig ersetzt.

      Das Plugin Twentig bietet drei Optionen zur Gestaltung der Inhaltsbreite.

  6. Hallo Peter – das sieht sehr sehr komplett aus was du hier schreibst. Du deckst sehr viele Punkte ab und beschreibst das Theme 2020 in der Tiefe. Beim kurzen Überfliegen hab ich allerdings nichts zu dem Bereich – class: wp_block_group – wp_block_group__inner_container gelesen.

    mich würde interessieren wie ich an diese Bereich beim Abstimmen &/ Editieren komme!? Bin noch ganz neu im Theme 2020 und deshalb hier die Anfängerfrage. Freue mich auf einen Tipp.

    1. Hallo Martin,
      der Bereich wp_block_group und sein Kompagnion wp-block-group__inner-container stammen von einem im Block-Editor eingefügten Gruppe-Block. Das hat mit dem Theme nichts zu tun.

  7. Ich hab deine Anleitung befolgt. Theme läuft ! Mit vielen Plugins sogar mit Animationen ! Genau richtig ! Ich habe nun meinen eigenen Text da drin rein gemacht.. und sogar noch eine Verlinkung hier auf deine Seite in meine Startseite eingebaut. Vielen lieben Dank ! Das war leichter als ich dachte ! Gruß Karl

    1. Super! Freut mich, dass es geholfen hat!

  8. Danke für die Einführung. Ich bin gerade dabei, das Theme in mehreren Websites einzubauen und mache mich damit vertraut. Was ich vermisse, ist das Widget für Links, denn über die Menüs bekomme ich nur eine Linkliste in den Footer. Aber wie bekomme ich eine Linkliste in den Footer 2, ohne dafür ein Menü zu nehmen? Wenn ich es über individuellen HMTL-Code mache, ist die Optik anders. Ich hätte es gerne so, wie Deine „Beiträge auf html-und-css.de“ hier im Footer 2 zu sehen sind. Verrätst Du mir den Trick? Das würde mich freuen!

    1. Die »Beiträge auf html-und-css.de« sind ein Feed, der von einem RSS-Widget generiert wird 😉

        1. Gern geschehen, und viel Spaß mit dem Theme!

  9. Moin Peter,

    danke für die schönen Erläuterungen. Das hat mir als. During bei dem Thema einiges verständlich nähergebracht.
    Aktuell experimentiere ich mit einer Default-Installtion. Darin ist die Seite „Blog“ enthalten. Jetzt schnalle ich nur nicht wie ich in der Seite alle Artikel angezeigt bekomme. Ich habe diverse Beiträge erzeugt, die Kategorien zugewiesen und diese Kategorien im Menü unter den Oberpunkten „Blog“ gehängt. Das funktioniert super. Wenn im im Menü Blog aufklicke und dann auf die Kategorie klicke, sehe ich die Artikel in der Kategorie. Ich hätte jetzt gerne, dass der Oberpunkten „Blog“ alle Artikel aller Kategorien beinhaltet – neueste zuerst.
    Irgendwie scheitere ich daran. Wahrscheinlich übersehe ich einen simplen Klick …

    Gruß,
    Jens

    1. Hallo Jens,
      falls ich dich richtig verstehe, ist es in der Tat ganz einfach.

      Die Seite zur Darstellung aller Artikel/Beiträge heißt in WordPress „Beitragsseite“.

      Bei dir sollte also im Menü „Seiten“ hinter der Seite „Blog“ das Wort „Beitragsseite“ stehen. Diese Beitragsseite bindest du im Menü dann als Menüpunkt „Blog“ ein.

  10. Avatar von Claudia

    Hallo Peter,
    vielen Dank für Deinen Beitrag.

    Das Rasterlayout für Beiträge auf der Beitragsseite wäre dann die Startseite?
    Kann man dort auch ein Vorschaubild einbinden?

    Vielen Dank für Deine Rückmeldung.
    Gruß
    Claudia

    1. Das Rasterlayout für Beiträge auf der Beitragsseite wäre dann die Startseite?

      Die Frage verstehe ich nicht ganz. Das Rasterlayout für Beiträge ist für die Beitragsseite. Richtig. Wenn die Beitragsseite also die Startseite ist, dann ja, dann wäre das Rasterlayout für Beiträge die Startseite. Wenn du aber eine statische Startseite und eine zusätzliche Beitragsseite hast, dann nein, dann ist das Rasterlayout nicht für die Startseite. Das Rasterlayout ist ja für Beiträge auf der Beitragsseite…

      Oder verstehe ich dich falsch?

      Kann man dort auch ein Vorschaubild einbinden?

      Ja, im Customizer > Twentig Options > Blog gibt es die Option Display featured image.

      Aber bei solchen Übersichten verzichte ich zunehmend auf Beitragsbilder. Das sieht zwar hübsch aus, aber es sind eine Menge Bilder und die Seiten werden dadurch oft fühlbar langsamer …

      1. Avatar von claudia

        Vielen Dank Peter für die Rückmeldung. Ich frage deshalb, weil mir die Startseite von twenty-twenty nicht gefällt und ich ein Rasterlayout mit Bild bevorzugen würde. Mit Twentig wäre das also möglich?

        1. Wenn du eine Beitragsübersicht im Rasterlayout mit Bild auf der Startseite möchtest – ja, das geht mit Twentig 😉

  11. Guten Morgen.

    Dieser Beitrag hat mich bewogen, dass Standard-Theme Twenty Twenty für meine Webseite zu nutzen. Ich habe auch im Customizer sogar das zusätzliche CSS eingefügt, um die Standarbeite zu ändern.

    Heute morgen kleben plötzlich alle Bilder am linken Bildrand. Einzige Änderung war ein Gutenberg Update. Vielleicht haben Sie eine Idee woran das liegen könnte.

    1. Haben Sie das Plugin Gutenberg auf Ihrer Website installiert?

      Die Änderung der Standardbreite ist mit dem Plugin Twentig wirklich einfacher als mit zusätzlichem CSS (siehe Kommentar vom 29. Juni 2020.).

      Ich schaue mir Ihre Website heute im Laufe des Tages mal kurz an.

      1. Vielen Dank für die schnelle Antwort!

        Das Gutenberg-Plugin nutze ich schon so ziemlich von Anfang an. Heute morgen gab es ein Gutenberg-Update.

        Ich habe Ihren Artikel zu dem Plugin Twentig gelesen und dieses damals auch ausprobiert. Ich wollte aber nur die Standardbreite ändern. Das fand ich mit zusätzlichem CSS im Customizer flexibler. Den Code hatten Sie damals ja praktischerweise mitgeliefert.

        1. Hallo,

          ich habe den Tipp bekommen das Gutenberg Plugin zu deaktivieren. Habe ich gemacht und das Problem war damit gelöst.

          Es stellt sich mir aber die Frage, ob ich den Gutenberg Editor auch ohne das Plugin auf Dauer nutzen kann.

          1. Das mit der De-Aktivierung des Gutenberg-Plugins wäre auch mein erster Tipp gewesen.

            Zu Ihrer Frage: Ja, Sie können den Block-Editor („Gutenberg-Editor“) auch ohne das Plugin auf Dauer nutzen.

            Aber Sie sind nicht der einzige, den der Begriff „Gutenberg“ verwirrt. Vielleicht hilft der Beitrag »Gutenberg« – was ist das überhaupt genau? hier im Blog etwas bei der Klärung des »Gutenberg«-Kuddelmuddels.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert