{"id":366144,"date":"2022-11-19T15:50:00","date_gmt":"2022-11-19T12:50:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=366144"},"modified":"2023-01-20T20:03:01","modified_gmt":"2023-01-20T17:03:01","slug":"kuinka-tehda-tarttuva-otsikko-wordpressissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-tehda-tarttuva-otsikko-wordpressissa\/","title":{"rendered":"Kuinka tehd\u00e4 tarttuva otsikko WordPressiss\u00e4"},"content":{"rendered":"\n

Ennen kuin siirrymme siihen, kuinka voimme luoda tahmean otsikon WordPressiss\u00e4, meid\u00e4n on ensin ymm\u00e4rrett\u00e4v\u00e4, mit\u00e4 ne ovat ja miksi saatamme haluta k\u00e4ytt\u00e4\u00e4 niit\u00e4. Tarraelementit tai kiinte\u00e4t elementit ovat erikoiselementtej\u00e4, jotka pysyv\u00e4t aina n\u00e4kyviss\u00e4 eiv\u00e4tk\u00e4 muuta sijaintiaan, kun k\u00e4ytt\u00e4j\u00e4 vieritt\u00e4\u00e4 yl\u00f6s tai alas<\/strong>. N\u00e4it\u00e4 elementtej\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 milloin tahansa niiden sijainnin vuoksi, ja ne ovat siksi eritt\u00e4in hy\u00f6dyllisi\u00e4 valikoissa tai muissa navigointivaihtoehdoissa.<\/p>\n

Haluat tarjota k\u00e4ytt\u00e4jillesi mahdollisimman monia k\u00e4tevi\u00e4 vaihtoehtoja, jotta sis\u00e4lt\u00f6si on helposti saatavilla ja k\u00e4ytt\u00e4jien turhautuminen v\u00e4henee. Tarttuvien elementtien avulla k\u00e4ytt\u00e4j\u00e4t voivat siirty\u00e4 nopeasti verkkosivustosi sivulta toiselle ja l\u00f6yt\u00e4\u00e4 juuri tarvitsemansa<\/strong>. Kaikki t\u00e4m\u00e4 mukavuus ja helppok\u00e4ytt\u00f6isyys tarkoittaa, ett\u00e4 k\u00e4ytt\u00f6kokemuksesi on paljon parempi ja k\u00e4ytt\u00e4j\u00e4 pysyy paremmin.<\/p>\n

Nyt k\u00e4sittelemme yht\u00e4 tarttuvien elementtien p\u00e4\u00e4tyypeist\u00e4, tarttuvaa otsikkoa ja mahtavaa ty\u00f6kalua, jonka avulla voimme helposti luoda ja mukauttaa n\u00e4it\u00e4 elementtej\u00e4. Kyseinen ty\u00f6kalu on nimelt\u00e4\u00e4n WP Sticky<\/a>.<\/p>\n

On olemassa monia erilaisia \u200b\u200btapoja luoda tahmeita otsikoita WP Stickyn lis\u00e4ksi. Voit jopa luoda n\u00e4it\u00e4 tarttuvia elementtej\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 puhdasta HTML- ja CSS-koodia<\/strong>, mutta se vaatii jonkin verran teknist\u00e4 tiet\u00e4myst\u00e4 ja on aikaa viev\u00e4 prosessi<\/strong>. T\u00e4m\u00e4 laajennus on paljon yksinkertaisempi ratkaisu ongelmaan ja eritt\u00e4in aloittelijayst\u00e4v\u00e4llinen.<\/p>\n

Ennen kuin voimme aloittaa WP Stickyn k\u00e4yt\u00f6n, meid\u00e4n on ensin ladattava se ja asennettava laajennus<\/a>. Koska t\u00e4m\u00e4 on hyvin yksinkertainen prosessi, emme tuhlaa aikaa siihen. Sen sijaan siirryt\u00e4\u00e4n suoraan luomaan ensimm\u00e4inen tarttuva otsikkomme.<\/p>\n

Ensimm\u00e4inen asia, joka meid\u00e4n on teht\u00e4v\u00e4, on siirty\u00e4 laajennukset-osioon WordPress-hallintapaneelissamme; sielt\u00e4, valitse WP Sticky Pro ja napsauta sitten Asetukset<\/strong>.<\/p>\n

Meit\u00e4 tervehdit\u00e4\u00e4n n\u00e4ill\u00e4 vaihtoehdoilla, joissa meid\u00e4n on valittava Lis\u00e4\u00e4 uusi tarraelementti.<\/p>\n

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

Kun t\u00e4m\u00e4 on tehty, n\u00e4emme Sticky Elements -v\u00e4lilehdell\u00e4 uuden merkinn\u00e4n nimelt\u00e4 Sticky Element #1<\/strong>. Onnittelut, olet luonut ensimm\u00e4isen tarttuvan elementtisi<\/strong>, mutta viel\u00e4 on paljon teht\u00e4v\u00e4\u00e4, ennen kuin meill\u00e4 on toimiva tarraotsikko. Kuten n\u00e4et, tarttuvalla elementill\u00e4mme on muutamia erilaisia \u200b\u200basetusluokkia.<\/p>\n

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

Tarkastellaanpa niit\u00e4 tarkemmin.<\/p>\n

T\u00e4ss\u00e4 nimet\u00e4\u00e4n elementtimme ja valitaan, mist\u00e4 tarkalleen haluamme tehd\u00e4 tahmeaa<\/strong>.<\/p>\n

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

Ensinn\u00e4kin meid\u00e4n on annettava tahmealle elementillemme nimi; t\u00e4ss\u00e4 tapauksessa se on Sticky Header.<\/p>\n

Seuraavaksi meid\u00e4n on l\u00f6ydett\u00e4v\u00e4 ja valittava elementti, josta haluamme tehd\u00e4 tahmean<\/strong>. Voimme saavuttaa t\u00e4m\u00e4n kahdella tavalla.<\/p>\n

Visuaalinen valitsin<\/h3>\n

T\u00e4m\u00e4 on helpoin ja k\u00e4tev\u00e4mpi vaihtoehto. Mene vain Perus-osioon ja valitse Valitse elementti -vaihtoehto.<\/p>\n

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

Kun teet sen, verkkosivustosi avautuu yhdess\u00e4 yl\u00e4reunan WP Sticky -valikon kanssa<\/strong>, mik\u00e4 osoittaa, ett\u00e4 olet siirtynyt visuaaliseen valitsimen. Jos viet osoittimen joidenkin elementtien p\u00e4\u00e4lle, huomaat kellert\u00e4v\u00e4n katkoviivan suorakulmion, joka visualisoi valitsemasi alueen. Napsauta sit\u00e4 vasemmalla napsautuksella valitaksesi sen.<\/p>\n

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

T\u00e4m\u00e4 vie sinut takaisin WP Sticky -asetussivulle<\/strong>, jossa n\u00e4et valitun elementin yksil\u00f6llisen tunnisteen<\/strong>. Meid\u00e4n tapauksessamme se n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4.<\/p>\n

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

Napsauta sen j\u00e4lkeen Tallenna muutokset -painiketta oikeassa yl\u00e4kulmassa, ja olemme valmiita.<\/p>\n

Yksil\u00f6llisen tunnisteen kirjoittaminen<\/h3>\n

Jos haluat ja tied\u00e4t sen elementin yksil\u00f6llisen tunnuksen, josta haluat tehd\u00e4 tarttuvan, voit kirjoittaa sen yksil\u00f6llisen tunnuksen muistiin sen<\/strong> sijaan, ett\u00e4 poimiisit sen visuaalisesti .<\/p>\n

Visuaaliset asetukset<\/h2>\n

Kun olemme nimenneet ja valinneet elementtimme, on aika tehd\u00e4 siit\u00e4 otsikko ja muokata sit\u00e4. WP Sticky antaa meille melko paljon vaihtoehtoja tehd\u00e4 niin.<\/p>\n

Koska haluamme tehd\u00e4 otsikon, j\u00e4t\u00e4mme t\u00e4m\u00e4n vaihtoehdon oletustilaansa, joka on Top. Jos muutat mielt\u00e4si tai vaatimukset muuttuvat, voit my\u00f6s valita Pohja-vaihtoehdon<\/strong>.<\/p>\n

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

Tila sivun yl\u00e4osan ja tarraelementin v\u00e4lill\u00e4<\/h3>\n

Joskus tahmeat elementtemme voivat p\u00e4\u00e4st\u00e4 liian l\u00e4helle sivun yl\u00e4osaa. Voimme korjata t\u00e4m\u00e4n manuaalisesti kirjoittamalla pikselien lukum\u00e4\u00e4r\u00e4n sivun yl\u00e4reunan ja m\u00e4\u00e4ritetyn tarraelementin v\u00e4liin<\/strong>.<\/p>\n

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

Oletuksena t\u00e4t\u00e4 vaihtoehtoa ei ole asetettu, koska useimmat elementit sijoitetaan oikein automaattisesti.<\/p>\n

Tarkista Admin Toolbar<\/h3>\n

Jos verkkosivustollasi on erikoistunut j\u00e4rjestelm\u00e4nvalvojan ty\u00f6kalupalkki, se saattaa tukkia tarttuvan otsikon. Jos n\u00e4in on, sinun tarvitsee vain tarkistaa t\u00e4m\u00e4 vaihtoehto, niin ongelma ratkaistaan<\/strong>. WP Sticky tunnistaa automaattisesti ty\u00f6kalupalkin koon ja reagoi sen mukaisesti.<\/p>\n

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

Joskus haluat k\u00e4ytt\u00e4yty\u00e4 eri tavalla sen mukaan, mill\u00e4 laitteella vierailijat katselevat verkkosivustoasi. Et ehk\u00e4 halua, ett\u00e4 mobiililaitteissa on tarttuva otsikko. WP Sticky antaa sinulle mahdollisuuden valita, mitk\u00e4 laiteluokat ovat kiinnittyvi\u00e4. Meid\u00e4n tapauksessamme j\u00e4t\u00e4mme pois pienet ja keskisuuret laitteet.<\/p>\n

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

Toinen tapaus, joka saattaa vaatia manuaalista r\u00e4\u00e4t\u00e4l\u00f6inti\u00e4, on, jos tahmea otsikkosi p\u00e4\u00e4ll\u00e4 n\u00e4kyy elementtej\u00e4. Jotta n\u00e4in ei tapahdu, sinun on lis\u00e4tt\u00e4v\u00e4 tarttuvan otsikon Z-indeksi\u00e4.<\/p>\n

Jos olet ep\u00e4varma otsikon kanssa p\u00e4\u00e4llekk\u00e4in olevien elementtien Z-indeksiarvoista, kirjoita enimm\u00e4isarvo 99999, niin ongelma korjaantuu.<\/p>\n

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

Voit k\u00e4ytt\u00e4\u00e4 kahta tehosteasetusta. H\u00e4ivyt\u00e4 sis\u00e4\u00e4n ja liu’uta alas. Nyt se, kumpaa p\u00e4\u00e4t\u00e4t k\u00e4ytt\u00e4\u00e4, riippuu t\u00e4ysin henkil\u00f6kohtaisista mieltymyksist\u00e4si ja verkkosivuston halutusta ulkoasusta. Kokeile, kunnes p\u00e4\u00e4t\u00e4t.<\/p>\n

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

Toinen tahmean elementin visuaalinen r\u00e4\u00e4t\u00e4l\u00f6inti. Muusta sivustosta riippuen voimme liukus\u00e4\u00e4timen avulla tehd\u00e4 tahmeasta elementist\u00e4 enemm\u00e4n tai v\u00e4hemm\u00e4n l\u00e4pin\u00e4kyv\u00e4n.<\/p>\n

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

Mit\u00e4 tapahtuu, jos et halua, ett\u00e4 tietyill\u00e4 verkkosivustosi osilla on tarttuva otsikko? T\u00e4m\u00e4n liukus\u00e4\u00e4timen avulla voit mukauttaa aloitus- ja lopetuskohtaa, jossa tahmea otsikko n\u00e4ytet\u00e4\u00e4n verkkosivustollasi, kun jatkat vieritt\u00e4mist\u00e4.<\/p>\n

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

Taustav\u00e4ri<\/h3>\n

Ent\u00e4 jos tahmea elementtimme ei ole niin selv\u00e4sti n\u00e4kyviss\u00e4? Laajennuksessa on mahdollisuus saada se erottumaan antamalla sille taustav\u00e4ri. Voit tehd\u00e4 t\u00e4m\u00e4n napsauttamalla alla n\u00e4kyv\u00e4\u00e4 painiketta ja valitsemalla haluamasi taustav\u00e4rin. Se on niin helppoa.<\/p>\n

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

Jos haluat tehd\u00e4 tarraelementtiisi viel\u00e4 enemm\u00e4n muutoksia, joita yll\u00e4 mainitut vaihtoehdot eiv\u00e4t kata, on kentt\u00e4, johon voit lis\u00e4t\u00e4 mukautuksia CSS:n kautta. T\u00e4ss\u00e4 tapauksessa yksi t\u00e4rke\u00e4 asia on pit\u00e4\u00e4 mieless\u00e4, ett\u00e4 tyylej\u00e4 ei tarvitse k\u00e4\u00e4ri\u00e4 valitsimiin. Sinun ei tarvitse kirjoittaa .classname{color:#FFF;}, sen sijaan sinun tarvitsee vain kirjoittaa color:#FFF;<\/p>\n

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

J\u00e4t\u00e4mme t\u00e4m\u00e4n tyhj\u00e4ksi, koska tarttuvaa demootsikkoa ei en\u00e4\u00e4 tarvitse muokata.<\/p>\n

Kun olet muuttanut kaikki haluamasi asetukset, \u00e4l\u00e4 unohda tallentaa muutokset. Kun t\u00e4m\u00e4 on tehty, voimme siirty\u00e4 eteenp\u00e4in ja napsauttaa Preview Sticky -painiketta oikeassa yl\u00e4kulmassa esikatsellaksemme t\u00e4h\u00e4n menness\u00e4 tekemi\u00e4mme muutoksia.<\/p>\n

Tiivistettyn\u00e4<\/h2>\n

WP Sticky on erinomainen lis\u00e4ys mille tahansa verkkosivustolle, ja se tekee kehitt\u00e4j\u00e4n ty\u00f6st\u00e4 paljon helpompaa. T\u00e4m\u00e4 laajennus on niin yksinkertainen k\u00e4ytt\u00e4\u00e4, mutta se tarjoaa kuitenkin paljon yksityiskohtaisia \u200b\u200bja perusteellisia mukautusvaihtoehtoja, joten se auttaa sinua luomaan t\u00e4ydellisen tarttuvan otsikon verkkosivustollesi. T\u00e4m\u00e4 on hieno uutinen, sill\u00e4 tahmea otsikko voi lis\u00e4t\u00e4 merkitt\u00e4v\u00e4sti verkkosivuston tuloksia<\/a>.<\/p>\n

WP Stickyll\u00e4 \u200b\u200bon Pro-versio, joka sis\u00e4lt\u00e4\u00e4 kaikki edell\u00e4 mainitut vaihtoehdot ja maksaa 5,99 dollaria kuukaudessa tai 39 dollaria elinik\u00e4isest\u00e4 lisenssist\u00e4. My\u00f6s tiimeille ja toimistoille on tarjolla useita erilaisia \u200b\u200bhinnoittelusuunnitelmia.<\/p>\n

Vallery Henings<\/p>\n

Vallery Henings on copywriter ja sis\u00e4ll\u00f6n kirjoittaja, joka on erikoistunut haamublogeihin, s\u00e4hk\u00f6postimarkkinointikampanjoihin ja myyntisivuihin. H\u00e4n rakastaa my\u00f6s retki\u00e4, maap\u00e4hkin\u00e4voi-keksej\u00e4 ja koiranime\u00e4 Mimy.<\/p>\n

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

Luo tarttuva otsikko WordPressiin ja paranna verkkosivustosi k\u00e4ytt\u00f6kokemusta.<\/p>\n","protected":false},"author":1,"featured_media":364361,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[570],"tags":[843],"class_list":["post-366144","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpressin-perusteet","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/366144","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=366144"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/366144\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/364361"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=366144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=366144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=366144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}