KI-Zusammenfassung
Möchten Sie Ihrer WordPress-Website ein Bild hinzufügen?
Bilder sind ein wesentlicher Bestandteil jedes Online-Inhalts. Sie verbessern die visuelle Attraktivität Ihrer Website und machen Ihre Inhalte besser lesbar.
In diesem Tutorial führe ich Sie durch den Prozess des Hinzufügens eines Bildes zu verschiedenen Teilen Ihrer WordPress-Website.
So fügen Sie ein Bild zu WordPress hinzu
Der Prozess zum Hinzufügen von Bildern zu WordPress variiert je nachdem, wo genau Sie ein Bild einfügen. In diesem Tutorial zeigen wir Ihnen einige der gängigsten Szenarien für das Hochladen von Bildern in WordPress.
Hier finden Sie schriftliche Anweisungen, wenn Sie lieber mitlesen möchten.
Erstellen Sie jetzt Ihr WordPress-Bildformular
Szenario Nr. 1: Bild zu einem WordPress-Beitrag hinzufügen
Wenn Sie einen neuen Beitrag oder eine neue Seite in WordPress erstellen, müssen Sie wahrscheinlich ein paar Bilder hinzufügen, damit Ihre Inhalte hervorstechen.
Um ein Bild zu Ihrem Beitrag hinzuzufügen, müssen Sie zuerst zum WordPress-Beitragseditor wechseln, indem Sie im Admin-Menü zu Beiträge » Alle Beiträge navigieren.
Dies bringt Sie sofort zum WordPress Gutenberg-Editor. Klicken Sie im Editor einfach auf die Schaltfläche „+“, um die Liste der verfügbaren Blöcke zu öffnen, und wählen Sie dann den Block Bild aus.
Wenn der Bildblock in den Inhaltsbereich eingefügt wird, sehen Sie die Optionen, entweder ein neues Bild von Ihrem Computer hochzuladen, ein bereits hochgeladenes Bild aus der Mediathek auszuwählen oder ein Bild von einer URL einzufügen.
Wenn Sie ein neues Bild hinzufügen, das noch nicht in der Bibliothek vorhanden ist, klicken Sie auf die Schaltfläche Hochladen.
Wählen Sie dann das Bild aus, das Sie von Ihrem Computer hochladen möchten, und es sollte sofort in Ihrem Beitrag erscheinen.
So einfach ist es, ein Bild zu einem WordPress-Blogbeitrag hinzuzufügen!
Der Prozess zum Einfügen von Bildern in Seiten ist ähnlich. Sie müssen nur den gleichen Prozess befolgen, nachdem Sie im Admin-Seitenleiste von WordPress auf die Menüoption Neue Seite hinzufügen geklickt haben.
Szenario Nr. 2: Bild zu einem WordPress-Formular hinzufügen
Wenn Sie ein Bild zu einem WordPress-Formular hinzufügen möchten, müssen Sie zuerst ein Formular-Plugin mit einer einfachen Bild-Upload-Funktionalität installieren.
WPForms ist eines der wenigen Formular-Plugins für WordPress, das es unglaublich einfach macht, ein Bild irgendwo in Ihrem Formular einzufügen.
WPForms installieren
Wenn Sie WPForms noch nicht auf Ihrer Website installiert haben, empfehlen wir Ihnen, die WPForms Pro Lizenz zu erwerben.
Hilfe bei der Installation des Plugins finden Sie in unserer Dokumentation Anleitung zur Installation von WPForms.
Nachdem Sie das Plugin installiert haben, fahren Sie mit dem nächsten Schritt fort, in dem wir Ihnen zeigen, wie Sie ein Formular erstellen.
Neues Formular erstellen
Gehen Sie in Ihrem WordPress-Dashboard zu WPForms » Neu hinzufügen.
Das Formular-Setup-Fenster wird in wenigen Sekunden geöffnet. Hier können Sie Ihrem Formular einen Namen geben und aus einer vorgefertigten Vorlage auswählen, um schnell loszulegen.
Wir verwenden für dieses Tutorial das einfache Kontaktformular, indem wir den Cursor darüber bewegen und auf Vorlage verwenden klicken.
Die Formularvorlage wird nun auf Ihrem Bildschirm geladen, wobei alle erforderlichen Felder bereits hinzugefügt wurden.
Wir können dieses Formular ganz einfach anpassen, um ein Bild hinzuzufügen, wie im nächsten Schritt gezeigt.
Bild in Ihr WordPress-Formular einfügen
Um ein Bild einzufügen, müssen Sie das Feld „Inhalt“ zu Ihrem Formular hinzufügen. Ziehen Sie das Feld „Inhalt“ einfach aus dem linken Bereich in den rechten.
Wir werden oben im Formular ein Logo hinzufügen, daher platzieren wir das Feld „Inhalt“ ganz oben.
Nachdem Sie das Feld hinzugefügt haben, klicken Sie darauf, um seine Feldoptionen im linken Bereich zu öffnen, mit denen Sie den visuellen Editor zum Einfügen von Inhalten verwenden können.
Klicken Sie als Nächstes auf die Schaltfläche Medien hinzufügen direkt über dem visuellen Editor.
Klicken Sie nun auf die Schaltfläche Dateien auswählen.
Sie können nun eine beliebige Bilddatei auswählen, um sie hochzuladen und in Ihr Formular einzufügen. Sobald sie hochgeladen ist, können Sie Details wie den Alternativtext und den Titel eingeben. Klicken Sie dann unten auf die Schaltfläche In Formular einfügen.
Dadurch wird das Bild in Ihr Formular eingefügt. Das Bild wird nicht sofort im Formular angezeigt, obwohl Sie es im Editor auf der linken Seite sehen können.
Sie müssen lediglich die Schaltfläche Vorschau aktualisieren unter dem visuellen Editor drücken, um das Bild im Formular zu sehen.
So sollte es aussehen, nachdem Sie das Bild mit dem Feld „Inhalt“ hinzugefügt und die Vorschau aktualisiert haben.
Sie können auch auf zusätzliche Formatierungsoptionen zugreifen, indem Sie unten rechts im Editor auf die Schaltfläche Editor erweitern klicken.
Sie können beispielsweise die Ausrichtung Ihres Inhalts anpassen, eine Aufzählungsliste für Text hinzufügen und vieles mehr.
Ausgezeichnet! Nachdem Sie Ihrem Formular ein Bild hinzugefügt haben, klicken Sie auf die Schaltfläche Speichern oben rechts im Formular-Builder.
Alles, was jetzt noch zu tun ist, ist, dieses Formular auf Ihrer Website zu veröffentlichen, damit Ihre Besucher darauf zugreifen können.
Veröffentlichen Sie Ihr Online-Formular
WPForms verfügt über einen einfachen Einbettungsassistenten, der die Veröffentlichung zu einem schnellen und unkomplizierten Prozess macht.
Klicken Sie zunächst auf die Schaltfläche Einbetten oben im Formular-Generator.
Anschließend wird ein modales Fenster angezeigt, in dem Sie aufgefordert werden, auszuwählen, wo Sie Ihr Formular einbetten möchten. Wir wählen Neue Seite erstellen , um ein Formular auf einer neuen Seite einzubetten.
Geben Sie danach einen Namen für Ihre Seite ein und klicken Sie auf Los geht’s.
Der Assistent führt Sie zum WordPress-Editor, wo Sie Ihr eingebettetes Formular finden.
Wenn Sie bereit sind, klicken Sie oben rechts auf die Schaltfläche Veröffentlichen, um Ihr Formular live zu schalten.
Und das ist alles! Sie haben nun erfolgreich ein Formular mit einem hinzugefügten Bild erstellt.
Es gibt noch viel mehr, was Sie mit WPForms tun können, wenn es um das Hinzufügen von Grafiken geht. Wir zeigen Ihnen als Nächstes ein paar zusätzliche Tipps.
Bonus: Weitere Möglichkeiten, Bilder in WordPress-Formularen zu verwenden
Die Flexibilität von WPForms ermöglicht viele interessante Dinge, wenn es darum geht, Medien zu Ihren Formularen hinzuzufügen.
Wir zeigen Ihnen ein paar Tipps, die Ihnen helfen können, Ihre Formulare noch besser aussehen zu lassen, sowie alternative Methoden zum Einfügen von Bildern.
Bilder zu ausgewählten Feldern hinzufügen
Im obigen Beispiel haben wir Ihnen gezeigt, wie Sie ein Bild als Inhalt in Ihr Formular einfügen.
Aber wussten Sie, dass Sie auch Bilder verwenden können, um auswählbare Elemente in Feldern wie Kontrollkästchen und Mehrfachauswahl anzuzeigen?
Um Bilder für Optionen in einem Feld für Mehrfachauswahl zu verwenden, können Sie in den Feldoptionen auf die Umschaltfläche Bild-Auswahlen verwenden klicken.
Nachdem Sie Bild-Auswahlen aktiviert haben, können Sie für jede Auswahl in Ihrem Feld Bilder hochladen. Klicken Sie auf die Schaltfläche Bild hochladen, um einfach ein beliebiges Bild hinzuzufügen.
Sie können dies für jede Auswahl wiederholen, um ein einfaches Formular in etwas visuell Ansprechenderes zu verwandeln.
Tatsächlich sind Sie nicht nur auf das Hochladen benutzerdefinierter Bilder für Auswahlen beschränkt. WPForms bietet Ihnen auch Zugriff auf eine riesige Bibliothek vorab geladener Symbole, die Sie Ihren Auswahlen hinzufügen können.
Um Symbole für Ihre Auswahlen zu verwenden, klicken Sie einfach auf die Umschaltfläche Symbol-Auswahlen verwenden.
Probieren Sie es aus. Es ist einfach und Ihre Besucher werden es genießen, Ihre Formulare auszufüllen, wenn visuelle Elemente ihre Aufmerksamkeit erregen!
Bilder mit HTML-Code hinzufügen
Zuvor haben wir Ihnen gezeigt, wie Sie mit dem Inhaltsfeld schnell ein Bild in Ihr WordPress-Formular einfügen können.
Wenn Sie es jedoch vorziehen, direkt mit HTML-Code zu arbeiten, können Sie Bilder auch auf eine technisch anspruchsvollere Weise einfügen.
Damit dies funktioniert, muss das Bild, das Sie zu Ihrem Formular hinzufügen möchten, bereits in Ihrer Mediathek hochgeladen sein und seine URL Ihnen bekannt sein.
Wenn nicht, können Sie eines hochladen und die URL jetzt abrufen. Klicken Sie in Ihrem WordPress-Dashboard auf Medien » Neue Medien hinzufügen.
Dadurch wird der Upload-Bereich der Mediathek geöffnet. Klicken Sie auf die Schaltfläche Dateien auswählen, um fortzufahren.
Wählen Sie nun die Datei aus, die Sie von Ihrem Computer hochladen möchten. Wenn die Datei hochgeladen ist, wird ihre URL angezeigt.
Klicken Sie auf die Schaltfläche URL in die Zwischenablage kopieren, um den Link zu erhalten.
Öffnen Sie nun ein vorhandenes Formular, zu dem Sie das Bild hinzufügen möchten, oder erstellen Sie ein neues, wie wir es bereits in diesem Tutorial gezeigt haben.
Sie können ein vorhandenes Formular bearbeiten, indem Sie zu WPForms » Alle Formulare gehen.
Wählen Sie nun das Formular aus, in das Sie Ihr Bild einfügen möchten, auf der Seite Formularübersicht.
Ziehen Sie im Formular-Generator das HTML-Feld per Drag & Drop in den rechten Bereich, wo sich Ihr Formular befindet.
Nachdem Sie dies getan haben, klicken Sie auf das HTML-Feld, das Sie gerade in Ihr Formular eingefügt haben, um seine Feldoptionen auf der linken Seite zu öffnen.
Sie können die Option „Beschriftung“ verwenden, um dem HTML-Feld einen Namen zu geben, damit Sie es im Formular leichter identifizieren können. Dies wird jedoch nicht im Frontend angezeigt.
Schließlich muss das Bild, das Sie einfügen möchten, in einem img-Tag im Feld „Code“ hinzugefügt werden. Sie können dieses Format verwenden, um Ihr Bild hinzuzufügen: <img src="[fügen Sie hier die Date-URL Ihres Bildes ein]">
Beachten Sie, dass das HTML-Feld im Gegensatz zum Inhaltsfeld den Code nicht laden kann, um die Vorschau im Formular-Generator zu aktualisieren. Sie können jedoch die Schaltfläche Vorschau oben verwenden, um eine Vorschau Ihres gesamten Formulars anzuzeigen.
Dies ist hilfreich, um zu überprüfen, ob der von Ihnen eingegebene HTML-Code korrekt funktioniert.
Sie können das Formular dann veröffentlichen, indem Sie die gleichen Schritte ausführen, die wir oben beschrieben haben.
Und das ist alles! Sie können jetzt ein Bild zu Ihrer WordPress-Seite hinzufügen, egal ob Sie es zu einem Beitrag oder einem Formular benötigen.
Erstellen Sie jetzt Ihr WordPress-Bildformular
Akzeptieren Sie als Nächstes vom Benutzer eingereichte Bilder
WPForms erleichtert es Ihren Besuchern auch, eigene Bilder zu WordPress hochzuladen. Schauen Sie sich das als Nächstes an.
Suchen Sie nach weiteren Möglichkeiten, Ihre Formulare zu gestalten und zu stylen? Schauen Sie sich diesen Artikel über das Styling von WPForms mit dem Block-Editor an. Diese Anleitung zeigt Ihnen, wie Sie Ihr Formular wie ein Profi mit einfachen Steuerelementen und ganz ohne Code gestalten!
Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formular-Builder-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.
Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und X für weitere kostenlose WordPress-Tutorials und Anleitungen.
Hallo.
Wenn ich ein Bild in mein Formular einfügen möchte, passt es sich nicht an die Größe des Formulars an, es ist immer zu groß.
Wie kann ich es „responsiver“ machen?
Danke!
Hallo Guillaume – Entschuldigen Sie die Schwierigkeiten damit! Um Bilder responsiv zu machen, könnten Sie Bildgrößen in % hinzufügen und die Größe anpassen, wie z.B.
Um sicherzustellen, dass wir Ihre Frage so gründlich wie möglich beantworten, könnten Sie sich bitte mit weiteren Details darüber, was Sie tun möchten, an unser Support-Team wenden?
Danke! 🙂
Wie können Benutzer ihr Bild in das Formular hochladen? Von ihrem Computer oder mit einer Webcam?
Hallo Sohaib – Gute Frage! Sie können das Bild zuerst auf Ihrem Computerspeicher speichern (einschließlich der mit einer Webcam aufgenommenen Bilder) und dann die Anweisungen aus Schritt 2 befolgen, indem Sie sich auf diesen Artikel beziehen.
Ich hoffe, das hilft! 🙂
Wie können meine KUNDEN ihre Bilder über ein von mir erstelltes Formular auf meine Website stellen, z. B. um ein Auto oder eine Ausrüstung zu verkaufen?
Hallo Carl! Der einfachste Weg, Ihren Kunden zu ermöglichen, ihre eigenen Anzeigen zu erstellen, wäre über unser Post Submissions Addon, insbesondere mit unserem kürzlich veröffentlichten Rich Text Field Editor :)
Mit diesen beiden kombiniert können Ihre Benutzer ihre Anzeige nach Belieben gestalten, das Formular absenden und es würde direkt auf Ihrer Website hinzugefügt werden (oder zur Genehmigung ausstehen).
Ich hoffe, das klärt die Sache 🙂 Wenn Sie weitere Fragen dazu haben, kontaktieren Sie uns bitte, wenn Sie ein aktives Abonnement haben. Wenn nicht, zögern Sie nicht, uns Fragen in unseren Support-Foren zu stellen.
Wie kann ich das Widget-Formular-Suchlogo ändern?
Hallo Cory! Entschuldigen Sie, aber ich bin mir nicht sicher, was Sie meinen.
Wenn Sie Zeit haben, wenden Sie sich bitte hier an unser Team, wenn Sie ein aktives Abonnement haben.
Wenn nicht, zögern Sie nicht, sich an unsere Support-Foren zu wenden.
Danke!
Ich habe das Bild mit HTML in mein Formular eingefügt, aber es wird nicht im E-Mail-Formular abgerufen.
Ich habe ein paar Bilder in die Kopfzeile eingefügt, damit ich den Formulareintrag zusammen mit den Logos oben ausdrucken kann, aber ohne Erfolg.
Hallo Aman!
Vielen Dank für Ihre Kontaktaufnahme!
Der Grund, warum wir keine HTML-Felder, Abschnittstrennfelder oder Beschreibungen (die beiden letzteren sind im Wesentlichen HTML-Felder) weitergeben, ist, dass diese Bereiche volles HTML zulassen, was bedeutet, dass sie häufig Dinge enthalten, die E-Mail-Benachrichtigungen unterbrechen oder Zustellungsprobleme verursachen.
Wir haben jedoch einen Filter, mit dem Sie Nicht-Eingabefelder in Ihre E-Mails aufnehmen können. Hier ist unser Tutorial mit allen Details und dem benötigten Code: https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/.
Wir haben auch ein hilfreiches Tutorial mit Details, wie Sie benutzerdefinierten Code wie diesen zu Ihrer Website hinzufügen können: https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ (für eine besonders einfache Option empfehle ich die Option Code Snippets Plugin).
Oder wenn Sie PHP vermeiden möchten, könnten Sie erwägen, den Text Ihrer Benachrichtigungen anzupassen, um den benötigten Text einzufügen. Sie könnten dies tun, indem Sie den Benachrichtigungsinhalt auf eine individuellere Weise mit normalem Text, HTML und Smart Tags erstellen.
Diese Option bietet wahrscheinlich die meiste Kontrolle, da Sie genau auswählen können, welche Details in Ihre Benachrichtigung aufgenommen werden sollen.
Ich entschuldige mich, wenn dies nicht ganz das ist, wonach Sie gesucht haben, aber hoffentlich funktioniert eine dieser Ideen für Sie. Könnten Sie mir bitte mitteilen, ob Sie weitere Fragen haben?
Danke!
Kann ein Benutzer die Kamera seines Geräts verwenden, um ein Bild aufzunehmen und es in einem Schritt hochzuladen, anstatt zuerst ein Bild aufzunehmen, es auf seinem Desktop zu speichern und dann das Bild hochzuladen? Idealerweise möchte ich, dass der Benutzer ein Bild aus einer Bibliothek hochlädt, wenn er ein vorhandenes Bild hat, aber wenn er es bevorzugt, kann er einfach ein Bild von der Kamera aufnehmen und hochladen. Gibt es dafür eine Möglichkeit in WPForms?
Hallo Anil! Das Feld für den Datei-Upload kann, wenn es von einem Mobilgerät aus aufgerufen wird, dem Benutzer die Option bieten, ein Bild direkt von seiner Kamera hochzuladen. Es hängt jedoch davon ab, ob das Mobilgerät des Benutzers so konfiguriert wurde, dass der Browser auf seine Kamera zugreifen kann. Wenn nicht, ist die Option nicht verfügbar.
Ich hoffe, das klärt die Sache 🙂 Wenn Sie weitere Fragen dazu haben, kontaktieren Sie uns bitte, wenn Sie ein aktives Abonnement haben. Wenn nicht, zögern Sie nicht, uns Fragen in unseren Support-Foren zu stellen.
Hallo,
Behandelt WP-Forms Benutzerregistrierungsdaten genauso wie WooCommerce? Wenn ein Benutzer meinen E-Commerce-Shop verlässt und ein Konto registriert, werden seine Daten dupliziert, einmal in WooCommerce, einmal in der WP Forms-Registrierung?
Hallo Ann, unser User Registration Addon bietet keine Schnittstelle zur Verwaltung oder Bearbeitung bestehender Benutzer und konzentriert sich ausschließlich auf den Prozess der Kontoerstellung. Wir unterstützen jedoch keine Integration mit WooCommerce.
Nichtsdestotrotz, um sicherzustellen, dass wir Ihre Frage so gründlich wie möglich beantworten und Verwirrung vermeiden, könnten Sie bitte unser Team kontaktieren?
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support. Bitte reichen Sie daher ein Support-Ticket ein. Andernfalls bieten wir begrenzten kostenlosen Support im WPForms Lite WordPress.org Support-Forum an.
Danke.
Unterstützt WPForms Gib-Medien? Oder das Einbetten eines Shortcodes von einem 3D-Viewer-Plugin?
Hallo Melissa – Wir helfen Ihnen gerne weiter! Wenn Sie Zeit haben, schreiben Sie uns bitte eine Nachricht im Support, damit wir Ihnen helfen können.
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support. Bitte senden Sie ein Support-Ticket.
Andernfalls bieten wir eingeschränkten kostenlosen Support im WPForms Lite WordPress.org Supportforum.
Danke 🙂
Wie füge ich ein Bild auf der Submit-Schaltfläche von WPForms in WordPress hinzu?
Bisher zeigen Sie nur, wie man Icons hinzufügt. Aber ich habe ein benutzerdefiniertes Bild, das ich hinzufügen möchte.
Hallo Aser – Um ein Bild zur Submit-Schaltfläche hinzuzufügen, können Sie folgende CSS verwenden:
.wpforms-submit-container .wpforms-submit { background-image: url('bild_url'); background-size: cover; padding-left: 40px; }Und falls es hilft, hier ist ein detailliertes Tutorial, wie Sie benutzerdefiniertes CSS wie dieses zu Ihrer Website hinzufügen.
Mein Code sieht ungefähr so aus:
.wpforms-submit-container .wpforms-submit { background-image: url(‘https://lhamosplane.world/wp-content/uploads/2023/07/th-1787430678.B.png’); background-size: cover; padding-left: 40px; }
Die URL wird jedoch nicht übernommen, d. h. das Bild wird nicht angezeigt. Ich bin mir nicht sicher, ob Sie verstehen, was ich möchte, aber ich möchte, dass ein .png-Bild neben dem Text „Submit“ innerhalb der Submit-Schaltfläche links sichtbar ist.
Ich habe diesen Code aus Ihrem Tutorial gefunden, der Fantastique-Icons anzeigt und fast das tut, was ich möchte, aber ich kann keine URL für mein Wunschbild hinzufügen.
.wpforms-form button[type=submit]:hover { background-color: #ac2428 !important; }
.wpforms-form button[type=submit]:before { content: ‘\f1d8’; /* Unicode für Icon, Anführungszeichen und Schrägstrich beibehalten */ margin-right: 10px !important; /* Abstand zwischen Icon und Schaltflächentext */ }
Hallo Aser – Wir helfen Ihnen gerne weiter! Wenn Sie Zeit haben, schreiben Sie uns bitte eine Nachricht im Support, damit wir Ihnen helfen können.
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support. Bitte senden Sie ein Support-Ticket.
Andernfalls bieten wir eingeschränkten kostenlosen Support im WPForms Lite WordPress.org Supportforum.
Danke 🙂
Wie richte ich ein Bild links von einem Formular aus?
Hallo JM – Wenn Sie ein Bild links und Felder rechts anzeigen möchten, können Sie das Layout-Feld verwenden.
Hallo, ich habe eine Frage, ob ich Ihr Modul kaufen kann, um das benötigte Formular zu erstellen. Die erste Zeile enthält 6 Radio-Buttons, darüber befindet sich ein Bild (also 6 Bilder), die aber keine „Labels“ sind. Wenn man auf ein Bild klickt, öffnet sich ein Popup, das das größere Bild und erklärenden Text anzeigt. Ist das mit WP-Forms möglich? Vielen Dank im Voraus
Hallo Françoise – Wir helfen Ihnen gerne weiter! Wenn Sie Zeit haben, reichen Sie bitte ein Support-Ticket ein, damit wir Ihnen helfen können.