Redigera mobilversionen

WordPress-webbplatser använder responsiv design – det finns ingen separat mobilversion att redigera. I den här guiden får du lära dig hur du anpassar hur ditt innehåll visas på mobila enheter med hjälp av blockinställningar och CSS.

Navigeringsblocket inkluderar inställningar för den mobilmenyknappen (känd som en ”hamburgare”-ikon). För att anpassa din mobilmeny:

1. Navigera till Utseende → Redigerare från din webbplats adminpanel.
2. Välj den mall eller malldel som innehåller din navigeringsmeny.
3. Öppna listvyn och välj navigeringsblocket.
4. I sidopanelen med blockinstllningar klickar du på ikonen för inställningar (kugghjulsikonen).

5. I sektionen Visa:
   • Slå på/av ”Visa ikonknapp” för att använda en hamburgarikon eller visa ”Meny”-text.
   • Välj stil för din ikon (två eller tre linjer) och välj när hamburgarikonen visas med hjälp av inställningarna för Överläggsmeny.

Läs mer om att stilsätta din webbplats menyer.

Vissa layoutblock låter dig styra om innehållet staplas vertikalt på mobilskärmar. Som standard staplar WordPress automatiskt innehåll sida vid sida på mindre skärmar för att hålla det läsbart.

Justera staplingsbeteendet genom att följa dessa steg:

1. Navigera till Utseende → Redigerare från din webbplats adminpanel.
2. Redigera sidan eller mallen som innehåller blocket som du vill justera.
3. Öppna listvyn och välj blocket.
4. I blockinställningarna slår du på/av ”Stapla på mobil”.

Block med inställningen ”Stapla på mobil”:

• Kolumner
• Media och text
• Senaste Instagram-inläggen

Knappar och menyer är mer läsbara på mobil när de omsluter till flera rader istället för att tvinga allt innehåll till en enda rad. Som standard är inställningen för att omsluta flera rader inaktiverad.

För att aktivera omslutning, följ dessa steg:

1. Navigera till Utseende → Redigerare från din webbplats adminpanel.
2. Redigera sidan eller mallen som innehåller blocket som du vill justera.
3. Öppna listvyn och välj blocket.
4. I blockinställningarna slår du på ”Tillåt omslutning till flera rader”.

Block med inställningen ”Tillåt omslutning till flera rader”:

• Knappar
• Delningsknappar
• Navigering
• Sociala ikoner
• Kommentarer
• Rad och stapel

Textstorlek i pixlar (px) förblir låst i en storlek. Textstorlek i em eller rem justeras baserat på dina besökares inställningar och skärmstorlek, vilket gör din webbplats mer tillgänglig och lättare att läsa på olika enheter.

För att ändra text från pixlar till relativa enheter, följ dessa steg:

1. Klicka på blocket med texten som du vill ändra storlek på.
2. I blockinställningarna lokaliserar du sektionen Typografi.
3. Under Textstorlek klickar du på ikonen för anpassad storlek (två horisontella linjer med punkter).
4. Klicka på enheten px för att ändra den till em eller rem.
5. Ange ett numeriskt värde och justera efter behov.

Välja mellan em och rem:

• em – Texten skalas i förhållande till dess behållare (bra för bildtexter, etiketter eller text inuti specifika block)
• rem – Texten förblir konsekvent på hela din webbplats (bra för brödtext, rubriker och knappar)

Du kan också textstorleken för hela webbplatsen istället för att justera enskilda block.

Det här avsnittet av guiden gäller för webbplatser med våra WordPress.com Premium-, Business- och Commerce-paket samt det äldre Pro-paketet. För webbplatser med Gratis- eller Personal-paketet, uppgradera ditt paket för att komma åt den här funktionen.

Du kan dölja specifika block på stationära eller mobila enheter med hjälp av CSS-klasser. För att konfigurera detta följer du dessa steg:

1. Redigera sidan, inlägget eller mallen som innehåller blocket du vill dölja.
2. Välj blocket genom att klicka på det eller välja det i listvyn.
3. I blockinställningarna klickar du på Avancerat.
4. I rutan ”Ytterligare CSS-klass(er)” anger du hide-desktop eller hide-mobile:

5. Navigera till din webbplats anpassade CSS-inställningar:
   • Blockteman: Utseende → Redigerare → Stilar → ⋮ → Ytterligare CSS
   • Klassiska teman: Utseende → Anpassa → Ytterligare CSS
6. Klistra in följande kod och klicka på Spara:

/* hide elements on mobile*/
@media (max-width: 768px) {
 .hide-mobile { display: none !important; }
}
/* hide elements on desktop*/
@media (min-width: 769px) {
 .hide-desktop { display: none !important; }
}

Lägg till CSS-koden på din webbplats en gång. Därefter kan du lägga till klassen hide-mobile eller hide-desktop till valfritt block, så kommer CSS-koden automatiskt att dölja den på den specificerade enheten.