{"id":367241,"date":"2023-05-16T15:37:00","date_gmt":"2023-05-16T12:37:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367241"},"modified":"2022-10-12T09:07:47","modified_gmt":"2022-10-12T06:07:47","slug":"hur-man-enkelt-lagger-till-image-hotspot-i-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-enkelt-lagger-till-image-hotspot-i-wordpress\/","title":{"rendered":"Hur man enkelt l\u00e4gger till Image Hotspot i WordPress"},"content":{"rendered":"\n

M\u00e4nniskor \u00e4r visuella varelser och det \u00e4r sv\u00e5rt att f\u00f6rest\u00e4lla sig ett kraftfullare verktyg \u00e4n en bild f\u00f6r att locka din m\u00e5lgrupps uppm\u00e4rksamhet. Men det kan finnas ett element som \u00e4r \u00e4nnu mer lockande \u00e4n en vacker bild – en bild-hotspot f\u00f6r WordPress. En bildhotspot \u00e4r en typ av bild med interaktiva hotspots<\/strong>. N\u00e4r anv\u00e4ndaren h\u00e5ller muspekaren \u00f6ver en hotspot visas en popup som kan inneh\u00e5lla n\u00e4stan allt du vill.<\/p>\n

En bild-hotspot p\u00e5 din WordPress-webbplats \u00e4r ett vackert s\u00e4tt att dela mer information om ett givet \u00e4mne<\/strong> \u2013 fr\u00e5n kulinariska bloggar till byggwebbplatser och allt d\u00e4remellan. Du kan visa m\u00e5ltidsingredienser och m\u00e5tt, typer av material som anv\u00e4nds, namn och titlar samt all annan information om din webbplats inneh\u00e5ll. Popup-f\u00f6nstret kan inneh\u00e5lla text, en annan, bild, en video eller en l\u00e4nk. F\u00f6rutom att ge dina anv\u00e4ndare mer finjusterade detaljer, g\u00f6r du ocks\u00e5 din webbplats mer interaktiv genom att anv\u00e4nda bildhotspots<\/strong>.<\/p>\n

Om du tror att du beh\u00f6ver en professionell webbdesigner f\u00f6r att l\u00e4gga till det h\u00e4r snygga elementet p\u00e5 din webbplats, har vi fantastiska nyheter! Du kan enkelt l\u00e4gga till allt sj\u00e4lv. H\u00e5ll \u00f6gonen \u00f6ppna f\u00f6r att l\u00e4sa mer om hur du l\u00e4gger till en bildhotspot i WordPress med ett plugin:<\/p>\n<\/p>\n

Varf\u00f6r vi valde Qi-till\u00e4gg f\u00f6r Elementor f\u00f6r att skapa bildhotspot WordPress Elemen<\/h2>\n

Baserat p\u00e5 v\u00e5r erfarenhet \u00e4r Qi Addons f\u00f6r Elementor<\/a> en av de b\u00e4sta Elementor-till\u00e4ggen. Den inneh\u00e5ller 60 gratis och 40+ premium-widgets och m\u00e5nga alternativ f\u00f6r att l\u00e4gga till olika element till webbplatsen med massor av anpassnings- och stilalternativ<\/strong> s\u00e5 att du kan vara s\u00e4ker p\u00e5 att de passar in i din webbplats \u00f6vergripande design. Ut\u00f6ver det hela \u00e4r det otroligt enkelt att anv\u00e4nda<\/strong> \u2013 det \u00e4r d\u00e4rf\u00f6r vi v\u00e4ldigt ofta v\u00e4ljer detta till\u00e4gg, vilket avsev\u00e4rt f\u00f6rb\u00e4ttrar webbplatsen.<\/p>\n

Image Hotspots anpassad widget<\/a> \u00e4r en premiumwidget. Det l\u00e5ter dig l\u00e4gga till en specifik bild och placera hotspots med specifik information om dem<\/strong>. Anv\u00e4ndaren f\u00e5r sedan informationen genom att h\u00e5lla muspekaren \u00f6ver hotspot<\/strong>. Det fantastiska \u00e4r att vi kan best\u00e4mma de responsiva positionerna s\u00e5 att det inte h\u00e4nder att p\u00e5 olika enheter inte st\u00e4mmer \u00f6verens med hotspoten med objektet som den refererar till. P\u00e5 sj\u00e4lva widgetdemon kan du se n\u00e5gra konceptuella l\u00f6sningar av f\u00f6rfattaren som kan inspirera dig.<\/p>\n

Hur man l\u00e4gger till WordPress-element f\u00f6r bildhotspot<\/h2>\n

N\u00e4r du har lagt till Qi-till\u00e4gg p\u00e5 din webbplats, hitta den anpassade widgeten Image Hotspots genom att skriva in "image hotspot" i s\u00f6kf\u00e4ltet, eller helt enkelt genom att bl\u00e4ddra bland elementen. Du kommer att m\u00e4rka att alla Qi-widgets har igenk\u00e4nnbara r\u00f6da ikoner<\/strong>.<\/p>\n

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

N\u00e4r du drar widgeten till \u00f6nskad plats kommer du att se n\u00e5gra av dess standardv\u00e4rden. Widget har tv\u00e5 flikar \u2013 Anpassa<\/strong> och Stil<\/strong> som inneh\u00e5ller en m\u00e4ngd olika alternativ f\u00f6r att justera elementet, medan fliken Avancerat \u00e4r en Elementor-flik som kommer med alla element.<\/p>\n

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

L\u00e5t oss b\u00f6rja med de allm\u00e4nna alternativen f\u00f6r den anpassade fliken. Det du f\u00f6rst kommer att m\u00e4rka h\u00e4r \u00e4r var bilden och de tre objekten \u00e4r infogade<\/strong>. Dessa objekt \u00e4r faktiskt hotspots<\/strong> och deras position och inneh\u00e5llsinst\u00e4llningar. Som standard finns det tre hotspots, men du kan ta bort befintliga eller l\u00e4gga till nya<\/strong>.<\/p>\n

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

N\u00e4r du har infogat en bild, fr\u00e5n ett bibliotek eller genom att ladda upp en ny, \u00e4r det dags att placera hotspots och l\u00e4gga till inneh\u00e5ll till dem.<\/p>\n

N\u00e4r det g\u00e4ller inneh\u00e5llet har du alternativet Titel och undertext att st\u00e4lla in och s\u00e5 snart du b\u00f6rjar \u00e4ndra dem kommer du att se hur inneh\u00e5llet f\u00f6r\u00e4ndras live.<\/p>\n

Det finns \u00e4ven ett pinf\u00e4lt h\u00e4r d\u00e4r du kan v\u00e4lja en ikon<\/strong> f\u00f6r din pin, det beh\u00f6ver inte vara en standard. Ikonbiblioteket st\u00e5r till ditt f\u00f6rfogande, men du kan ocks\u00e5 l\u00e4gga till din egen SVG-ikon. Till exempel \u2013 SVGREPO<\/a> erbjuder ett stort antal gratis ikoner som \u00e4r tillg\u00e4ngliga f\u00f6r kommersiellt bruk.<\/p>\n

N\u00e4r det g\u00e4ller den horisontella positionen och den vertikala positionen tj\u00e4nar de till hotspots orientering p\u00e5 v\u00e4nster\/mitten\/h\u00f6ger och \u00f6vre\/mitten nedre positionerna<\/strong>, medan alternativet Offset faktiskt till\u00e5ter oss att finjustera positionerna. Vi kommer inte att f\u00f6rklara detta i detalj eftersom vi \u00e4r s\u00e4kra p\u00e5 att du sj\u00e4lv kommer att se hur dina videor r\u00f6r sig genom att \u00e4ndra offsetv\u00e4rdena. Det som \u00e4r viktigt att t\u00e4nka p\u00e5 \u00e4r att n\u00e4r du anpassar hotspots b\u00f6r du ocks\u00e5 observera f\u00f6rhandsgranskningssidan som inte har ett inst\u00e4llningsf\u00e4lt, s\u00e5 att du kan se hur allt ser ut p\u00e5 en sk\u00e4rm i full storlek<\/strong>.<\/p>\n

Ut\u00f6ver f\u00f6rskjutningen kommer du ocks\u00e5 att m\u00e4rka sk\u00e4rmikoner med titeln, dvs klassiska ikoner som indikerar att responsiva alternativ \u00e4r tillg\u00e4ngliga f\u00f6r denna inst\u00e4llning<\/strong>. Se till att kolla in dem ocks\u00e5. Det \u00e4r b\u00e4st att inte placera hotspots l\u00e4ngs kanten av en bild eftersom du m\u00e5ste t\u00e4nka p\u00e5 hur popup-f\u00f6nstret f\u00f6r bildhotspot kommer att se ut p\u00e5 olika sk\u00e4rmstorlekar<\/strong>.<\/p>\n

Alternativet Tona infoposition \u00e4r d\u00e4r informationen f\u00f6r den hotspot som sv\u00e4var \u00f6ver visas.<\/p>\n

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

Detta \u00e4r resultatet efter att vi lagt till bilden och n\u00e5larna, nu kan vi forts\u00e4tta att styla det hela s\u00e5 att det ser ut precis som vi vill.<\/p>\n

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

Justera Hotspot-bildstilen<\/h2>\n

N\u00e4r det g\u00e4ller stilisering \u00e4r en m\u00e4ngd olika alternativ kategoriserade inom en speciell stilflik, s\u00e5 att du kan se var vi stiliserar Pins, Info, Title och Subtitle.<\/p>\n

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

N\u00e4r det g\u00e4ller stiftet \u00e4r alla inst\u00e4llningar l\u00e4tta att f\u00f6rst\u00e5. Du kan v\u00e4lja en ikon som kommer att g\u00e4lla f\u00f6r alla stift<\/strong>, till skillnad fr\u00e5n inst\u00e4llningarna i objekten d\u00e4r du kan v\u00e4lja en separat f\u00f6r varje. Du kan ocks\u00e5 ange storlek och f\u00e4rg<\/strong> f\u00f6r den. Du kan l\u00e4gga till en bakgrundsikon med storleken p\u00e5 stifth\u00e5llaren. V\u00e5r bakgrund \u00e4r r\u00f6d och 15px storlek.<\/p>\n

Alternativet Border radie till\u00e4t oss att f\u00e5 bakgrunden att se ut som en cirkel<\/strong> eftersom radien appliceras p\u00e5 bakgrunden.<\/p>\n

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

Infostil h\u00e4nvisar till utseendet p\u00e5 f\u00e4ltet d\u00e4r informationen visas<\/strong>. Infovisning \u00e4r ett alternativ som best\u00e4mmer hur hovringen visas. Det kan vara Fade and Reveal, vi valde Reveal. F\u00e4ltf\u00e4rg och stoppning \u00e4r vad du ocks\u00e5 kan anpassa h\u00e4r. Info Border Radius \u00e4r ett s\u00e4rskilt intressant alternativ f\u00f6r avsl\u00f6jningslayouten vi anv\u00e4nde eftersom radien hj\u00e4lper till att passa infof\u00e4ltet och sj\u00e4lva stiftikonen<\/strong>. Om vi \u200b\u200binte lade till en radie h\u00e4r skulle det vita infof\u00e4ltet hamna ovanf\u00f6r stiftet p\u00e5 den r\u00f6da ikonrutan.<\/p>\n

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

Info Titelstilsalternativ h\u00e4nvisar till titeln vi lagt till varje n\u00e5l. Inst\u00e4llningarna h\u00e4r kommer att g\u00e4lla f\u00f6r alla titlar i denna bildhotspot<\/strong>. Du \u00e4r f\u00f6rmodligen bekant med alternativen och vid f\u00f6rsta anblicken kan du ange titeltaggen, f\u00e4rg, finjustera titeltypologin. Title Margin Bottom \u00e4r ett viktigt alternativ n\u00e4r du \u00e4ven har undertexter i ditt infof\u00e4lt f\u00f6r d\u00e5 kan du l\u00e4gga till denna marginal f\u00f6r att skapa ett mellanslag mellan titeln och undertexten.<\/p>\n

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

N\u00e4r det g\u00e4ller undertextstilen Info, om du l\u00e4gger till en undertext h\u00e4r, kan du stilisera dess utseende mer detaljerat. I typografialternativ kan du spela med olika inst\u00e4llningar.<\/p>\n

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

S\u00e5 h\u00e4r ser slutresultatet ut. text som vi lade till med Vi anv\u00e4nde sektionstiteln Qi-widgeten<\/a> f\u00f6r att l\u00e4gga till texten och gjorde denna webbplatssektion mycket mer intressant f\u00f6r framtida anv\u00e4ndare.<\/p>\n

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

Sammanfattningsvis<\/h2>\n

Qi Addons \u00e4r ett mycket intuitivt verktyg som alla kan anv\u00e4nda med fullst\u00e4ndig l\u00e4tthet och utan kodning eller annan teknisk kunskap. K\u00e4nn dig fri att utforska den h\u00e4r widgetens alternativ p\u00e5 egen hand, experimentera, spela och njut av den kreativa processen att g\u00f6ra din webbplats mer attraktiv f\u00f6r dina anv\u00e4ndare. Om du har n\u00e5gra fr\u00e5gor, tveka inte att kontakta oss i kommentarsf\u00e4ltet \u2013 vi ser fram emot att h\u00f6ra om dina erfarenheter av Qi och hotspot-bilder!<\/p>\n

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

Att l\u00e4gga till hotspots f\u00f6r bilder i WordPress \u00e4r enkelt n\u00e4r du har ett perfekt verktyg \u2013 l\u00e4r dig hur du g\u00f6r det med bara n\u00e5gra klick.<\/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":[211,574,429],"tags":[850],"class_list":["post-367241","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-10","category-grunderna-i-wordpress","category-wordpress-plugins-2","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/367241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=367241"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/367241\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/372289"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=367241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=367241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=367241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}