Technologische Neuigkeiten, Bewertungen und Tipps!

So fügen Sie in WordPress auf 3 einfache Arten Text zu einem Bild hinzu

Hinweis: Der folgende Artikel hilft Ihnen weiter: So fügen Sie in WordPress auf 3 einfache Arten Text zu einem Bild hinzu

Möchten Sie lernen, wie man in WordPress Text zu einem Bild hinzufügt?

Das Hinzufügen von Text über einem Bild ist eine großartige Möglichkeit, mehr Informationen zu Fotos oder Grafiken anzuzeigen. Sie können auch ein Textfeld über Bildern verwenden, um schnell Kopfzeilen, Banner und Online-Werbung zu erstellen.

In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress auf verschiedene Arten Text zu einem Bild hinzufügen.

Warum in WordPress Text über Bildern hinzufügen?

Bilder sind eine fantastische Möglichkeit, Ihre WordPress-Website ansprechender und ansprechender zu gestalten. Sie können auch große Textteile aufteilen und so den Besuchern das Lesen erleichtern.

Manchmal benötigen Besucher möglicherweise weitere Informationen darüber, was ein Bild bedeutet. Beispielsweise kann ein Produktdemobild Beschriftungen benötigen, die verschiedene Funktionen erläutern. In diesen Situationen erhalten Benutzer durch das Hinzufügen von Text zum Bild mehr Kontext.

Darüber hinaus können Sie einem Bild Text hinzufügen, um ein Wasserzeichen zu erstellen und Urheberrechtsdiebstahl zu verhindern.

In den meisten dieser Situationen benötigen Sie Fotobearbeitungswerkzeuge wie Photoshop, um eine Textüberlagerung hinzuzufügen. Allerdings kann die Verwendung von Bildbearbeitungsprogrammen schwierig sein, wenn Sie mit Grafikdesign nicht vertraut sind.

Stattdessen gibt es mehrere Möglichkeiten, direkt in WordPress schnell und einfach Text zu Bildern hinzuzufügen.

So fügen Sie in WordPress Text zu einem Bild hinzu

Nachfolgend finden Sie drei verschiedene Möglichkeiten, in WordPress Text über einem Bild hinzuzufügen. Wir beginnen mit der Verwendung eines leistungsstarken WordPress-Plugins und erklären dann, wie man mit dem WordPress-Blockeditor Textüberlagerungen erstellt.

Lass uns eintauchen.

Das WordPress-Plugin, mit dem wir beginnen, ist SeedProd, der beste Website-Builder für WordPress. Es verfügt über einen visuellen Drag-and-Drop-Editor, 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 Ihr Design dann mit WordPress-Blöcken optisch anpassen. Mit den Galerieblöcken können Sie beispielsweise eine farbige Überlagerung aktivieren und Ihre Fototitel, Beschreibungen und Bildunterschriften anzeigen, wenn Sie mit der Maus darüber fahren.

SeedProd verfügt außerdem über die folgenden leistungsstarken Funktionen:

Befolgen Sie die nachstehende Anleitung, um zu erfahren, wie Sie mit SeedProd Text zu einem Bild hinzufügen.

Schritt 1. Installieren und aktivieren Sie SeedProd

Klicken Sie zunächst auf die Schaltfläche unten, um Ihr SeedProd-Konto zu erstellen und die Plugin-Datei auf Ihren Computer herunterzuladen.

Klicken Sie dann in Ihrem Konto-Dashboard auf Downloads Klicken Sie auf die Registerkarte und kopieren Sie Ihren SeedProd-Lizenzschlüssel.

Laden Sie als Nächstes die ZIP-Datei des Plugins auf Ihre WordPress-Website hoch. Wenn Sie bei diesem Schritt Hilfe benötigen, befolgen Sie diese Anweisungen auf Installieren und Aktivieren eines WordPress-Plugins.

Gehen Sie nach der Aktivierung von SeedProd zu SeedProd » Einstellungen aus Ihrem WordPress-Administrationsbereich und fügen Sie den zuvor kopierten Lizenzschlüssel ein.

Klicken Sie nun auf Schlüssel überprüfen Klicken Sie auf die Schaltfläche und fahren Sie mit dem nächsten Schritt fort.

Schritt 2. Erstellen Sie ein neues WordPress-Layout

In diesem Schritt müssen Sie entscheiden, welche Art von WordPress-Layout Sie mit SeedProd erstellen möchten. Sie können mit einem der vollständigen Website-Kits ein WordPress-Theme von Grund auf 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 komplett ersetzen möchten. Wenn Sie jedoch nur eine Seite erstellen oder anpassen und Ihr aktuelles Thema beibehalten möchten, ist der Landing Page Builder eine bessere Option.

Glücklicherweise haben wir für beide Lösungen zahlreiche Tutorials. Befolgen Sie diese Anleitung zum Erstellen eines WordPress-Themes oder diese Schritte zum Erstellen einer Landingpage in WordPress mit SeedProd.

Beide Tutorials führen Sie durch die Auswahl einer vorgefertigten Vorlage und die Einrichtung Ihres Grundlayouts. Für diese Anleitung wählen wir die Option „Theme Builder“.

Sobald Sie eine Vorlage für Ihr Design ausgewählt haben, können Sie diese bearbeiten und Ihre Anpassungen hinzufügen. In diesem Fall verwenden wir das Fotografie-Portfolio-Design und planen, die Portfolio-Seite anzupassen.

Um die Portfolio-Seite zu bearbeiten, gehen Sie zu Seiten » Alle Seitensuchen Sie die gewünschte Seite und klicken Sie auf Bearbeiten mit SeedProd Verknüpfung.

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 anklicken und in Echtzeit bearbeiten können. Auf der linken Seite befinden sich dann WordPress-Blöcke und -Abschnitte, die Sie per Drag & Drop auf Ihr Design ziehen können.

Sie können Elemente auch entfernen, indem Sie mit der Maus darüber fahren und auf das Papierkorbsymbol klicken. Wir werden dies für den Galerieblock tun, der mit unserer Vorlage geliefert wurde, da wir ihn durch die erweiterte Galerie ersetzen werden.

Der Advanced Gallery-Block von SeedProd verfügt über leistungsstarke Anpassungsoptionen. Wir werden diese verwenden, um den Bildern im Portfolio Text hinzuzufügen, also finden Sie den Erweiterte Galerie Block und ziehen Sie es auf Ihre Seite.

Wie Sie sehen, öffnen sich die Blockeinstellungen in der linken Seitenleiste. Wählen Sie in diesem Bereich zunächst „Einzel“ oder „Mehrfach“ aus dem Dropdown-Menü „Typ“ aus.

Mit der Option „Mehrere“ können Sie Ihrer Seite mehr als eine Galerie mit einem Filter hinzufügen, auf den Sie klicken können, um jede Galerie anzuzeigen. Während die Option „Einzeln“ nur eine Galerie ohne Filter anzeigt.

Nachdem Sie den Galerietyp ausgewählt haben, können Sie mit dem Hinzufügen Ihrer Fotos beginnen. Klicken Sie einfach auf Galeriebilder hinzufügen Klicken Sie auf die Schaltfläche und wählen Sie Bilder von Ihrem Computer oder Ihrer WordPress-Medienbibliothek aus.

Sie können beliebige Fotos hinzufügen, einschließlich JPEG/JPG, PNG, GIF und andere Dateitypen.

Sobald Sie Ihre Fotos hochgeladen haben, können Sie die öffnen Einstellungen Menü und wählen Sie die Anzahl der Spalten, den Abstand, das Seitenverhältnis, die Bildgröße und den Link aus.

Klicken Sie beispielsweise auf Mediendatei Der Linktyp stellt sicher, dass jedes Galeriefoto in einer Popup-Lightbox-Galerie geöffnet wird.

Klicken Sie nun auf Überlagerung Menü und drehen Sie den Hintergrundüberlagerung schalten Sie auf die Position „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
  • Untertitel
  • Alt
  • Beschreibung

So sieht es mit der beim Hover angezeigten Bildunterschrift aus:

Wenn Ihre Beschriftungen schwer lesbar sind, können Sie die Hintergrundfarbe der Überlagerung anpassen und die Schriftart, Textausrichtung und den Textstil bearbeiten.

Darüber hinaus bietet die Registerkarte „Erweitert“ viele weitere Anpassungsoptionen, darunter Schatten, Rahmen, Abstände und mobile Sichtbarkeitsstile.

Mit der Gerätesichtbarkeit können Sie beispielsweise bestimmte Elemente auf unterschiedlichen Gerätegrößen wie Android-Tablets, iPhones usw. ein- und ausblenden. Apple iPads, Mac-iOS-Laptops und Microsoft-Desktops.

Wenn Sie mit Ihrem Design zufrieden sind, denken Sie daran, Ihre Änderungen zu speichern, indem Sie auf klicken Speichern Schaltfläche in der oberen rechten Ecke.

Schritt 4. Veröffentlichen Sie Ihre Änderungen

Jetzt müssen Sie nur noch die WordPress-Anpassungen auf Ihrer Website live schalten. Wenn Sie eine Landingpage erstellen, klicken Sie einfach darauf Veröffentlichen im Dropdown-Menü Speichern.

Wenn Sie jedoch den Theme Builder von SeedProd verwenden, müssen Sie zu gehen SeedProd » Theme Builder und schalten Sie das ein Aktivieren Sie das SeedProd-Theme Umschalten.

Jetzt können Sie eine Vorschau Ihrer Seite anzeigen und Ihre Bildtext-Overlays in Aktion sehen.

Methode 2. Fügen Sie mithilfe von SeedProd-Abschnitten Text zu einem Bild hinzu

Eine weitere Möglichkeit, in WordPress Text zu einem Bild hinzuzufügen, sind die vorgefertigten Abschnitte von SeedProd. Wenn Sie eine Vorlage mit dem Seitenersteller von SeedProd bearbeiten, wird auf der linken Seite Ihres Bildschirms die Registerkarte „Abschnitte“ angezeigt.

Wenn Sie auf diese Registerkarte klicken, werden mehrere Abschnitte für Ihre Kopfzeile, Fußzeile, Hero, Call-to-Action, Funktionen und FAQs angezeigt. Dabei handelt es sich um Sammlungen von WordPress-Blöcken in einem vorgefertigten Layout, die Sie mit einem Klick zu Ihrer Seite hinzufügen können.

Wenn Sie beispielsweise ein Bild mit einer Call-to-Action-Schaltfläche 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 unten in Ihrem Design angezeigt, wo Sie ihn an Ihre Bedürfnisse anpassen können.

In diesem Fall haben wir das Hintergrundbild geändert, eine Überlagerungsfarbe hinzugefügt, um den Hintergrund abzuschwächen, und den Überschriftentext und die Call-to-Action-Schaltflächen angepasst.

Denken Sie daran, Ihre Änderungen zu speichern und zu veröffentlichen, wenn Sie fertig sind. Anschließend können Sie Ihr Design live auf Ihrer Website in der Vorschau anzeigen.

Methode 3. Fügen Sie mit WordPress Cover Block Text über einem Bild hinzu

Die folgende Methode zeigt Ihnen, wie Sie ohne Plugin Text zu einem Bild in WordPress hinzufügen. Sie können den Cover-Block von WordPress verwenden, um jedes Bild anzuzeigen und Text über das Bild einzugeben.

Diese Methode bietet nicht so viele Anpassungsoptionen wie die vorherige; Es ist jedoch eine hilfreiche Möglichkeit, Text zu Bildern hinzuzufügen, wenn Sie Ihrer Website kein weiteres WordPress-Plugin hinzufügen möchten.

Um den Cover-Block zu einem Beitrag oder einer Seite hinzuzufügen, klicken Sie im WordPress-Blockeditor auf das Pluszeichen (+). Dann können Sie „Cover“ eingeben und den Cover-Block auswählen, wenn er angezeigt wird.

Klicken Sie anschließend auf die Schaltfläche „Hochladen“ oder „Medienbibliothek“, um ein Bild für Ihr Cover auszuwählen.

Nachdem Sie ein Bild ausgewählt haben, können Sie direkt auf das Foto tippen, um eine Überschrift oder Beschreibung hinzuzufügen.

Sie können Ihr Hintergrundbild im rechten Bereich anpassen, indem Sie einen festen oder sich wiederholenden Hintergrund aktivieren. Sie können den Bildfokus auch ändern, indem Sie die Markierung in der Vorschau ziehen.

Darüber hinaus ist die Overlay-Einstellungen Im Bedienfeld können Sie eine Farb- oder Verlaufsüberlagerung für Ihr Bild auswählen. Im selben Bedienfeld können Sie die Deckkraft, den Abstand und die Abmessungen der Überlagerung festlegen.

Wenn Sie auf den Overlay-Text klicken, werden Textwerkzeuge geöffnet, in denen Sie die Text- und Hintergrundfarbe ändern und mit den verschiedenen Schriftarten experimentieren können.

Durch die Änderung der Groß-/Kleinschreibung, des Buchstabenabstands und der Schriftgröße konnten wir beispielsweise diesen Etiketteneffekt erzielen.

Sobald Sie mit dem Aussehen Ihres Cover-Blocks zufrieden sind, können Sie Ihre Seite veröffentlichen oder aktualisieren. Wenn Sie Ihre Website besuchen, wird Ihr Text über dem Bild angezeigt.

Hier hast du es!

Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, zu lernen, wie Sie in WordPress Text zu einem Bild hinzufügen. Sind Sie bereit einzutauchen und SeedProd selbst auszuprobieren?

Die folgenden WordPress-Tutorials könnten Ihnen auch gefallen:

Danke fürs Lesen. Bitte folgen Sie uns weiter YouTube, TwitterUnd Facebook für weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens.