Als ich vergangenen Herbst über einen neuen Blogbeitrag nachdachte, kam eine Anfrage herein. Ob ich Lust hätte, zu einem E-Book über WordPress Gutenberg beizutragen. Und wenn ja: mit welchem Thema? Das Thema lag auf der Hand, zumindest für mich. Damals hatte ich angefangen, mich vertieft mit den beiden Breiten alignwide und alignfull zu beschäftigen. Doch leider lieferte das Ändern der WordPress Gutenberg Ausrichtung nicht immer direkt das gewünschte Ergebnis. Also machte ich mich an die Arbeit und verfasste meinen Beitrag: Die Gutenberg-Breiten alignfull und alignwide – und wie man damit Seiten gestalten kann.
WordPress Gutenberg Ausrichtung ändern: alignwide versus alignfull
Allzu oft hatte ich mich letzten Herbst darüber geärgert, dass das Ändern der Ausrichtung eines Elementes nicht immer zum gewünschten Ergebnis führt. Dies gilt vor allem dann, wenn man mit Verschachtelungen arbeitet. Und das kommt öfter vor, als Sie jetzt vielleicht denken. Denn das Arbeiten mit Gruppierungen führt unweigerlich dazu, dass Sie Elemente verschachteln. So werden zum Beispiel zwei gruppierte Absätze zu einem Gruppe-Block. Dann braucht es aber auch Definitionen, wie sich diese gruppierten Elemente verhalten sollen.
Wie groß soll die Gruppe an sich sein? Und wie viel Platz nehmen die Elemente in ihr ein? Gerade so wie oben im Bild. Da gibt es zwei gelbe Elemente, die die weite Breite nutzen. Eines von beiden soll sich aber von dem anderen durch einen farbigen Bereich (hier: pink), der die volle Breite nutzt, absetzen. Dabei sollen die beiden weiten Elemente aber bitte exakt gleich breit sein. Unabhängig davon, ob sie nun verschachtelt sind oder alleine dastehen. Und insgesamt sollten sie natürlich breiter sein als der Content.
Das Ändern der Ausrichtung an sich ist sehr einfach. Denn fast jeder Block bietet hierfür einen Button: Ausrichtung ändern. Hier finden Sie die weite Breite und die gesamte Breite neben den bekannten Ausrichtungen linksbündig, zentrieren und rechtsbündig. Klicken Sie auf eine Option, ist diese aktiv. Wollen Sie zurück, reicht der erneute Klick auf die aktive Ausrichtung, um sie zu deaktivieren.
Das Zuordnen und Ändern ist also wirklich denkbar einfach. Im Endeffekt aber – und das ist die Krux an der Sache – kann es gut sein, dass Sie nicht das gewünschte Ergebnis erzielen. Obwohl Sie alles richtig gemacht haben. Genau damit beschäftigt sich mein Beitrag zum kostenlosen E-Book des Hosting-Anbieters Host Europe.
Kostenloses E-Book: Experten-Tipps und Techniken zur Arbeit mit dem WordPress Gutenberg-Editor
Endlich online: Experten-Tipps und Techniken zur Arbeit mit dem WordPress Gutenberg-Editor – Unser E-Book zum Gratis-Download
Zu dem 94 Seiten umfassenden E-Book haben insgesamt fünf Autor/innen beigetragen. In seinem Vorwort bezeichnet Redakteur Oliver Lindberg uns als »Who’s Who der deutschsprachigen WordPress-Community«. Das ist natürlich sehr schmeichelhaft, zumindest für mich. Die Kolleg/innen sind in der Community jedenfalls weit engagierter als ich.
So zum Beispiel sollten mittlerweile alle WordPress-Benutzer/innen Jessica Lyschiks Gutenberg-Fibel kennen. Oder wer benutzt nicht die Antispam Bee des Pluginkollektivs, zu dem Simon Kraft gehört. Aktive Unterstützer/innen dieses Kollektivs sind dann auch die beiden weiteren Autor/innen Maja Benke und Bernhard Kau.
Inhaltlich geht es bei den Experten-Tipps um Aspekte wie
- den aktuellen Stand des Gutenberg-Editors (Kapitel 1)
- das Individualisieren des Editors (Kapitel 2)
- den Entwicklungsprozess eines benutzerdefinierten Beitragstypens (Kapitel 4)
- die Vorteile des WordPress-Supports (Kapitels 5).
In meinem Kapitel, dem dritten, geht es also um das Gestalten von Seiten mittels der Gruppierung und der beiden Ausrichtungen alignwide und alignfull. Hier erkläre ich, welche Voraussetzungen für die beiden Breiten nötig sind, damit WordPress Benutzer/innen sie überhaupt einsetzen können. Denn nicht jedes Theme bietet diese Möglichkeit. Im Weiteren zeige ich, wie Sie Elemente verschachteln und somit ganze Seiten gestalten können. Hierfür nutze ich als Grundlage einen Seitenentwurf.
Schließlich verdeutliche ich, dass das aktive Theme maßgeblich für das Ergebnis verantwortlich ist. Fehlen dem Theme wesentliche CSS-Angaben, müssen Sie diese hinzufügen. Also zeige ich anhand von drei der meistgenutzten freien Themes (Neve, Ocean WP und Hestia), wie sich durch das Bearbeiten der CSS-Angaben mein Seitenentwurf umsetzen lässt.
Die gute Nachricht: Themes, die sich an den Standard halten (so natürlich auch Twenty Nineteen, Twenty Twenty und Twenty Twenty-One), haben mit der Ausrichtung keine Probleme.
Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar