Gutenberg-Block „Medien und Text“ im Card-Design

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

Zunächst lege ich zwei Spalten an. In jede Spalte kommt jeweils ein Block „Medien und Text“. Dem Bock „Medien und Text“ weise ich im Editor über die Farbeinstellungen eine Hintergrundfarbe zu.
Fertig ist der Card-Look.

Hier steht ein schöner Text neben dem Bild. Der Text passt gut in der Länge.

Hier steht ein schöner Text neben dem Bild. Der Text passt gut in der Länge.

Mit ein paar zusätzlichen Effekten (Rand, Schatten, runde Ecken) sieht es noch ein bisschen netter aus.

.wp-block-columns.test-cards .wp-block-column.fancy .wp-block-media-text{
 border:1px solid #ccc;
 box-shadow: 3px 3px 3px #ccc;
 border-radius:4px;
}

Hier steht ein schöner Text neben dem Bild. Der Text passt gut in der Länge.

Hier steht ein schöner Text neben dem Bild. Der Text passt gut in der Länge.

Aber Achtung: Wird der Text zu lang, zerlegt es das Layout. Die Länge des Textes muss auf das Bild abgestimmt sein. Wenn du ein hochformatiges Bild wählst, hast du mehr Platz für den Text.

Hier steht ein schöner Text neben dem Bild. Der Text in diesem Block ist ein bisschen zu lang geraten und passt nicht mehr in die Box.

Hier steht ein schöner Text neben dem Bild. Der Text passt gut in der Länge.

Responsiveness

Auch funktioniert häufig die Responsiveness nicht mehr gut. Dem Text wird es schnell zu eng (siehe Bild oben).

Damit das nicht passiert, ordne ich die Spalten untereinander an, sobald der Platz zu knapp wird. Das macht der Spalten-Block zwar automatisch, aber für unser zweispaltiges Card-Design 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, aus der Box zu rutschen. 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;
 }
}

Update

Mit dem Block „Medien und Text“ kann man eine schöne Card-Optik erzeugen. Der oben beschriebene Weg funktioniert am besten, wenn dein Theme möglichst wenig in die Gestaltung des Spalten-Blocks und des Blocks „Medien und Text“ 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 zusätzlichen 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.