Det er normalt at opleve, at dine Gutenberg-blokke ser fine ud på en stor skærm, men går i stykker på mobilen. Kolonner bliver klemt, rækkefølgen skifter, vigtig tekst ender nederst, og billeder hopper over eller under teksten uden logik.
Der findes en simpel måde at gøre dine WordPress-blocks responsive på uden kompliceret kode. Superb Addons lader dig styre layoutet direkte i editoren, så passer alt på telefon og computer. Resultatet er fleksible og pæne sider med minimal indsats. Præcis det, du har brug for.
Sådan styrer du rækkefølge og reverse i kolonner på mobil
Få kolonnerne til at spille pænt i Gutenberg med Superb Addons. Vælg din Columns-blok i editoren, slå de responsive kontroller til, og skift breakpoint til Mobil. Giv hver kolonne en “order”-værdi. Det er en simpel måde at styre, hvilken rækkefølge de vises i på mobilen. Sæt for eksempel CTA-kolonnen til order=1, så den ligger øverst på telefon, selvom den står sidst på desktop.
- Vælg Columns-blokken.
- Aktiver responsive indstillinger via Superb Addons.
- Skift breakpoint til Mobil.
- Tildel hver kolonne en order-værdi (fx 1, 2, 3).
- Tjek, om CTA’en står øverst på mobilen.
Reverse direction er praktisk på mobil. Har du to kolonner og vil have billedet under teksten uden at røre desktop-layoutet, så slå funktionen til. Rækkefølgen byttes vertikalt kun på mobil.
Juster bredder pr. breakpoint. Gå efter 50/50 på tablet og 100/100 på mobil, så tekst ikke klemmes, og siden undgår vandret scroll. Brug responsive preview i editoren og se ændringerne med det samme.
Rigtig stacking og faste billeddimensioner gør siden hurtigere og mere stabil i Lighthouse/PageSpeed. Mange ser lavere layout shift (CLS) i området 10-30% efter optimering af kolonnelayout til mobil.
Skift rækkefølge i Media & Text og udgiv med bedre mobiloplevelse
Billedet hopper ofte over teksten i Media & Text-blokken på mobil, og det forstyrrer fortællingen. Brug Superb Addons til at bytte rækkefølgen, så teksten vises først (order: tekst=1, billede=2). Det virker også i Hero-sektioner med to kolonner, Feature-grids og Testimonial-rækker. Sæt lavere order på det vigtigste indhold, så bliver siden mere læsbar på små skærme.
Følg tjeklisten for bedre rækkefølge og layout:
- Vælg den sektion eller blok, du vil justere.
- Skift til mobilpreview i editoren for at se ændringerne live.
- Giv hver kolonne eller hvert element en order-værdi efter ønsket rækkefølge.
- Justér spacing som gap og padding specifikt for mobilbreakpointet.
- Gem dine ændringer og test siden på en rigtig telefon for en realistisk oplevelse.
Brug WordPress’ Preview på flere enheder og DevTools’ Device Mode til kvalitetssikring. Tjek bounce rate i Analytics. Falder den, peger det mod bedre mobilvenlighed og højere brugervenlighed efter dine ændringer.
Gå til dine vigtigste sektioner i editorens mobilvisning og finjustér rækkefølgen og spacing med Superb Addons. Publicér igen med ro i maven. Siden er klar til alle skærmstørrelser uden rod og frustration.