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.
Note: Du kanske ser Appearance ” Editor istället för Customize. Detta innebär att ditt tema använder Redigering av hela webbplatsen (Site Editor) istället för Theme Customize, och du bör kontrollera vår guide om hur du fixar den saknade Theme Customizer eller använda metod 2 under.
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.
Note : WPCode har också en gratis version. Du behöver dock premiumpaketet för pluginet för att låsa upp alternativet ”CSS Snippet”.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi says
Thank you for this helpful guide.
I tried the second method of adding the CSS code using the WPCode plugin, but the changes didn’t seem to reflect on my website’s frontend. I cleared all caches, but the horizontal scrollbar is still there.
could the issue be related to the theme I’m using?
WPBeginner Support says
Yes, there is a good chance your specific theme is overriding the CSS and if you reach out to your theme’s support they should be able to help.
Administratör
Jiří Vaněk says
I used your CSS code, but if I increase the size of the site in the browser to eg 130%, the scrollbar still shows at the bottom? Where am I making mistake?
Also, if I replace the letter x with a y, the scroll bar on the right side does disappear, but the website doesn’t scroll down?
Any advice?
WPBeginner Support says
When using browser zoom there is a chance that something on the page itself has a minimum width that you are running into that would cause the scroll bar issue.
We do not recommend using y as having that not set is what allows scrolling on a site.
Administratör
Jiří Vaněk says
Thanks for the advice on the Y axis and so I will look on the page for where it might be causing the problem in the X axis. Thanks for the advice on what to focus on.
Tanvi says
When I used the WP Code plug in, this worked on all my pages but my home page. I didn’t do anything to disable the horizontal scroll bar on only some specific pages. What can I do about this?
WPBeginner Support says
You may need to check with the support for your specific theme to see if they have CSS code that would override it specifically for your homepage.
Administratör
Mara says
I posted the code but now I can’t scroll vertically on mobile anymore. do you know how to solve this?
WPBeginner Support says
It would depend on how your theme is set up, overflow-x is only supposed to remove the horizontal overflow on the site so your theme may be using overflow in a specific way. You would want to check with the support for your theme and they should be able to assist!
Administratör
Tobin Loveday says
Thanks guys, this was super helpfull!
Seems like themes should have this automatically, but oh well.
WPBeginner Support says
Glad our guide was helpful and some themes have added this but not all themes
Administratör