Kuinka tehdä tarttuva otsikko WordPressissä

Ennen kuin siirrymme siihen, kuinka voimme luoda tahmean otsikon WordPressissä, meidän on ensin ymmärrettävä, mitä ne ovat ja miksi saatamme haluta käyttää niitä. Tarraelementit tai kiinteät elementit ovat erikoiselementtejä, jotka pysyvät aina näkyvissä eivätkä muuta sijaintiaan, kun käyttäjä vierittää ylös tai alas. Näitä elementtejä voidaan käyttää milloin tahansa niiden sijainnin vuoksi, ja ne ovat siksi erittäin hyödyllisiä valikoissa tai muissa navigointivaihtoehdoissa.

Haluat tarjota käyttäjillesi mahdollisimman monia käteviä vaihtoehtoja, jotta sisältösi on helposti saatavilla ja käyttäjien turhautuminen vähenee. Tarttuvien elementtien avulla käyttäjät voivat siirtyä nopeasti verkkosivustosi sivulta toiselle ja löytää juuri tarvitsemansa. Kaikki tämä mukavuus ja helppokäyttöisyys tarkoittaa, että käyttökokemuksesi on paljon parempi ja käyttäjä pysyy paremmin.

Nyt käsittelemme yhtä tarttuvien elementtien päätyypeistä, tarttuvaa otsikkoa ja mahtavaa työkalua, jonka avulla voimme helposti luoda ja mukauttaa näitä elementtejä. Kyseinen työkalu on nimeltään WP Sticky.

On olemassa monia erilaisia ​​tapoja luoda tahmeita otsikoita WP Stickyn lisäksi. Voit jopa luoda näitä tarttuvia elementtejä käyttämällä puhdasta HTML- ja CSS-koodia, mutta se vaatii jonkin verran teknistä tietämystä ja on aikaa vievä prosessi. Tämä laajennus on paljon yksinkertaisempi ratkaisu ongelmaan ja erittäin aloittelijaystävällinen.

Ennen kuin voimme aloittaa WP Stickyn käytön, meidän on ensin ladattava se ja asennettava laajennus. Koska tämä on hyvin yksinkertainen prosessi, emme tuhlaa aikaa siihen. Sen sijaan siirrytään suoraan luomaan ensimmäinen tarttuva otsikkomme.

Ensimmäinen asia, joka meidän on tehtävä, on siirtyä laajennukset-osioon WordPress-hallintapaneelissamme; sieltä, valitse WP Sticky Pro ja napsauta sitten Asetukset.

Meitä tervehditään näillä vaihtoehdoilla, joissa meidän on valittava Lisää uusi tarraelementti.

Kun tämä on tehty, näemme Sticky Elements -välilehdellä uuden merkinnän nimeltä Sticky Element #1. Onnittelut, olet luonut ensimmäisen tarttuvan elementtisi, mutta vielä on paljon tehtävää, ennen kuin meillä on toimiva tarraotsikko. Kuten näet, tarttuvalla elementillämme on muutamia erilaisia ​​asetusluokkia.

Tarkastellaanpa niitä tarkemmin.

Tässä nimetään elementtimme ja valitaan, mistä tarkalleen haluamme tehdä tahmeaa.

Ensinnäkin meidän on annettava tahmealle elementillemme nimi; tässä tapauksessa se on Sticky Header.

Seuraavaksi meidän on löydettävä ja valittava elementti, josta haluamme tehdä tahmean. Voimme saavuttaa tämän kahdella tavalla.

Visuaalinen valitsin

Tämä on helpoin ja kätevämpi vaihtoehto. Mene vain Perus-osioon ja valitse Valitse elementti -vaihtoehto.

Kun teet sen, verkkosivustosi avautuu yhdessä yläreunan WP Sticky -valikon kanssa, mikä osoittaa, että olet siirtynyt visuaaliseen valitsimen. Jos viet osoittimen joidenkin elementtien päälle, huomaat kellertävän katkoviivan suorakulmion, joka visualisoi valitsemasi alueen. Napsauta sitä vasemmalla napsautuksella valitaksesi sen.

Tämä vie sinut takaisin WP Sticky -asetussivulle, jossa näet valitun elementin yksilöllisen tunnisteen. Meidän tapauksessamme se näyttää tältä.

Napsauta sen jälkeen Tallenna muutokset -painiketta oikeassa yläkulmassa, ja olemme valmiita.

Yksilöllisen tunnisteen kirjoittaminen

Jos haluat ja tiedät sen elementin yksilöllisen tunnuksen, josta haluat tehdä tarttuvan, voit kirjoittaa sen yksilöllisen tunnuksen muistiin sen sijaan, että poimiisit sen visuaalisesti .

Visuaaliset asetukset

Kun olemme nimenneet ja valinneet elementtimme, on aika tehdä siitä otsikko ja muokata sitä. WP Sticky antaa meille melko paljon vaihtoehtoja tehdä niin.

Koska haluamme tehdä otsikon, jätämme tämän vaihtoehdon oletustilaansa, joka on Top. Jos muutat mieltäsi tai vaatimukset muuttuvat, voit myös valita Pohja-vaihtoehdon.

Tila sivun yläosan ja tarraelementin välillä

Joskus tahmeat elementtemme voivat päästä liian lähelle sivun yläosaa. Voimme korjata tämän manuaalisesti kirjoittamalla pikselien lukumäärän sivun yläreunan ja määritetyn tarraelementin väliin.

Oletuksena tätä vaihtoehtoa ei ole asetettu, koska useimmat elementit sijoitetaan oikein automaattisesti.

Tarkista Admin Toolbar

Jos verkkosivustollasi on erikoistunut järjestelmänvalvojan työkalupalkki, se saattaa tukkia tarttuvan otsikon. Jos näin on, sinun tarvitsee vain tarkistaa tämä vaihtoehto, niin ongelma ratkaistaan. WP Sticky tunnistaa automaattisesti työkalupalkin koon ja reagoi sen mukaisesti.

Joskus haluat käyttäytyä eri tavalla sen mukaan, millä laitteella vierailijat katselevat verkkosivustoasi. Et ehkä halua, että mobiililaitteissa on tarttuva otsikko. WP Sticky antaa sinulle mahdollisuuden valita, mitkä laiteluokat ovat kiinnittyviä. Meidän tapauksessamme jätämme pois pienet ja keskisuuret laitteet.

Toinen tapaus, joka saattaa vaatia manuaalista räätälöintiä, on, jos tahmea otsikkosi päällä näkyy elementtejä. Jotta näin ei tapahdu, sinun on lisättävä tarttuvan otsikon Z-indeksiä.

Jos olet epävarma otsikon kanssa päällekkäin olevien elementtien Z-indeksiarvoista, kirjoita enimmäisarvo 99999, niin ongelma korjaantuu.

Voit käyttää kahta tehosteasetusta. Häivytä sisään ja liu’uta alas. Nyt se, kumpaa päätät käyttää, riippuu täysin henkilökohtaisista mieltymyksistäsi ja verkkosivuston halutusta ulkoasusta. Kokeile, kunnes päätät.

Toinen tahmean elementin visuaalinen räätälöinti. Muusta sivustosta riippuen voimme liukusäätimen avulla tehdä tahmeasta elementistä enemmän tai vähemmän läpinäkyvän.

Mitä tapahtuu, jos et halua, että tietyillä verkkosivustosi osilla on tarttuva otsikko? Tämän liukusäätimen avulla voit mukauttaa aloitus- ja lopetuskohtaa, jossa tahmea otsikko näytetään verkkosivustollasi, kun jatkat vierittämistä.

Taustaväri

Entä jos tahmea elementtimme ei ole niin selvästi näkyvissä? Laajennuksessa on mahdollisuus saada se erottumaan antamalla sille taustaväri. Voit tehdä tämän napsauttamalla alla näkyvää painiketta ja valitsemalla haluamasi taustavärin. Se on niin helppoa.

Jos haluat tehdä tarraelementtiisi vielä enemmän muutoksia, joita yllä mainitut vaihtoehdot eivät kata, on kenttä, johon voit lisätä mukautuksia CSS:n kautta. Tässä tapauksessa yksi tärkeä asia on pitää mielessä, että tyylejä ei tarvitse kääriä valitsimiin. Sinun ei tarvitse kirjoittaa .classname{color:#FFF;}, sen sijaan sinun tarvitsee vain kirjoittaa color:#FFF;

Jätämme tämän tyhjäksi, koska tarttuvaa demootsikkoa ei enää tarvitse muokata.

Kun olet muuttanut kaikki haluamasi asetukset, älä unohda tallentaa muutokset. Kun tämä on tehty, voimme siirtyä eteenpäin ja napsauttaa Preview Sticky -painiketta oikeassa yläkulmassa esikatsellaksemme tähän mennessä tekemiämme muutoksia.

Tiivistettynä

WP Sticky on erinomainen lisäys mille tahansa verkkosivustolle, ja se tekee kehittäjän työstä paljon helpompaa. Tämä laajennus on niin yksinkertainen käyttää, mutta se tarjoaa kuitenkin paljon yksityiskohtaisia ​​ja perusteellisia mukautusvaihtoehtoja, joten se auttaa sinua luomaan täydellisen tarttuvan otsikon verkkosivustollesi. Tämä on hieno uutinen, sillä tahmea otsikko voi lisätä merkittävästi verkkosivuston tuloksia.

WP Stickyllä ​​on Pro-versio, joka sisältää kaikki edellä mainitut vaihtoehdot ja maksaa 5,99 dollaria kuukaudessa tai 39 dollaria elinikäisestä lisenssistä. Myös tiimeille ja toimistoille on tarjolla useita erilaisia ​​hinnoittelusuunnitelmia.

Vallery Henings

Vallery Henings on copywriter ja sisällön kirjoittaja, joka on erikoistunut haamublogeihin, sähköpostimarkkinointikampanjoihin ja myyntisivuihin. Hän rakastaa myös retkiä, maapähkinävoi-keksejä ja koiranimeä Mimy.