Möchten Sie einen Sale hervorheben, eine Handlungsaufforderung hinzufügen oder Ihre Fotos ansprechender gestalten? Das Hinzufügen von Text zu einem Bild in WordPress ist der schnellste Weg, dies zu tun. Sie können ein einfaches Bild mit nur wenigen Klicks in ein Banner, eine Hero-Header oder sogar eine Mini-Anzeige verwandeln.
In diesem Leitfaden zeige ich Ihnen mehrere einfache Möglichkeiten, Text über Bilder in WordPress zu legen, vom integrierten Editor bis hin zu Plugins, die Ihnen mehr Designkontrolle geben.
Warum Text über Bilder in WordPress hinzufügen?
Das Hinzufügen von Text über Bildern macht diese nützlicher. Sie können Produktmerkmale hervorheben, Handlungsaufforderungen auf Bannern hinzufügen oder Beschriftungen direkt auf Fotos platzieren, damit Besucher sofort verstehen, was sie sehen.
Es ist auch praktisch für das Branding, z. B. zum Hinzufügen von Wasserzeichen oder zum Umwandeln eines normalen Bildes in einen Header, ein Hero-Bild oder eine Online-Anzeige ohne zusätzliche Designsoftware.
Die gute Nachricht ist, dass Sie keine Photoshop- oder Grafikdesign-Kenntnisse benötigen. WordPress bietet Ihnen mehrere einfache Möglichkeiten, Textüberlagerungen direkt auf Ihrer Website hinzuzufügen.
So fügen Sie Text auf einem Bild in WordPress hinzu
Unten finden Sie 3 verschiedene Möglichkeiten, Text über ein Bild in WordPress hinzuzufügen. Wir beginnen mit der Verwendung eines leistungsstarken WordPress-Plugins und erklären dann, wie Sie Textüberlagerungen mit dem WordPress-Blockeditor erstellen.
Legen wir los.
Methode 1. Text mit dem SeedProd-Galerieblock zu einem Bild hinzufügen
Das WordPress-Plugin, mit dem wir beginnen, ist SeedProd, der beste Website-Builder für WordPress. Es verfügt über einen Drag-and-Drop-Visualleneditor, mit dem Sie WordPress-Themes, Landingpages und flexible Layouts für Ihre Website erstellen können, ohne Code schreiben zu müssen.
Sie können mit einem vollständigen Website-Kit oder einer Landingpage-Vorlage beginnen und dann Ihr Design visuell mit WordPress-Blöcken anpassen. Die Galerieblöcke lassen Sie beispielsweise eine farbige Überlagerung aktivieren und Ihre Bildtitel, Beschreibungen und Bildunterschriften beim Überfahren anzeigen.
SeedProd bietet auch die folgenden leistungsstarken Funktionen:
- Bald verfügbar und Wartungsmodus
- WordPress Theme Builder
- 404- und Anmeldeseiten
- Dashboard zur Verwaltung von Abonnenten
- E-Mail-Marketing-Integrationen
- Social-Media-Einbettungen
- Benutzerzugriffskontrollen
- Dynamische Textersetzung
- Domain-Mapping
- Und mehr.
Folgen Sie der nachstehenden Anleitung, um zu erfahren, wie Sie mit SeedProd Text auf ein Bild hinzufügen.
Schritt 1. SeedProd installieren und aktivieren
Klicken Sie zuerst auf die Schaltfläche unten, um Ihr SeedProd-Konto zu erstellen und die Plugin-Datei auf Ihren Computer herunterzuladen.
Klicken Sie dann in Ihrem Kontodashboard auf die Registerkarte Downloads und kopieren Sie Ihren SeedProd-Lizenzschlüssel.
Laden Sie als Nächstes die .zip-Datei des Plugins auf Ihre WordPress-Website hoch. Wenn Sie Hilfe bei diesem Schritt benötigen, folgen Sie dieser Anleitung zum Installieren und Aktivieren eines WordPress-Plugins.
Nachdem Sie SeedProd aktiviert haben, gehen Sie in Ihrem WordPress-Adminbereich zu SeedProd » Einstellungen und fügen Sie den zuvor kopierten Lizenzschlüssel ein.
Klicken Sie nun auf die Schaltfläche Schlüssel überprüfen und fahren Sie mit dem nächsten Schritt fort.
Schritt 2. Erstellen Sie ein neues WordPress-Layout
Für diesen Schritt müssen Sie entscheiden, welche Art von WordPress-Layout Sie mit SeedProd erstellen möchten. Sie können ein WordPress-Theme von Grund auf mit einem der vollständigen Website-Kits erstellen oder eine Landingpage-Vorlage auswählen, um eine eigenständige Landingpage zu erstellen.
Die Theme Builder-Option ist ideal, wenn Sie Ihr bestehendes WordPress-Theme vollständig ersetzen möchten. Wenn Sie jedoch nur eine Seite erstellen oder anpassen und Ihr aktuelles Theme beibehalten möchten, ist der Landing Page Builder die bessere Wahl.
Glücklicherweise haben wir viele Tutorials für beide Lösungen. Folgen Sie dieser Anleitung, um ein WordPress-Theme zu erstellen, oder diesen Schritten, um eine Landingpage in WordPress mit SeedProd zu erstellen.
Beide Tutorials führen Sie durch die Auswahl einer vorgefertigten Vorlage und die Einrichtung Ihres grundlegenden Layouts. Für diese Anleitung wählen wir die Theme Builder-Option.
Sobald Sie eine Vorlage für Ihr Design ausgewählt haben, können Sie diese bearbeiten und Ihre Anpassungen vornehmen. In diesem Fall verwenden wir das Portfolio-Theme für Fotografie und planen, die Portfolio-Seite anzupassen.
Um die Portfolio-Seite zu bearbeiten, gehen Sie zu Seiten » Alle Seiten, suchen Sie die gewünschte Seite und klicken Sie auf den Link Mit SeedProd bearbeiten.
Schritt 3. Einbetten und Anpassen des Galerie-Blocks
Wenn Sie Ihr Design öffnen, sehen Sie ein Layout wie im folgenden Beispiel:
Auf der rechten Seite sehen Sie eine Live-Vorschau Ihrer Seite, die Sie in Echtzeit anklicken und bearbeiten können. Auf der linken Seite befinden sich WordPress-Blöcke und Abschnitte, die Sie per Drag & Drop in Ihr Design ziehen können.
Sie können Elemente auch entfernen, indem Sie mit der Maus darüber fahren und auf das Papierkorb-Symbol klicken. Wir werden dies für den Galerie-Block tun, der mit unserer Vorlage geliefert wurde, da wir ihn durch die erweiterte Galerie ersetzen werden.
Der erweiterte Galerie-Block von SeedProd verfügt über leistungsstarke Anpassungsoptionen. Wir werden diese verwenden, um Text über den Bildern im Portfolio hinzuzufügen. Suchen Sie also den Block Erweiterte Galerie und ziehen Sie ihn auf Ihre Seite.
Wie Sie sehen, öffnen sich die Blockeinstellungen in der linken Seitenleiste. Wählen Sie in diesem Bereich zuerst Einzeln oder Mehrere aus dem Dropdown-Menü „Typ“.
Die Option „Mehrere“ ermöglicht es Ihnen, mehr als eine Galerie auf Ihrer Seite mit einem Filter hinzuzufügen, auf den Sie klicken können, um jede Galerie anzuzeigen. Die Option „Einzeln“ zeigt nur eine Galerie ohne Filter an.
Nachdem Sie den Galerie-Typ ausgewählt haben, können Sie mit dem Hinzufügen Ihrer Fotos beginnen. Klicken Sie einfach auf die Schaltfläche Galeriebilder hinzufügen und wählen Sie Bilder von Ihrem Computer oder aus Ihrer WordPress-Mediathek aus.
Sie können beliebige Fotos hinzufügen, einschließlich JPEG/JPG, PNG, GIF und anderer Dateitypen.
Nachdem Sie Ihre Fotos hochgeladen haben, können Sie das Menü Einstellungen öffnen und die Anzahl der Spalten, den Abstand, das Seitenverhältnis, die Bildgröße und den Link auswählen.
Wenn Sie beispielsweise den Linktyp Mediendatei anklicken, wird sichergestellt, dass jedes Galerie-Foto in einer Lightbox-Galerie mit Pop-up geöffnet wird.
Klicken Sie nun auf das Menü Overlay und stellen Sie den Schalter Hintergrund-Overlay auf „Ja“.
Unten können Sie auswählen, welcher Text angezeigt werden soll, wenn Sie mit der Maus über jedes Foto fahren. Für beide Optionen können Sie Folgendes anzeigen:
- Titel
- Bildunterschrift
- Alt
- Beschreibung
So sieht es aus, wenn die Bildunterschrift beim Überfahren mit der Maus angezeigt wird:
Wenn Ihre Bildunterschriften schwer zu lesen sind, können Sie die Hintergrundfarbe des Overlays anpassen und die Textschriftart, Textausrichtung und Textstil bearbeiten.
Außerdem bietet die Registerkarte "Erweitert" viele weitere Anpassungsoptionen, darunter Schatten-, Rahmen-, Abstands- und mobile Sichtbarkeitsstile.
Mit der Geräteansicht können Sie beispielsweise bestimmte Elemente auf verschiedenen Gerätegrößen ein- und ausblenden, wie z. B. Android-Tablets, iPhones, Apple iPads, Mac iOS-Laptops und Microsoft-Desktops.
Wenn Sie mit Ihrem Design zufrieden sind, denken Sie daran, Ihre Änderungen zu speichern, indem Sie in der oberen rechten Ecke auf die Schaltfläche Speichern klicken.
Schritt 4. Veröffentlichen Sie Ihre Änderungen
Nun müssen Sie nur noch die WordPress-Anpassungen auf Ihrer Website live schalten. Wenn Sie eine Landingpage erstellen, klicken Sie einfach im Menü "Speichern" auf Veröffentlichen.
Wenn Sie jedoch den Theme Builder von SeedProd verwenden, müssen Sie zu SeedProd » Theme Builder gehen und den Schalter SeedProd Theme aktivieren umlegen.
Jetzt können Sie Ihre Seite in der Vorschau anzeigen und Ihre Bildtext-Overlays in Aktion sehen.
Methode 2. Text mit SeedProd-Abschnitten zu einem Bild hinzufügen
Eine weitere Möglichkeit, Text auf ein Bild in WordPress zu setzen, sind die vorgefertigten Abschnitte von SeedProd. Wenn Sie eine Vorlage mit dem Seitenersteller von SeedProd bearbeiten, sehen Sie auf der linken Seite Ihres Bildschirms eine Registerkarte "Abschnitte".
Wenn Sie auf diese Registerkarte klicken, werden verschiedene Abschnitte für Ihren Header, Footer, Hero, Call to Action, Features und FAQs angezeigt. Dies sind Sammlungen von WordPress-Blöcken in einem fertigen Layout, die Sie mit einem Klick zu Ihrer Seite hinzufügen können.
Wenn Sie beispielsweise ein Bild mit einem Call-to-Action-Button anzeigen möchten, können Sie einen Abschnitt aus der Call-to-Action-Bibliothek auswählen und auf das Plus-Symbol klicken, um ihn einzubetten.
Der Abschnitt wird am unteren Rand Ihres Designs angezeigt, wo Sie ihn nach Ihren Wünschen anpassen können.
In diesem Fall haben wir das Hintergrundbild geändert, eine Overlay-Farbe hinzugefügt, um den Hintergrund abzudunkeln, und den Titeltext sowie die Call-to-Action-Buttons angepasst.
Denken Sie daran, Ihre Änderungen zu speichern und zu veröffentlichen, wenn Sie fertig sind. Dann können Sie Ihr Design live auf Ihrer Website in der Vorschau anzeigen.
Methode 3. Text mit dem WordPress Cover Block über ein Bild legen
Die folgende Methode zeigt Ihnen, wie Sie Text auf ein Bild in WordPress ohne Plugin hinzufügen können. Sie können den Cover-Block von WordPress verwenden, um ein beliebiges Bild anzuzeigen und Text über das Bild zu schreiben.
Diese Methode bietet nicht so viele Anpassungsoptionen wie die vorherige; sie ist jedoch eine hilfreiche Möglichkeit, Text zu Bildern hinzuzufügen, wenn Sie kein weiteres WordPress-Plugin zu Ihrer Website hinzufügen möchten.
Um den Cover-Block zu einem Beitrag oder einer Seite hinzuzufügen, klicken Sie auf das Plus-Symbol (+) im WordPress-Blockeditor. Dann können Sie "Cover" eingeben und den Cover-Block auswählen, wenn er erscheint.
Klicken Sie anschließend auf die Schaltfläche "Hochladen" oder "Mediathek", um ein Bild für Ihr Cover auszuwählen.
Nachdem Sie ein Bild ausgewählt haben, können Sie direkt auf das Foto schreiben, um eine Überschrift oder Beschreibung hinzuzufügen.
Sie können Ihr Hintergrundbild im rechten Bereich anpassen, indem Sie einen festen oder wiederholten Hintergrund aktivieren. Sie können den Bildfokus auch ändern, indem Sie den Marker in der Vorschau ziehen.
Darüber hinaus können Sie im Overlay-Einstellungen-Bereich eine Farb- oder Farbverlaufsüberlagerung für Ihr Bild auswählen. Im selben Bereich können Sie die Deckkraft, den Abstand und die Abmessungen des Overlays festlegen.
Wenn Sie auf den Overlay-Text klicken, werden Textwerkzeuge geöffnet, mit denen Sie die Textfarbe und Hintergrundfarbe ändern und mit verschiedenen Schriftarten experimentieren können.
Durch die Änderung der Groß-/Kleinschreibung, des Zeichenabstands und der Schriftgröße konnten wir beispielsweise diesen Label-Effekt erzielen.
Sobald Sie mit dem Aussehen Ihres Titel-Blocks zufrieden sind, können Sie Ihre Seite veröffentlichen oder aktualisieren. Wenn Sie Ihre Website besuchen, sehen Sie Ihren Text über dem Bild.
FAQs zum Hinzufügen von Text zu einem WordPress-Bild
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie man Text auf einem Bild in WordPress hinzufügt. Sind Sie bereit, sich damit zu beschäftigen und SeedProd selbst auszuprobieren?
Sie könnten auch die folgenden WordPress-Tutorials mögen:
- So erstellen Sie Tabs in WordPress für tabellarische Inhalte
- So passen Sie WordPress-Post-Auszüge an (ohne Code)
- So erstellen Sie Textanimationen in WordPress (einfache Schritte)
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
