Gutenbergs Blockeditor für WordPress hat die Art und Weise geändert, wie wir Inhalte in CMS erstellen. Es eröffnete aber auch neue Möglichkeiten an der Front.
Eine der interessantesten Entwicklungen in diesem Bereich ist die Möglichkeit, einer Seite oder einem Beitrag “vollständige” oder “breite” Blöcke hinzuzufügen. Diese Funktion bietet einem Gutenberg-Block die Möglichkeit, von der Standardbreite des Inhalts eines Themas abzuweichen, was im alten Classic Editor fast unmöglich war.
Es gibt mehrere Verwendungsmöglichkeiten für einen vollständig oder breit ausgerichteten Block. Sie können beispielsweise neue Seitenabschnitte mit einem Deckblatt voller Breite eingeben, das den Text auf einem Bildhintergrund überlagert. Oder Sie können die Funktion nutzen, um einen Handlungsaufrufbereich zu erstellen, den Sie nicht verpassen sollten. Hier können fast alle Arten von Inhalten hinzugefügt werden, was Teil des Appells ist.
Es gibt jedoch eine kleine Einschränkung: Ihr Thema muss vollständige, ausgerichtete Blöcke unterstützen. Zum Glück ist das ganz einfach. Im Folgenden finden Sie ein kurzes Tutorial, mit dem Sie Ihrem WordPress-Design und Ihren Designblöcken über CSS umfassende Unterstützung für die Ausrichtung hinzufügen können.
Themenunterstützung hinzufügen
Der erste Schritt besteht darin, der Datei functions.php Ihres aktiven Themas eine einzelne Codezeile hinzuzufügen. Laden Sie diese Datei von Ihrer Website herunter, falls Sie sie noch nicht haben (sie befindet sich im Ordner / wp-content / themes / yourtheme / und ersetzt “yourtheme” durch den Ordnernamen). Kopieren Sie dann das folgende PHP-Code-Snippet und fügen Sie es ein:
add_theme_support (‘breite Ausrichtung’);
Laden Sie nach dem Hinzufügen des Codes die geänderte Datei Functions.php erneut in Ihren Themenordner.
Dieser Code bedeutet, dass Sie Breiten- und Breitenausrichtungsblöcke aktivieren möchten. Wenn Sie sich jetzt bei WordPress anmelden und auf den Seiten- / Post-Editor zugreifen, beachten Sie, dass einige Blöcke (nicht alle) die neuen Ausrichtungsoptionen “Voll” und “Breite” haben.
Verwenden Sie ein kommerzielles oder Standardthema?
Wenn Sie ein Standard- oder kommerzielles WordPress-Thema verwenden, stellen Sie sicher, dass Sie ein sekundäres Thema verwenden. Auf diese Weise können Sie Änderungen am Thema vornehmen, ohne es nach einem Update möglicherweise zu verlieren.
Grundlegender Blockstil
Das Entwerfen eines breiten oder vollständig ausgerichteten Blocks kann etwas schwierig sein. Und es gibt verschiedene Techniken. Was wir hier verwenden werden, stammt aus diesem Beispiel in CodePen.
@media screen e (Mindestbreite: 960 px) {
.alignwide, .alignfull {.
Breite: 100vw;
maximale Breite: 100vw;
linker Rand: berechnet (50% – 50 vw);
}}
}}
Beachten Sie, dass wir eine CSS-Medienabfrage verwenden, um genau diesen Stil zu integrieren, wenn die Bildschirmgröße 960 Pixel oder mehr beträgt. Dies liegt daran, dass wir diesen Effekt nicht unbedingt auf kleineren Bildschirmen haben möchten.
In diesem Fall verwenden wir dieselben Stile für die beiden Blockausrichtungen. Natürlich ist es durchaus möglich, sie separat zu gestalten, so dass jedes auf der Vorderseite ein einzigartiges Erscheinungsbild bietet.
Beachten Sie auch einen möglichen Nachteil: Bei einigen Modellen kann bei Verwendung dieser Technik eine horizontale Bildlaufleiste angezeigt werden. Dies kann durch CSS korrigiert werden, indem dem body-Element Folgendes hinzugefügt wird:
Körper {
x-pop: versteckt;
}}
Die Ergebnisse
Nachdem wir die vollständige und ausgerichtete Sperrfunktion aktiviert haben, ist es Zeit, die Dinge zu testen. Hier erstellen wir eine Seite mit einem Deckblock mit einer breiten Ausrichtung.
Wenn Sie sich das vordere Ende der Site ansehen, funktioniert der Deckblock wie erwartet. Das Element erstreckt sich über die gesamte Breite der Seite, während der Inhalt unten innerhalb der Standardbreite von 960 Pixel des Themas bleibt.
Dieses Element, das nur Standardstile verwendet, fällt wirklich auf. Dennoch gibt es viele Möglichkeiten, mehr mit Design zu tun.
Durch das Hinzufügen zusätzlicher CSS-Klassen oder das Targeting bestimmter Blöcke steht uns ein umfassendes Arsenal an Entwurfsmöglichkeiten zur Verfügung. Dinge wie Hintergründe, Rahmen oder Beschneidungspfade können eine einzigartige Note hinzufügen.
Erweitern mit WordPress-Themes
In einer Standardinstallation bietet Gutenberg nicht alle Funktionen eines Page Builder-Plugins. Aber die Blockausrichtungen ermöglichen es uns, dieses Gebiet zu betreten.
Dies ist eine gute Sache, da sich das Webdesign seit den Tagen, als der Classic Editor zum ersten Mal erschien, weiterentwickelt hat. Zu dieser Zeit verwendeten Websites in der Regel immer eine einheitliche Breite von Inhalten.
Abschnitte in voller Breite gehören derzeit zu den beliebtesten und nützlichsten Gestaltungsoptionen. Die Möglichkeit, dies ohne Theme-Plugins oder Hacks zu nutzen, macht WordPress für Designer noch besser.
