Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Es kommt häufig vor, dass Sie einem Bild in WordPress ein Overlay hinzufügen müssen.

Vielleicht erstellen Sie ein auffälliges Banner für Ihre Homepage. Oder vielleicht möchten Sie Ihrem Hervorgehobenen Beitragsbild einen einprägsamen Titel hinzufügen. Wir haben diese Situation selbst schon erlebt, und das Hinzufügen eines Overlays ist eine gute Möglichkeit, Ihre Bilder informativer und ansprechender zu gestalten.

Wenn Sie Hilfe beim Hinzufügen von Text über Ihrem Bild in WordPress benötigen, dann sind Sie hier richtig. Wir haben 3 einfache Möglichkeiten gefunden, um Text über Bildern in WordPress hinzuzufügen, ohne dass Sie über Designkenntnisse verfügen müssen.

How to add text on top of an image in WordPress

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:

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.

The WordPress Cover block

Hier können Sie den Standard-Cover-Block wählen. Sie können aber auch die Option mit dem Template und dem Platzhalterbild und -text wählen. Bei der zweiten Option können Sie das vorhandene Bild und den Text einfach durch Ihr eigenes ersetzen.

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

How to add text on top of an image in WordPress

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“.

Uploading an image to the WordPress Cover block

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.

A colored cover overlay

Wenn Sie ein Overlay verwenden, können Sie dessen Deckkraft mit dem Slider „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.

How to add text on top of an image in WordPress

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.

Styling the text on top of a WordPress image

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.

Changing the color of text on top of an image

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.

Adding text on top of an image in WordPress

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.

The WordPress Image block

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 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“.

Adding text on top of an image in WordPress

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.

Changing the text color in WordPress

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.

Increasing the text size

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.

Hinweis: Es gibt eine kostenlose Version von SeedProd, aber für diese Anleitung werden wir die Pro-Version verwenden, da sie mehr Funktionen hat.

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.

The SeedProd Downloads page

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.

Verifying your SeedProd license

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“.

SeedProd's page design templates

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.

The SeedProd ready-made templates

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.

SeedProd's professionally-designed templates

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“.

A lead generation and squeeze template

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“.

Creating a custom page layout with SeedProd

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.

Adding blocks to your SeedProd design

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.

Customizing a ready-made SeedProd page design

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.

A SeedProd section template

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“.

A SeedProd hero template

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.

Deleting a background image in SeedProd

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“.

Choosing a SeedProd stock image

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.

SeedProd's stock image library

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.

Add text on top of an image using SeedProd

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.

Editing your SeedProd text

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.

Deleting SeedProd sections and blocks

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.

Publishing a SeedProd design

Weitere Details zur Erstellung von benutzerdefinierten Seitenlayouts mit SeedProd finden Sie in unserer Anleitung zur Erstellung einer Landing Page 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 aus Ihren Bildern machen? Sehen Sie sich diese einfachen Anleitungen an:

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man Text über einem Bild in WordPress einfügt. Vielleicht interessieren Sie sich auch für unsere Anleitung zur Massenbearbeitung von Hervorgehobenen Beitragsbildern und unsere Expertenauswahl für die besten WordPress Slider Plugins.

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

5 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Viktorija

    Hi, I am trying to add a title and when you press on it it leads you to an image.

    • WPBeginner Support

      For what it sounds like you’re wanting, you would want to use method 2 and add a link to that block.

      Admin

  3. Trish

    Hi Editorial Staff,

    Am a bit disappointed with the WordPress Cover Block in that the text overlay is NOT responsive in Mobile view, sadly, making the text totally unreadable.

    Thought you should know of this issue.

    • WPBeginner Support

      Thank you for sharing that the block is not currently responsive.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.