Om vi tar sajten vi byggde i steget innan som exempel. I datorn ser allting bra ut, men i mobilen kan vi konstatera att det inte ser riktigt lika bra ut. Här är en jämförelse av översta blocket med ingångsbild och text på datorn, jämfört med i mobilen:

Responsiv sajt wordpress elementor

Som tur är så är det enkelt att anpassa för både mobil och surfplatta i Elementor. För att ändra till mobilt redigeringsläge klickar du på den lilla skärmikonen längst ner till vänster (1) och väljer "Mobile" i menyn som kommer upp (se bild nedan).

Tips: Du kan lägga till ännu fler brytpunkter än de vanliga desktop, surplatta och mobil. I Wordpress-admin går du till Elementor - Inställningar - Experiments och aktiverar Additional Custom Breakpoints. Du kan lägga nu lägga till sex ytterligare brytpunker om du vill göra sajten optimal för alla skärmstorlekar. Lägg till dessa under Site settings - active breakpoints (läs mer här).

Beroende på vilket läge du väljer så kommer sajten visas därefter. För att vara säker på att du bara redigerar saker så som de visas i mobilen, håll utkik efter den lilla symbolen som visar vilket läge olika inställningar påverkar. Datorikon - desktop, surfplatta eller mobil.

Klicka på den lilla symbolen längst ned på sidan som föreställer en dator och mobil. Du får då upp de olika brytpunkterna i en meny överst på sajten och kan växla mellan dem. Bredvid inställningar visas också vilket läge som påverkas när du redigerar. Om ingen symbol visas kommer inställningen påverka alla skärmstorlekar.

Responsiv sajt Elementor
Med responsive mode kan du anpassa sajten för dator, mobil och surfplatta.

Anpassa alla delar av sajten för mobilen

När vi har bytt till mobilläge är det dags att anpassa sajten för mobilen. Det gör du helt enkelt genom att klicka på respektive element som inte ser bra ut, och ändra om dessa.

I vårt exempel ändrade vi rubrikstorleken till 60 pixlar och ändrade Minimum height på blocket som innheåller bakgrundsbilden till 560 pixlar. Loggan drogs ned i storlek och sedan trixade vi runt lite med storlekar för text och ikoner i blocket under huvudrubriken.

När du är nöjd gör du likadant med övriga delar av sajten där det ser konstigt ut i mobilen. Vill du även anpassa för surfplattor så gör du likadant, men väljer Tablet under Responsive mode (bild ovan).

responsiv mobilsajt wordpress
Så här blev resultatet, före och efter. Mycket bättre!

Visa/dölja hela block i mobilen

En annan väldigt användbar funktion som gör Elementor till ett mycket vasst verktyg för sajtbyggaren är möjligheten att skapa helt unika block för dator, surfplatta eller mobil. Det betyder att du kan anpassa väldigt detaljerat hur saker ska visas på olika skärmar.

Om du till exempel bara vill ha knappar med nedladdningslänkar från Google Play och App Store när besökaren kommer från mobilen, eller anpassa bakgrundsbilder utifrån skärmstorlek, då är det enkelt fixat. Så här gör du:

Vill du ha två olika ingångsblock på sajten så bygger du helt enkelt två block precis som tidigare i denna guide. Det ena anpassar du för dator, det andra för mobil. Nu visas båda blocken på sajten, och så vill vi ju inte ha det.

Responsiv design Elementor Wordpress

Klicka på det block som du vill ska visas i datorn och välj sedan Hide on mobile under Advanced - Responsive. Gör samma sak på det block du vill visa i mobilen, men välj Hide on desktop och Hide on tablet.

Voilà. Du har nu fortfarande två block i redigeringsläget, men på sajten visas bara ett av dem, beroende på om du använder mobil eller dator.