Möchten Sie herausfinden, wie Sie dank Hotspots in WordPress ein interaktives Bild erstellen können? Elementor und wesentliche Add-ons?
Das Bild ist ein hervorragendes Werkzeug zur Übermittlung von Informationen. Jeder weiß, dass Informationen, die durch das Bild vermittelt werden – und die visuelle Form als Ganzes – leichter zu verstehen und zu merken sind.
Im Kontext des Webs können Sie viele Bildformate verwenden. Von einer Infografik, einem Foto, einem Comicstrip, einer Illustration, etc….
Wenn Sie Webinhalte wie die Anatomie von etwas, Wahrzeichen der Stadt, Karten oder Wegbeschreibungen erstellen möchten, kann die Imagebildung mit Hotspots eine großartige Idee sein.
Die Idee dieser Art von Inhalten ist es, ein interaktives Bild bereitzustellen, das es Ihren Lesern leicht macht, die von Ihnen übermittelten Informationen zu verstehen. Sie können Hotspots zu einem Bild hinzufügen, das einen Tooltip für jeden Hotspot enthält. Hier ist ein Beispiel.
Wenn Sie eine Webseite Basierend auf WordPress ist das Erstellen eines Bildes mit Hotspots nicht allzu schwer. Sie können eine mit dem Modul erstellen Wesentliche Addons .
Was ist das Essential Addons-Modul?
Essential Addons ist ein Add-on zuElementor. Dies ist einer der beliebtesten Mods mit über 2 Millionen Downloads. Dieses Add-on fügt Ihrem Browser rund 60 zusätzliche Widgets hinzu Elementor.
Eines der von Essential Addons angebotenen Widgets ist EA-Image-Hotspots mit denen Sie ein interaktives Bild erstellen können. Essential Addons selbst ist ein Freemium-Addon, aber Sie müssen die Pro-Version verwenden, um Bilder mit Hotspots zu erstellen, da das EA Image Hotspots-Widget nur in dieser Version verfügbar ist.
So verwenden Sie das Essential Addons-Modul, um Bilder mit Hotspots zu erstellen
Zuerst müssen Sie die Module Elementor und Essential Addons auf Ihrem WordPress installieren. Sie können die Pro-Version von Essential Addons darauf herunterladen Webseite offiziell. Während Sie für Elementor die kostenlose Version verwenden können.
Siehe auch: So verwenden Sie ein globales Widget in Elementor
Die kostenlose Version von Elementor ist im Verzeichnis der verfügbar WordPress Plugin Sie können es also installieren, indem Sie „elementor“ in das Suchfeld des Plug-in-Installationsprogramms eingeben (Plugins – > Hinzufügen).
Sobald Elementor und Essential Addons installiert sind, erstellen Sie eine neue Seite (Seiten – > Hinzufügen) oder ein neues Element (Artikel – > Hinzufügen) und bearbeiten Sie es mit Elementor. Nachdem Sie auf die Schaltfläche geklickt haben, werden Sie zum Elementor-Editor weitergeleitet Bearbeiten mit Elementor.
Bevor Sie die Bilder mit Hotspots erstellen, können Sie zunächst das Layout festlegen. Öffnen Sie dazu das Seiteneinstellungsfenster, indem Sie auf das Zahnradsymbol in der unteren linken Ecke des linken Fensters klicken.
Lesen Sie auch: So verwenden Sie das Beitrags-Widget von Elementor
Legen Sie das Layout im Dropdown-Menü fest Layout
Füge einen neuen Abschnitt hinzu, indem du auf das Plus-Symbol im Bearbeitungsfeld klickst, und füge das EA Image Hotspots-Widget aus dem linken Bereich hinzu.
Fügen Sie Ihr Bild hinzu, indem Sie auf die Bildauswahl im linken Bereich klicken.
offene Option Hotspots auf der linken Seite, um die Zugangspunkte hinzuzufügen. Standardmäßig enthält das EA Image Hotspots-Widget einen Hotspot. Sie können auf den Standardzugriffspunkt klicken, um seinen Inhalt zu bearbeiten.
Standardmäßig ist der Zugangspunkttyp auf eingestellt Symbol. Sie können es zu ändern Text oder verlassen Vide wenn Sie es wünschen.
Klicken Sie auf die Registerkarte POSITION um die Position des Zugangspunkts einzustellen. Stellen Sie die X- und Y-Positionen ein, indem Sie die Schieberegler ziehen.
Klicken Sie auf die Registerkarte WERKZEUGTIPP um den Tooltip-Inhalt hinzuzufügen. Aktivieren Sie den Tooltip und fügen Sie Ihre Inhalte im Editor hinzu. Sie können auch die Position des Tooltips festlegen, entweder oben, unten, links oder rechts.
Um weitere Hotspots hinzuzufügen, klicken Sie einfach auf die Schaltfläche EIN ELEMENT HINZUFÜGEN im Abschnitt Hotspots und wiederholen Sie die obigen Schritte, um die Hotspot-Position, den QuickInfo-Inhalt und die QuickInfo-Position festzulegen.
Öffnen Sie den Abschnitt Tooltip-Einstellungen um die Größe der Tooltips und den Animationseffekt einzustellen.
Gehen Sie nun zur Registerkarte Design zum Stylen Ihrer Hotspots sowie Tooltips. Öffnen Sie zuerst die Option Bild um die Bildgröße einzustellen.
Abschnitt öffnen Hotspot um Hotpots anzupassen. Sie können Größe, Symbolfarbe (oder Text, je nach ausgewähltem Hotspot-Typ), Hintergrundfarbe, Randradius usw. festlegen.
Entdecken Sie auch: So fügen Sie verwandte Elemente in Elementor hinzu
Öffnen Sie den Abschnitt Tooltip QuickInfos anpassen. Sie können Hintergrundfarbe, Textfarbe, Typografie (Schriftgröße, Schriftfamilie, Schriftstil) und Breite festlegen.
Bisher haben Sie erfolgreich Bilder mit Hotspots erstellt. Sie können mit dem linken Bedienfeld herumspielen, um Ihre Bilder mit Hotspots anzupassen, bis Sie mit dem Ergebnis zufrieden sind. Sobald Sie fertig sind, können Sie auf die Schaltfläche klicken VERÖFFENTLICHUNG um Ihre Seite zu veröffentlichen.
Fügen Sie Bilder mit Hotspots zu Gutenberg hinzu
Wenn Sie Bilder mit Hotspots als Unterstützungsmaterial für den Artikel hinzufügen möchten, an dem Sie gerade arbeiten, können Sie ihn mithilfe des Plugins in Gutenberg (den Standard-WordPress-Editor) integrieren Elementor-Blöcke für Gutenberg. Mit diesem Plugin können Sie eine Elementor-Vorlage als Gutenberg-Block verwenden.
Um die Bilder mit Hotspots oben als Elementor-Abschnittsvorlage zu speichern, klicken Sie mit der rechten Maustaste auf den Abschnittsgriff und wählen Sie aus Als Vorlage speichern.
Gib deinem Modell einen Namen und klicke auf den Button AUFZEICHNUNG.
Öffnen Sie den Artikel, in dem Sie Bilder mit Hotspots hinzufügen möchten. Neuen Block hinzufügen, auswählen Elementor-Bibliothek und wählen Sie die soeben erstellte Bildvorlage mit Hotspots aus.
Holen Sie sich Elementor Pro jetzt!!!
Zusammenfassung
Hier ! Das ist es für diesen Artikel, der dir zeigt, wie es geht Erstellen Sie dank Elementor und Essential Addons ein interaktives Bild mit Hotspots in WordPress. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, teilen Sie es ihnen im mit commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
