Kuinka lisätä tarrapainikkeita WordPress-verkkosivustolle
Haluatko lisätä tahmeat painikkeet WordPress-sivustoosi? Käyttämällä tahmea toimintopainikkeita, käyttäjä voi helposti saada verkkosivustoon liittyviä tietoja. Nämä tiedot voivat olla sähköpostiosoitteesi, puhelinnumerosi, sijainti Google-kartalla, linkit sosiaalisiin verkostoihin jne. Tässä artikkelissa näytän sinulle, kuinka lisätä tahmeat painikkeet WordPress-verkkosivustoosi.
Tahmeat toimintopainikkeet toimivat kuin kelluva widget. Nämä painikkeet lukitaan, vaikka käyttäjä vierittäisi ylös tai alas. Se näyttää hyvältä verkkosivustolta ja tekee siitä käyttäjäystävällisemmän. Tarrapainikkeiden lisääminen parantaa tuloksia ja vierailijoiden sitoutumista.
Alku
Voit lisätä tahmeat painikkeet WordPressiin kahdella tavalla. Yksi tapa on rakentaa koodi tyhjästä ja toinen on käyttää laajennusta. Tässä opetusohjelmassa aion käyttää laajennusta. Syy on ilmeinen, jos saamme hyvän laajennuksen, joka pystyy suorittamaan pienen tehtävämme, miksi tuhlata aikaa sen rakentamisesta tyhjästä.
Koodaaminen on järkevää, jos haluat luoda suuren ja monimutkaisen toiminnallisuuden. Tällaisissa tapauksissa laajennukset eivät välttämättä sovi käyttöösi, ja on parasta olla luottamatta niihin, koska niiden päivitykset saattavat rikkoa toiminnallisuutta. Mutta tällaisissa pienemmissä tehtävissä (tahmeat painikkeet) voit luottaa laajennuksiin.
WP Sticky on yksi tehokkaimmista laajennuksista tarttuvien elementtien lisäämiseksi verkkosivustollesi. Se on siisti pieni laajennus, jonka avulla voit lisätä rajoittamattoman määrän tahmeita elementtejä, jotka ovat yhteensopivia kaikkien teemojen, laajennusten ja sivunrakentajien kanssa, ja koko toimenpide voidaan suorittaa muutamassa minuutissa. Hän korostaa prosessin yksinkertaisuutta, joten koko menettely koostuu:
- Nimeä elementtisi
- Siirrä ja napsauta Valitse kohde -painiketta
- Valitse haluamasi elementti, jonka haluat tehdä tahmeaksi
- Napsauttamalla Tallenna muutokset
Ja siinä on melkein kaikki – valittu kohde on nyt liitetty sivustoosi. Mukana on melko vähän asetuksia, joten voit leikkiä tahmean elementin peittävyydellä, valita Fade-in- tai Slide down -tehosteen, asettaa vieritysalueen ja paljon muuta. Lisäksi voit asettaa ihanteellisesti erilaisia asetuksia verkkosivustosi vaatimusten mukaisesti – voit lisätä rajoituksen tietyn kriteerin perusteella, mikä tarkoittaa, että elementti ei näy tahmea valitussa:
- Sivut
- Viestit
- Luokat
- Tunnisteet:
- Tai viestityypit
Voit tietysti säätää sitä kaikkialle tai estää sen mainitsemilla saadaksesi täydellisen hallinnan laajennuksesta. Oletko huolissasi siitä, miten ne näkyvät eri laitteilla? Tämä voidaan määrittää myös Laitteet-välilehdessä, jossa voit valita tarkan näytön koon, jolla kohteesi näkyvät tahmeana. Voit valita melkein minkä tahansa haluamasi elementin, olipa se sitten tahmea otsikko, tahmea valikko, widget, navigointi, video … kaikki voidaan asettaa muutamassa minuutissa ja voit luoda niin monta kuin haluat. Tehokas, tyylikäs ja mahdollisimman yksinkertainen.
Lisäksi on olemassa muita työkaluja, jotka auttavat sinua luomaan tahmea elementtejä sivustollesi. Asenna ja aktivoi samalla Smart Floating Action Buttons – Buttonizer -laajennus. Seuraavassa osassa näemme kuinka tätä laajennusta käytetään.
Lisää tahmeat painikkeet WordPress-sivustoosi
Kun olet asentanut laajennuksen, siirry ohjauspaneelin "Buttonizer" -valikkoon. Tällä laajennuksella ei ole taustajärjestelmän asetussivua. Sen sijaan se tarjoaa käyttöliittymän, jotta voit nähdä muutosten vaikutukset välittömästi.
Laajennus tarjoaa yli 25 toimintoa napsautuksella. Oletetaan, että luettelosta haluat lisätä sähköpostiosoitteen, puhelimen ja Google Map -sivuston tahmeisiin painikkeisiin.
Napsauta Lisää-painiketta ja nimeä painike. Annan painikkeelle nimen "Puhelin". Sen jälkeen näet käyttöliittymässä olevan painikkeen alla olevan kuvan mukaisesti.
Koska tämä painike on "puhelinnumeroa" varten, meidän on määritettävä se. Napsauta Asetukset-kuvaketta PHONE-kohdan vieressä. Valintapaneeli painikkeen mukauttamiseksi avautuu.
Valitse avattavasta Painiketoiminto-luettelosta Soittotoiminto (puhelinnumero). Lisää puhelinnumerosi tekstiruutuun.
Sitten haluan asettaa puhelimen kuvakkeen tälle painikkeelle. Tämä voidaan tehdä STYLE >> ICON -osiosta. Napsauta ICON-kuvakkeen alla SELECT ICON, avautuu ponnahdusikkuna, jossa valitset kuvakkeen Font Awesome -kirjastosta.
Noudattamalla samaa prosessia voimme lisätä sivustoon niin monta painiketta. Valitse jokaiselle painikkeelle vastaava painikkeen toiminto ja saat eri vaihtoehdot painikkeelle.
Lopuksi haluamme asettaa tarttuvien painikkeiden sijainnin. Napsauta "Uusi ryhmä" -kohdan vieressä olevaa "Asetukset" -kuvaketta.
Sijainti-osiosta saat parametrit painikkeiden sijainnin asettamiseksi. Haluan sen olevan oikea ja keskitetty. Joten asetin "0%" kohtaan "HORIZONTAL" ja keskiosan kohtaan "VERTICAL".
Buttonizer-laajennukset tarjoavat monia muita ominaisuuksia, joita sinun pitäisi pelata ja tutustua. Laajennus tarjoaa vaihtoehtoja painikkeiden väreille, painikkeiden animaatioille, taustalle, mukautetuille luokille, laitteen näkyvyydelle ja muulle.
Kun yllä olevia asetuksia on sovellettu, tahmeat painikkeet näkyvät verkkosivustolla alla olevan kuvakaappauksen mukaisesti.
Toivottavasti sait tiedon tahmeiden painikkeiden lisäämisestä WordPress-sivustoosi. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.