Wie man in WordPress Text über Bilder legt

Wie man in WordPress Text über Bilder legt

Mit dem in WordPress integrierten Block-Element namens “Cover” baust Du ein stylisches Element aus Text und Bild. Kein CSS nötig, kein fancy Pagebuilder oder sonstiger Quatsch.

Die Cover-Funktion in WordPress

Anleitung

  1. Bild hochladen oder Farbe wählen
  2. Text schreiben
  3. Schriftgröße, Overlay (ggf. mit Verlauf) etc. festlegen
  4. Im Bild-Teil des Blocks selbst die Mindesthöhe des Elements festlegen
  5. Fertig

Beispiel für ein Cover-Element

Beispiel für ein Cover, das INNEN 2 Reihen hat. Das ist die obere Reihe, linksbündig.

Das ist die untere Reihe, rechtsbündig.

Cover-Element mit parallaxem Scrollen

Hurra, es scrollt parallax
(und mit einem Farb-Overlay kann man Bilder billig ins Corporate Design bringen)
(Verlinkungen gehen auch)

(Inline-Bilder und Inline-Code: Ja, geht. Ist für z.B. Buttons interessant)

Und das kommt alles nicht aus dem WordPress-Theme, sondern ist in WordPress schon eingebaut.

Tipps zur Cover-Funktion:

  • Der Wert “Mindesthöhe in Pixeln” verhindert, dass das Bild zu viel Platz braucht. 150 Pixel sind als Test nicht schlecht.
  • Solche Bilder kann man auch nebeneinander setzen, indem man zuerst einen Block mit z.B. 2 Spalten anlegt.
  • Falle 1: Wenn man ein Grid aus z.B. 2 Spalten und 2 Reihen baut (= 4 Text-Bild-Elemente) kann es passieren, dass zwischen den Reihen kein Abstand bleibt. Sieht schlecht aus, kann man nicht fixen. Also lieber jede Reihe einzeln bauen, danach neue Block-“Reihe” anfangen.
  • Falle 2: Wenn man das mit 3 Bild-Text-Elementen in einer einer Reihe macht, bricht bei Tablet-Viewports der dritte Block um. Sieht nicht prickelnd aus. Deshalb: Besser mit 2 Elementen je Reihe arbeiten.
  • Mit den Farb-Overlays kann man viel hässlichen Unfug anstellen. Die Voreinstelllung (grau) ist ganz OK.


Ich bin freier Texter in Köln, arbeite ab und auch in Düsseldorf als Texter und beschäftige mich unter anderem mit (Online-)Marketing.