So fügen Sie Text über einem Bild in WordPress hinzu (3 Methoden)

Möchten Sie Ihren WordPress-Bildern Text hinzufügen? Diese attraktiven Titel und Zitate, die Sie über Fotos gelegt sehen, können Ihren Inhalt wirklich hervorheben. Es wird als Textüberlagerung bezeichnet und ist eine großartige Möglichkeit, Ihre Bilder ansprechender zu gestalten.

Wenn Sie sich gefragt haben, wie Sie diese Textüberlagerungen erstellen können, denken Sie vielleicht, dass Sie spezielle Designsoftware oder -kenntnisse benötigen. Gute Nachrichten – das müssen Sie nicht!

Wir haben alle möglichen Methoden getestet und mehrere einfache Wege gefunden, um Text direkt in WordPress zu Bildern hinzuzufügen. Keine Designkenntnisse erforderlich und keine zusätzliche Software zu kaufen.

Bereit zu lernen, wie? Wir zeigen Ihnen drei einfache Möglichkeiten, Text über einem Bild in WordPress hinzuzufügen. Bis zum Ende dieser Anleitung werden Sie mit Zuversicht professionell aussehende Text-Overlays für Ihre Website erstellen.

Wann Sie Text über Bildern in WordPress hinzufügen

Bilder können die Attraktivität Ihrer WordPress-Website erheblich steigern, sie visuell interessanter gestalten und lange Textabschnitte auflockern.

Es gibt jedoch Zeiten, in denen ein Bild allein nicht die ganze Geschichte erzählt. In diesen Fällen können Textüberlagerungen zusätzlichen Kontext liefern und Ihrem Publikum helfen zu verstehen, warum das Bild für den Inhalt relevant ist.

Egal, ob Sie einen WordPress-Blog oder einen Online-Shop betreiben, Textüberlagerungen können normale Bilder in aufmerksamkeitsstarke Header oder Banner verwandeln.

In diesem Beitrag stellen wir drei anfängerfreundliche Möglichkeiten vor, Text über einem Bild in WordPress hinzuzufügen. Wenn Sie lieber direkt zu einer bestimmten Methode springen möchten, können Sie die folgenden Links verwenden:

• Methode 1: Text über einem Bild mit dem Cover-Block hinzufügen
• Methode 2: Text über einem Bild mit dem Bild-Block hinzufügen
• Method 3: Create a Custom Page Layout with Text on Top of an Image

Methode 1: Text über einem Bild mit dem Cover-Block hinzufügen

Eine Möglichkeit, Text über einem Bild in WordPress einzufügen, ist die Verwendung des Cover-Blocks. Sie können diesen Block verwenden, um ein beliebiges Bild anzuzeigen und dann Text über dem Bild einzugeben. Dies macht den Cover-Block perfekt für die Erstellung von Hero-Images, Headern und Bannern.

Um einen Cover-Block zu einer Seite oder einem Beitrag hinzuzufügen, klicken Sie einfach auf die Schaltfläche „+ Block hinzufügen“ im Gutenberg Block Editor.

Sie können jetzt „Cover“ eingeben und den richtigen Block auswählen, wenn er erscheint.

Hier können Sie den Standard-Cover-Block auswählen.

Sie können aber auch die Vorlagenoption mit Platzhalterbild und -text wählen. Mit der zweiten Option können Sie einfach das vorhandene Bild und den Text durch Ihre eigenen ersetzen.

Um das Standardbild zu ersetzen, klicken Sie einfach darauf, um es auszuwählen. Sobald Sie dies getan haben, klicken Sie auf die Schaltfläche „Ersetzen“.

Wenn Sie ein Bild verwenden möchten, das sich bereits in Ihrer WordPress-Mediathek befindet, klicken Sie einfach auf „Mediathek öffnen“. Sie können dann ein vorhandenes Bild auswählen.

Wenn Sie ein neues Bild hochladen möchten, klicken Sie stattdessen auf „Hochladen“.

Dies öffnet ein Fenster, in dem Sie eine beliebige Datei von Ihrem Computer auswählen können.

Nachdem Sie ein Bild ausgewählt haben, können Sie die Blockeinstellungen verwenden, um interessante und auffällige Effekte zu erzielen.

Zum Beispiel können Sie das Bild beim Scrollen der Seite fixieren oder einen Farb-Overlay hinzufügen.

Wenn Sie eine Überlagerung verwenden, können Sie deren Deckkraft mit dem Schieberegler „Deckkraft“ ändern. Die Deckkrafteinstellung steuert die Transparenz des Hintergrundbildes.

Wenn Sie mit dem Aussehen des Bildes zufrieden sind, können Sie Text hinzufügen.

Standardmäßig enthält der Titel-Block einen Überschriften- und einen Absatz-Block, in denen Sie Text über dem Bild hinzufügen können.

Um Text hinzuzufügen, klicken Sie einfach auf den Block „Überschrift“ oder „Absatz“, um ihn auszuwählen. Geben Sie dann den Text ein, den Sie verwenden möchten.

Achten Sie beim Hinzufügen von Text über Bildern darauf, dass Ihr Text für alle Besucher lesbar ist. Ein guter Kontrast zwischen Text und Hintergrund hilft jedem, Ihre Inhalte leichter zu lesen. Weitere Informationen finden Sie in unserem Leitfaden zur Verbesserung der Barrierefreiheit auf Ihrer WordPress-Website.

Dennoch möchten Sie Ihren Text vielleicht so gestalten, dass er leichter zu lesen ist.

Wenn Sie mit einem Überschriften-Block arbeiten, können Sie auch verschiedene Überschriftenstile ausprobieren, um zu sehen, welcher am besten lesbar ist.

Sie können auch dazu beitragen, dass Ihr Text auffällt, indem Sie eine kontrastierende Farbe verwenden.

Um eine andere Farbe auszuwählen, wählen Sie die Registerkarte „Block“ im Menü auf der rechten Seite. Klicken Sie dann auf „Farbe“, um diesen Abschnitt zu erweitern.

Sobald Sie dies getan haben, klicken Sie auf „Text“. Dies öffnet ein Popup, in dem Sie eine neue Farbe für den gesamten Text im Block auswählen können.

Typischerweise ist größerer Text leichter zu lesen.

Um Ihren Text größer zu machen, klicken Sie auf das Feld neben 'Größe' und geben Sie dann eine größere Zahl in dieses Feld ein.

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

Methode 2: Text über einem Bild mit dem Bild-Block hinzufügen

Der Cover-Block eignet sich hervorragend zum Erstellen von Bannern und Headern. Sie können jedoch auch Text über einen Standard-WordPress-Bildblock legen.

Um zu beginnen, müssen Sie einen Bildblock zu Ihrer Seite oder Ihrem Beitrag hinzufügen. Tun Sie dies einfach, indem Sie auf die Schaltfläche „+ Block hinzufügen“ im WordPress-Blockeditor klicken.

Sie können dann 'Bild' eingeben und den richtigen Block auswählen, um ihn zu Ihrem Beitrag hinzuzufügen.

Sie können dann entweder ein Bild von Ihrem Computer hochladen oder auf „Mediathek“ klicken, um ein Bild aus der WordPress-Mediathek auszuwählen.

Nachdem Sie Ihr Bild ausgewählt haben, können Sie dessen Fokuspunkt ändern, eine Überlagerung hinzufügen und die Deckkraft ändern, indem Sie denselben oben beschriebenen Prozess befolgen.

Sie können auch die verschiedenen Schieberegler für „Fixed background“ und „Repeated background“ ausprobieren, um zu sehen, was für Ihren Bildblock am besten funktioniert.

Wenn Sie mit dem Aussehen Ihres Bildes zufrieden sind, klicken Sie einfach auf die Schaltfläche 'Text über Bild hinzufügen'.

Dies fügt einen Bereich hinzu, in den Sie Ihren Text eingeben können.

Abhängig von Ihrem Bild kann es für Besucher schwierig sein, Ihren Überlagerungstext zu lesen. Hier kann es helfen, den Text fett zu formatieren oder seine Farbe zu ändern, indem Sie den gleichen Vorgang wie oben beschrieben befolgen.

Sie können Ihren Text auch größer machen.

Finden Sie dazu den Abschnitt „Größe“ im Menü auf der rechten Seite. Sie können dann auf die verschiedenen Zahlen klicken, um Ihren Text größer oder kleiner zu machen.

Wenn Sie mit dem Aussehen Ihres Textes und Bildes zufrieden sind, gehen Sie zur Vorschau Ihrer Website. Klicken Sie dann auf „Entwurf speichern“, „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen zu speichern.

Wenn Sie ein Block-Theme für WordPress verwenden, können Sie die Methoden 1 und 2 verwenden, um Text über einem Bild in jedem Teil Ihres Themes mit dem WordPress Full Site Editor (FSE) hinzuzufügen.

Mehr über FSE erfahren Sie in unserem vollständigen Leitfaden für Anfänger zur vollständigen Website-Bearbeitung in WordPress.

Methode 3: Benutzerdefiniertes Seitenlayout mit Text über einem Bild erstellen

Die integrierten WordPress-Blöcke sind eine schnelle und einfache Möglichkeit, Text über einem Bild in WordPress hinzuzufügen. Wenn Sie jedoch die Freiheit haben möchten, vollständig benutzerdefinierte Seitendesigns zu erstellen, benötigen Sie ein Page-Builder-Plugin.

SeedProd ist das beste WordPress Page Builder Plugin auf dem Markt. Es ermöglicht Ihnen, Text über jedem Bild auf Ihrer gesamten Website hinzuzufügen.

Sie können unsere vollständige SeedProd-Bewertung für weitere Details lesen.

Zuerst müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.

Nach der Aktivierung müssen Sie Ihren SeedProd-Lizenzschlüssel eingeben. Sie erhalten diesen Schlüssel, indem Sie sich in Ihr SeedProd-Konto einloggen. Klicken Sie dann auf den Tab 'Downloads'.

Sobald Sie dies getan haben, können Sie den Schlüssel im Abschnitt 'Lizenzschlüssel' kopieren.

Sie können diesen Schlüssel jetzt in Ihren WordPress-Adminbereich einfügen, indem Sie zur Seite SeedProd » Einstellungen gehen.

Sobald Sie hier sind, fügen Sie Ihren Schlüssel in das Feld 'Lizenzschlüssel' ein.

Dann müssen Sie einfach auf „Schlüssel überprüfen“ klicken.

Danach gehen wir zu SeedProd » Landing Pages und klicken auf „Neue Landing Page hinzufügen“.

Dieser erste Schritt ist erforderlich, bevor Sie Text über Ihren Bildern hinzufügen können.

Ihre nächste Aufgabe ist die Auswahl einer Vorlage, die den Ausgangspunkt Ihrer Seite bildet.

Egal welches SeedProd-Template Sie wählen, Sie können jeden Teil des Templates anpassen, um es perfekt an Ihre Website und Ihr Branding anzupassen. Wenn Sie lieber mit einer leeren Leinwand beginnen möchten, klicken Sie auf 'Blank Template'.

In all unseren Bildern verwenden wir die Tasty Squeeze Page-Vorlage, die sich perfekt für Kampagnen eignet, um mehr Abonnenten zu gewinnen.

Sobald Sie eine Vorlage gefunden haben, die Sie verwenden möchten, fahren Sie mit der Maus darüber. Sie können dann auf das Symbol „Vorschau“ klicken.

Dies zeigt eine Vorschau der Vorlage an.

Wenn Sie mit dem Aussehen dieser Vorlage zufrieden sind, klicken Sie auf die Schaltfläche „Diese Vorlage auswählen“.

Geben Sie im Feld „Seitenname“ einen Namen für die Seite ein.

Standardmäßig verwendet SeedProd diesen Namen als URL der Seite. Wenn Sie diese automatisch erstellte URL ändern möchten, bearbeiten Sie einfach den Text im Feld „Seiten-URL“.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf die Schaltfläche 'Speichern und mit der Bearbeitung der Seite beginnen'. Dies öffnet die Vorlage im Drag-and-Drop-Editor von SeedProd.

In der linken Seitenleiste sehen Sie alle Blöcke und Abschnitte, die Sie per Drag & Drop auf Ihre Seite ziehen können.

Sofern Sie nicht die Blank-Vorlage verwenden, enthält Ihre SeedProd-Seite bereits einige Blöcke und Abschnitte. Um einen dieser Inhalte zu bearbeiten, klicken Sie einfach auf den Block oder Abschnitt, um ihn auszuwählen.

Das linke Menü von SeedProd zeigt nun alle Einstellungen an, mit denen Sie diesen Block oder Bereich anpassen können. Wie Sie im folgenden Bild sehen können, können Sie den Text ändern, der im Überschriften-Block angezeigt wird.

Der einfachste Weg, Text über einem Bild hinzuzufügen, ist die Verwendung einer der vorgefertigten Hero-Bereiche von SeedProd.

Diese Abschnitte enthalten einen Platzhalter, ein vollflächiges Hintergrundbild und etwas Platzhaltertext darüber. Sie können das Standard-Hintergrundbild und den Text einfach durch Ihre eigenen Inhalte ersetzen.

Um zu beginnen, klicken Sie im linken Menü von SeedProd auf die Registerkarte „Abschnitte“.

Sie können dann auf „Hero“ klicken, um alle vorgefertigten Hero-Bereiche anzuzeigen, die Sie Ihrer Seite hinzufügen können.

Um eine dieser Abschnittsvorlagen in der Vorschau anzuzeigen, fahren Sie einfach mit der Maus über die Vorlage und klicken Sie dann auf das Lupensymbol.

Um diesen Hero-Bereich zu Ihrem Design hinzuzufügen, klicken Sie einfach auf „Diesen Abschnitt auswählen“.

Als Nächstes möchten Sie das Stock-Bild der Vorlage durch Ihr eigenes Bild ersetzen. Klicken Sie dazu einfach auf das Stock-Bild, um es auszuwählen.

Dann fahren Sie im linken Menü von SeedProd mit der Maus über die Vorschau „Hintergrundbild“, bis ein Papierkorb-Symbol erscheint.

Sie können dann auf dieses Symbol klicken, um das Platzhalterbild zu löschen.

Klicken Sie dann auf „Eigenes Bild verwenden“. Sie können dann entweder ein Bild aus der WordPress-Mediathek auswählen oder ein Stock-Bild verwenden.

SeedProd bietet Ihnen einfachen Zugriff auf Tausende von lizenzfreien Stock-Bildern. Um die Stock-Bildbibliothek von SeedProd zu durchsuchen, klicken Sie auf 'Ein Stock-Bild verwenden'.

Geben Sie in die Suchleiste ein Wort oder eine Phrase ein, die das gesuchte Bild beschreibt, und klicken Sie auf die Schaltfläche „Suchen“.

SeedProd zeigt nun alle Stock-Bilder an, die zu Ihrem Suchbegriff passen.

Wenn Sie ein Bild finden, das Sie Ihrem Design hinzufügen möchten, klicken Sie einfach darauf.

Sobald Sie ein Bild hinzugefügt haben, sind Sie bereit, den Platzhaltertext zu ersetzen.

Klicken Sie dazu, um den Textblock auszuwählen. Geben Sie dann im Bereich 'Text' einfach den Text ein, den Sie verwenden möchten.

Einige der Hero-Vorlagen von SeedProd enthalten zusätzliche Inhalte, wie z. B. Call-to-Action-Schaltflächen.

Möchten Sie diesen Inhalt ändern? Klicken Sie dann einfach, um den Block auszuwählen, und nehmen Sie dann Ihre Änderungen im Menü auf der linken Seite von SeedProd vor.

Eine andere Möglichkeit besteht darin, den Block aus der Hero-Vorlage zu löschen.

Um dies zu tun, klicken Sie einfach, um den Block auszuwählen, und klicken Sie dann auf das Papierkorbsymbol.

Wenn Sie mit dem Design Ihrer Seite zufrieden sind, können Sie auf die Schaltfläche „Speichern“ klicken.

Von hier aus können Sie die Seite veröffentlichen oder als Vorlage speichern.

Weitere Details zum Erstellen benutzerdefinierter Seitenlayouts mit SeedProd finden Sie in unserem Leitfaden zur Erstellung einer Landingpage in WordPress.

Bonustipps zur Verwaltung von Bildern und Dateien in WordPress

Das Hinzufügen von Text zu Bildern ist nur eine Möglichkeit, Ihre Website besser aussehen zu lassen. Möchten Sie mehr mit Ihren Bildern machen? Sehen Sie sich diese einfachen Anleitungen an:

• Bilder in WordPress einfach per Lazy Load laden
• So fügen Sie mehrere Galerien in WordPress-Beiträge und -Seiten ein
• So fügen Sie einen Featured Content Slider in WordPress richtig hinzu
• So fügen Sie einen Rahmen um ein Bild in WordPress hinzu
• So schneiden und bearbeiten Sie WordPress Beitrags-Thumbnails
• So fügen Sie ganz einfach interaktive 360-Grad-Bilder in WordPress hinzu

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Text über einem Bild in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Massenbearbeiten von Beitragsbildern lesen und unsere Expertenauswahl für die besten WordPress-Slider-Plugins.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.