Hur man inaktiverar överflöde i WordPress (Remove Horizontal Scroll)

En horisontell rullningslist visas när ett element på den sidan är för brett för att kunna displayed och flyter ut över vyn. De flesta teman i WordPress använder inte horisontell rullning eftersom det kan förstöra din sites layout och förvirra användarna.

Det kan vara frustrerande för både dig och dina besökare. Lyckligtvis är det enkelt att inaktivera overflow och det förbättrar webbplatsens utseende och användbarhet.

I den här artikeln visar vi dig hur du enkelt inaktiverar overflow i WordPress och tar bort den horisontella rullningslisten. Våra enkla instruktioner är användarvänliga och lätta att följa, även om du inte är en kodningsexpert.

Vad orsakar horisontellt rullningsfält eller överflöde i WordPress?

När du sätter upp din WordPress-webbplats är det viktigt att göra den användarvänlig och tillgänglig för alla.

WordPress kommer att visa en horisontell rullningslist om ett element är bredare än din website layout. Detta anropas ”overflow”. Att ha en horisontell rullningslist kan förstöra din design och göra din website mindre användarvänlig.

En page med både horisontella och vertikala rullningslister kan också vara desorienterande för besökaren och bli svår att navigera. Det kan leda till att människor lämnar din site, vilket leder till lägre konvertering och försäljning.

Att inaktivera overflow gör din webbplats mer användarvänlig, skapar en layout med fast bredd och förbättrar den övergripande responsiviteten på din webbplats.

Med detta i åtanke, låt oss ta en titt på hur du enkelt inaktiverar det horisontella rullningsfältet i WordPress:

Metod 1: Lägga till CSS-snippet med hjälp av Theme Customizer

Du kan inaktivera overflow i WordPress genom att helt enkelt lägga till CSS-kod i alternativet ”Additional CSS” i temats customizer.

Allt du behöver göra är att besöka sidan Appearance ” Customize från WordPress dashboard.

När du är på sidan Customize klickar du på tabben ”Additional CSS”.

Sedan är det bara att copy and paste in följande kod:

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

After that, any overflow will be removed, and you will be able to see it applied on your website’s live preview pane.

Glöm inte att klicka på knappen ”Publicera” högst upp på sidan när du är klar!

Metod 2: Lägga till CSS-snippet med WPCode

Du kan också add to CSS-koden via ett code snippet med hjälp av WPCode plugin.

WPCode är det bästa tillägget för code snippet för WordPress på marknaden, som används av över 1 miljon websites.

Vi rekommenderar den här metoden eftersom det här pluginet gör det enkelt att add to custom code till WordPress utan att behöva edit några av dina theme-filer.

Först installerar och aktiverar du pluginet WPCode på din website. För mer detaljer kan du se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Efter aktivering, besök Code Snippets ” + Add Snippets page från WordPress dashboard.

Här klickar du på knappen ”Use Snippet” under alternativet ”Add Your Custom Code (New Snippet)”.

Detta kommer att ta dig till ”Create Custom Snippet” page, där du kan börja med att enter en titel för din code snippet. Detta namn kommer inte att displayed för användarna och är endast för din identifiering.

Välj sedan ’CSS Snippet’ som code type från dropdown-menyn till höger.

Följ detta genom att copy and paste följande CSS kod snippet i ”Code Preview” boxen:

<style type="text/css">
html, body {
	max-width: 100%;
	overflow-x: hidden;
}
</style>

När du har gjort det rullar du ner till ”Insertion” section, där du hittar två alternativ, ”Auto Insert” och ”Shortcode”.

Härifrån väljer du läget ”Auto Insert” för att automatiskt köra din kod vid aktivering.

Men om du bara vill inaktivera det horisontella rullningsfältet på vissa specifika pages, kan du välja läget ”Shortcode”.

När du gör det kommer WPCode att förse dig med en shortcode vid aktivering av snippet som du kan klistra in på ett specifikt webbplatsområde eller en sida för att ta bort överflödet.

När du har valt ditt alternativ går du högst upp på sidan och togglar omkopplaren från ”Inaktiverad” till ”Aktiv” i det övre högra hörnet.

Sedan klickar du bara på knappen ”Save Snippet”.

Nu är det klart! You just removed any horizontal overflow scroll bars on your site.

Bonus: Add a Custom Scrollbar i WordPress

När du har inaktiverat den horisontella rullningslisten kan du också add to en customize rullningslist.

Om din site till exempel använder ett specifikt färgschema i enlighet med ditt varumärkes färger, kan du använda samma färg för rullningslisten. Detta kommer att se visuellt tilltalande ut och uppmuntra användare att utforska din site.

För att skapa en customize scrollbar installerar och aktiverar du pluginet Advanced Scrollbar. För detaljer, se vår guide för nybörjare om hur du installerar ett plugin för WordPress.

Efter aktivering, besök Settings ” Advanced Scrollbar Settings page från WordPress dashboard. Härifrån kan du nu ändra färgen på rullningslisten så som du gillar den.

När du är klar klickar du på knappen ”Save Changes” för att lagra dina inställningar. För mer information, se vår tutorial om hur du lägger till en custom scrollbar i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du inaktiverar överflödet på din WordPress-webbplats. Du kanske också vill se våra expertval för de bästa kodsnuttarna att använda på din WordPress-webbplats och vår nybörjarguide om hur man tar bort oanvänd CSS i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.