Card-Design mit Gutenberg

Anlass zu diesem Beitrag war eine Frage in einer Facebook-Gruppe. Die Frage war: Kann man ein Card-Design aus Bild und Text mit Gutenberg-Bordmitteln umsetzen? Ja, das geht sehr gut.

Um die Cards mit Gutenberg zu bauen, lege ich zunächst zwei Spalten mit dem Spalten-Block an. Ich weise jeder Spalte im Spalten-Block die CSS-Klasse .cards-container zu. In die Spalten setze ich jeweils zuerst einen Bild-Block und darunter eine Überschrift und einen Text-Block (kann auch eine Liste sein). Diese drei Elemente – Bild, Überschrift und Text – fasse ich zu einer Gruppe zusammen. Die Gruppe bekommt dann die CSS-Klasse .card-item zugewiesen.

Die Spalten samt Cards kann man als Block-Pattern abspeichern. Den Artikel dazu gibt es hier.

Im Customizer trage ich im Panel „zusätzliches CSS“ die folgenden Styles ein:

/* Die Spalte ist der cards-container, 
alle items werden automatisch gleich hoch */
.cards-container{
 display:flex;
}

/* Look für die Cards */
.cards-container .card-item{
  border:1px solid #ccc;
  box-shadow: 3px 3px 3px #ccc;
  border-radius:4px;
}

/* Text unter dem Bild */
.cards-container .card-item ul,
.cards-container .card-item p,
.cards-container .card-item h3{
 padding-left:20px;
 padding-right:20px;
}

Sommer-Drink-Rezepte im Card-Design

Hugo

  • Ein großes Glas zu 1/3 mit Eiswürfeln füllen
  • Ein paar Blätter frische Minze
  • 30ml (3cl) Holunderblütensirup
  • 2 Viertel einer Bio-Limette (etwas Saft ausdrücken)
  • 150 ml Prosecco oder Sekt
  • Ein Schuss Mineralwasser

Ich zerdrücke die Blätter der Minze immer ein bisschen, damit kommt das Aroma besser zur Geltung.

Apérol Sprizz

  • Ein bauchiges Weinglas zu 1/3 mit Eiswürfeln füllen
  • 2 Scheiben einer 1 Bio-Orange
  • 1 Teil Aperol
  • 2 Teile Sekt
  • Mit Mineralwasser auffüllen

Aperol ist ein Destillat aus Rhabarber, Chinarinde, Gelbem Enzian, Bitterorange und aromatischen Kräutern mit orange-roter Färbung und bittersüßem Aroma. Der Alkoholgehalt beträgt 11%.


Responsiveness

Damit die Cards auch auf kleinen Bildschirmen funktionieren, müssen die Spalten irgendwann untereinander angeordnet werden. Das macht der Spalten-Block zwar automatisch, aber hier in meinem Theme kommt die Umstellung zu spät. Ich muss also dafür sorgen, dass das Umsortieren früher – also bei einer größeren Bildschirmbreite – passiert.

Dazu verändere ich das CSS des Spalten-Blocks. Standard-Einstellung ist display:flex. Ich ändere das in display:block und „deaktiviere“ damit die Flexbox-Darstellung bis zu einer Bildschirmbreite von 940px. Ab 940px aufwärts greift das Flexbox-Layout wieder und die Spalten landen wieder nebeneinander.

940px ist die Breite, bei der hier in meinem Theme der Text anfängt in der horizontalen Card-Variante aus der Box zu rutschen In der vertikalen Variante werden die Cards zu lang. Welche Breite für dein Layout passt, musst du ausprobieren.

@media (min-width: 600px) and (max-width:940px){
 .wp-block-columns.test-cards {
  display:block;
 }
}

Anmerkungen

Der oben beschriebene Weg funktioniert am besten, wenn dein Theme möglichst wenig in die Gestaltung des Spalten-Blocks und der anderen Blöcke eingreift. Viele Themes fügen hier z.B. margins, paddings und andere CSS-Dinge hinzu. Das hat zur Folge, dass es sich nicht so schön ausgeht wie oben gezeigt.

Auch die Breite des Contentbereichs ist ein wichtiger Faktor. Ist die zu klein – wie z.B. die 580px bei Twentytwenty – dann klappt es mit den zwei Spalten nebeneinander nicht.

Du musst also ausprobieren und über die Browserkonsole prüfen, ob dein Theme irgendwelche CSS-Angaben hinzufügt. Die musst du dann gegebenenfalls überschreiben.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

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

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.