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

Beitragsdatum:

6. April 2023

Letztes Update am:

10. Juli 2023

Autor:

hgg

Kategorien: Allgemein, Anleitung, Block-Editor, CSS, Tipps, WordPress

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)

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

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

Fertig gestaltete Block Patterns zum Einfügen auf der eigenen Website:
https://de.wordpress.org/patterns/
Three column photo views with text and duotone background
https://wordpress.org/patterns/pattern/three-column-photo-views-with-text-and-duotone-background/
Coloring Your Images With Duotone Filters
https://wordpress.org/news/2021/05/coloring-your-images-with-duotone-filters/
Use Duotone Filters to Change Color Effects
https://learn.wordpress.org/lesson-plan/use-duotone-filters-to-change-color-effects/
Global Settings & Styles (theme.json)
https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
What’s new in Gutenberg 15.5? (05 April)
https://make.wordpress.org/core/2023/04/05/whats-new-in-gutenberg-15-5-05-april/
WordPress 6.2 Field Guide
https://make.wordpress.org/core/2023/03/09/wordpress-6-2-field-guide/

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

02722-6577725

info@haurand.com

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.

Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden.

Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.

6 Antworten zu „Duotone beim Cover-Block oder Image-Block bei WordPress-Instanzen“

Jonas Zander

10. Mai 2023

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
1. hgg
  
  10. Mai 2023
  
  Hallo Jonas,
  danke für diesen Hinweis.
  In der Tat wäre das auch eine Alternative.
  Viele Grüße
  Hans-Gerd
  
  Antworten
Wolfgang

22. September 2023

Hallo, danke für die tollen Anleitunge, die mir schon viel geholfen haben.
Ich habe den duotone effekt in einem Abfrageloop mittels coverblocks eingebaut. Nun würde ich gerne bei Überfahren der Maus mittels hover diesen filter deaktivieren können (normale Bilddarstellung ohne doutone). Wie kann ich das realisieren? Ich habe den Coverblockbildern schon eine eigene klasse gegeben kann die aber irgendwie nicht ansprechen bzw. weiß nicht was der korrekte Weg ist. Kann mir da wer helfen?
Ganz herzlichen Dank im Voraus, W.
Hier ein Link zur betreffenden Portfoliostartseite: https://test2.solibre.de/

Antworten
1. hgg
  
  23. September 2023
  
  Hallo,
  offensichtlich scheint es nicht möglich zu sein, Hover bei einem Cover zu berücksichtigen.
  Wie man das ohne Plugin realisieren kann, wird in dem folgenden Beitrag beschrieben.
  Ich habe hier aber ein (kostenpflichtiges) Plugin gefunden, mit dem man das einfach realisieren kann.
  Im WordPress Repository habe ich das Plugin Aploblocks – Extra design features for the block editor gefunden, mit dem man so etwas vermutlich auch realisieren kann.
  Vielleicht hilft Dir das schon weiter.
  Ich freue mich über eine Rückmeldung.
  
  Antworten
  1. Wolfgang
    
    23. September 2023
    
    Danke für diese Links, die mir schon mal weiterhelfen. Ich möchte ehrlich gesagt gar nicht unbedingt eine Pluginlösung, denn es müsste ja irgendwie mit einfachem CSS möglich sein.
    Das von Dir erstgenannte Link https://www.wp-starter.com/change-image-on-hover-in-wordpress-gutenberg-without-a-plugin/
    geht in die richtige Richtung und damit kan ich den Efekt jedenfalls umsetzen. Was mich ärgert ist die Redundanz des über dem Coverblockbild nochmal gelegten 2. Bildes (was ja das selbe Bild nur mit einem duotoneeffekt wäre, der ebenfalls durch css entsteht).
    Es müsste doch eigentlich auch möglich sein, einfach die einzelnen Abfrageloo-Coverbilder mittels hoover von ihrem duotone-filter zu befreien. Ich weiß nur nicht, wie ich da welches Element richtig per css ansprechen müsste.
    Nochmal Danke für die Hilfe und eine schönes WE,
    W.
    
    Antworten
    1. hgg
      
      23. September 2023
      
      Das scheint im Gegensatz zum Bild-Block nicht so einfach möglich zu sein. Nachdem ich per CSS keine Lösung gefunden habe, habe ich hier ein Ticket gefunden, das wohl in 2020 erstellt wurde und noch nicht gelöst worden ist.
      
      Antworten