{"id":367273,"date":"2023-05-16T16:00:00","date_gmt":"2023-05-16T13:00:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367273"},"modified":"2022-10-12T09:28:25","modified_gmt":"2022-10-12T06:28:25","slug":"so-fuegen-sie-ganz-einfach-bild-hotspots-in-wordpress-hinzu","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-fuegen-sie-ganz-einfach-bild-hotspots-in-wordpress-hinzu\/","title":{"rendered":"So f\u00fcgen Sie ganz einfach Bild-Hotspots in WordPress hinzu"},"content":{"rendered":"\n

Menschen sind visuelle Wesen und es ist schwer, sich ein m\u00e4chtigeres Werkzeug als ein Bild vorzustellen, um die Aufmerksamkeit der Gruppe Ihrer Zielgruppe zu erregen. Aber es k\u00f6nnte ein Element geben, das noch verlockender ist als ein sch\u00f6nes Bild \u2013 ein Bild-Hotspot f\u00fcr WordPress. Ein Bild-Hotspot ist ein Bildtyp mit interaktiven Hotspots<\/strong>. Wenn der Benutzer den Mauszeiger \u00fcber einen Hotspot bewegt, wird ein Popup angezeigt, das fast alles enthalten kann, was Sie m\u00f6chten.<\/p>\n

Ein Bild-Hotspot auf Ihrer WordPress-Website ist eine sch\u00f6ne M\u00f6glichkeit, mehr Informationen zu einem bestimmten Thema zu teilen<\/strong> \u2013 von kulinarischen Blogs bis hin zu Bau-Websites und allem dazwischen. Sie k\u00f6nnen Zutaten und Ma\u00dfe f\u00fcr Mahlzeiten, verwendete Materialien, Namen und Titel sowie alle anderen Informationen \u00fcber den Inhalt Ihrer Website anzeigen. Das Popup kann Text, ein anderes Bild, ein Video oder einen Link enthalten. Abgesehen davon , dass Sie Ihren Benutzern feiner abgestimmte Details bieten, machen Sie Ihre Website auch interaktiver, indem Sie Bild-Hotspots verwenden<\/strong>.<\/p>\n

Wenn Sie der Meinung sind, dass Sie einen professionellen Webdesigner ben\u00f6tigen, um dieses ausgefallene Element zu Ihrer Website hinzuzuf\u00fcgen, haben wir gro\u00dfartige Neuigkeiten! Sie k\u00f6nnen alles ganz einfach selbst hinzuf\u00fcgen. Bleiben Sie dran, um mehr dar\u00fcber zu erfahren, wie Sie mit einem Plugin einen Bild-Hotspot in WordPress hinzuf\u00fcgen:<\/p>\n<\/p>\n

Warum wir uns f\u00fcr Qi-Addons f\u00fcr Elementor entschieden haben, um Bild-Hotspot-WordPress-Elemente zu erstellen<\/h2>\n

Basierend auf unserer Erfahrung ist Qi Addons for Elementor<\/a> eines der besten Elementor-Addons. Es enth\u00e4lt 60 kostenlose und \u00fcber 40 Premium-Widgets und viele Optionen zum Hinzuf\u00fcgen verschiedener Elemente zur Website mit vielen Anpassungs- und<\/strong> Gestaltungsoptionen, sodass Sie sicher sein k\u00f6nnen, dass sie in das Gesamtdesign Ihrer Website passen. Dar\u00fcber hinaus ist es unglaublich einfach zu bedienen<\/strong> \u2013 deshalb entscheiden wir uns sehr oft f\u00fcr dieses Addon, das die Seite erheblich verbessert.<\/p>\n

Das benutzerdefinierte Widget \u201eBild-Hotspots“<\/a> ist ein Premium-Widget. Sie k\u00f6nnen damit ein bestimmtes Bild hinzuf\u00fcgen und Hotspots mit bestimmten Informationen darauf positionieren<\/strong>. Die Informationen erh\u00e4lt der Nutzer dann, indem er mit der Maus \u00fcber den Hotspot f\u00e4hrt<\/strong>. Das Tolle ist, dass wir die responsiven Positionen bestimmen k\u00f6nnen, damit es nicht passiert, dass auf verschiedenen Ger\u00e4ten der Hotspot nicht mit dem Objekt \u00fcbereinstimmt, auf das er sich bezieht. Auf der Widget-Demo selbst k\u00f6nnen Sie einige konzeptionelle L\u00f6sungen des Autors sehen, die Sie inspirieren k\u00f6nnen.<\/p>\n

So f\u00fcgen Sie ein Bild-Hotspot-WordPress-Element hinzu<\/h2>\n

Sobald Sie Qi-Add-Ons zu Ihrer Website hinzugef\u00fcgt haben, finden Sie das benutzerdefinierte Widget \u201eBild-Hotspots“, indem Sie \u201eBild-Hotspot“ in das Suchfeld eingeben oder einfach die Elemente durchsuchen. Sie werden feststellen, dass alle Qi-Widgets erkennbare rote Symbole haben<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Wenn Sie das Widget an die gew\u00fcnschte Stelle ziehen, sehen Sie einige seiner Standardwerte. Das Widget hat zwei Registerkarten \u2013 Anpassen<\/strong> und Stil<\/strong>, die eine Vielzahl von Optionen zum Anpassen des Elements enthalten, w\u00e4hrend die Registerkarte \u201eErweitert“ eine Elementor-Registerkarte ist, die alle Elemente enth\u00e4lt.<\/p>\n

\"So<\/a><\/p>\n

Beginnen wir mit den allgemeinen Optionen f\u00fcr die benutzerdefinierte Registerkarte. Was Sie hier zuerst bemerken werden, ist, wo das Bild und die drei Elemente eingef\u00fcgt werden<\/strong>. Diese Elemente sind eigentlich Hotspots<\/strong> und ihre Position und Inhaltseinstellungen. Standardm\u00e4\u00dfig gibt es drei Hotspots, aber Sie k\u00f6nnen vorhandene l\u00f6schen oder neue hinzuf\u00fcgen<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Nachdem Sie ein Bild aus einer Bibliothek eingef\u00fcgt oder ein neues hochgeladen haben, ist es an der Zeit, die Hotspots zu positionieren und ihnen Inhalte hinzuzuf\u00fcgen.<\/p>\n

Was den Inhalt betrifft, k\u00f6nnen Sie die Option Titel und Untertitel festlegen, und sobald Sie mit der \u00c4nderung dieser beginnen, werden Sie sehen, wie sich der Inhalt live \u00e4ndert.<\/p>\n

Hier gibt es auch ein Pin-Feld, in dem Sie ein Symbol f\u00fcr Ihren Pin ausw\u00e4hlen k\u00f6nnen<\/strong>, es muss kein Standardsymbol sein. Die Symbolbibliothek steht Ihnen zur Verf\u00fcgung, aber Sie k\u00f6nnen auch Ihr eigenes SVG-Symbol hinzuf\u00fcgen. Zum Beispiel \u2013 SVGREPO<\/a> bietet eine gro\u00dfe Anzahl kostenloser Symbole, die f\u00fcr die kommerzielle Nutzung verf\u00fcgbar sind.<\/p>\n

Was die horizontale Position und die vertikale Position betrifft, dienen sie der Ausrichtung des Hotspots an den Positionen links\/mittig\/rechts und oben\/mittig unten<\/strong>, w\u00e4hrend die Option Versatz es uns tats\u00e4chlich erm\u00f6glicht, die Positionen fein abzustimmen. Wir werden dies nicht im Detail erkl\u00e4ren, da Sie sicher selbst sehen werden, wie sich Ihre Videos bewegen, indem Sie die Offset-Werte \u00e4ndern. Wichtig zu beachten ist, dass Sie beim Anpassen der Hotspots auch die Vorschauseite beachten sollten, die keine Einstellungsleiste hat, damit Sie sehen k\u00f6nnen, wie alles auf einem Bildschirm in voller Gr\u00f6\u00dfe aussieht<\/strong>.<\/p>\n

Zus\u00e4tzlich zum Offset werden Sie Bildschirmsymbole mit dem Titel bemerken, dh klassische Symbole, die darauf hinweisen, dass f\u00fcr diese Einstellung reaktionsschnelle Optionen verf\u00fcgbar sind<\/strong>. Achten Sie darauf, sie auch zu \u00fcberpr\u00fcfen. Es ist am besten, Hotspots nicht ganz am Rand eines Bildes zu platzieren, da Sie sich \u00fcberlegen m\u00fcssen, wie das Bild-Hotspot-Popup auf verschiedenen Bildschirmgr\u00f6\u00dfen aussehen wird<\/strong>.<\/p>\n

Bei der Option Fade Info Position werden die Informationen f\u00fcr den Hotspot-Hoverover angezeigt.<\/p>\n

\"So<\/a><\/p>\n

Dies ist das Ergebnis, nachdem wir das Bild und die Stecknadeln hinzugef\u00fcgt haben. Jetzt k\u00f6nnen wir damit fortfahren, alles so zu gestalten, dass es genau so aussieht, wie wir es m\u00f6chten.<\/p>\n

\"So<\/a><\/p>\n

Anpassen des Hotspot-Bildstils<\/h2>\n

Was die Stilisierung betrifft, so sind eine Vielzahl von Optionen in einem speziellen Stil-Tab kategorisiert, sodass Sie sehen k\u00f6nnen, wo wir Pins, Informationen, Titel und Untertitel stilisieren.<\/p>\n

\"So<\/a><\/p>\n

Wie beim Pin sind alle Einstellungen leicht verst\u00e4ndlich. Sie k\u00f6nnen ein Symbol ausw\u00e4hlen, das f\u00fcr alle Pins<\/strong> gilt, im Gegensatz zu den Einstellungen in den Elementen, bei denen Sie f\u00fcr jedes ein separates ausw\u00e4hlen k\u00f6nnen. Au\u00dferdem k\u00f6nnen Sie die Gr\u00f6\u00dfe und Farbe<\/strong> daf\u00fcr angeben. Sie k\u00f6nnen ein Hintergrundsymbol mit der Pin-Haltergr\u00f6\u00dfe hinzuf\u00fcgen. Unser Hintergrund ist rot und 15px gro\u00df.<\/p>\n

Mit der Option Randradius konnten wir den Hintergrund wie einen Kreis aussehen lassen,<\/strong> da der Radius auf den Hintergrund angewendet wird.<\/p>\n

\"So<\/a><\/p>\n

Info-Stil bezieht sich auf das Erscheinungsbild des Feldes, in dem die Info erscheint<\/strong>. Infoanzeige ist eine Option, die bestimmt, wie der Hover angezeigt wird. Es k\u00f6nnte Fade and Reveal sein, wir haben uns f\u00fcr Reveal entschieden. Feldfarbe und Polsterung k\u00f6nnen Sie hier ebenfalls anpassen. Info Border Radius ist eine besonders interessante Option f\u00fcr das von uns verwendete Reveal-Layout, da der Radius hilft, das Infofeld und das Stecknadelsymbol selbst anzupassen<\/strong>. Wenn wir hier keinen Radius hinzuf\u00fcgen w\u00fcrden, w\u00fcrde das wei\u00dfe Infofeld \u00fcber dem Stift der roten Symbolbox liegen.<\/p>\n

\"So<\/a><\/p>\n

Info Title Style-Optionen beziehen sich auf den Titel, den wir jedem Pin hinzugef\u00fcgt haben. Die Einstellungen hier gelten f\u00fcr alle Titel in diesem Bild-Hotspot<\/strong>. Wahrscheinlich sind Ihnen die Optionen bekannt und auf den ersten Blick k\u00f6nnen Sie den Titel-Tag, die Farbe und die Titeltypologie festlegen. Titelrand unten ist eine wichtige Option, wenn Sie auch Untertitel in Ihrem Infofeld haben, denn dann k\u00f6nnen Sie diesen Rand hinzuf\u00fcgen, um einen Abstand zwischen dem Titel und dem Untertitel zu schaffen.<\/p>\n

\"So<\/a><\/p>\n

Wenn Sie hier einen Untertitel hinzuf\u00fcgen, k\u00f6nnen Sie das Erscheinungsbild des Info-Untertitelstils detaillierter gestalten. In den Typografieoptionen k\u00f6nnen Sie mit verschiedenen Einstellungen spielen.<\/p>\n

\"So<\/a><\/p>\n

So sieht das Endergebnis aus. Text, den wir mit hinzugef\u00fcgt haben Wir haben den Qi-Widget des Abschnittstitels<\/a> verwendet, um den Text hinzuzuf\u00fcgen und diesen Website-Abschnitt f\u00fcr die zuk\u00fcnftigen Benutzer viel interessanter zu machen.<\/p>\n

\"So<\/a><\/p>\n

Abschlie\u00dfend<\/h2>\n

Qi Addons ist ein sehr intuitives Tool, das jeder ganz einfach und ohne Codierung oder andere technische Kenntnisse verwenden kann. F\u00fchlen Sie sich frei, die Optionen dieses Widgets auf eigene Faust zu erkunden, zu experimentieren, zu spielen und den kreativen Prozess zu genie\u00dfen, Ihre Website f\u00fcr Ihre Benutzer attraktiver zu machen. Sollten Sie Fragen haben, z\u00f6gern Sie nicht, uns im Kommentarbereich zu kontaktieren \u2013 wir freuen uns auf Ihre Erfahrungen mit Qi- und Hotspot-Bildern!<\/p>\n

Aufnahmequelle: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Das Hinzuf\u00fcgen von Bild-Hotspots in WordPress ist einfach, wenn Sie ein perfektes Tool haben \u2013 lernen Sie, wie es mit nur wenigen Klicks geht.<\/p>\n","protected":false},"author":1,"featured_media":372289,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[204,567,422],"tags":[845],"class_list":["post-367273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-3","category-wordpress-grundlagen","category-wordpress-plugins","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/367273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=367273"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/367273\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/372289"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=367273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=367273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=367273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}