{"id":367297,"date":"2023-05-16T16:02:00","date_gmt":"2023-05-16T13:02:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367297"},"modified":"2022-10-12T12:14:05","modified_gmt":"2022-10-12T09:14:05","slug":"kuinka-lisata-helposti-kuvan-hotspotin-wordpressiin","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-lisata-helposti-kuvan-hotspotin-wordpressiin\/","title":{"rendered":"Kuinka lis\u00e4t\u00e4 helposti kuvan hotspotin WordPressiin"},"content":{"rendered":"\n

Ihminen on visuaalinen olento, ja on vaikea kuvitella kuvaa tehokkaampaa ty\u00f6kalua kohderyhm\u00e4n huomion kiinnitt\u00e4miseen. Mutta saattaa olla elementti, joka on jopa houkuttelevampi kuin kaunis kuva \u2013 WordPressin kuvapiste. Kuvahotspot on kuvan tyyppi, jossa on interaktiivisia yhteyspisteit\u00e4<\/strong>. Kun k\u00e4ytt\u00e4j\u00e4 vie hiiren hotspotin p\u00e4\u00e4lle, n\u00e4kyviin tulee ponnahdusikkuna, joka voi sis\u00e4lt\u00e4\u00e4 melkein mit\u00e4 tahansa haluamaasi.<\/p>\n

Kuvahotspot WordPress-verkkosivustollasi on kaunis tapa jakaa lis\u00e4tietoja mist\u00e4 tahansa aiheesta<\/strong> \u2013 kulinaarisista blogeista rakennussivustoihin ja kaikkeen silt\u00e4 v\u00e4lilt\u00e4. Voit n\u00e4ytt\u00e4\u00e4 aterioiden ainesosat ja mitat, k\u00e4ytettyjen materiaalien tyypit, nimet ja otsikot sek\u00e4 mit\u00e4 tahansa muuta tietoa verkkosivustosi sis\u00e4ll\u00f6st\u00e4. Ponnahdusikkuna voi sis\u00e4lt\u00e4\u00e4 teksti\u00e4, toisen, kuvan, videon tai linkin. Sen lis\u00e4ksi, ett\u00e4 tarjoat k\u00e4ytt\u00e4jillesi tarkempia yksityiskohtia, teet my\u00f6s verkkosivustostasi interaktiivisemman k\u00e4ytt\u00e4m\u00e4ll\u00e4 kuvapisteit\u00e4<\/strong>.<\/p>\n

Jos uskot tarvitsevasi ammattimaisen web-suunnittelijan lis\u00e4\u00e4m\u00e4\u00e4n t\u00e4m\u00e4n hienon elementin verkkosivustollesi, meill\u00e4 on mahtavia uutisia! Voit helposti lis\u00e4t\u00e4 kaiken itse. Pysy kuulolla lukeaksesi lis\u00e4\u00e4 kuvahotspotin lis\u00e4\u00e4misest\u00e4 WordPressiin laajennuksen avulla:<\/p>\n<\/p>\n

Miksi valitsimme Qi-lis\u00e4osat Elementorille Image Hotspot WordPress Elemenin luomiseen<\/h2>\n

Kokemuksemme perusteella Qi Addons for Elementor<\/a> on yksi parhaista Elementor-lis\u00e4osista. Se sis\u00e4lt\u00e4\u00e4 60 ilmaista ja yli 40 premium-widgeti\u00e4 ja monia vaihtoehtoja eri elementtien lis\u00e4\u00e4miseen sivustolle sek\u00e4 paljon muokkaus- ja tyylivaihtoehtoja<\/strong>, jotta voit olla varma, ett\u00e4 ne sopivat sivustosi yleiseen ulkoasuun. Kaiken lis\u00e4ksi se on uskomattoman helppok\u00e4ytt\u00f6inen<\/strong> \u2013 siksi valitsemme hyvin usein t\u00e4m\u00e4n lis\u00e4osan, joka parantaa sivustoa huomattavasti.<\/p>\n

Mukautettu Image Hotspots -widget<\/a> on premium-widget. Sen avulla voit lis\u00e4t\u00e4 tietyn kuvan ja sijainnin hotspotit, joissa on erityisi\u00e4 tietoja niist\u00e4<\/strong>. T\u00e4m\u00e4n j\u00e4lkeen k\u00e4ytt\u00e4j\u00e4 saa tiedot siirt\u00e4m\u00e4ll\u00e4 hiiren hotspotin p\u00e4\u00e4lle<\/strong>. Hienoa on, ett\u00e4 voimme m\u00e4\u00e4ritt\u00e4\u00e4 reagoivat paikat, jotta ei tapahdu, ett\u00e4 eri laitteissa hotspot ei vastaa kohdetta, johon se viittaa. Itse widget-demossa n\u00e4et joitain kirjoittajan k\u00e4sitteellisi\u00e4 ratkaisuja, jotka voivat inspiroida sinua.<\/p>\n

Kuinka lis\u00e4t\u00e4 Image Hotspot WordPress -elementti<\/h2>\n

Kun olet lis\u00e4nnyt Qi-lis\u00e4osia sivustollesi, l\u00f6yd\u00e4t mukautetun Image Hotspots -widgetin kirjoittamalla hakukentt\u00e4\u00e4n "image hotspot" tai yksinkertaisesti selaamalla elementtej\u00e4. Huomaat, ett\u00e4 kaikissa Qi-widgeteiss\u00e4 on tunnistettavia punaisia \u200b\u200bkuvakkeita<\/strong>.<\/p>\n

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

Kun ved\u00e4t widgetin haluamaasi paikkaan, n\u00e4et joitain sen oletusarvoista. Widgetiss\u00e4 on kaksi v\u00e4lilehte\u00e4 \u2013 Mukauta<\/strong> ja Tyyli<\/strong>, jotka sis\u00e4lt\u00e4v\u00e4t useita vaihtoehtoja elementin s\u00e4\u00e4t\u00e4miseen, kun taas Lis\u00e4asetukset-v\u00e4lilehti on Elementor-v\u00e4lilehti, joka sis\u00e4lt\u00e4\u00e4 kaikki elementit.<\/p>\n

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

Aloitetaan mukautetun v\u00e4lilehden yleisist\u00e4 asetuksista. Ensin huomaat kuvan ja kolme kohdetta<\/strong>. N\u00e4m\u00e4 kohteet ovat itse asiassa hotspotteja<\/strong> ja niiden sijainti- ja sis\u00e4lt\u00f6asetuksia. Oletuksena on kolme hotspotia, mutta voit poistaa olemassa olevia tai lis\u00e4t\u00e4 uusia<\/strong>.<\/p>\n

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

Kun olet lis\u00e4nnyt kuvan, kirjastosta tai ladannut uuden, on aika sijoittaa hotspotit ja lis\u00e4t\u00e4 niihin sis\u00e4lt\u00f6\u00e4.<\/p>\n

Mit\u00e4 tulee sis\u00e4lt\u00f6\u00f6n, voit asettaa Otsikko- ja Tekstitysvaihtoehdot, ja heti kun alat muokata niit\u00e4, n\u00e4et, kuinka sis\u00e4lt\u00f6 muuttuu liven\u00e4.<\/p>\n

T\u00e4\u00e4ll\u00e4 on my\u00f6s merkkikentt\u00e4, josta voit valita<\/strong> nastallesi kuvakkeen, sen ei tarvitse olla oletuskuvake. Kuvakekirjasto on k\u00e4ytett\u00e4viss\u00e4si, mutta voit my\u00f6s lis\u00e4t\u00e4 oman SVG-kuvakkeen. Esimerkiksi \u2013 SVGREPO<\/a> tarjoaa suuren m\u00e4\u00e4r\u00e4n ilmaisia \u200b\u200bkuvakkeita, jotka ovat saatavilla kaupalliseen k\u00e4ytt\u00f6\u00f6n.<\/p>\n

Mit\u00e4 tulee vaaka- ja pystyasentoon, ne palvelevat hotspotin suuntausta vasemmalla\/keskell\u00e4\/oikealla ja yl\u00e4-\/keskiala<\/strong> -asennoilla, kun taas Offset-vaihtoehdon avulla voimme itse asiassa hienos\u00e4\u00e4t\u00e4\u00e4 paikkoja. Emme selit\u00e4 t\u00e4t\u00e4 yksityiskohtaisesti, koska olemme varmoja, ett\u00e4 n\u00e4et itse, miten videosi liikkuvat muuttamalla offset-arvoja. T\u00e4rke\u00e4\u00e4 on muistaa, ett\u00e4 kun mukautat hotspotteja, sinun tulee tarkkailla my\u00f6s esikatselusivua, jossa ei ole asetuspalkkia, jotta n\u00e4et, milt\u00e4 kaikki n\u00e4ytt\u00e4\u00e4 t\u00e4ysikokoisessa n\u00e4yt\u00f6ss\u00e4<\/strong>.<\/p>\n

Poikkeaman lis\u00e4ksi huomaat my\u00f6s otsikolla varustettuja n\u00e4ytt\u00f6kuvakkeita, eli klassisia kuvakkeita, jotka osoittavat, ett\u00e4 t\u00e4lle asetukselle on k\u00e4ytett\u00e4viss\u00e4 reagoivia vaihtoehtoja<\/strong>. Muista tarkistaa my\u00f6s ne. On parasta olla sijoittamatta hotspotteja kuvan reunaan, koska sinun on mietitt\u00e4v\u00e4, milt\u00e4 kuvan hotspot-ponnahdusikkuna n\u00e4ytt\u00e4\u00e4 erikokoisilla n\u00e4yt\u00f6ill\u00e4<\/strong>.<\/p>\n

H\u00e4ivytystietojen sijainti -vaihtoehto on paikka, jossa hotspotin tiedot tulevat n\u00e4kyviin.<\/p>\n

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

T\u00e4m\u00e4 on tulos, kun olemme lis\u00e4nneet kuvan ja nastat, nyt voimme edet\u00e4 tyylill\u00e4 kaiken n\u00e4ytt\u00e4m\u00e4\u00e4n juuri haluamallamme tavalla.<\/p>\n

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

Hotspot-kuvatyylin s\u00e4\u00e4t\u00e4minen<\/h2>\n

Mit\u00e4 tulee tyylituksiin, monet vaihtoehdot on luokiteltu erityiseen Tyyli-v\u00e4lilehteen, joten voit n\u00e4hd\u00e4, miss\u00e4 tyylitellyt pinssit, tiedot, otsikko ja tekstitys.<\/p>\n

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

Pin-koodin osalta kaikki asetukset ovat helppoja ymm\u00e4rt\u00e4\u00e4. Voit valita kuvakkeen, jota sovelletaan kaikkiin pinsseihin<\/strong>, toisin kuin kohteiden asetuksissa, joissa voit valita jokaiselle erillisen kuvakkeen. Voit my\u00f6s m\u00e4\u00e4ritt\u00e4\u00e4 sille koon ja v\u00e4rin<\/strong>. Voit lis\u00e4t\u00e4 taustakuvakkeen k\u00e4ytt\u00e4m\u00e4ll\u00e4 Pin-pidikkeen kokoa. Taustamme on punainen ja kooltaan 15px.<\/p>\n

Reunan s\u00e4de -vaihtoehdon avulla saimme taustan n\u00e4ytt\u00e4m\u00e4\u00e4n ympyr\u00e4lt\u00e4,<\/strong> koska s\u00e4de on k\u00e4yt\u00f6ss\u00e4 taustalla.<\/p>\n

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

Tietotyyli viittaa sen kent\u00e4n ulkoasuun, jossa tiedot n\u00e4kyv\u00e4t<\/strong>. Tieton\u00e4ytt\u00f6 on vaihtoehto, joka m\u00e4\u00e4ritt\u00e4\u00e4, miten osoittimen n\u00e4ytt\u00f6 n\u00e4ytet\u00e4\u00e4n. Se voisi olla Fade and Reveal, valitsimme Revealin. Voit my\u00f6s muokata kent\u00e4n v\u00e4ri\u00e4 ja pehmusteita t\u00e4\u00e4ll\u00e4. Info Border Radius on erityisen mielenkiintoinen vaihtoehto k\u00e4ytt\u00e4m\u00e4mme paljastusasetteluun, koska s\u00e4de auttaa sovittamaan tietokentt\u00e4\u00e4n ja itse pin-kuvakkeen<\/strong>. Jos emme lis\u00e4\u00e4 t\u00e4h\u00e4n s\u00e4dett\u00e4, valkoinen tietokentt\u00e4 menisi punaisen kuvakelaatikon nastan yl\u00e4puolelle.<\/p>\n

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

Info Otsikko Tyylivaihtoehdot viittaavat otsikkoon, jonka lis\u00e4simme jokaiseen nastaan. T\u00e4ss\u00e4 olevat asetukset koskevat kaikkia t\u00e4m\u00e4n kuvapisteen nimikkeit\u00e4<\/strong>. Olet luultavasti tuttu vaihtoehdoista ja ensi silm\u00e4yksell\u00e4 voit m\u00e4\u00e4ritt\u00e4\u00e4 otsikkotunnisteen, v\u00e4rin ja hienos\u00e4\u00e4t\u00e4\u00e4 otsikon typologian. Otsikon marginaalin alaosa on t\u00e4rke\u00e4 vaihtoehto, kun tietokent\u00e4ss\u00e4si on my\u00f6s tekstitykset, koska silloin voit lis\u00e4t\u00e4 t\u00e4m\u00e4n marginaalin luodaksesi v\u00e4lily\u00f6nnin otsikon ja tekstityksen v\u00e4liin.<\/p>\n

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

Mit\u00e4 tulee Info-tekstityksen tyyliin, jos lis\u00e4\u00e4t tekstityksen t\u00e4h\u00e4n, voit tyylitell\u00e4 sen ulkoasua tarkemmin. Typografiavaihtoehdoissa voit pelata eri asetuksilla.<\/p>\n

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

T\u00e4lt\u00e4 lopputulos n\u00e4ytt\u00e4\u00e4. teksti, jonka lis\u00e4simme. K\u00e4ytimme my\u00f6s Osaston otsikko Qi -widgeti\u00e4<\/a> lis\u00e4t\u00e4ksesi tekstin ja tekimme t\u00e4st\u00e4 verkkosivuston osiosta paljon kiinnostavamman tuleville k\u00e4ytt\u00e4jille.<\/p>\n

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

Tiivistettyn\u00e4<\/h2>\n

Qi Addons on eritt\u00e4in intuitiivinen ty\u00f6kalu, jota jokainen voi k\u00e4ytt\u00e4\u00e4 t\u00e4ysin helposti ja ilman koodausta tai muuta teknist\u00e4 tiet\u00e4myst\u00e4. Voit vapaasti tutkia t\u00e4m\u00e4n widgetin vaihtoehtoja itse, kokeilla, pelata ja nauttia luovasta prosessista tehd\u00e4ksesi verkkosivustostasi houkuttelevamman k\u00e4ytt\u00e4jillesi. Jos sinulla on kysytt\u00e4v\u00e4\u00e4, \u00e4l\u00e4 ep\u00e4r\u00f6i ottaa meihin yhteytt\u00e4 kommenttiosiossa \u2013 odotamme innolla kokemuksiasi Qi- ja hotspot-kuvista!<\/p>\n

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

Kuvien hotspottien lis\u00e4\u00e4minen WordPressiin on helppoa, kun sinulla on t\u00e4ydellinen ty\u00f6kalu \u2013 opi tekem\u00e4\u00e4n se muutamalla napsautuksella.<\/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":[207,425,570],"tags":[843],"class_list":["post-367297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-6","category-wordpress-laajennukset","category-wordpressin-perusteet","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/367297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=367297"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/367297\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/372289"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=367297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=367297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=367297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}