So überlagern Sie ein Bild in WordPress

Wenn Sie begeistert davon sind, Ihre Website zu etwas Besonderem zu machen, werden Sie sich immer den Arsch abarbeiten, um sie zu verschönern. Es gibt Millionen von Möglichkeiten, Ihre Website zu einer Muse zu machen, und eine davon wird in unserem heutigen Beitrag erwähnt: Ein Bild überlagern .

Fragst du dich immer noch, was es ist? Lass es langsam angehen und lass dich von uns rausholen!

Was ist eine Überlagerung?

Wie Sie sehen, habe ich als Überschrift ein Bild mit Text und Overlay verwendet; das machte einen großen Unterschied zum Schreiben einer einfachen Textüberschrift. Es sieht viel stylischer und attraktiver aus als das normale, oder?

Noch wichtiger ist, dass das Overlay auf dem Bild hilft, den Text hervorzuheben, während das Hintergrundbild sichtbar bleibt. Sie können ganz einfach ein Bild mit Text und Overlay zu solchen Beiträgen/Seiten hinzufügen und für verschiedene Zwecke verwenden. In diesem Beitrag zeigen wir Ihnen, wie es in einfachen Schritten geht.

Schon aufgeregt? Lass uns anfangen!

So überlagern Sie ein Bild in WordPress

Es gibt zwei Methoden, die Sie versuchen können, ein Bild in WordPress zu überlagern: mit dem Cover-Block von Gutenberg und mit CSS. Während die Verwendung von Gutenberg Ihnen hilft, einen Beitrag/eine Seite zu erstellen, die selbst aus einem leeren Blatt ein Bild mit Überlagerung enthält, hilft Ihnen die Verwendung von CSS dabei, Bilder auf einem vorgefertigten Beitrag/Seite schnell anzupassen.

Beide Methoden sind in gewisser Weise einfach zu verwenden, und wir zeigen Ihnen, wie Sie sie nacheinander verwenden.

Methode 1: Verwenden von Gutenbergs Cover-Block

Gehen Sie zum Seiteneditor von Gutenberg.

Schritt 1: Fügen Sie ein Bild mit dem Cover-Block ein.

Klicken Sie auf Block hinzufügen und wählen Sie als Blocktyp Cover .

Wählen Sie als Nächstes ein Hintergrundbild aus, das auf diesem Coverblock angezeigt werden soll. Sie können ein Bild hochladen oder ein Bild aus Ihrer Bibliothek auswählen.

Sie können bei Bedarf auch ein zuvor hinzugefügtes Bild in ein Titelbild ändern. Klicken Sie auf das Bild, wählen Sie Blockstil oder -typ ändern und wählen Sie Cover :

In meinem Fall werde ich diese Mütze als Hintergrund wählen und auch einen zufälligen Text darauf schreiben.

Außerdem kann ich die Breite meines Bildes in den Einstellungen unten einstellen. Ich werde es einfach mittig ausrichten.

Jetzt ist mein Coverblock mit Hintergrundbild und Text fertig. Standardmäßig hat der Cover-Block bereits eine schwarze Überlagerung, daher werden wir im nächsten Teil sehen, wie wir ihn bearbeiten können:

Schritt 2: Passen Sie das Deckblatt-Overlay an

Als nächstes fahren Sie mit den Blockeinstellungen fort, um ein Overlay zu erstellen.

Klicken Sie auf den Block > klicken Sie auf die Schaltfläche Optionen (Anzeige als Schaltfläche mit drei Punkten) > wählen Sie Weitere Einstellungen anzeigen .

Das Blockeinstellungsmenü sollte jetzt auf der rechten Seite Ihres Bildschirms bereit sein. Gehen Sie zum Abschnitt Overlay .

Es gibt Ihnen zwei Farboptionen, Solid und Gradient, um Ihr Titelbild zu überlagern:

Wir werden beide Optionen ausprobieren. Versuchen wir es zunächst mit der Volltonfarben-Überlagerung.

Einfarbige Überlagerung

Jetzt kannst du:

• Wählen Sie eine Farbe aus dem vorgeschlagenen Menü;
• Wählen Sie eine benutzerdefinierte Farbe. Sie können eine Farbe aus der Palette auswählen oder einen Farbcode einfügen. Die benutzerdefinierte Farbe wird wie folgt angezeigt.

Ich habe gerade eine süße rosa Farbe für mein Overlay ausgewählt. Außerdem kann ich auch die Deckkraft (die Transparenzstufe) des Overlays ändern:

Eine Opazität von 30 bis 60 % ist ein richtiger Wert. Wenn Sie die Deckkraft unter oder über dem empfohlenen Wert einstellen, ist die Überlagerung möglicherweise fast unsichtbar oder zu fett, um den Hintergrund zu sehen. Ich werde die Deckkraft standardmäßig bei 50% belassen.

Hier ist alles angerichtet! So können Sie Ihrem Titelbild ganz einfach ein Vollton-Overlay hinzufügen.

Kommen wir nun zur Farbverlaufsoption.

Farbverlaufsüberlagerung

Eine Verlaufsfarbe ist, wie oben erwähnt, ein Schema aus mindestens zwei ausgewählten Farben. Oder einfach gesagt, die Farbe des Overlays ändert sich entsprechend und allmählich von der ersten zur zweiten gewählten Farbe (usw.).

Mal sehen, wie ich eine Verlaufsüberlagerung erstelle, um sie besser zu verstehen.

Zuerst habe ich den Farbmodus von Solid auf Gradient geändert. Außerdem habe ich einen Farbverlauf aus dem Vorschlagsmenü ausgewählt. So sieht es aus:

Wie Sie sehen, besteht die Überlagerung aus 3 Kontrollpunkten. Jeder trägt eine Volltonfarbe, und Sie können diese Kontrollpunkte verschieben, um das Farbschema der Überlagerung anzupassen.

Die Standardfarbanordnung bei der Auswahl der Verlaufsfarbe ist ausgeglichen. Ich werde versuchen, es ein wenig anzupassen, und so ändert es sich:

Eine weitere Anpassung, die Sie vornehmen können, ist die Art des Farbschemas. Sie können zwischen Linear- und Radialtyp wählen. Beim Lineartyp können Sie auch die Richtung der Überlagerung wählen.

Um diese Farbverlaufsoption zu beherrschen, benötigen Sie ein besseres künstlerisches Gespür und lernen auch, Farben zu mischen und abzustimmen, um die beste Kombination für die Überlagerung zu erzielen.

Methode 2: CSS verwenden

Wenn Sie einem Bild mit dem klassischen Editor ein Overlay hinzufügen möchten, ist die Verwendung von CSS erforderlich. Sie müssen etwas CSS hinzufügen. Gehen Sie zu Darstellung > Anpassen > Zusätzliches CSS .

Für Verlaufsüberlagerung

Fügen Sie diesen Code für die Farbverlaufsüberlagerung hinzu:

 .hintergrund-gradient {
    Position: relativ;
}
.background-gradient::before {
    Inhalt: '';
    Hintergrund: linear-gradient(135deg,#0693e3,#9b51e0);
    Position: absolut;
    oben: 0;
    links: 0;
    unten: 0;
    rechts: 0;
    z-Index: 1;
    Deckkraft: .5;
}

Für feste Überlagerung:

Fügen Sie diesen Code für eine solide Überlagerung hinzu:

 .background-opacity {
    Position: relativ;
}
.background-opacity:before {
    Inhalt: '';
    Position: absolut;
    oben: 0;
    links: 0;
    unten: 0;
    rechts: 0;
    z-Index: 1;
    Deckkraft: .5;
    Hintergrundfarbe: #000;
}

Hinweis: Dieser Code hilft Ihnen, nur das Overlay hinzuzufügen, nicht den Text auf dem Bild.

Sie können beide hinzufügen, wenn Sie viele Bilder mit verschiedenen Überlagerungsarten hinzufügen möchten. Um das Overlay als Voll- oder Verlaufsfarbe zu definieren, gehen Sie zu dem Texteditor und fügen Sie eine Klasse auf das Bild , das Sie Overlay wollen:

• Solid: <div class="background-opacity"> … </div>
• Farbverlauf: <div class="background-gradient is-style-default"> … </div>

Beispielsweise:

So schaffe ich es!

Urteil

Das Hinzufügen von Overlays zu Bildern hilft Ihnen wirklich, Ihre Beiträge/Seiten zu dekorieren und einen besseren Eindruck bei den Besuchern zu hinterlassen. Es lohnt sich, sich mit der Erstellung eines perfekten Overlays zu beschäftigen, daher empfehle ich dringend, dass Sie sich sofort an die Arbeit machen. Sie können Ihre Website auch mit Schiebereglern, Popup-Bannern, Videohintergrund usw. attraktiver gestalten. Ich hoffe, dass meine Anweisungen für Sie klar genug sind, und können Sie gerne unten Fragen und Kommentare hinterlassen. Wiedersehen!