Painikkeen lisääminen otsikkoon WordPressissä – Qode Interactive

Jos haluat lisätä toimintakehotuksen WordPress-sivustollesi ja sijoittaa sen helposti havaittavaan paikkaan, sivustosi otsikkoalue on täydellinen paikka tehdä niin. Jokaisen verkkosivuston sivun yläosassa sijaitseva otsikko on yleensä yksi ensimmäisistä asioista, jotka ihmiset näkevät avattaessa sivua. Tämä tekee siitä luonnollisen paikan lisätä tärkeitä elementtejä, kuten sivustosi otsikko ja otsikko, pääsivustosi navigointi, brändisi logo ja tietysti toimintakehotuspainikkeet.

Painikkeen lisäämisen tarkoitus on ensinnäkin saada vierailijasi suorittamaan haluamasi toiminto ja ohjata heidät tietylle sivulle sivustossasi (tai sivustosi ulkopuolella) napsauttamalla sitä. Siten sinun on tehtävä painike välittömästi näkyväksi sivullasi houkutellaksesi vierailijoidesi huomion ja saada heidät napsauttamaan sitä saadaksesi lisää tuloksia. Tämä tarkoittaa, että painikkeen ulkoasun tulee antaa se erottua muista tavallisen näköisistä linkeistä, jotka voivat näkyä otsikkovalikossasi.

Nyt oletuksena WordPress ei sisällä mahdollisuutta lisätä yksittäisiä painikkeita otsikkoalueeseesi. Sen sijaan voit lisätä otsikkoon navigointivalikon, jossa on samankaltaisia ​​linkkejä. Silti on olemassa keino ”muuntaa” valikkolinkki otsikon navigointivalikossa ja näytä se painikkeena. Onneksi tämä on helppo tehdä, jos käytä jotain mukautettua CSS:ää. Joten tällä kertaa näytämme sinulle, kuinka voit lisätä painikkeen WordPress-otsikon navigointivalikkoon. Heti sen jälkeen näytämme myös, miten se tehdään lisää ja mukauta painikewidget mihin tahansa muuhun valitsemaasi otsikkoalueeseen (lukuun ottamatta sen lisäämistä navigointivalikon viereen) käyttämällä Bridge-teemaa. Joten istu alas, rentoudu ja lue.

Painikkeen lisääminen WordPress-otsikkovalikkoon mukautetulla CSS-syötteellä

Aloita valikkolinkin muuttaminen painikkeeksi lisäämällä valikkolinkki, jota haluat käyttää menossa Ulkonäkö >> valikot. Lisää sitten linkki aiemmin luotuun navigointivalikkoon.

Jos valikossasi on jo valikkokohta, jonka haluat muuttaa painikkeeksi, laajenna ja muokkaa sitä napsauttamalla valikkokohdan nuolta.

Jos et ole vielä luonut valikkokohtaasi, voit löytää sen joko näytön vasemmasta reunasta (löytämällä sen sivuilta, viesteistä jne. – riippuen siitä, johtaako valikkokohta sivulle, viestiin vai toiselle viestille tyyppi) ja napsauta sitten Lisää valikkoon -painiketta. Jos haluat linkittää sivustosi ulkopuoliselle sivulle, voit valita Mukautetut linkit pudotusvalikosta ja lisää URL-osoite ja linkkiteksti manuaalisesti ja napsauta sitten Lisää valikkoon.

Varmista seuraavaksi, että annat a Navigointitarra tuotteellesi (jos et ole jo tehnyt).

Kun olet tehnyt tämän, sinun tulee mennä eteenpäin ja käyttää Näytön asetukset -painiketta (sijaitsee näytön yläosassa). Varmista, että ruutu, jossa lukee ”CSS-luokat” on merkitty. Tämän avulla voit lisätä mukautetun CSS-luokan linkkiisi ja muotoilla sen haluamallasi tavalla.

Nyt valikkokohdan asetuksista näet uuden CSS-luokkavaihtoehdon. Anna ruokalistaluokalle nimi (meidän on header-menu-painike, mutta voit antaa minkä tahansa valitsemasi yksilöllisen nimen tähän).

Lyö Tallenna valikko -painiketta tallentaaksesi asetukset.

Seuraavaksi sinun tulee mukauttaa otsikkovalikkopainikkeesi ulkoasua käyttämällä mukautettua CSS-koodia. Mene Ulkonäkö >> Mukauta päästäksesi WordPress-teeman mukauttajaasi ja lyö Ylimääräinen CSS -painiketta.

Syötä mukautettu CSS-koodisi tähän ja napsauta sitten Julkaista. Huomaa kuitenkin, että tämä saa kaikki tekemäsi muutokset välittömästi näkyviin, joten muista painaa tätä painiketta vasta, kun olet täysin tyytyväinen otsikkovalikkopainikkeesi ulkoasuun.

Voit halutessasi lisätä CSS-koodimme tai muuttaa sitä haluamallasi tavalla suunnittelumieltymyksiisi sopivaksi (muuta sen reunaa ja reunuksen sädettä, taustan ja tekstin väriä ja niin edelleen):

.header-menu-button { 
background-color:#86af49;
border:1px;
border-radius:25px;
}
.header-menu-button a, .header-menu-button a:hover, .header-menu-button a:active { 
color:#fff !important;
}

Olemme valinneet vihreän painikkeen (joka sopii täydellisesti asetteluomme) ja painikkeen tekstin tavallisen valkoisen värin. Olemme myös määrittäneet reunasäteen 25 pikseliä, jotta painikkeellamme on hieman pyöristetyt reunat. Huomaa, että mitä enemmän pienennät pikselien määrää, sitä terävämmät reunat ovat, kun taas pikselien määrän lisääminen tekee painikkeesta pyöristetymmän.

Heti CSS-koodin lisäämisen ja painamisen jälkeen Julkaista, voit nähdä, miltä painikkeesi näyttää verkkosivuston esikatselussa.

Painikkeen lisääminen otsikkoon Qode-teemojen avulla

Olemme maininneet aivan alussa, että WordPressissä ei ole mahdollisuutta lisätä otsikkoalueellesi painiketta heti valmiina. Tästä huolimatta joissakin WordPress-teemoissa on monia lisäominaisuuksia, joiden tarkoituksena on laajentaa WordPressin toimintoja eri tavoin. Esimerkiksi Qode-teemojen tapauksessa on widget nimeltään Qode-painike jonka avulla voit lisätä ja mukauttaa painikkeen suoraan otsikkoalueelle. Näytämme sinulle, kuinka tämä tehdään Bridge-teeman avulla, joten muista lukea eteenpäin.

Nyt, heti alkuun, meidän pitäisi mainita, että Bridge (samoin kuin monet muut Qode-teemat) sisältää useita mukautettuja widget-alueita, joiden avulla voit lisätä erilaisia ​​widgetejä sivustollesi. Mitä tulee erityisesti sivuston otsikkoon, se koostuu kahdesta pääalueesta – otsikon yläosa ja otsikon alaosa. Sitten nämä alueet jaetaan edelleen Otsikko ylhäällä vasen, otsikko ylhäällä oikea, ylätunniste alhaalla oikea ja otsikon alaosa keskellä widget-alue. Voit lisätä widgetejä mille tahansa näistä alueista siirtymällä osoitteeseen Ulkonäkö >> Widgetit.

Jos käytät Bridgeä etkä näe joitain näistä alueista widget-alueluettelossasi, on mahdollista, että jokin otsikkoalueista (yleensä Header Top) on pois päältä. Sinun täytyy varmista, että tämä alue näkyy avaamalla Qode-asetukset >> Otsikko WordPress-hallintapaneelissasi.

Etsi sitten Header Top jakso ja vaihda Näytä otsikon yläosa kohtaan Joo.

Tässä on monia muita Header Top -alueeseen liittyviä vaihtoehtoja, joita voit säätää mieltymystesi mukaan, kuten taustaväri, pehmusteet, mahdollisuus piilottaa se vierityksen aikana ja muut.

Tietenkin löydät myös muita otsikkopohja-alueeseen liittyviä vaihtoehtoja sekä muita yleisiä otsikkovaihtoehtoja, kuten mahdollisuus muuttaa sen reunuksen väriä, läpinäkyvyyttä, asettaa se olemaan ruudukossa ja niin edelleen.

Kun olet tyytyväinen asetuksiin, paina Tallenna muutokset -painiketta.

Katsotaanpa nyt, kuinka voit lisätä painikkeen johonkin näistä widget-alueista käyttämällä Qode-painike widget. Voit lisätä tämän painikkeen mille tahansa Otsikko-widget-alueelle, josta haluat. Aiomme näyttää painikkeen lisäämisen Otsikko alhaalla oikealla widget-alue, jolloin painike tulee näkyviin otsikon navigointivalikon viereen. Tämä on yksi yleisimmistä kohdista painikkeen lisäämiseen sivustolle, mikä on varsin loogista, koska itse navigointivalikko on yksi helpoimmin havaittavista verkkosivuston elementeistä.

Voit tehdä tämän etsimällä a Qode-painike widget, valitse widget-alue (Otsikko alhaalla oikealla) ja paina Lisää widget -painiketta (tai vedä se oikealla olevalle widget-alueelle).

Käyttämällä Qode Button -widget-vaihtoehtoja voit aseta painikkeesi koko, lisää painikkeesi teksti, linkitä, muuta sen värejä (hover-väri, taustaväri jne.) ja paljon muuta.

Lyö Tallentaa -painiketta, kun olet määrittänyt painikewidget-asetukset, ja katso, miltä painike näyttää livenä.

Tietenkin, kuten olemme jo maininneet, voit helposti lisätä painikkeesi mihin tahansa muuhun käytettävissä olevaan otsikko-widget-alueeseen. Esimerkiksi painikemme näyttää tältä, kun olemme lisänneet (ja mukauttaneet) Qode Button -widgetin Otsikko-ylä vasemmalle -widget-alueelle (samalla tavalla kuin teimme Otsikko-oikea-alhaalla):

Kuten näet, painike on nyt sijoitettu logon yläpuolelle vasemmalla.

Tai tässä on painikkeemme ulkoasu, kun se lisätään Otsikko-oikealle yläwidget-alueelle:

Tietysti voit käyttää samaa mukautettua CSS-vaihtoehtoa, jota käytimme ensimmäisessä menetelmässä jossakin teemassamme (valikon kohdasta muuttaminen painikkeeksi), mutta Qode Button -widget on paljon yksinkertaisempi vaihtoehto, koska sen avulla voit muokata tyyliä. painiketta millä tahansa haluamallasi tavalla ilman koodia. Lisäksi, kuten yllä olevista kuvaesimerkeistämme näet, voit sijoittaa sen mihin tahansa otsikkoon.

Johtopäätös

Ei ole väliä, haluatko lisätä linkin rekisteröitymislomakkeeseen, ostopainikkeeseen tai mihin tahansa muuhun toimintakehotukseen, otsikko on yksi parhaista paikoista kiinnittää huomio painikkeeseen ja motivoida kävijöitä toimimaan. Pohjimmiltaan painikkeen lisääminen otsikkovalikkoon on helppoa – sinun tarvitsee vain muuttaa olemassa oleva valikkokohta määrittämällä sille jokin mukautettu CSS-luokka ja muotoilla sitten painikkeesi tyyliä käyttämällä Ulkonäkö >> Mukauta näyttö. Silti, jos käytät (tai aiot käyttää) jotakin teemoistamme, sinulla on käytettävissäsi paljon enemmän muokkausvaihtoehtoja ja voit myös sijoittaa painikkeesi nopeasti ja helposti mille tahansa valitsemallesi widget-alueelle (ei vain otsikkoon). valikko). Valitse siis haluamasi menetelmä ja noudata ohjeitamme tarkasti, jotta voit lisätä otsikkoon näkyvän toimintakehotuksen, joka auttaa parantamaan käyttökokemusta ja lisäämään tuloksiasi.