Kuidas redigeerida WordPressi saidi mobiiliversiooni
Miks on teie veebisaidi mobiiliversioon teie edu jaoks ülioluline?
Alustame sellest, et enam kui 50% veebiliiklusest kogu maailmas pärineb mobiiltelefonidest. See tähendab sõna otseses mõttes, et enam kui pooled teie klientidest vaatavad teie saiti mobiiltelefonist. Alates 2018. aastast, mil Google algatas saitide mobiilipõhise indekseerimise, on responsiivne veebidisain muutunud veelgi olulisemaks ning veebilehe mobiilikogemusele keskendumine sai loogiliselt prioriteediks igaühe jaoks, kes oma äri tõsiselt võtab. Mobiilisõbralike veebisaitide teine oluline eelis on see, et need on lihtsad ja intuitiivsed. Need pakuvad sujuvat kasutuskogemust, muutes potentsiaalsetel klientidel teiega ühenduse võtmise lihtsamaks. Lisaks laadivad need kiiresti ja muudavad sisu jagamise lihtsaks ja loomulikuks. Üks võimalus tundlikule saidile mõelda on näha seda tasuta viisina otsingumootorites parema asetuse saavutamiseks. Miks sa jätaksid selle võimaluse kasutamata? Mida parema asetuse teete, seda rohkem orgaanilisi otsingutulemusi saate, mis tähendab rohkem müügivihjeid ja rohkem konversioone.
Kuidas vaadata oma veebisaidi mobiiliversiooni eelvaadet
Responsiivne WordPressi teema tagab palju eeliseid, kuid peate siiski kontrollima, kuidas teie sait nutitelefonides reaalajas välja näeb. Ekraanisuurustes ja brauserites on palju võimalikke variatsioone, nii et ükski mobiili eelvaade ei anna teile täiuslikku ja 100% täpset eelvaadet. Peaksite alati toetuma tõelisele kogemusele, mille saate oma saiti tegelikus nutitelefonis või mobiilseadmes vaadates. See võib inspireerida teid optimeerima oma peamisi sihtlehti ja looma erinevaid mobiilikogemuse jaoks optimeeritud versioone.
Niisiis, vaatame, kuidas saate WordPressi mobiilisõbraliku saidi eelvaadet kahel erineval viisil vaadata.
WordPressi teemakohandaja kasutamine
Esimene ja kõige lihtsam viis mobiiliversiooni eelvaate nägemiseks on kasutada WP teemakohandajat. Protseduur on lihtne. Logige sisse oma WordPressi armatuurlauale ja valige Välimus > Kohanda.
Pärast WordPressi teemakohandaja klõpsamist ja selle avamist näete vasakpoolses menüüs kõiki valikuid. Olenevalt kasutatavast teemast võivad pakutavad valikud erineda.
Pange tähele mobiiliikooni ekraani allservas. Klõpsake sellel ja näete eelvaadet selle kohta, kuidas teie sait mobiilseadmetes välja näeb.
Kui sinised redigeerimissümbolid ajavad teid segadusse – ärge muretsege. Need on nähtavad ainult eelvaatajas ja mitte kunagi teie aktiivsel saidil.
Näpunäide. Kui te pole veel oma ajaveebi käivitanud või kui see on hooldusrežiimis, on see eelvaatemeetod väga mugav, kuna see võimaldab teil enne saidi avaldamist muudatusi teha ja vaadata, kuidas need välja näevad.
Google Chrome’i arendajatööriistade seadmerežiimi kasutamine
Kui te ei tunne end mingil põhjusel WP teemakohandaja kasutamisel mugavalt, saate Google Chrome’i brauseriga alati kontrollida, kas teil on WordPressi mobiilisõbralikkus. See on ka väga lihtne ja lihtne protseduur, mis koosneb paarist sammust.
Avage lihtsalt Google Chrome’i brauser, nagu tavaliselt, ja minge lehele, mida soovite kontrollida. Seejärel paremklõpsake lehel ja valige Kontrolli.
Pange tähele, et sel viisil näete mis tahes saidi, mitte ainult enda lehe eelvaadet. See võib olla isegi teie konkurendi veebisait.
Paremal küljel avaneb uus paan ja see näeb välja järgmine:
Arendaja vaade võimaldab teil näha oma veebisaidi HTML-i lähtekoodi.
Nüüd klõpsake mobiilivaate nägemiseks nuppu Lülita seadme tööriistariba sisse.
Märkate mobiili eelvaates mõningaid muudatusi: teie veebisaiti kahaneb, et see sobiks mobiiliekraani suurusega ja võib toimuda muid muudatusi. Vaata ja märka erinevusi hoolikalt ning pane tähele, mida peaksid muutma.
Kontrollige, mis juhtub, kui proovite hiirekursorit mobiilivaatel juhtida – sellest saab ring.
Ringi eesmärk on jäljendada mobiilseadme puuteekraani.
Nõuanne. Kui soovite näha, kuidas teie mobiiliekraan sisse ja välja suumib, hoidke all tõstuklahvi ning klõpsake ja liigutage hiirt.
Selle mobiiliveebisaidi eelvaate meetodi kasutamise eeliseks on see, et see võimaldab teil näha, kuidas leht eri tüüpi nutitelefonides välja näeb. Need lisavalikud asuvad teie saidi mobiilivaate kohal. Olenemata sellest, millise eelvaate avasite, kui klõpsasite tööriistaribal Toggle Device Toolbar, saate siin muuta seadme ekraani suurust.
Nõuanne. Mobiiliekraani pööramiseks kasutage paremas ülanurgas olevat pööramisikooni. Samuti saate lehel elemente kontrollida, klõpsates paremklõpsu ja valides valiku Kontrolli.
Miks on Page Builder RWD jaoks oluline?
RWD on midagi, mille peale peate hoolikalt läbi mõtlema oma veebisaidi loomise algusest peale. Kui peate oma saidi erinevatel ekraanisuurustel võrdselt atraktiivseks, navigeeritavaks ja tõhusaks muutma, tuleb analüüsida palju asju. WordPressi lehtede koostajatel on selles protsessis otsustav roll, nad annavad teile saidi kujunduse nurgakivid, seega peate end enne valiku tegemist hästi kursis olema. Seega, kui investeerite veidi aega lehekoostajate uurimisse, säästate tegelikult palju aega, mille saate oma veebisaidi loomisele kulutada.
Meie kogemuse põhjal on WPBakery ja Elementor suurepärased valikud, kuna need suudavad rahuldada väga erinevaid vajadusi.
Kui teie eelarve on piiratud, on Elementor teie parim valik. See on lihtsalt kasutatav algajasõbralik pistikprogramm, millel on väga helde tasuta versioon koos kindla elementide komplektiga. See integreerub hästi ka teiste juhtivate WP pistikprogrammide ja teenustega, nagu MailChimp, WooCommerce, HubSpot, Yoast SEO jne. Kui saate endale lubada esmaklassilist pistikprogrammi, ei valmista WPBakery Page Builder teile kunagi pettumust. Kaasas uskumatult suur elementide kogu, hulgaliselt plokke ja valikuid. Seda on ka lihtne kasutada ja see võimaldab palju loovust.
Kuigi lehekoostajad on RWD jaoks hädavajalikud, on oluline ka teema, mida kavatsete kasutada, kuna see võib pakkuda hämmastavaid funktsioone. Nagu te võib-olla teate, töötavad teemade autorid välja konkreetseid vidinaid ja elemente, mida saab lehtede koostajatest eraldi reguleerida. Paljud neist elementidest võimaldavad teil määrata reageerimisvõime vastavalt teie vajadustele. Sel põhjusel peaksite valima tuntud ja usaldusväärsete autorite väljatöötatud teema. See on eriti oluline, kui soovite kasutada tasuta WordPressi teemat. Teie aja ja närvide säästmiseks testisime palju tasuta teemasid. Seega, kui soovite kasutada tundlikku, funktsioonirikast ja usaldusväärset tasuta teemat, soovitame proovida Qi teemat.
Kuidas muuta oma saidi mobiiliversiooni Elementoris
Võib kindlalt öelda, et Elementor on teie veebisaidi mobiiliversiooni redigeerimisel vaieldamatult parim lehtede koostaja. Võib juhtuda, et te ei märganud seadetes seda väikest ikooni, mida nimetatakse vaateakna ikooniks :
See ikoon näitab, et mis tahes väärtust, mis selle kõrval on, saab töölaua- ja mobiilisaidi versiooni jaoks eraldi redigeerida. Võtame näiteks veeru laiuse seaded – saate reguleerida väärtust lauaarvuti, mobiili ja tahvelarvuti jaoks. Iga seadme jaoks sisestatud väärtus kehtib ainult selle valitud seadme jaoks. Pange tähele, et HTML-märgendi kõrval ei ole ikooni, mis tähendab, et sellel on iga seadme jaoks sama väärtus.
Kui soovite mobiilseadme väärtust muuta, pole vaja muud, kui valida mobiilipaigutuse valik ja sisestada soovitud väärtused (neid väärtusi rakendatakse ainult mobiilseadmetes). Ekraani paremas servas on kõigi tehtud muudatuste reaalajas eelvaade, et saaksite kohe näha, kuidas uued väärtused seadmes välja näevad.
Töölauavaatesse naasmiseks peate lülituma töölaua paigutuse valikule. Saate seda teha, nagu me eespool mainisime, või kasutades seda väikest ikooni lehe alumises menüüs :
Veel üks oluline asi, mida reageerimisvõimega seoses mainida, on see, et veerge ja ridu saab üksikute seadmete puhul välja lülitada, st võib öelda, et need ei ole teatud ekraanisuurustel nähtavad (või on nähtavad).
Selle valiku avamiseks järgige teed:
- Paremklõpsake real/veerul
- Valige jaotis Redigeeri
- Klõpsake vahekaarti Täpsemalt
- Valige rippmenüü Reageeriv
See valik on väga oluline juhul, kui meil on jaotis, mille kuvamine on meile teadaolevalt mõttekas ainult töölaual, seega tühistame selle teistes seadmetes. Ja selle puudumise kompenseerimiseks saame teha ühe jaotise, mida näeb kõigis teistes seadmetes peale töölaua.
Veergude osas leiame ka valiku Tagurpidi veerg (tahvelarvuti / mobiil). Parim on seda selgitada näite kaudu. Oletame, et meil on töölaual selline jaotis, kus sisu on jagatud kaheks veergu, kus on pildid, millele järgneb lühike tekst :
Loomulikult korraldatakse mobiilseadmetes sisu ümber nagu alloleval pildil, järgides töölaua algset järjekorda:
Vastupidise veeru valik võimaldab meil mobiilseadmete või tahvelarvutite paigutuste jaoks teatud jaotise järjekorda muuta. Kui teeme seda esimese jaotise jaoks väiksemates seadmetes, kuvatakse sisu tõhusamalt:
Kuidas muuta oma saidi mobiiliversiooni pistikprogrammidega
Varem või hiljem tekib teil kiusatus kasutada mitmesuguseid pistikprogramme, mis muudavad teie saidile külgriba, CTA, vidina või sarnase elemendi lisamise lihtsaks. See on hetk, mil paljud unustavad, et külgriba või mõni muu element, mis töötab ideaalselt töölauaekraanil, ei pruugi mobiilis nii hea olla. Seega, enne kui hakkate neid käepäraseid tööriistu kasutama, kontrollige, kas ka need reageerivad. Tõde on see, et paljud neist on ja võivad aidata teil UX-i täiustada. Kuid selleks, et seda kindlasti teada saada, lugege enne installimist arvustusi või leidke demo. Kuni pistikprogramm mobiilis hästi toimib, võite olla kindel, et teie veebisait on teel edu poole. Ärgem unustagem ka seda, et teie valikud varieeruvad olenevalt kasutatavast teemast. Esmaklassiline teemakindlasti garanteerib palju rohkem võimalusi.
Menüü on kasutajakogemuse tugisammas. See on esimene või üks esimesi asju, millel keegi teie saiti külastades klõpsab. See mõjutab seda, kui kiiresti külastaja leiab selle, milleks nad tulid, kui kauaks ta seal viibib, ja paljusid muid kasutuskogemuse aspekte. Oluline on ilus, hästi struktureeritud menüü, mis muudab navigeerimise sujuvaks, kuid see pole nii lihtne, kui tundub. Teil võib olla suurepärane menüü, mis töötab suurepäraselt lauaarvutis, kuid on mobiili jaoks liiga raske. Üks lahendus sel juhul on kohandada oma töölaua versioon ka mobiiliekraani suurusele. Aga mis siis, kui see tähendab liiga palju kasulikku teavet? Sel juhul saate luua erineva menüü, mis on kohandatud ainult mobiiliekraani suuruse jaoks. Paljud WP teemad on varustatud selle võimalusega. Kui teie teema pole üks neist, ärge muretsege, neid on paljusuurepärased pistikprogrammid tundlike menüüde jaoks. Meie soovitus on Responsive Menu plugin, mis sisaldab 150+ kohandamisvalikut ja ei nõua kodeerimise teadmisi. See võimaldab teil lisada animatsioone, taustapilte, määrata menüünuppude asukohti ja palju muud. Seda on uskumatult lihtne kasutada, seega on see eriti mugav täiesti algajatele.
Pildid ja galeriid
Pilt räägib tuhandeid keeli, seega veenduge, et teie pilt näeks igas suuruses ekraanil sama vapustav välja. Me elame väga visuaalselt orienteeritud kultuuris ja olenemata nišist, kus te olete, on suurepärased fotod kohustuslikud. Kuid hoolimata sellest, kui suurepärased pildid teil on, kui need laaditakse aeglaselt või ei ole korralikult esitletud, võite kaotada märkimisväärse protsendi oma vaatajaskonnast. Nii et selle stsenaariumi vältimiseks soovitame pistikprogrammi Envira Gallery Lite, mis aitab teil luua võimsaid galeriisid nagu professionaal. Mõned selle eelised on see, et see on veebi ja serveri jõudluse jaoks väga optimeeritud, mis on teie SEO jaoks suurepärane uudis.
Sotsiaalse jagamise nupud
Kui teil on suurepärane, tundlik menüü ja vapustavad galeriid, tuleb järgmisena hoolitseda sotsiaalsete jagamise nuppude eest. Nende suurus tuleks kohandada vastavalt seadmele. Suur nupp väikesel ekraanil paneb külastaja juhuslikult klõpsama ja see on üsna ärritav. Teisest küljest pole suurel ekraanil väikseid nuppe nii lihtne ära tunda. Pistikprogramm, mis aitab teil kohandada nuppe, on pistikprogramm Sassy Social Share. Lihtne kasutada, täiesti tasuta ja algajasõbralik, muudab jagamise imelihtsaks nii teile kui ka teie saidi külastajatele.
Mobile Firendly veebisaidid
Olukordades, kus peate oma saidi kiiresti mobiilile reageerivaks muutma, pole paremat lahendust peale pistikprogrammi nagu WPtouch. See pistikprogramm on tehtud nii, et see lisab teie WP saidile automaatselt lihtsa ja elegantse mobiiliteema. Asjaolu, et seda soovitab Google, ütleb selle tõhususe kohta palju. Nii et isegi kui teil pole saidi mobiiliversiooni, saab selline pistikprogramm koheselt lubada teie veebisaidi mobiilisõbraliku versiooni, et te ei kaotaks oma edetabelit. Samuti võimaldab see kohandada paljusid saidi välimuse aspekte.
Lehekülje laadimiskiirus on ka kasutajakogemuse väga oluline aspekt, eriti mobiilseadmetes. Kui teil on selles valdkonnas probleeme, kaaluge pistikprogrammi Accelerated Mobile Pages kasutamist, kuna see on üks kiiremaid ja lihtsamaid viise saidi laadimiskiiruse parandamiseks.
Vältige hüpikakende lisamist mobiilseadmetesse
Hüpikaknad on harva lõbusad, kuid eriti ärritavad need mobiilides. Need katavad suure osa ekraanist ja nõuavad, et külastaja enne lehe sisule juurde pääsemist neist loobuks. Seetõttu on kõige parem neid oma saidi mobiiliversioonis täielikult vältida. See, kuidas kavatsete neid vältida, sõltub peamiselt teie teenusepakkujast, kuid enamikul neist on võimalus mobiiltelefonides pealetükkivad hüpikaknad keelata. Samuti pidage meeles, et Google karistab saite, millel on väga pealetükkivad hüpikaknad.
Kokkuvõtteks
Kuna nende inimeste arv, kes kasutavad internetti nutitelefone, on pidevas tõusuteel, on mõistlik oodata palju rohkem lahendusi ja võimalusi saitide mobiiliversioonide jaoks. Disainerid teevad kõvasti tööd, et käsitleda paljusid kasutusmustreid, kuid RWD põhitõed on samad – vali kindlasti mobiilisõbralik WP-teema ja lehe koostaja, millel on kõik vajalikud valikud.
Niisiis, kui tundlik teie sait on? Kas peate tegema palju muudatusi, et muuta see mobiilisõbralikumaks? Jagage oma vastuseid meiega ja küsige kommentaarides lisateavet.