Wie man Text auf ein Bild in WordPress setzt (3 Methoden)

Das Hinzufügen von Text auf ein Bild ist eine beliebte Technik, um die visuelle Attraktivität von Inhalten oder Websites zu verbessern. Es ist auch eine großartige Möglichkeit, Ihre Bilder informativer und ansprechender zu gestalten.

In diesem Artikel haben wir drei einfache Möglichkeiten gefunden, Text über einem Bild in WordPress hinzuzufügen. Ob Sie den Block-Editor, ein Plugin oder benutzerdefinierten Code bevorzugen. Finden wir es heraus!

Warum es wichtig ist, Text auf die Bilder zu setzen

Bevor Sie mit den Methoden fortfahren, müssen Sie den Grund kennen, warum das Hinzufügen von Text auf die Bilder wichtig ist.

1. Aufmerksamkeit erregen

Wenn Benutzer schnell durch Inhalte scrollen, reicht das Hinzufügen von Bildern allein möglicherweise nicht aus, um ihre Aufmerksamkeit zu erregen. Deshalb müssen Sie Text auf ein Bild setzen, um die Aufmerksamkeit der Benutzer zu erregen und Ihre Nachricht effektiver zu vermitteln.

2. Verbessern Sie die Benutzererfahrung

Es ist wahr, dass Bilder für sich genommen einen großen Wert bieten können, aber wenn man Text darauf setzt, wie z.B. Bildunterschriften, Zitate oder andere textbasierte Inhalte, kann man sie noch nützlicher machen. Darüber hinaus können Benutzer den Kontext des Bildes und seine Beziehung zu Ihren Inhalten verstehen.

3. Verbesserung der Zugänglichkeit

Sie können auch dazu beitragen, die Zugänglichkeit für Benutzer zu verbessern, die möglicherweise Schwierigkeiten haben, das Bild selbst anzuzeigen. Indem Sie eine Textalternative bereitstellen, können Sie sicherstellen, dass Ihre Inhalte einem breiteren Benutzerkreis zugänglich sind.

4. SEO-Boosterung

Das Hinzufügen relevanter Schlüsselwörter zu Ihren Bildunterschriften oder Alternativtexten kann helfen, die Suchmaschinenplatzierung der Website zu verbessern. Dies liegt daran, dass Suchmaschinen diese Informationen verwenden, um den Inhalt Ihrer Website zu verstehen und zu bestimmen, wie relevant er für die Suchanfragen der Benutzer ist.

3 Methoden zum Hinzufügen von Text auf ein Bild in WordPress

1. Verwenden Sie den WordPress-Blockeditor

Gehen Sie zunächst zu der Seite oder dem Beitrag, auf dem Sie den Text über dem Bild hinzufügen möchten.

Wählen Sie Cover, um den Text über das Bild zu schreiben.

Danach wird es auf Ihrem Bildschirm angezeigt. Es zeigt Ihnen das Standardbild, aber Sie können das Bild nach Belieben ändern.

Sie können das Standardbild auch durch Ihr eigenes Bild ersetzen. Klicken Sie auf die Schaltfläche "Ersetzen" und laden Sie dann das Bild hoch oder wählen Sie es einfach aus der Mediathek

Es wird so aussehen, dann können Sie den Text über das Bild schreiben, wie Sie es möchten.

Doppelklicken Sie auf den Text, um die Bearbeitungsoption für den Text zu erhalten. Sie können die Größe, Farbe und vieles mehr nach Ihren Anforderungen anpassen.

Zuletzt klicken Sie auf die Schaltfläche 'Aktualisieren' oder, wenn Sie einen neuen Beitrag oder eine neue Seite hinzugefügt haben, klicken Sie auf die Schaltfläche 'Veröffentlichen'.

2. CSS verwenden

Öffnen Sie den WordPress-Blockeditor und wählen Sie den Bildblock, wo Sie Text hinzufügen möchten. Im rechten Seitenbereich klicken Sie auf den erweiterten Tab.

In dem zusätzlichen CSS-Klassen-Feld fügen Sie eine benutzerdefinierte Klasse für den Bildblock hinzu.

Speichern Sie die Änderungen und veröffentlichen oder aktualisieren Sie die Seite oder den Beitrag.

.custom-class { position: relativ; } .custom-class p { position: absolut; top: 50%; left: 50%; transform: translate(-50%, -50%); schriftgröße: 24px; farbe: #ffffff; textschatten: 2px 2px 2px #000000; } 

Ersetzen Sie im obigen Code "benutzerdefinierte-Klasse" mit der benutzerdefinierten Klasse, die Sie dem Bildblock hinzugefügt haben. Sie können auch die Schriftgröße, Farbe und andere Stiloptionen an Ihre Vorlieben anpassen.

3. Verwenden Sie das WordPress-Plugin

Wenn Sie die Freiheit haben möchten, völlig individuelle Seitendesigns zu erstellen, benötigen Sie ein Page-Builder-Plugin. Eines der WordPress-Page-Builder-Plugins ist SeedProd, mit dem Sie auf Ihrer gesamten Website Text auf jedes Bild legen können.

Installieren und aktivieren Sie zunächst das SeedProd-Plugin. Nach der Aktivierung müssen Sie einen Lizenzschlüssel eingeben. Melden Sie sich in Ihrem SeedProd-Konto an und klicken Sie dann auf den Download-Tab.

Sobald dies erledigt ist, kopieren Sie den Schlüssel im Abschnitt Lizenzschlüssel.

Sie können diesen Schlüssel jetzt in Ihrem WordPress-Admin-Bereich einfügen, indem Sie zur SeedProd » Einstellungsseite gehen.

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

Als nächstes gehen wir zu SeedProd » Landing Pages und klicken auf Neue Landing Page hinzufügen.

Danach wählen Sie eine Vorlage. Unabhängig davon, welche SeedProd-Vorlage Sie wählen, können Sie jeden Teil der Vorlage perfekt an Ihre Website und Ihr Branding anpassen.

Wenn Sie jedoch lieber mit einer leeren Leinwand beginnen möchten, klicken Sie auf die leere Vorlage.

Sobald Sie eine Vorlage gefunden haben, bewegen Sie Ihre Maus darüber. Sie können dann auf das Vorschau-Symbol klicken.

Wenn Ihnen gefällt, wie diese Vorlage aussieht, klicken Sie auf die Schaltfläche "Diese Vorlage wählen".

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

Wenn Sie die automatisch erstellte URL ändern möchten, bearbeiten Sie den Text im Feld Seiten-URL.

Klicken Sie auf die Seite speichern und mit der Bearbeitung beginnen-Schaltfläche. Dadurch wird die Vorlage im Drag-and-Drop-Editor von SeedProd geöffnet.

Im linken Seitenbereich 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, um den Block oder Abschnitt auszuwählen.

Das linke Menü von SeedProd zeigt Ihnen nun alle Einstellungen, die Sie verwenden können, um diesen Block oder Abschnitt anzupassen.

Der einfachste Weg, Text auf ein Bild zu setzen, besteht darin, einen der vorgefertigten Hero-Abschnitte von SeedProd zu verwenden.

Diese Abschnitte enthalten ein Platzhalter-Hintergrundbild in voller Breite mit darüber liegendem Platzhaltertext. Sie können einfach das Standard-Hintergrundbild und den Text durch Ihre eigenen Inhalte ersetzen.

Klicken Sie auf den Abschnitt im linken Menü.

Klicken Sie dann auf Hero, um alle vorgefertigten Hero-Abschnitte anzuzeigen, die Sie Ihrer Seite hinzufügen können.

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

Klicken Sie auf das Standardbild, um es auszuwählen, wenn Sie das Standardbild des Templates durch Ihr eigenes Bild ersetzen möchten.

Fahren Sie mit der Maus über die Vorschau des Hintergrundbilds, bis ein Papierkorb-Symbol erscheint. Anschließend können Sie auf dieses Symbol klicken, um das Platzhalterbild zu löschen.

Als nächstes klicken Sie auf Eigenes Bild verwenden. Sie können dann entweder ein Bild aus der WordPress-Medienbibliothek auswählen oder ein Stockbild verwenden.

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

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

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

Wenn Sie diesen Inhalt ändern möchten, klicken Sie, um den Block 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.

Um dies zu tun, klicken Sie, um den Block auszuwählen und klicken Sie dann auf das Papierkorb-Symbol.

Wenn Sie mit Ihrem Seitendesign zufrieden sind, klicken Sie auf die Schaltfläche "Speichern".

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

Schlussfolgerung

Das sind alle drei Methoden, um Text auf ein Bild in WordPress hinzuzufügen. Einfach, oder? Wählen Sie den Ansatz, der am besten zu Ihrem Können und Ihren Designvorlieben passt.

Darüber hinaus organisieren, optimieren und verwalten Sie Ihre Mediendateien wie ein Profi mit WP Media Folder. Es ist Zeit, sich von unordentlichen Bibliotheken zu verabschieden!