Hur man redigerar mobilversionen av WordPress-webbplatsen
Varför är den mobila versionen av din webbplats avgörande för din framgång?
Låt oss börja med det faktum att mer än 50 % av webbtrafiken globalt kommer från mobiltelefoner. Detta betyder bokstavligen att mer än hälften av dina kunder kollar in din webbplats från sina mobiler. Från och med 2018, när Google initierade mobil-först indexering av webbplatser, har responsiv webbdesign bara blivit ännu viktigare, och fokus på den mobila upplevelsen av en webbplats blev logiskt sett en prioritet för alla som tar sin verksamhet på allvar. En annan viktig fördel med mobilanpassade webbplatser är att de är enkla och intuitiva. De erbjuder en smidig användarupplevelse, vilket gör det lättare för potentiella kunder att kontakta dig. Dessutom laddas de snabbt och gör det enkelt och naturligt att dela innehåll. Ett sätt att tänka kring en responsiv sajt är att se den som ett gratis sätt att ranka bättre på sökmotorer. Varför skulle du missa den möjligheten? Ju bättre du rankar, desto mer organiska sökresultat får du, vilket innebär fler potentiella kunder och fler konverteringar.
Hur man förhandsgranskar den mobila versionen av din webbplats
Ett responsivt WordPress-tema garanterar många fördelar men du måste fortfarande kontrollera hur din webbplats ser ut på smartphones i realtid. Det finns många möjliga variationer i skärmstorlekar och webbläsare så ingen av mobilförhandsvisningarna kan ge dig en perfekt och 100 % korrekt förhandsvisning. Du bör alltid lita på den verkliga upplevelsen du får av att titta på din webbplats på en riktig smartphone eller mobil enhet. Detta kan inspirera dig att optimera dina viktigaste målsidor och skapa olika versioner optimerade för den mobila upplevelsen.
Så låt oss se hur du kan förhandsgranska om du har en WordPress-mobilvänlig webbplats på två olika sätt.
Använder WordPresss Theme Customizer
Det första och enklaste sättet att se förhandsvisningen av mobilversionen är att använda WP:s Theme Customizer. Proceduren är enkel. Logga in på din WordPress- instrumentpanel och gå till Utseende > Anpassa.
När du har klickat på WordPress Theme Customizer och öppnat den kommer du att se alla alternativ i menyn till vänster. Det kan finnas vissa variationer i alternativen som erbjuds beroende på vilket tema du använder.
Lägg märke till mobilikonen längst ner på skärmen. Klicka på den så ser du en förhandsvisning av hur din webbplats ser ut på mobila enheter.
Om de blå redigeringssymbolerna förvirrar dig – oroa dig inte. De är bara synliga i förhandsgranskningen och aldrig på din livesajt.
Tips: Om du ännu inte har lanserat din blogg eller om den är i underhållsläge är den här metoden för förhandsgranskning väldigt praktisk eftersom den låter dig göra ändringar och kontrollera hur de ser ut innan du går live med din webbplats.
Använda Google Chromes utvecklarverktyg Enhetsläge
Om du av någon anledning inte känner dig bekväm med att använda WP Theme Customizer, kan du alltid kontrollera om du är mobilanpassad för WordPress med webbläsaren Google Chrome. Det är också en väldigt enkel och lätt procedur som består av ett par steg.
Öppna bara webbläsaren Google Chrome som du brukar och gå till sidan du vill kontrollera. Högerklicka sedan på sidan och välj Inspektera.
Observera att på detta sätt kan du se en förhandsgranskning av vilken sida som helst på vilken webbplats som helst, inte bara din. Det kan till och med vara din konkurrents webbplats.
På din högra sida öppnas en ny ruta och den kommer att se ut så här:
Utvecklarens vy låter dig se din webbplats HTML-källkod.
Klicka nu på knappen Toggle Device Toolbar för att se mobilvyn.
Du kommer att märka några ändringar i mobilförhandsgranskningen: din webbplats har krympts för att passa storleken på mobilskärmen och andra ändringar kan ske. Titta och notera skillnaderna noggrant och notera vad du bör ändra.
Kontrollera vad som händer när du försöker föra muspekaren över mobilvyn – det blir en cirkel.
Poängen med cirkeln är att efterlikna pekskärmen på en mobil enhet.
Tips: Om du vill se hur din mobilskärm zoomar in och ut håller du ned Skift-tangenten och klickar och flyttar musen.
Fördelen med att använda den här metoden för att förhandsgranska din mobilwebbplats är att den gör att du kan se hur sidan ser ut på olika typer av smartphones. Dessa extra alternativ finns ovanför mobilvyn på din webbplats. Oavsett vilken typ av förhandsvisning du öppnade när du klickade på Toggle Device Toolbar, här kan du ändra skärmstorleken på enheten.
Tips: Använd rotationsikonen i det övre högra hörnet för att rotera mobilskärmen. Du kan också inspektera element på sidan genom att klicka på högerklicket och välja alternativet Inspektera.
Varför är Page Builder viktig för RWD
RWD är något du måste tänka på noga från början av att skapa din webbplats. Det finns många saker att analysera när du måste göra din webbplats lika attraktiv, navigerbar och effektiv på olika skärmstorlekar. WordPress-sidbyggare har en avgörande roll i denna process, de förser dig med hörnstenar i din webbplats design, därför måste du informera dig själv i god tid innan du gör valet. Så genom att investera lite tid i forskning om sidbyggare kommer du faktiskt att spara mycket tid som du kan lägga på att skapa din webbplats.
Baserat på vår erfarenhet är WPBakery och Elementor utmärkta val, eftersom de kan tillfredsställa en lång rad olika behov.
Om du har en budget är Elementor din bästa insats. Det är en enkel att använda, nybörjarvänlig plugin som har en mycket generös gratisversion med en solid uppsättning element. Den integrerar också bra med andra ledande WP-plugins och tjänster som MailChimp, WooCommerce, HubSpot, Yoast SEO, etc. Om du har råd med ett premiumplugin kommer WPBakery Page Builder aldrig att göra dig besviken. Den kommer med en otroligt stor samling av element, en uppsjö av block och alternativ. Det är också lätt att använda och möjliggör mycket kreativitet.
Även om sidbyggare är viktiga för RWD, är temat du planerar att använda också viktigt eftersom det kan erbjuda några fantastiska funktioner. Som du kanske vet utvecklar temaförfattare specifika widgets och element som kan justeras separat från sidbyggarna. Många av dessa element låter dig ställa in lyhördhet efter dina behov. Av denna anledning bör du välja temat som utvecklats av välkända, pålitliga författare. Detta är särskilt viktigt om du vill använda ett gratis WordPress-tema. För att spara tid och nerver testade vi massor av gratis teman. Så om du vill använda ett responsivt, funktionsrikt och pålitligt gratistema rekommenderar vi att du provar Qi-temat.
Hur man redigerar mobilversionen av din webbplats i Elementor
Det är säkert att säga att Elementor är den överlägset bästa sidbyggaren när det kommer till redigering av mobilversionen av din webbplats. Det kan hända att du missade att lägga märke till den här lilla ikonen, kallad Viewport Icon, i inställningarna :
Den här ikonen indikerar att alla värden som har det bredvid sig kan redigeras separat för skrivbordet och för versionen av den mobila webbplatsen. Låt oss ta inställningarna för kolumnbredd till exempel – du kan justera värdet för dator, mobil och surfplatta. Värdet du anger för varje enhet kommer endast att gälla för den valda enheten. Observera att HTML-taggen inte har ikonen bredvid sig, vilket betyder att den har samma värde för varje enhet.
Om du vill ändra värdet för den mobila enheten är allt som behövs att välja alternativet för mobil layout och ange önskade värden (dessa värden kommer endast att implementeras på mobila enheter). På höger sida av skärmen har du en liveförhandsvisning av alla ändringar du gör, så att du direkt kan se hur de nya värdena kommer att se ut på enheten.
För att återgå till skrivbordsvyn måste du byta till alternativet för skrivbordslayout. Du kan göra det, som vi har nämnt ovan eller genom att använda den här lilla ikonen i bottenmenyn på sidan :
En annan viktig sak att nämna relaterad till lyhördhet är att kolumnerna och raderna kan stängas av för enskilda enheter, dvs vi kan säga att de inte kommer att synas (eller kommer att synas) på vissa skärmstorlekar.
Följ sökvägen för att komma åt detta alternativ:
- Högerklicka på raden/kolumnen
- Välj Redigera avsnitt
- Klicka på fliken Avancerat
- Välj rullgardinsmenyn Responsiv
Det här alternativet är mycket viktigt om vi har ett avsnitt som vi vet bara är vettigt att visas på skrivbordet, så vi avbryter det på andra enheter. Och för att kompensera för avsaknaden av det kan vi göra ett avsnitt som kommer att ses på alla andra enheter utom skrivbordet.
När det kommer till kolumner kan vi också hitta alternativet Omvänd kolumn (Surfplatta / Mobil). Det är bäst att förklara detta genom ett exempel. Låt oss säga att vi har en sådan här sektion på skrivbordet där innehåll är uppdelat i två kolumner med bilder följt av en kort text :
Naturligtvis, på mobila enheter kommer innehållet att ordnas om som i bilden nedan, enligt den ursprungliga ordningen från skrivbordet:
Alternativet omvänd kolumn låter oss byta ordning på en viss sektion för mobila enheter eller surfplattor. När vi gör det för det första avsnittet på mindre enheter blir resultatet mer effektivt visat innehåll:
Hur man redigerar mobilversionen av din webbplats med plugins
Förr eller senare kommer du att bli frestad att använda en mängd olika plugins som gör det enkelt för dig att lägga till en sidofält, en CTA, en widget eller liknande element på din webbplats. Det här är ögonblicket då många glömmer att en sidofält eller något annat element som fungerar perfekt på en skrivbordsskärm kanske inte är så bra på mobilen. Så innan du hoppar för att dra nytta av dessa praktiska verktyg, kontrollera om de också är lyhörda. Sanningen är att många av dem är och kan faktiskt hjälpa dig att förbättra UX. Men för att veta det säkert, läs recensionerna eller hitta en demo innan du installerar någon. Så länge pluginet fungerar bra på mobilen kan du vara säker på att din webbplats är på väg mot framgång. Låt oss inte heller glömma att dina alternativ varierar mycket beroende på vilket tema du använder. Ett premiumtemagaranterar säkert många fler möjligheter.
Responsiv meny – första intrycket räknas
Menyn är pelaren i användarupplevelsen. Det är det första eller en av de första sakerna någon klickar på när de besöker din webbplats. Det påverkar hur snabbt besökaren kommer att hitta det de kom för, hur länge han stannar och många andra aspekter av UX. Det är viktigt att ha en vacker, välstrukturerad meny som gör navigeringen smidig, men det är inte så enkelt som det verkar. Du kanske har en bra meny som fungerar perfekt på en stationär men är för tung för en mobil. En lösning i det här fallet är att anpassa din stationära version till mobilskärmstorlek också. Men vad händer om det innebär att förlora för mycket användbar information? I så fall kan du skapa en annan meny, anpassad endast för mobilskärmstorlek. Många WP-teman kommer med möjligheten att göra detta. Om ditt tema inte är ett av dessa, oroa dig inte, det finns mångabra plugins för responsiva menyer. Vår rekommendation är insticksprogrammet Responsive Menu som innehåller 150+ alternativ för anpassning och kräver noll kunskap om kodning. Det låter dig lägga till animationer, bakgrundsbilder, ställa in menyknapparnas position och mycket mer. Det är otroligt lätt att använda så det är särskilt praktiskt för nybörjare.
Bilder och gallerier
En bild talar tusentals språk, så se till att din ser lika fantastisk ut oavsett skärmstorlek. Vi lever i en väldigt visuellt orienterad kultur, och oavsett vilken nisch du befinner dig i är fantastiska bilder ett måste. Men oavsett hur bra bilder du har, om de laddas långsamt eller inte presenteras snyggt, riskerar du att förlora en betydande andel av din publik. Så för att undvika det scenariot rekommenderar vi plugin-programmet Envira Gallery Lite som hjälper dig att skapa kraftfulla gallerier precis som ett proffs. Några av dess fördelar är att den är mycket optimerad för webb- och serverprestanda, vilket är fantastiska nyheter för din SEO.
När du har en fantastisk, responsiv meny och fantastiska gallerier är nästa sak att ta hand om de sociala delningsknapparna. Deras storlek bör anpassas till enheten. En stor knapp på en liten skärm får besökaren att plötsligt klicka, och det är ganska irriterande. Å andra sidan är små knappar på en stor skärm inte så lätta att känna igen. Ett plugin som kan hjälpa dig att få anpassade knappar är Sassy Social Share-plugin. Lätt att använda, helt gratis och nybörjarvänligt, det gör det enkelt att dela både för dig och din webbplats besökare.
Mobilvänliga webbplatser
I situationer när du behöver göra din webbplats mobil responsiv snabbt finns det ingen bättre lösning än ett plugin som WPtouch. Denna plugin är gjord på ett sådant sätt att den automatiskt lägger till ett enkelt och elegant mobiltema till din WP-webbplats. Det faktum att det rekommenderas av Google säger mycket om dess effektivitet. Så även om du inte har en mobilversion av din webbplats, kan ett plugin som detta omedelbart aktivera en mobilvänlig version av din webbplats, så att du inte tappar din ranking. Det låter dig också anpassa många aspekter av webbplatsens utseende.
Sidans laddningshastighet är också en mycket viktig aspekt av användarupplevelsen, särskilt på mobila enheter. Om du står inför vissa utmaningar på det här området kan du överväga att använda pluginet Accelerated Mobile Pages eftersom det är ett av de snabbaste och enklaste sätten att förbättra din webbplats laddningshastighet.
Undvik att lägga till popup-fönster på mobila enheter
Popup-fönster är sällan underhållande, men de är särskilt irriterande på mobiler. De täcker en stor del av skärmen och kräver av en besökare att avfärda dem innan de kommer åt sidans innehåll. Därför är det bäst att undvika dem helt i mobilversionen av din webbplats. Hur du ska undvika dem beror mest på din tjänsteleverantör, men majoriteten av dem har ett alternativ att inaktivera påträngande popup-fönster på mobiler. Tänk också på att Google straffar webbplatser som har mycket påträngande popup-fönster.
Sammanfattningsvis
Eftersom antalet människor som använder smartphones för att komma åt internet ökar konstant, är det vettigt att förvänta sig mycket fler lösningar och alternativ för de mobila versionerna av webbplatser. Designers arbetar hårt för att ta itu med uppsjön av användningsmönster, ändå är grunderna i RWD desamma – se till att välja ett mobilvänligt WP-tema och en sidbyggare som har alla alternativ du behöver.
Så, hur responsiv är din webbplats? Måste man göra många förändringar för att göra det mer mobilvänligt? Dela dina svar med oss och fråga gärna om mer information i kommentarsfältet.