Kuinka muokata WordPress-sivuston mobiiliversiota
Miksi verkkosivustosi mobiiliversio on menestyksesi kannalta ratkaiseva?
Aloitetaan siitä, että yli 50 % verkkoliikenteestä maailmanlaajuisesti tulee matkapuhelimista. Tämä tarkoittaa kirjaimellisesti, että yli puolet asiakkaistasi käy sivustollasi matkapuhelimillaan. Vuodesta 2018 lähtien, jolloin Google aloitti sivustojen indeksoinnin mobiililaitteilla, responsiivinen web-suunnittelu on tullut entistä tärkeämmäksi, ja verkkosivuston mobiilikokemukseen keskittymisestä tuli loogisesti prioriteetti kaikille, jotka suhtautuvat liiketoimintansa vakavasti. Toinen mobiiliystävällisten verkkosivustojen tärkeä etu on, että ne ovat yksinkertaisia ja intuitiivisia. Ne tarjoavat sujuvan käyttökokemuksen, jolloin potentiaalisten asiakkaiden on helpompi ottaa sinuun yhteyttä. Lisäksi ne latautuvat nopeasti ja tekevät sisällön jakamisesta helppoa ja luonnollista. Yksi tapa ajatella responsiivista sivustoa on nähdä se ilmaisena tapana saada parempi sijoitus hakukoneissa. Miksi missasit sen tilaisuuden? Mitä paremmin sijoitut, sitä enemmän orgaanisia hakutuloksia saat, mikä tarkoittaa enemmän liidejä ja enemmän tuloksia.
Kuinka esikatsella verkkosivustosi mobiiliversiota
Responsiivinen WordPress-teema takaa paljon etuja, mutta sinun on silti tarkistettava, miltä sivustosi näyttää älypuhelimilla reaaliajassa. Näytön kooissa ja selaimissa on monia mahdollisia vaihteluita, joten mikään mobiiliesikatselu ei tarjoa täydellistä ja 100 % tarkkaa esikatselua. Sinun tulee aina luottaa todelliseen kokemukseen, jonka saat katsomalla sivustoasi todellisella älypuhelimella tai mobiililaitteella. Tämä voi innostaa sinua optimoimaan tärkeimmät aloitussivusi ja luomaan erilaisia versioita, jotka on optimoitu mobiilikokemukseen.
Katsotaanpa, kuinka voit esikatsella, onko sinulla WordPress-mobiiliystävällinen sivusto kahdella eri tavalla.
WordPressin teemamuokkausohjelman käyttäminen
Ensimmäinen ja yksinkertaisin tapa nähdä mobiiliversion esikatselu on käyttää WP:n Theme Customizer -sovellusta. Toimenpide on yksinkertainen. Kirjaudu sisään WordPress- hallintapaneeliisi ja valitse Ulkoasu > Mukauta.
Kun napsautat WordPress Theme Customizer -sovellusta ja avaat sen, näet kaikki vaihtoehdot vasemmassa valikossa. Tarjotut vaihtoehdot voivat vaihdella käyttämästäsi teemasta riippuen.
Huomaa mobiilikuvake näytön alareunassa. Napsauta sitä, niin näet esikatselun siitä, miltä sivustosi näyttää mobiililaitteissa.
Jos siniset muokkaussymbolit hämmentävät sinua – älä huoli. Ne näkyvät vain esikatselussa eivätkä koskaan live-sivustollasi.
Vinkki: Jos et ole vielä julkaissut blogia tai se on ylläpitotilassa, tämä esikatselutapa on erittäin kätevä, sillä sen avulla voit tehdä muutoksia ja tarkistaa, miltä ne näyttävät ennen kuin aloitat sivustosi käytön.
Google Chromen kehittäjätyökalujen laitetilan käyttäminen
Jos et jostain syystä tunne olosi mukavaksi käyttää WP-teeman mukauttajaa, voit aina tarkistaa, onko sinulla WordPress-mobiiliystävällinen Google Chrome -selaimella. Se on myös hyvin yksinkertainen ja helppo toimenpide, joka koostuu parista vaiheesta.
Avaa vain Google Chrome -selain tavalliseen tapaan ja siirry sivulle, jonka haluat tarkistaa. Napsauta sitten sivua hiiren kakkospainikkeella ja valitse Tarkista.
Huomaa, että tällä tavalla voit nähdä minkä tahansa sivuston minkä tahansa sivun esikatselun, et vain omasi. Se voi olla jopa kilpailijasi verkkosivusto.
Oikealla puolellasi avautuu uusi ruutu, joka näyttää tältä:
Kehittäjänäkymässä voit nähdä verkkosivustosi HTML-lähdekoodin.
Napsauta nyt Toggle Device Toolbar -painiketta päästäksesi mobiilinäkymään.
Huomaat muutamia muutoksia mobiiliesikatselussa: verkkosivustosi on kutistettu vastaamaan mobiililaitteen näytön kokoa ja muita muutoksia saattaa tapahtua. Katso ja huomaa erot huolellisesti ja pane merkille, mitä sinun pitäisi muuttaa.
Tarkista, mitä tapahtuu, kun yrität viedä hiiren osoittimen mobiilinäkymän päälle – siitä tulee ympyrä.
Ympyrän tarkoitus on jäljitellä mobiililaitteen kosketusnäyttöä.
Vinkki: Jos haluat nähdä, kuinka mobiilinäyttö lähentyy ja loitontaa, pidä Shift-näppäintä painettuna ja napsauta ja liikuta hiirtä.
Tämän menetelmän etuna mobiilisivustosi esikatseluun on, että sen avulla voit nähdä, miltä sivu näyttää erityyppisillä älypuhelimilla. Nämä lisävaihtoehdot ovat sivustosi mobiilinäkymän yläpuolella. Riippumatta siitä, millaisen esikatselun avasit napsauttaessasi Toggle Device Toolbar -painiketta, tässä voit muuttaa laitteen näytön kokoa.
Vinkki: Käytä oikeassa yläkulmassa olevaa kiertokuvaketta kääntääksesi mobiilinäyttöä. Voit myös tarkastella sivun elementtejä napsauttamalla hiiren kakkospainikkeella ja valitsemalla Tarkastus-vaihtoehdon.
Miksi Page Builder on tärkeä RWD:lle?
RWD on asia, jota sinun on mietittävä huolellisesti verkkosivustosi luomisen alusta lähtien. On monia asioita analysoitava, kun sinun on tehtävä sivustostasi yhtä houkutteleva, navigoitava ja tehokas erikokoisilla näytöillä. WordPress-sivujen rakentajilla on ratkaiseva rooli tässä prosessissa, he antavat sinulle sivustosi suunnittelun kulmakivet, joten sinun on perehdyttävä itsesi hyvin ennen kuin teet valinnan. Joten investoimalla jonkin aikaa sivujen rakentajien tutkimukseen säästät paljon aikaa, jonka voit käyttää verkkosivustosi luomiseen.
Kokemuksemme perusteella WPBakery ja Elementor ovat erinomaisia valintoja, sillä niillä voidaan tyydyttää monenlaisia tarpeita.
Jos sinulla on budjetti, Elementor on paras vaihtoehto. Se on helppokäyttöinen, aloittelijaystävällinen laajennus, jolla on erittäin runsas ilmainen versio, jossa on vankka joukko elementtejä. Se integroituu hyvin myös muihin johtaviin WP-laajennuksiin ja palveluihin, kuten MailChimp, WooCommerce, HubSpot, Yoast SEO jne. Jos sinulla on varaa premium-laajennukseen, WPBakery Page Builder ei koskaan petä sinua. Siinä on uskomattoman suuri kokoelma elementtejä, lukuisia lohkoja ja vaihtoehtoja. Se on myös helppokäyttöinen ja mahdollistaa paljon luovuutta.
Vaikka sivujen rakentajat ovat välttämättömiä RWD:lle, käyttämäsi teema on myös tärkeä, koska se voi tarjota upeita ominaisuuksia. Kuten ehkä tiedät, teeman tekijät kehittävät erityisiä widgetejä ja elementtejä, joita voidaan säätää sivunrakennusohjelmista erikseen. Monet näistä elementeistä antavat sinun asettaa reagointikyvyn tarpeidesi mukaan. Tästä syystä sinun tulee valita tunnettujen, luotettavien kirjoittajien kehittämä teema. Tämä on erityisen tärkeää, jos haluat käyttää ilmaista WordPress-teemaa. Säästäksemme aikaasi ja hermojasi testasimme tonnia ilmaisia teemoja. Joten jos haluat käyttää reagoivaa, monipuolista ja luotettavaa ilmaista teemaa, suosittelemme kokeilemaan Qi-teemaa.
Kuinka muokata sivustosi mobiiliversiota Elementorissa
On turvallista sanoa, että Elementor on ylivoimaisesti paras sivujen rakentaja verkkosivustosi mobiiliversion muokkaamisessa. Saattaa käydä niin, että et ole huomannut tätä pientä kuvaketta, jota kutsutaan Viewport Iconiksi, asetuksista :
Tämä kuvake osoittaa, että mitä tahansa arvoa, jonka vieressä on se, voidaan muokata erikseen työpöytäversiossa ja mobiilisivustoversiossa. Otetaan esimerkiksi Column Width -asetukset – voit säätää arvoa pöytäkoneelle, mobiililaitteelle ja tabletille. Kullekin laitteelle antamasi arvo on voimassa vain valitulle laitteelle. Huomaa, että HTML-tunnisteen vieressä ei ole kuvaketta, mikä tarkoittaa, että sillä on sama arvo jokaiselle laitteelle.
Jos haluat muuttaa mobiililaitteen arvoa, sinun tarvitsee vain valita mobiiliasettelu ja syöttää halutut arvot (nämä arvot otetaan käyttöön vain mobiililaitteissa). Näytön oikealla puolella on kaikkien tekemiesi muutosten live-esikatselu, jotta näet heti, miltä uudet arvot näyttävät laitteessa.
Voit palata työpöytänäkymään sinun on vaihdettava työpöydän asetteluvaihtoehtoon. Voit tehdä sen, kuten olemme maininneet edellä tai käyttämällä tätä pientä kuvaketta sivun alavalikossa :
Vielä yksi tärkeä asia, joka tulee mainita responsiivisuuteen liittyen, on se, että sarakkeet ja rivit voidaan kytkeä pois päältä yksittäisillä laitteilla, eli voidaan sanoa, että ne eivät näy (tai tulevat näkyviin) joillain näyttökooilla.
Pääset tähän vaihtoehtoon seuraamalla polkua:
- Napsauta riviä/saraketta hiiren kakkospainikkeella
- Valitse Muokkaa osiota
- Napsauta Lisäasetukset-välilehteä
- Valitse avattava Responsiivinen -valikko
Tämä vaihtoehto on erittäin tärkeä, jos meillä on osio, jonka tiedämme olevan järkevää näyttää vain työpöydällä, joten peruutamme sen muissa laitteissa. Ja sen puutteen kompensoimiseksi voimme tehdä yhden osion, joka näkyy kaikilla muilla laitteilla paitsi työpöydällä.
Mitä tulee sarakkeisiin, löydämme myös Käänteinen sarake -vaihtoehdon (Tablet / Mobile). Tämä on parasta selittää esimerkin avulla. Oletetaan, että meillä on työpöydällä tällainen osio, jossa sisältö on jaettu kahteen sarakkeeseen, joissa on kuvia ja lyhyt teksti :
Luonnollisesti mobiililaitteilla sisältö järjestetään uudelleen kuten alla olevassa kuvassa noudattaen alkuperäistä järjestystä työpöydältä:
Käänteisen sarakkeen vaihtoehdon avulla voimme vaihtaa tietyn osion järjestystä mobiililaitteiden tai tablettien asetteluissa. Kun teemme sen ensimmäisessä osiossa pienemmillä laitteilla, tuloksena on tehokkaampi näyttösisältö:
Kuinka muokata sivustosi mobiiliversiota laajennuksilla
Ennemmin tai myöhemmin tunnet houkutuksen käyttää erilaisia laajennuksia, joiden avulla voit helposti lisätä sivupalkin, toimintakehotuksen, widgetin tai vastaavan elementin sivustollesi. Tämä on hetki, jolloin monet unohtavat, että sivupalkki tai mikä tahansa muu elementti, joka toimii täydellisesti työpöydän näytöllä, ei välttämättä ole niin hyvä mobiililaitteella. Joten ennen kuin alat hyödyntää näitä käteviä työkaluja, tarkista, ovatko ne myös reagoivia. Totuus on, että monet niistä ovat ja voivat itse asiassa auttaa sinua parantamaan käyttökokemusta. Mutta tietääksesi sen varmasti lukemalla arvostelut tai etsimällä esittelyn ennen minkä tahansa asentamista. Niin kauan kuin laajennus toimii hyvin mobiililaitteella, voit olla varma, että verkkosivustosi on matkalla menestykseen. Älä myöskään unohda, että vaihtoehdot vaihtelevat suuresti käyttämäsi teeman mukaan. Premium – teematakaa varmasti paljon enemmän mahdollisuuksia.
Responsiivinen valikko – Ensivaikutelma ratkaisee
Valikko on käyttökokemuksen peruspilari. Se on ensimmäinen tai yksi ensimmäisistä asioista, joita joku napsauttaa vieraillessaan sivustollasi. Se vaikuttaa siihen, kuinka nopeasti vierailija löytää sen, mitä varten hän tuli, kuinka kauan hän viipyy ja moniin muihin käyttökokemuksen näkökohtiin. On tärkeää, että sinulla on kaunis, hyvin jäsennelty valikko, joka tekee navigoinnista sujuvaa, mutta se ei ole niin yksinkertaista kuin miltä näyttää. Sinulla voi olla loistava valikko, joka toimii täydellisesti pöytäkoneella, mutta on liian raskas matkapuhelimeen. Yksi ratkaisu tässä tapauksessa on sovittaa myös työpöytäversiosi mobiilinäytön kokoon. Mutta entä jos se merkitsee liian paljon hyödyllistä tietoa? Siinä tapauksessa voit luoda eri valikon, joka on räätälöity vain mobiililaitteen näytön kokoa varten. Monissa WP-teemoissa on mahdollisuus tehdä tämä. Jos teemasi ei ole yksi niistä, älä huoli, niitä on moniaupeita laajennuksia reagoiviin valikoihin. Suosittelemme Responsive Menu -laajennusta, joka sisältää yli 150 mukautusvaihtoehtoa ja joka ei vaadi koodaustaitoa. Sen avulla voit lisätä animaatioita, taustakuvia, asettaa valikkopainikkeiden sijaintia ja paljon muuta. Se on uskomattoman helppokäyttöinen, joten se on erityisen kätevä aloittelijoille.
Kuvat ja galleriat
Kuva puhuu tuhansia kieliä, joten varmista, että omasi näyttää yhtä upealta kaikilla näytöillä. Elämme hyvin visuaalisesti suuntautuneessa kulttuurissa, ja missä tahansa oletkin, upeat valokuvat ovat välttämättömiä. Mutta riippumatta siitä, kuinka upeita kuvia sinulla on, jos ne latautuvat hitaasti tai niitä ei ole esitetty siististi, olet vaarassa menettää huomattavan osan yleisöstäsi. Tämän skenaarion välttämiseksi suosittelemme Envira Gallery Lite -laajennusta, jonka avulla voit luoda tehokkaita gallerioita aivan kuten ammattilainen. Jotkut sen eduista ovat, että se on erittäin optimoitu verkko- ja palvelinsuorituskykyä varten, mikä on hieno uutinen SEO:llesi.
Sosiaalisen jakamisen painikkeet
Kun sinulla on loistava, reagoiva menu ja upeat galleriat, seuraavaksi huolehdittava sosiaalisen median jakamispainikkeet. Niiden koko tulee mukauttaa laitteen mukaan. Iso painike pienellä näytöllä saa vierailijan napsauttamaan, ja se on melko ärsyttävää. Toisaalta suuren näytön pienet painikkeet eivät ole niin helppoja tunnistaa. Sassy Social Share -laajennus, jonka avulla voit muokata painikkeita, on laajennus. Helppokäyttöinen, täysin ilmainen ja aloittelijaystävällinen, se tekee jakamisesta helppoa sekä sinulle että sivustosi vierailijoille.
Firendlyn mobiilisivustot
Tilanteissa, joissa sinun on tehtävä sivustostasi mobiiliresponsiivinen nopeasti, ei ole parempaa ratkaisua kuin WPtouchin kaltainen laajennus. Tämä laajennus on tehty siten, että se lisää automaattisesti yksinkertaisen ja tyylikkään mobiiliteeman WP-sivustollesi. Se, että Google suosittelee sitä, kertoo paljon sen tehokkuudesta. Joten vaikka sinulla ei olisi mobiiliversiota sivustostasi, tällainen laajennus voi ottaa välittömästi käyttöön mobiiliystävällisen version verkkosivustostasi, jotta et menetä sijoitustasi. Sen avulla voit myös muokata monia sivuston ulkoasun näkökohtia.
Sivujen latausnopeus on myös erittäin tärkeä osa käyttökokemusta, etenkin mobiililaitteilla. Jos kohtaat haasteita tällä alalla, harkitse Accelerated Mobile Pages -laajennuksen käyttöä, sillä se on yksi nopeimmista ja yksinkertaisimmista tavoista parantaa sivustosi latausnopeutta.
Vältä ponnahdusikkunoiden lisäämistä mobiililaitteisiin
Ponnahdusikkunat ovat harvoin hauskoja, mutta ne ovat erityisen ärsyttäviä matkapuhelimissa. Ne peittävät suuren osan näytöstä ja vaativat vierailijan hylkäämään ne ennen kuin pääset sivun sisältöön. Siksi on parasta välttää niitä kokonaan sivustosi mobiiliversiossa. Kuinka aiot välttää niitä, riippuu enimmäkseen palveluntarjoajasta, mutta suurimmalla osalla heistä on mahdollisuus poistaa häiritsevät ponnahdusikkunat käytöstä matkapuhelimissa. Muista myös , että Google rankaisee sivustoja, joissa on erittäin häiritseviä ponnahdusikkunoita.
Tiivistettynä
Koska älypuhelimia Internetiin käyttävien ihmisten määrä on jatkuvassa kasvussa, on järkevää odottaa paljon enemmän ratkaisuja ja vaihtoehtoja sivustojen mobiiliversioille. Suunnittelijat työskentelevät kovasti käsitelläkseen lukuisia käyttötapoja, mutta RWD:n perusteet ovat samat – varmista, että valitset mobiiliystävällisen WP-teeman ja sivunrakennusohjelman, jossa on kaikki tarvitsemasi vaihtoehdot.
Joten kuinka reagoiva sivustosi on? Onko sinun tehtävä paljon muutoksia, jotta se olisi mobiiliystävällisempi? Jaa vastauksesi kanssamme ja pyydä lisätietoja kommenttiosiossa.