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 Bildunterschriften oder Alternativtexten kann das Suchmaschinenranking Ihrer Website verbessern. Suchmaschinen nutzen diese Informationen nämlich, um den Inhalt Ihrer Website zu verstehen und dessen Relevanz für die Suchanfragen der Nutzer zu bestimmen.

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; } 

im obigen Code Ersetzen Sie „custom-class“ durch die benutzerdefinierte Klasse, die Sie dem Bildblock hinzugefügt haben. Sie können außerdem Schriftgröße, Farbe und weitere Formatierungsoptionen an Ihre Vorlieben anpassen.

3. Verwenden Sie das WordPress-Plugin

Wenn Sie Ihre Seiten individuell gestalten möchten, benötigen Sie ein Page-Builder-Plugin. Ein solches WordPress-Plugin ist SeedProd, mit dem Sie Text über beliebige Bilder auf Ihrer gesamten Website legen können.

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

anschließend Kopieren Sie den Schlüssel aus dem „Lizenzschlüssel “.

Sie können diesen Schlüssel nun in Ihrem WordPress-Adminbereich unter SeedProd » Einstellungen.

Dort fügen Sie Ihren Schlüssel in das Feld „Lizenzschlüssel“ ein anschließend auf „Schlüssel verifizieren“.

Als Nächstes gehen Sie zu SeedProd » Landing Pages und klicken auf Add New Landing Page.

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 den Mauszeiger darüber. Anschließend können Sie auf das Vorschau-Symbol klicken.

Wenn Ihnen das Aussehen dieser Vorlage gefällt, klicken Sie einfach auf die Schaltfläche „Diese Vorlage auswä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 „Speichern und Seite bearbeiten“ . 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 & 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 diese Inhalte zu bearbeiten, klicken Sie auf den entsprechenden Block oder Abschnitt.

Im linken Menü von SeedProd werden Ihnen nun alle Einstellungen angezeigt, mit denen Sie diesen Block oder Abschnitt anpassen können.

Am einfachsten fügen Sie Text über einem Bild ein, indem Sie einen der vorgefertigten Hero-Bereiche von SeedProd verwenden.

Diese Bereiche enthalten ein Platzhalterbild in voller Breite als Hintergrundbild und darüber einen Platzhaltertext. Sie können das Standardhintergrundbild und den Text einfach durch Ihre eigenen Inhalte ersetzen.

auf den Tab „Bereich“ im linken Menü

und anschließend auf „Hero“ , um alle vorgefertigten Hero-Bereiche 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 Stockfoto, um es auszuwählen, falls Sie das Standardbild der Vorlage durch Ihr eigenes ersetzen möchten.

Bewegen Sie den Mauszeiger über die Hintergrundbild -Vorschau, bis ein Papierkorbsymbol erscheint. Klicken Sie anschließend auf dieses Symbol, um das Platzhalterbild zu löschen.

Klicken Sie anschließend auf „Eigenes Bild verwenden“. Sie können nun entweder ein Bild aus der WordPress-Mediathek oder ein Stockfoto verwenden.

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

Klicken Sie dazu auf den Textblock. Geben Sie anschließend im Textfeldeinfach den gewünschten Text ein.

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

Um diese Inhalte zu ändern, klicken Sie auf den entsprechenden Block und nehmen Sie die gewünschten Ä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“.

Anschließend können Sie die Seite veröffentlichen oder als Vorlage speichern.

Schlussfolgerung

Das sind alle drei Methoden, um in WordPress Text über ein Bild zu legen. Ganz einfach, oder? Wählen Sie die Methode, die am besten zu Ihren Kenntnissen und Designvorlieben passt.

Organisieren, optimieren und verwalten Sie Ihre Mediendateien außerdem wie ein Profi mit WP Media Folder. Schluss mit unübersichtlichen Mediatheken!