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.