Support » Allgemeine Fragen » Coverbild ohne Abdunklung (mit Link)

  • Gelöst thomas6683

    (@thomas6683)


    Hallo zusammen,

    ich bräuchte mal Hilfe bzgl. einer Standardfunktion von WordPress. Vor ca. 9 Monaten habe ich bei einer nicht mehr verfügbaren Test-Installation ein Bild mit einer Beschriftung und Link eingefügt. Das sah super aus.

    Nun möchte ich dies gerne wieder so optisch darstellen, bekomme es aber nicht hin.
    – Abdunklung deaktivieren
    – Grauer Kasten nur so breit wie der Text
    – Ggf. Link evtl. nicht unterstrichen

    Hier ein Bild davon:
    https://ibb.co/4K9L2tD

    Oben die schöne Version (von damals),
    unten die jetzige Installation.

    Hat WordPress die Funktion gestrichen, oder finde ich sie einfach nicht?

    Vielen Dank vorab!

    Gruß
    Thomas

    • Dieses Thema wurde geändert vor 1 Monat von thomas6683.
Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo,
    das klappt an sich ganz gut mit einem Cover-Block:

    .wp-block-cover__inner-container h2 {
        background: grey;
        opacity: 1;
        color: white;
    }

    Den Code gibst du dann über Design > Customizer > Zusätzliches CSS ein.
    Über die Eigenschaft opacity kannst du eine Transparenz des Containers für die h2 erreichen, z. B.
    opacity: 0.5;

    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    Gibt’s auch einen Link zur Website, damit wir uns das anschauen können? 🙂

    Warum ein Link zu deiner Website wichtig ist

    Ansonsten … es gibt weiterhin den so genannten Cover-Block, bei dem du über ein Bild beliebig andere Blöcke legen kannst. Der Cover-Block hat diverse Einstellungsmöglichkeiten, die du unter anderem der Dokumentation (engl.) oder dem Beitrag der Block: Cover entnehmen kannst.

    In diesem Beispiel habe ich erst einen Cover-Block eingefügt, den Überschriften-Block entfernt und einen Spalten-Block mit einer Aufteilung [ 1/3 | 2/3 ] eingefügt [1]. Dann habe ich in der linken Spalte einen Absatz-Block eingefügt, mit Text gefüllt und mit einer Hintergrundfarbe versehen. [2] In den Block-Einstellungen des Cover-Block habe ich unter Transparenz [3] den Schieberegler auf 0 gezogen [4]. Das Ergebnis ähnelt zumindest deinem Gestaltungswunsch und lässt sich vermutlich mit einer Block-Sammlung wie Gutenberg Ultimate AddOns noch verfeinern.

    Screenshot Einstellungen
    (zum Vergrößern anklicken)

    Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo Bego,
    stimmt – das kann man alles auch ohne zusätzliche CSS-Regeln lösen, wenn die Hintergrundfarbe des Containers mit der Überschrift („Zum Salat“) keine Transparenz haben soll.
    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    Dann aber mit sowas wie

    .wp-block-cover__inner-container h2 {
        background: rgba(67, 228, 83, 0.2);
        color: #000;
    }

    oder dem Absatz eine eigene CSS-Klasse zuweisen.

    🤓

    Thread-Ersteller thomas6683

    (@thomas6683)

    Hallo Bego Mario Garde 🙂

    Dein Tipp war goldrichtig.
    Habe das damals zwar irgendwie anders gelöst, aber Dein Vorschlag geht in die richtige Richtung.
    Vielen Dank an Dich und auch die Anderen.

    Closed.

    Gruß
    Thomas

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)