Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Deaktivieren des Überlaufs in WordPress (Entfernen des horizontalen Bildlaufs)

Eine horizontale Bildlaufleiste erscheint, wenn ein Element auf der Seite zu breit ist, um angezeigt zu werden, und über den Bildschirm hinausgeht. Die meisten WordPress-Themes verwenden keinen horizontalen Bildlauf, da er das Layout Ihrer Website stören und die Benutzer verwirren kann.

Das kann sowohl für Sie als auch für Ihre Besucher frustrierend sein. Zum Glück ist das Deaktivieren des Überlaufs ganz einfach und verbessert das Design und die Benutzerfreundlichkeit Ihrer Website.

In diesem Artikel zeigen wir Ihnen, wie Sie den Überlauf in WordPress ganz einfach deaktivieren und die horizontale Bildlaufleiste entfernen können. Unsere einfachen Anweisungen sind benutzerfreundlich und leicht zu befolgen, auch wenn Sie kein Programmierexperte sind.

How to disable overflow in WordPress

Was verursacht eine horizontale Bildlaufleiste oder einen Überlauf in WordPress?

Bei der Einrichtung Ihrer WordPress-Website ist es wichtig, dass sie benutzerfreundlich und für jeden zugänglich ist.

WordPress zeigt eine horizontale Bildlaufleiste an, wenn ein Element breiter ist als das Layout Ihrer Website. Dies wird als „Überlauf“ bezeichnet. Eine horizontale Bildlaufleiste kann Ihr Design unterbrechen und Ihre Website weniger benutzerfreundlich machen.

Eine Webseite mit horizontalen und vertikalen Bildlaufleisten kann für den Besucher auch verwirrend und schwer zu navigieren sein. Dies kann dazu führen, dass die Besucher Ihre Website verlassen, was zu geringeren Umsätzen und Verkäufen führt.

Die Deaktivierung des Überlaufs macht Ihre Website benutzerfreundlicher, schafft ein Layout mit fester Breite und verbessert die allgemeine Reaktionsfähigkeit Ihrer Website.

In diesem Sinne schauen wir uns an, wie man die überlaufende horizontale Bildlaufleiste in WordPress leicht deaktivieren kann:

Methode 1: Hinzufügen des CSS-Snippets über den Theme Customizer

Sie können den Überlauf in WordPress deaktivieren, indem Sie einfach CSS-Code in der Option „Additional CSS“ des Theme-Customizers hinzufügen.

Alles, was Sie tun müssen, ist, die Seite Erscheinungsbild “ Anpassen im WordPress-Dashboard zu besuchen.

Hinweis: Möglicherweise sehen Sie Aussehen Editor anstelle von Anpassen. Das bedeutet, dass Ihr Theme den Full-Site-Editor (FSE) anstelle des Theme-Customizers verwendet, und Sie sollten unsere Anleitung zur Behebung des fehlenden Theme-Customizers lesen oder Methode 2 unten anwenden.

Choose Additional CSS option from theme customizer

Sobald Sie auf der Seite Anpassen sind, klicken Sie auf die Registerkarte „Zusätzliches CSS“.

Kopieren Sie dann einfach den folgenden Code und fügen Sie ihn ein:

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

Danach wird der Überlauf entfernt, und Sie können ihn in der Live-Vorschau Ihrer Website sehen.

Vergessen Sie nicht, auf die Schaltfläche „Veröffentlichen“ am oberen Rand der Seite zu klicken, wenn Sie fertig sind!

Paste CSS code in Additional CSS field

Methode 2: Hinzufügen des CSS-Snippets mit WPCode

Sie können den CSS-Code auch über ein Code-Snippet mit dem WPCode-Plugin hinzufügen.

WPCode ist das beste WordPress-Code-Snippet-Plugin auf dem Markt und wird von über 1 Million Websites verwendet.

Wir empfehlen diese Methode, da dieses Plugin das Hinzufügen von benutzerdefiniertem Code zu WordPress vereinfacht, ohne dass Sie die Dateien Ihres Themes bearbeiten müssen.

Installieren und aktivieren Sie zunächst das WPCode-Plugin auf Ihrer Website. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Hinweis: WPCode hat auch eine kostenlose Version, die für dieses Tutorial verwendet werden kann. Mit dem Kauf des Premium-Plans werden jedoch Funktionen wie bedingte Logik, eine Cloud-Bibliothek mit Code-Snippets und mehr freigeschaltet.

Besuchen Sie nach der Aktivierung die Seite Code Snippets “ + Add Snippets im WordPress-Dashboard.

Klicken Sie hier auf den Button „Snippet verwenden“ unter der Option „Fügen Sie Ihren individuellen Code (neues Snippet) hinzu“.

Add new snippet

Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie zunächst einen Titel für Ihr Code-Snippet eingeben können. Dieser Name wird den Nutzern nicht angezeigt und dient nur zu Ihrer Identifikation.

Wählen Sie dann aus dem Dropdown-Menü auf der rechten Seite „CSS Snippet“ als Codetyp aus.

Choose CSS Snippet option to remove Overflow

Kopieren Sie anschließend den folgenden CSS-Codeausschnitt und fügen Sie ihn in das Feld „Codevorschau“ ein:

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

Wenn Sie das getan haben, scrollen Sie nach unten zum Abschnitt „Einfügen“, wo Sie zwei Optionen finden: „Automatisch einfügen“ und „Shortcode“.

Wählen Sie hier den Modus „Automatisch einfügen“, um Ihren Code bei der Aktivierung automatisch auszuführen.

Choose an insertion method

Wenn Sie jedoch nur die horizontale Bildlaufleiste auf bestimmten Seiten deaktivieren möchten, können Sie den Modus „Shortcode“ wählen.

Wenn Sie das tun, stellt Ihnen WPCode bei der Snippet-Aktivierung einen Shortcode zur Verfügung, den Sie in einen bestimmten Website-Bereich oder eine Seite einfügen können, um den Überlauf zu entfernen.

Sobald Sie sich für eine Option entschieden haben, gehen Sie zum oberen Rand der Seite und schalten Sie den Schalter in der rechten oberen Ecke von „Inaktiv“ auf „Aktiv“ um.

Klicken Sie dann einfach auf die Schaltfläche „Snippet speichern“.

Save overflow snippet

Das war’s! Sie haben gerade alle horizontalen Überlaufleisten auf Ihrer Website entfernt.

Bonus: Hinzufügen einer benutzerdefinierten Bildlaufleiste in WordPress

Wenn Sie die horizontale Bildlaufleiste deaktiviert haben, können Sie auch eine eigene Bildlaufleiste hinzufügen.

Wenn Ihre Website z. B. ein bestimmtes Farbschema verwendet, das den Farben Ihrer Marke entspricht, könnten Sie dieselbe Farbe für Ihre Bildlaufleiste verwenden. Das sieht visuell ansprechend aus und ermutigt die Nutzer, Ihre Website zu erkunden.

Um eine benutzerdefinierte Bildlaufleiste zu erstellen, installieren und aktivieren Sie das Advanced Scrollbar-Plugin. Weitere Informationen finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress-Plugins.

Rufen Sie nach der Aktivierung die Seite Einstellungen “ Erweiterte Bildlaufleisteneinstellungen im WordPress-Dashboard auf. Von hier aus können Sie nun die Farbe der Bildlaufleiste nach Ihren Wünschen ändern.

Change scrollbar color

Sobald Sie fertig sind, klicken Sie auf die Schaltfläche „Änderungen speichern“, um Ihre Einstellungen zu speichern. Weitere Informationen finden Sie in unserem Tutorial über das Hinzufügen einer benutzerdefinierten Bildlaufleiste in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu erfahren, wie Sie den Überlauf auf Ihrer WordPress Website deaktivieren können. Vielleicht interessieren Sie sich auch für unsere Experten-Tipps für die besten Code-Snippets, die Sie auf Ihrer WordPress Website verwenden können, und für unsere Anleitung für Einsteiger, wie man ungenutzte CSS in WordPress entfernt.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

11 KommentareEine Antwort hinterlassen

  1. Dennis Muthomi

    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

      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.

      Admin

  2. Jiří Vaněk

    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

      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.

      Admin

      • Jiří Vaněk

        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.

  3. Tanvi

    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

      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.

      Admin

  4. Mara

    I posted the code but now I can’t scroll vertically on mobile anymore. do you know how to solve this?

    • WPBeginner Support

      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!

      Admin

  5. Tobin Loveday

    Thanks guys, this was super helpfull!

    Seems like themes should have this automatically, but oh well.

    • WPBeginner Support

      Glad our guide was helpful and some themes have added this but not all themes :)

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.