Teammitglieder mit einem Gutenberg-Block strukturiert darstellen
Neue Teammitglieder, veränderte Funktionen oder neue Kontaktdaten: Eine Teamseite muss sich einfach aktualisieren lassen. Mit dem Team Cards Block bearbeiten Sie jedes Personenprofil einzeln im WordPress-Editor. Der einheitliche Aufbau mit Bild, Funktion und direkten Kontaktmöglichkeiten bleibt dabei erhalten.
Teamseiten verbinden mehrere Personenprofile zu einer gemeinsamen Übersicht. Bild, Name, Funktion und Kontaktdaten folgen dabei einer wiederkehrenden Struktur, während jedes Teammitglied eigene Inhalte und Verknüpfungen erhält.
Für diese Aufgabe haben wir den Team Cards Block als individuelle Gutenberg-Lösung entwickelt. Ein übergeordneter Container ordnet mehrere eigenständige Team Cards als Gruppe an. Die Redaktion pflegt jedes Profil direkt im Block-Editor und sieht bereits während der Bearbeitung, wie die Inhalte innerhalb der Karte zusammenspielen.
Container und Einzelkarten bilden die Teamstruktur ab
Der Team Cards Block übernimmt die Gruppierung und Rasterdarstellung. Innerhalb des Containers sind gezielt Team Cards vorgesehen. Diese Hierarchie bildet die inhaltliche Beziehung im Editor ab: Der Container steht für das Team, die verschachtelten Karten für die einzelnen Personen.
Neue Profile lassen sich innerhalb dieser Struktur ergänzen und in der Listenansicht eindeutig zuordnen. Der Container unterstützt zudem die WordPress-Ausrichtungen «Weite Breite» und «Volle Breite» sowie Einstellungen für Aussen- und Innenabstände.
Profildaten direkt in der Karte bearbeiten
Jede Team Card enthält ein Bild mit hinterlegtem Alternativtext, Name, Funktion, E-Mail-Adresse und Telefonnummer. Die Bildauswahl erfolgt über die Mediathek. Name, Funktion und Kontaktdaten werden unmittelbar in der Karte eingetragen.
Eine optionale Verknüpfung ergänzt das Profil um ein weiterführendes Ziel, beispielsweise eine ausführliche Personenseite. Über das Link-Symbol lässt sich das Linkziel direkt im Block setzen und bearbeiten. Das Symbol bündelt beide Arbeitsschritte an der jeweiligen Team Card. Eine vergleichbare Inhaltsstruktur für Gruppen und Vereine zeigt der Beitrag Kontaktinformationen mit Gutenberg strukturiert pflegen.
E-Mail und Telefon direkt aus der Teamkarte nutzen
Aus der gepflegten E-Mail-Adresse entsteht im Frontend eine kompakte Schaltfläche mit Papierflieger-Icon, aus der Telefonnummer eine Schaltfläche mit Telefon-Icon. Die optionale Profilverknüpfung erscheint ausschliesslich als Pfeil. Farben und Abstände lassen sich über CSS Custom Properties auf das jeweilige Theme abstimmen.
Das Kartenraster verbindet die Profile zu einer übersichtlichen Teamdarstellung. Bilder schaffen eine persönliche Zuordnung, Funktionen vermitteln die jeweilige Rolle und die direkten Kontaktmöglichkeiten führen zur passenden Ansprechperson.
Die technische Struktur folgt der redaktionellen Aufgabe
Technisch verwendet der Container verschachtelte Blöcke und lässt Team Cards als innere Blöcke zu. Jede Einzelkarte speichert ihre Profildaten und das optionale Linkziel direkt im Beitrag. Im Frontend erzeugt sie daraus die Verknüpfungen für E-Mail, Telefon und Profilseite und kennzeichnet sie mit Papierflieger, Telefon und Pfeil.
Die Lösung verbindet individuelle WordPress-Entwicklung mit einer gemeinsamen Inhaltsstruktur für Redaktion und Ausgabe: ein Team als Gruppe und darin eigenständig gepflegte Personenprofile.
Ergebnis
Teamprofile gemeinsam anordnen und einzeln pflegen
Der Team Cards Block verbindet eine gemeinsame Rasterdarstellung mit eigenständig gepflegten Profilen. Die verschachtelte Blockstruktur führt Bild, Funktion, Kontaktdaten und optionale Profilziele in einem redaktionellen Modell zusammen.
Teamstruktur im Raster
Der Container gruppiert eigenständige Team Cards und bildet die Beziehung zwischen Team und Personenprofilen ab.
Profildaten direkt bearbeiten
Jede Karte verwaltet Bild, Alternativtext, Name, Funktion und Kontaktdaten direkt im Block-Editor.
Kontaktwege verknüpfen
E-Mail und Telefon erscheinen als direkte Kontaktlinks. Ein optionales Linkziel führt über den Pfeil zum weiterführenden Profil.