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

Vill du inaktivera overflow på din website i WordPress?

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.

I den här artikeln kommer vi att visa dig hur du enkelt inaktiverar overflow i WordPress och tar bort den horisontella rullisten.

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

När du skapar din website i WordPress är det viktigt att den är 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.

När du är dä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.

Note: Om du använder det gratis WPCode plugin, måste du välja alternativet ”Universal Snippet”.

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 overflow på din WordPress-webbplats. Du kanske också vill se våra expertval av de tillägg till WordPress som du måste ha för att få din site att växa och vår guide för nybörjare om hur du skapar ett kontaktformulär 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.