Fallstudie: About-Seiten von everysize mit Gutenberg

Ich kümmere mich schon seit einiger Zeit für everysize um Wartung und Anpassungen an ihrem Blog, das mit WordPress und einem modifizierten Drittanbieter-Theme läuft. Jetzt sollten die About-Us-Seiten wie Team, Über Uns, Partner und Jobs auch über WordPress gepflegt werden, um die Bearbeitung im Vergleich zur vorherigen Situation zu vereinfachen.

Dafür wurde von einer Agentur ein Layout für die unterschiedlichen Seiten erstellt und meine Aufgabe war die Umsetzung der Layouts in WordPress.

Ausgangslage

Das Layout für die neuen Seiten hat mit dem restlichen Blog-Layout nicht viel zu tun. Nur der Header und Footer, der sich über die gesamte everysize-Site zieht, wird auch hier übernommen.

Nach Umsetzung der Layouts in WordPress sollte meine Aufgabe auch das Anlegen neuer Seiten in dem Design sein. Das everysize-Team würde nur Änderungen an bestehenden Inhalten vornehmen, ich konnte also, um Arbeitsaufwand zu sparen, teilweise ein paar Abkürzungen nehmen und es musste im Backend nicht alles so umgesetzt werden, dass es für jede:n direkt intuitiv und einfach bedienbar ist.

Umsetzung

Um die Voraussetzung für das Layout zu schaffen, das sich vom restlichen Blog-Design sehr unterscheidet, war die für mich logische Wahl ein eigenes Seiten-Template in WordPress. Da WordPress dem body-Element standardmäßig Template-spezifische Klassen mitgibt, kann so bequem im CSS das gesamte Seiten-Design nur für dieses Template angepasst werden.

Bis vor ein paar WordPress-Releases hätte ich für den Footer-Bereich der Seiten vielleicht noch einen eigenen Block entwickelt, aber spätestens seit die Block-Vorlagen-Funktion vorhanden ist, lassen sich damit viele etwas komplexere Inhaltselemente umsetzen und schnell wiederverwenden, ohne einen eigenen Block erstellen zu müssen.

So blieben nur zwei Inhaltselemente, die mit WordPress-Bordmitteln nicht umgesetzt werden konnten: die verschiedenen Arten Slider und das Akkordeon-Element. Für letzteres habe ich mit Accordion Blocks ein gut funktionierendes Plugin gefunden, das alle Ansprüche erfüllt. Für den Slider habe ich einen eigenen Block gebaut, weil da einiges an Flexibilität und Optionen notwendig war, was in einem fertigen Plugin eher schwer zu finden ist. Als Slider-Skript setze ich auf Splide, das schön flexibel und nicht von jQuery abhängig ist.

Der Slider-Block war wegen der ganzen Optionen auch der deutlich aufwendigste Teil.

Davon abgesehen war die meiste Arbeit das Schreiben vom CSS, um das Design der neuen Elemente umzusetzen beziehungsweise Elemente wie Absätze und Überschriften für das Seiten-Template anzupassen.

Ergebnis

Hier ein paar Eindrücke vom Ergebnis. Bis auf das Akkordeon-Element von der Über-Uns-Seite, der Screenshot vom Akkordeon ist von der Partner-Seite.

Screenshot des Hero-Bereichs der Über-Uns-Seite mit Hero-Text auf der linken Seite, der leicht ein Bild eines Sneakers auf der rechten Seite überlagert.
Der Hero-Bereich nutzt den Spalten-Block von WordPress mit einer eigenen Klasse für die Überlagerung des Bildes durch den Text.
Screenshot der mobilen Version des Hero-Bereichs, bei der das Bild unter den Hero-Text rutscht.
Mobil wird das Bild unter den Text geschoben, ist allerdings weiter nicht komplett sichtbar sondern auf der rechten Seite angeschnitten.
Screenshot des Slider-Blocks in der Variante mit kurzen Slide-Beschriftungen als Steuerungselemente. Angezeigt wird der erste Slide mit dem Label »Partner-Shops«, der aussagt, dass über 50 Shops angebunden sind und diese vor Aufnahme sorgfältig geprüft werden.
Eine Variante des Slider-Blocks zeigt über den Slides für jeden Slide ein Label als Steuerungselemente an.
Screenshot der mobilen Ansicht des Sliders mit den Labels als Steuerungselemente.
Bei schmaleren Viewports wird der Slider nur noch einspaltig angezeigt.
Screenshot einer anderen Slider-Variante, die über die gesamte Breite geht und neben dem aktiven Slide in der Mitte rechts und links davon jeweils noch einen ausgegrauten Slide angeschnitten anzeigt.
Eine andere Möglichkeit beim Slider-Block ist die Darstellung über die gesamte Breite mit angeschnittenen weiteren Slides, die ausgegraut sind und auf denen der Text ausgeblendet ist.
Screenshot der mobilen Version des Sliders, bei dem der nächste und vorherige Slide nur noch sehr wenig zu sehen sind und die Controls unter den Slider rutschen.
Mobil sind der vorherige und nächste Slide nur noch knapp angeschnitten und die Navigationspfeile rutschen unter den Slider.
Screenshot eines Akkordeon-Elements, das FAQs darstellt, mit einem ausgeklappten Eintrag.
Der Akkordeon-Block musste nur im Design angepasst werden.
Auf kleinen Viewports wird das Akkordeon einfach … kleiner 🤯
Screenshot des Footer-Bereichs auf der Über-Uns-Seite von everysize, mit einem Team-Foto und leicht überlagernd dem Text »my size. my sneaker. my team.« und einem Link »Partner werden« zur Partnerseite.
Der Footer-Bereich auf der Über-Uns-Seite ist recht einfach mit dem Gruppe-Block und einer eigenen CSS-Klasse umsetzbar. Als Block-Vorlage lässt sich das Element dann auf anderen Seiten schnell wiederverwenden.
Mobil werden die Abstände etwas kleiner und bei längeren Textzeilen oder Buttonbeschriftungen würde der Text weiter über das Bild ragen.

Schreibe einen Kommentar

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