Wie man Text über einem Bild in WordPress hinzufügt (3 Methoden)

Möchten Sie in WordPress Text über einem Bild hinzufügen?

Ein Text-Overlay ist eine gute Möglichkeit, zusätzliche Informationen zu einem Bild zu liefern. Es ist auch eine schnelle und einfache Möglichkeit, Banner, Kopfzeilen und sogar Online-Anzeigen zu erstellen.

In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress Text über einem Bild hinzufügen können.

Wann man Text über Bilder in WordPress einfügt

Bilder können Ihre WordPress-Website interessanter aussehen lassen und helfen, große Textabsätze aufzulockern.

Manchmal benötigen Ihre Bilder jedoch mehr Erklärungen. Sie könnten zum Beispiel einen Text über einem Bild hinzufügen, um zu erklären, was das Bild zeigt und warum Sie es zu Ihrem Beitrag hinzugefügt haben.

Viele WordPress-Blogs fügen auch Text über einem Bild ein, um auffällige und informative Banner und Überschriften zu erstellen.

In diesem Beitrag stellen wir Ihnen drei anfängerfreundliche Möglichkeiten vor, wie Sie in WordPress Text über einem Bild hinzufügen können. Wenn Sie es vorziehen, direkt zu einer bestimmten Methode zu springen, dann können Sie die Links unten verwenden:

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

Eine Möglichkeit, Text über einem Bild in WordPress hinzuzufügen, ist die Verwendung des Cover-Blocks. Sie können diesen Block verwenden, um ein beliebiges Bild anzuzeigen und dann Text über das Bild zu schreiben. Dadurch eignet sich der Cover-Block perfekt für die Erstellung von Heldenbildern, Überschriften und Bannern.

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

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

Standardmäßig enthält der Cover-Block ein Platzhalterbild und einen Platzhaltertext.

Um das Standardbild zu ersetzen, klicken Sie einfach auf das Bild, um es auszuwählen. Klicken Sie anschließend auf die Schaltfläche „Ersetzen“.

Wenn Sie ein Bild verwenden möchten, das sich bereits in Ihrer WordPress-Mediathek befindet, dann 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“.

Es öffnet sich 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 einige interessante und auffällige Effekte zu erzielen. Zum Beispiel können Sie das Bild fixieren, während der Besucher die Seite scrollt, oder dem Bild ein Farb-Overlay hinzufügen.

Wenn Sie ein Overlay verwenden, können Sie dessen Deckkraft mit dem Schieberegler „Deckkraft“ ändern. Mit der Deckkraft wird die Transparenz des Hintergrundbildes eingestellt.

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

Standardmäßig hat der Titelblock eine Überschrift und einen Absatzblock, in dem Sie Text über dem Bild hinzufügen können.

Um einen Text hinzuzufügen, klicken Sie einfach auf den Überschriften- oder Absatzblock. Geben Sie dann den gewünschten Text ein.

Wenn Sie Text über einem Bild hinzufügen, kann dieser Text manchmal schwer zu lesen sein. Dies gilt insbesondere für Besucher, die schlecht sehen können. Weitere Informationen finden Sie in unserem Leitfaden zur Verbesserung der Barrierefreiheit auf Ihrer WordPress-Website.

Allerdings sollten Sie Ihren Text so gestalten, dass er leichter zu lesen ist.

Wenn Sie mit einem Überschriftenblock arbeiten, können Sie auch die verschiedenen Überschriftenstile ausprobieren, um zu sehen, welcher am besten zu lesen ist.

Sie können Ihren Text auch durch die Verwendung einer kontrastierenden Farbe hervorheben.

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

Klicken Sie anschließend auf „Text“. Es öffnet sich ein Popup-Fenster, in dem Sie eine neue Farbe für den gesamten Text des Blocks auswählen können.

In der Regel ist ein größerer Text leichter zu lesen.

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

Wenn Sie mit dem Aussehen Ihres Titelblocks zufrieden sind, können Sie Ihre Seite wie gewohnt veröffentlichen oder aktualisieren. Wenn Sie nun Ihre WordPress-Website besuchen, sehen Sie Ihren Text oben auf dem Bild.

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

Der Cover-Block eignet sich hervorragend für die Erstellung von Bannern und Überschriften. Sie können jedoch auch Text über einen Standard-WordPress-Bilderblock hinzufügen.

Zunächst müssen Sie Ihrer Seite oder Ihrem Beitrag einen Bildblock hinzufügen. Klicken Sie dazu im WordPress-Block-Editor einfach auf das Pluszeichen „+ Block hinzufügen“.

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 „Medienbibliothek“ klicken, um ein Bild aus der WordPress-Medienbibliothek auszuwählen.

Nachdem Sie Ihr Bild ausgewählt haben, können Sie den Fokuspunkt ändern, eine Überlagerung hinzufügen und die Deckkraft nach demselben Verfahren wie oben beschrieben ändern.

Sie können auch die verschiedenen Schieberegler „Fester Hintergrund“ und „Wiederholter Hintergrund“ 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“.

Dadurch wird ein Bereich hinzugefügt, in den Sie Ihren Text eingeben können.

Je nach Bild kann es für Besucher schwierig sein, den überlagerten Text zu lesen. In diesem Fall kann es hilfreich sein, den Text fett zu machen oder seine Farbe nach dem oben beschriebenen Verfahren zu ändern.

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

Suchen Sie dazu im rechten Menü den Bereich „Größe“. 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, können Sie eine Vorschau Ihrer Website aufrufen. Klicken Sie dann auf „Entwurf speichern“, „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen zu speichern.

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

Mehr über FSE erfahren Sie in unserem vollständigen Leitfaden für Einsteiger in WordPress Full Site Editing.

Methode 3: Erstellen eines benutzerdefinierten Seitenlayouts mit Text über einem Bild

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

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

Lesen Sie unsere vollständige Bewertung von SeedProd für weitere Details.

Zunächst müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Bei der Aktivierung müssen Sie Ihren SeedProd-Lizenzschlüssel eingeben. Sie erhalten diesen Schlüssel, indem Sie sich bei Ihrem SeedProd-Konto anmelden. Klicken Sie dann auf die Registerkarte „Downloads“.

Wenn Sie das getan haben, können Sie den Schlüssel in den Abschnitt „Lizenzschlüssel“ kopieren.

Sie können diesen Schlüssel nun in Ihren WordPress-Administrationsbereich einfügen, indem Sie die Seite SeedProd “ Einstellungen aufrufen.

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

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

Danach gehen wir zu SeedProd „ Landing Pages und klicken auf „Add New Landing Page“.

Als Nächstes müssen Sie eine Vorlage auswählen, die den Ausgangspunkt für Ihre Seite bildet. Unabhängig davon, für welche SeedProd-Vorlage Sie sich entscheiden, können Sie jeden Teil der Vorlage anpassen, um sie perfekt an Ihre Website und Ihr Branding anzupassen.

Wenn Sie es vorziehen, mit einer leeren Leinwand zu beginnen, können Sie auf „Leere Vorlage“ klicken.

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

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

Daraufhin wird eine Vorschau der Vorlage angezeigt.

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

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

Standardmäßig verwendet SeedProd diesen Namen als URL für die 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“. Dadurch wird die Vorlage im Drag-and-Drop-Editor von SeedProd geöffnet.

In der linken Seitenleiste sehen Sie alle Blöcke und Abschnitte, die Sie per Drag-and-Drop zu Ihrer Seite hinzufügen können.

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

Im linken Menü von SeedProd werden nun alle Einstellungen angezeigt, mit denen Sie diesen Block oder Abschnitt anpassen können. Wie Sie in der folgenden Abbildung sehen können, können Sie, wenn Sie auf einen Überschriftenblock klicken, den Text ändern, der in diesem Block angezeigt wird.

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

Diese Abschnitte haben ein Platzhalter-Hintergrundbild über die gesamte Breite, über dem ein Platzhalter-Text eingefügt ist. Sie können das Standard-Hintergrundbild und den Text einfach durch Ihren eigenen Inhalt ersetzen.

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

Sie können dann auf „Held“ klicken, um alle vorgefertigten Heldenabschnitte zu sehen, die Sie Ihrer Seite hinzufügen können.

Um eine Vorschau dieser Abschnittsvorlagen zu sehen, bewegen Sie einfach den Mauszeiger über die Vorlage und klicken dann auf das Lupensymbol.

Um diesen Heldenabschnitt zu Ihrem Entwurf hinzuzufügen, klicken Sie einfach auf „Diesen Abschnitt auswählen“.

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

Bewegen Sie dann im linken Menü von SeedProd den Mauszeiger über die Vorschau „Hintergrundbild“, bis ein Mülleimersymbol erscheint.

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

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

SeedProd bietet Ihnen einfachen Zugang zu Tausenden von lizenzfreien Bildern. Um einen Blick in die SeedProd-Bildbibliothek zu werfen, klicken Sie auf „Use a Stock Image“.

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

SeedProd zeigt nun alle Bilder an, die Ihrem Suchbegriff entsprechen.

Wenn Sie ein Bild finden, das Sie Ihrem Entwurf hinzufügen möchten, klicken Sie es einfach an.

Sobald Sie ein Bild hinzugefügt haben, können Sie den Platzhaltertext ersetzen.

Wählen Sie dazu den Textblock aus. Geben Sie dann im Bereich „Text“ einfach den gewünschten Text ein.

Einige der SeedProd-Heldenvorlagen haben zusätzliche Inhalte, wie z. B. Call-to-Action-Schaltflächen.

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

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

Wählen Sie dazu einfach den Block aus und klicken Sie dann auf das Mülleimer-Symbol.

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

Hier können Sie wählen, ob Sie die Seite veröffentlichen oder als Vorlage speichern möchten.

Weitere Details zur Erstellung von benutzerdefinierten Seitenlayouts mit SeedProd finden Sie in unserer Anleitung zur Erstellung einer Landing Page in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Text über einem Bild in WordPress hinzufügen können. Vielleicht interessieren Sie sich auch für unsere Anleitung zur Massenbearbeitung von Bildern und unsere Expertenauswahl für die beste Webdesign-Software.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.