Text über ein Bild in WordPress einfügen (3 einfache Wege) 

Möchten Sie einen Sale hervorheben, eine Handlungsaufforderung hinzufügen oder Ihre Fotos ansprechender gestalten? Das Hinzufügen von Text über einem Bild in WordPress ist der schnellste Weg, dies zu tun, und Sie können alles direkt auf Ihrer Website erledigen, ohne Photoshop oder ein separates Online-Tool. Sie können ein einfaches Bild mit wenigen Klicks in ein Banner, eine Hero-Header oder sogar eine Mini-Anzeige verwandeln.

In diesem Leitfaden führe ich Sie durch drei einfache Möglichkeiten, Text über Bilder in WordPress zu legen, vom integrierten Block-Editor bis hin zu einem Drag-and-Drop-Builder, der Ihnen mehr Designkontrolle gibt.

Warum Text über ein Bild in WordPress einfügen?

Das Hinzufügen von Text über einem Bild macht es nützlicher. Sie können Produktmerkmale hervorheben, Handlungsaufforderungen auf Bannern hinzufügen oder Beschriftungen direkt auf Fotos platzieren, damit Besucher sofort verstehen, was sie sehen.

Sie benötigen keine Photoshop- oder Grafikdesign-Kenntnisse für all das. WordPress bietet Ihnen mehrere integrierte Möglichkeiten, Textüberlagerungen direkt auf Ihrer Website hinzuzufügen, und dafür sind die folgenden drei Methoden gedacht.

Text über ein Bild in WordPress einfügen

Unten finden Sie 3 verschiedene Möglichkeiten, Text über ein Bild in WordPress einzufügen. Wir beginnen mit einem WordPress-Plugin und zeigen Ihnen dann, wie Sie Textüberlagerungen mit dem WordPress-Block-Editor erstellen.

Methode 1. Text über ein Bild mit dem SeedProd Gallery Block einfügen

Das Plugin, mit dem wir beginnen, ist SeedProd, der beste Website-Builder für WordPress. SeedProd ermöglicht es Ihnen, Text-über-Bild-Layouts visuell zu erstellen, indem Sie Blöcke per Drag & Drop platzieren, ohne Code anzufassen.

Sie können mit einem vollständigen Website-Kit oder einer Landingpage-Vorlage beginnen und dann Ihr Design mit WordPress-Blöcken anpassen. Der Galerie-Block ermöglicht es Ihnen beispielsweise, eine farbige Überlagerung zu aktivieren und Ihre Fototitel, Beschreibungen und Bildunterschriften beim Überfahren mit der Maus anzuzeigen.

Folgen Sie der nachstehenden Anleitung, um zu erfahren, wie Sie mit SeedProd Text über einem Bild hinzufügen.

Schritt 1. SeedProd installieren und aktivieren

Klicken Sie zuerst auf die Schaltfläche unten, um Ihr SeedProd-Konto zu erstellen und die Plugin-Datei auf Ihren Computer herunterzuladen.

Starten Sie noch heute mit SeedProd

Klicken Sie dann in Ihrem Kontodashboard auf die Registerkarte Downloads und kopieren Sie Ihren SeedProd-Lizenzschlüssel.

Laden Sie als Nächstes die .zip-Datei des Plugins auf Ihre WordPress-Website hoch. Wenn Sie Hilfe bei diesem Schritt benötigen, folgen Sie dieser Anleitung zum Installieren und Aktivieren eines WordPress-Plugins.

Nachdem Sie SeedProd aktiviert haben, gehen Sie in Ihrem WordPress-Adminbereich zu SeedProd » Einstellungen und fügen Sie den zuvor kopierten Lizenzschlüssel ein.

Klicken Sie nun auf die Schaltfläche Schlüssel überprüfen und fahren Sie mit dem nächsten Schritt fort.

Schritt 2. Erstellen Sie ein neues WordPress-Layout

Für diesen Schritt müssen Sie entscheiden, welche Art von WordPress-Layout Sie mit SeedProd erstellen möchten. Sie können ein WordPress-Theme von Grund auf mit einem der vollständigen Website-Kits erstellen oder eine Landingpage-Vorlage auswählen, um eine eigenständige Landingpage zu erstellen.

Die Theme Builder-Option ist ideal, wenn Sie Ihr bestehendes WordPress-Theme vollständig ersetzen möchten. Wenn Sie nur eine Seite erstellen oder anpassen und Ihr aktuelles Theme beibehalten möchten, ist der Landing Page Builder die bessere Option.

Wir haben Anleitungen für beide Wege. Folgen Sie dieser Anleitung, um ein WordPress-Theme zu erstellen, oder diesen Schritten, um eine Landingpage in WordPress mit SeedProd zu erstellen.

Beide Anleitungen führen Sie durch die Auswahl einer vorgefertigten Vorlage und die Einrichtung Ihres grundlegenden Layouts. Für diese Anleitung wählen wir die Theme Builder-Option.

Sobald Sie eine Vorlage für Ihr Design ausgewählt haben, können Sie diese bearbeiten und Ihre Anpassungen vornehmen. In diesem Fall verwenden wir das Portfolio-Theme für Fotografie und planen, die Portfolio-Seite anzupassen.

Um die Portfolio-Seite zu bearbeiten, gehen Sie zu Seiten » Alle Seiten, suchen Sie die gewünschte Seite und klicken Sie auf den Link Mit SeedProd bearbeiten.

Schritt 3. Einbetten und Anpassen des Galerie-Blocks

Wenn Sie Ihr Design öffnen, sehen Sie ein Layout wie im folgenden Beispiel.

Auf der rechten Seite befindet sich eine Live-Vorschau Ihrer Seite, die Sie in Echtzeit anklicken und bearbeiten können. Auf der linken Seite befinden sich WordPress-Blöcke und Abschnitte, die Sie per Drag & Drop in Ihr Design ziehen können.

Sie können Elemente auch entfernen, indem Sie mit der Maus darüber fahren und auf das Papierkorb-Symbol klicken. Wir werden dies für den Galerie-Block tun, der mit unserer Vorlage geliefert wurde, da wir ihn durch die erweiterte Galerie ersetzen.

Der erweiterte Galerie-Block von SeedProd ermöglicht es Ihnen, Überlagerungsfarbe, Schriftart, Ausrichtung und welche Bildunterschrift beim Überfahren mit der Maus angezeigt wird, festzulegen. Wir werden ihn verwenden, um Text über den Bildern im Portfolio hinzuzufügen. Suchen Sie also den Block Erweiterte Galerie und ziehen Sie ihn auf Ihre Seite.

Die Blockeinstellungen werden in der linken Seitenleiste geöffnet. Wählen Sie in diesem Bereich zuerst Einzeln oder Mehrere aus dem Dropdown-Menü „Typ“.

Die Option „Mehrere“ ermöglicht es Ihnen, mehr als eine Galerie auf Ihrer Seite mit einem Filter hinzuzufügen, auf den Sie klicken können, um jede Galerie anzuzeigen. Die Option „Einzeln“ zeigt nur eine Galerie ohne Filter an.

Nachdem Sie den Galerie-Typ ausgewählt haben, können Sie mit dem Hinzufügen Ihrer Fotos beginnen. Klicken Sie auf die Schaltfläche Galeriebilder hinzufügen und wählen Sie Bilder von Ihrem Computer oder aus Ihrer WordPress-Mediathek aus.

Sie können beliebige Fotos hinzufügen, einschließlich JPEG/JPG, PNG, GIF und anderer Dateitypen.

Nachdem Sie Ihre Fotos hochgeladen haben, können Sie das Menü Einstellungen öffnen und die Anzahl der Spalten, den Abstand, das Seitenverhältnis, die Bildgröße und den Link auswählen.

Unten können Sie auswählen, welcher Text angezeigt werden soll, wenn Sie mit der Maus über jedes Foto fahren. Für beide Optionen können Sie Folgendes anzeigen:

• Titel
• Bildunterschrift
• Alt
• Beschreibung

So sieht es aus, wenn die Bildunterschrift beim Überfahren mit der Maus angezeigt wird.

Wenn Ihre Bildunterschriften schwer zu lesen sind, können Sie die Hintergrundfarbe des Overlays anpassen und die Textschriftart, Textausrichtung und Textstil bearbeiten.

Der Tab „Erweitert“ bietet viele weitere Anpassungsoptionen, darunter Schatten, Rahmen, Abstände und Sichtbarkeitseinstellungen für Mobilgeräte.

Mit der Geräte-Sichtbarkeit können Sie bestimmte Elemente auf verschiedenen Gerätegrößen anzeigen und ausblenden, wie z. B. Android-Tablets, iPhones, Apple iPads, Mac iOS-Laptops und Microsoft-Desktops.

Wenn Sie mit Ihrem Design zufrieden sind, denken Sie daran, Ihre Änderungen zu speichern, indem Sie in der oberen rechten Ecke auf die Schaltfläche Speichern klicken.

Schritt 4. Veröffentlichen Sie Ihre Änderungen

Nun müssen nur noch die WordPress-Anpassungen auf Ihrer Website live geschaltet werden. Wenn Sie eine Landingpage erstellen, klicken Sie im Dropdown-Menü „Speichern“ auf Veröffentlichen.

Wenn Sie den Theme Builder von SeedProd verwenden, müssen Sie zu SeedProd » Theme Builder gehen und den Schalter SeedProd Theme aktivieren umlegen.

Jetzt können Sie Ihre Seite in der Vorschau anzeigen und Ihre Bildtext-Overlays in Aktion sehen.

Methode 2. Text über ein Bild mit SeedProd Sections einfügen

Eine weitere Möglichkeit, Text über einem Bild in WordPress hinzuzufügen, sind die vorgefertigten Abschnitte von SeedProd. Wenn Sie eine Vorlage mit dem Drag-and-Drop-Editor von SeedProd bearbeiten, sehen Sie auf der linken Seite Ihres Bildschirms einen Tab „Abschnitte“.

Wenn Sie auf diesen Tab klicken, werden verschiedene Abschnitte für Ihren Header, Footer, Hero-Bereich, Call to Action, Features und FAQs angezeigt. Dies sind Sammlungen von WordPress-Blöcken in einem fertigen Layout, die Sie mit einem Klick zu Ihrer Seite hinzufügen können.

Wenn Sie ein Bild mit einem Call-to-Action-Button anzeigen möchten, können Sie einen Abschnitt aus der Call-to-Action-Bibliothek auswählen und auf das Plus-Symbol klicken, um ihn einzubetten.

Der Abschnitt erscheint am unteren Rand Ihres Designs, wo Sie ihn nach Ihren Wünschen anpassen können.

In diesem Fall haben wir das Hintergrundbild geändert, eine Overlay-Farbe hinzugefügt, um den Hintergrund abzudunkeln, und den Titeltext sowie die Call-to-Action-Buttons angepasst.

Denken Sie daran, Ihre Änderungen zu speichern und zu veröffentlichen, wenn Sie fertig sind. Dann können Sie Ihr Design live auf Ihrer Website in der Vorschau anzeigen.

Methode 3. Text über ein Bild mit dem WordPress Cover Block einfügen

Die folgende Methode zeigt Ihnen, wie Sie Text über einem Bild in WordPress ohne Plugin hinzufügen. Sie können den WordPress Cover-Block verwenden, um ein beliebiges Bild anzuzeigen und Text darüber zu schreiben.

Diese Methode bietet nicht so viele Anpassungsoptionen wie die vorherige. Es ist immer noch eine praktische Möglichkeit, Text zu Bildern hinzuzufügen, wenn Sie kein weiteres WordPress-Plugin auf Ihrer Website installieren möchten.

Um den Cover-Block zu einem Beitrag oder einer Seite hinzuzufügen, klicken Sie auf das Plus-Symbol (+) im WordPress Block-Editor. Geben Sie dann „Cover“ ein und wählen Sie den Cover-Block aus, wenn er erscheint.

Klicken Sie anschließend auf die Schaltfläche "Hochladen" oder "Mediathek", um ein Bild für Ihr Cover auszuwählen.

Nachdem Sie ein Bild ausgewählt haben, können Sie direkt auf das Foto schreiben, um eine Überschrift oder Beschreibung hinzuzufügen.

Sie können Ihr Hintergrundbild im rechten Bereich anpassen, indem Sie einen festen oder wiederholten Hintergrund aktivieren. Sie können den Bildfokus auch ändern, indem Sie den Marker in der Vorschau ziehen.

Das Bedienfeld Overlay-Einstellungen ermöglicht es Ihnen, eine Farb- oder Farbverlauf-Überlagerung für Ihr Bild auszuwählen. Im selben Bedienfeld können Sie die Deckkraft, den Abstand und die Abmessungen des Overlays festlegen.

Wenn Sie auf den Overlay-Text klicken, werden Textwerkzeuge geöffnet, mit denen Sie die Textfarbe und Hintergrundfarbe ändern und mit verschiedenen Schriftstilen experimentieren können.

Durch Ändern der Groß-/Kleinschreibung, des Buchstabenabstands und der Schriftgröße können wir diesen Label-Effekt erzielen.

Sobald Sie mit dem Aussehen Ihres Titel-Blocks zufrieden sind, können Sie Ihre Seite veröffentlichen oder aktualisieren. Wenn Sie Ihre Website besuchen, sehen Sie Ihren Text über dem Bild.

Wie bleibt Text über einem Bild lesbar?

Der Schlüssel zu lesbarem Text über einem Bild ist Kontrast, damit die Wörter niemals mit dem Foto dahinter konkurrieren. Ein unruhiges oder helles Bild ist der häufigste Grund dafür, dass Overlay-Text verschwindet, und ein paar kleine Anpassungen beheben das.

• Verwenden Sie kontrastreichen Text: Heller Text auf einem dunklen Foto oder dunkler Text auf einem hellen Foto bleibt auf einen Blick lesbar.
• Fügen Sie ein Overlay hinzu, um den Hintergrund abzudunkeln: Eine halbtransparente Farbschicht beruhigt ein unruhiges Bild, so wie Sie einen Hintergrundbild hinter einem Hero-Bereich abdunkeln.
• Passen Sie die Schriftgröße für das Gerät an: Text, der auf dem Desktop gut lesbar ist, kann auf dem Handy schrumpfen, prüfen Sie also beides, bevor Sie veröffentlichen.
• Vermeiden Sie die unruhigen Bereiche des Fotos: Platzieren Sie Ihre Wörter über einem ruhigen Bereich des Himmels, einer Wand oder eines Schattens und nicht über einem detaillierten Motiv.

Wie fügt man Text hinter einem Bild in WordPress ein?

Text hinter einem Bild einzufügen ist ein mehrschichtiger Designeffekt, bei dem ein Wort hinter dem Motiv sitzt, sodass das Foto es zu überlappen scheint. WordPress hat keinen einzelnen Button „Text hinter Bild“, aber Sie können den Look mit überlappenden Blöcken vortäuschen.

Der einfachste Weg ist der Cover-Block. Legen Sie eine große Überschrift als Überblendtext fest und reduzieren Sie dann die Bilddeckkraft in den Überblendungseinstellungen, sodass der Text so wirkt, als befände er sich hinter dem Foto und nicht darauf.

Für einen stärkeren Effekt verwenden Sie überlappende Gruppenblöcke. Platzieren Sie eine Überschrift in einer Gruppe und ein Bild mit transparentem Hintergrund (ein PNG-Ausschnitt) in einer anderen. Verwenden Sie dann negative Ränder oder Abstände, um das Bild über einen Teil des Textes zu ziehen.

Wie umschließt man Text ein Bild in WordPress?

Text um ein Bild herum bedeutet, dass der Absatz neben dem Foto fließt, anstatt darüber und darunter zu stoppen. Der WordPress-Blockeditor handhabt dies mit der Bildausrichtung, ganz ohne Code.

Fügen Sie zuerst Ihren Bildblock hinzu, wählen Sie ihn aus und wählen Sie dann Nach links ausrichten oder Nach rechts ausrichten in der Block-Symbolleiste. Geben Sie Ihren Absatz direkt nach dem Bild in den Block ein, und der Text fließt um die offene Seite.

Halten Sie das Bild auf einer moderaten Breite, damit genügend Platz für den Text daneben ist. Auf schmalen mobilen Bildschirmen platziert WordPress den umfließenden Text automatisch unter dem Bild, was das Layout lesbar hält.

FAQs zum Einfügen von Text über einem WordPress-Bild

Wie füge ich Text über einem Bild in WordPress ohne Plugin hinzu?

Verwenden Sie den integrierten WordPress Cover-Block. Fügen Sie einen Cover-Block im Blockeditor hinzu, wählen Sie Ihr Bild aus und tippen Sie Ihren Text direkt auf das Foto. Sie können dann eine Überblendfarbe festlegen und den Textstil im rechten Bereich anpassen.

Wie füge ich Text hinter einem Bild in WordPress hinzu?

WordPress hat keinen einzelnen Button dafür, daher simulieren Sie den Layereffekt mit überlappenden Blöcken. Legen Sie eine Überschrift als Überblendtext für den Cover-Block fest und reduzieren Sie die Bilddeckkraft, oder stapeln Sie zwei Gruppenblöcke und ziehen Sie das Bild mit negativen Rändern über einen Teil des Textes.

Wie lasse ich Text in WordPress um ein Bild fließen?

Fügen Sie einen Bildblock hinzu, wählen Sie ihn aus und wählen Sie in der Block-Symbolleiste Nach links ausrichten oder Nach rechts ausrichten. Geben Sie Ihren Absatz direkt nach dem Bild in den Block ein, und der Text fließt um die offene Seite. Auf Mobilgeräten platziert WordPress den Text automatisch unter dem Bild.

Wie halte ich Text über einem unruhigen Bild lesbar?

Fügen Sie eine halbtransparente Überblendung hinzu, um das Foto abzudunkeln, und verwenden Sie dann kontrastreichen Text, damit die Wörter hervorstechen. Platzieren Sie den Text über einem ruhigen Teil des Bildes, wie Himmel oder einer schlichten Wand, und überprüfen Sie die Schriftgröße auf Mobilgeräten, bevor Sie veröffentlichen.

Beginnen Sie noch heute mit dem Hinzufügen von Text über Ihren Bildern

Sie können jetzt Text über jedem Bild in WordPress hinzufügen, von einer schnellen Cover-Block-Überblendung bis zu einer voll gestalteten SeedProd-Galerie. Wählen Sie die Methode, die Ihrem gewünschten Designkontrollgrad entspricht, und Sie können sie in wenigen Minuten live schalten.

Starten Sie noch heute mit SeedProd

Sie könnten auch die folgenden WordPress-Tutorials mögen:

• So erstellen Sie Tabs in WordPress für tabellarische Inhalte
• So passen Sie WordPress-Post-Auszüge an (ohne Code)
• So erstellen Sie Textanimationen in WordPress (einfache Schritte)

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.