Duotone beim Cover-Block oder Image-Block bei WordPress-Instanzen

Duotone beim Cover-Block oder Image-Block bei WordPress-Instanzen verwenden

Der Duotone-Effekt ist zumindest in einigen Kreisen der WordPress-Community eine belächelte Eigenschaft. Allerdings kann man neben den sicher bekannten Effekten auch Dinge produzieren, die ansonsten aufwendiger und/oder mit ein paar CSS-Regeln zu bewerkstelligen sind. Das funktioniert zwar, aber kann teilweise nur über „Umwege“, d. h. über den Code-Editor erreicht werden. Hier zwei Beispiele u. a. beim Cover-Block bzw. Image-Block dazu.

Duotone beim Cover-Block oder Image-Block: im unteren Bereich dunkel mit Transparenz

Im folgenden Beispiel zeige ich, wie man bei einem Cover-Block im unteren Bereich (50%) eine Transparenz einbauen kann.

Achtung

Vorsicht: Ich empfehle vor der Bearbeitung (insbesondere bei der Bearbeitung im Code-Editor) auf jeden Fall eine Sicherung des entsprechenden Beitrags.

Duotone beim Cover-Block bzw. Image-Block - Bearbeitung mit dem Code-Editor notwendig
Duotone beim Cover-Block bzw. Image-Block – Bearbeitung mit dem Code-Editor notwendig

Den oben gezeigten Block Pattern könnt ihr übrigens auch im WordPress Patterns Verzeichnis runterladen und verwenden: Three column photo views with text and duotone background.

Cover mit einem dreifarbigen Duotone-Hintergrund

Ein Cover z. B. mit einem dreifarbigen Hintergrund zu versehen, ist mir anhand der Bordmittel nicht gelungen. Wesentlich einfacher ist es da, wenn man sich eine CSS-Regel überlegt und diese dann im Code-Editor „einbaut“.

Wir haben hier drei Farben: Himmelblau, Hellblau und weiß. Die Farbbereiche sollen klar voneinander getrennt sein und wie folgt aussehen:

Cover mit einem dreifarbigen Duotone-Hintergrund
Cover mit einem dreifarbigen Hintergrund

Info

Bei einem Block Theme wie z. B. Twenty Twenty-Three könnte man in diesen Block im oberen Bereich noch einen Navigations-Block z. B. bei der Startseite ansiedeln.

Schauen wir uns das mal etwas genauer an: Der himmelblaue Bereich soll 0% bis 40%, der hellblaue Bereich 40% bis 42% und der weiße Bereich 42% bis 100% umfassen. Besser sieht man das in dem folgenden Screenshot:

Die Farbbereiche im Hintergrund (background)
Die Farbbereiche im Hintergrund (background)

Hier die entsprechende CSS-Regel, die wir dafür verwenden können:

background: linear-gradient(180deg, rgb(0 111 200) 0%, rgb(0 111 200) 40%, rgb(6 147 227) 40%, rgb(6 147 227) 42%, rgb(255 255 255) 42%, rgb(255 255 255) 100%);

In den Code-Editor gelangt man bei der Bearbeitung des Beitrags über die drei snkrechten Punkte (Kebap-Menü) oben rechts (1). Danach findet man den Code-Editor als Menüpunkt (2).

Code-Editor in WordPress beim Block-Editor (Gutenberg)
Der Code-Editor

Leider wird der Farbverlauf bei den Eigenschaften des Blocks bei Hintergrund nicht angezeigt, so dass die Angabe der Bereiche (also die o. g. Prozentangaben) und auch die Farben nur im Code-Editor geändert werden können. Im nachfolgenden Screenshot sieht man, an welcher Stelle die Parameter für die linear-gradient()-Funktion beim Code-Editor eingegeben werden müssen.

Der Code-Editor von WordPress mit der linear-gradient()-Funktion
Der Code-Editor von WordPress mit der linear-gradient()-Funktion

Fazit

Über den Code-Editor kann die Duotone-Eigenschaft durchaus „aufgepimpt“ werden. Das habe ich hier am Beispiel eines Block Patterns mit einem Cover-Block gezeigt. Allerdings funktioniert das nicht über die Eigenschaften, sondern das muss man schon etwas umständlich über den Code-Editor bearbeiten. Zu wünschen wäre, wenn die an sich doch hier und da belächelte Duotone-Eigenschaft etwas ausgebaut würde. Ich denke, dass dieser Beitrag deutlich gemacht hat, dass diese Eigenschaft durchaus Potential bietet. Auf jeden Fall kann man auf diese Weise sehr schöne grafische Dinge erstellen.

Links und Quellen

Weitere Beiträge zum Thema


Mehr erfahren auf dieser Webseite

Cover mit einem dreifarbigen Hintergrund


Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

  • Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

Beitrags-Kategorien

Allgemein (85) Anleitung (48) Block-Editor (38) Full Site Editing (22) Keine Anzeige (1) Plugins (27) Theme (14) Tipps (57) WordPress (89)

2 Gedanken zu „Duotone beim Cover-Block oder Image-Block bei WordPress-Instanzen“

  1. Hallo Hans-Gerd,
    Danke sehr für Deinen interessanten Beitrag.
    Eine zweite Möglichkeit, die ich gerne nutze, ist die theme.json im Child-Theme.

    So in etwa:
    "color": {
    "gradients": [
    {
    "slug": "primary-secondary",
    "name": "Primary Secondary",
    "gradient": "linear-gradient(90deg, var(--wp--preset--color--primary) 30%, var(--wp--preset--color--secondary) 30%)",
    }

    Diese Gradienten erscheinen dann im Auswahlmenü der Styles.

    Gruß
    Jonas

    Antworten

Schreibe einen Kommentar