Aparece una barra de desplazamiento horizontal cuando un elemento de esa página es demasiado ancho para mostrarse y se desborda más allá de la pantalla. La mayoría de los temas de WordPress no utilizan el desplazamiento horizontal porque puede romper el diseño de su sitio y confundir a los usuarios.
En este artículo, le mostraremos una manera fácil y rápida de deshabilitar el desbordamiento en WordPress y eliminar la barra de desplazamiento horizontal.
Qué causa la barra de desplazamiento horizontal o el desbordamiento en WordPress
Al configurar su sitio web de WordPress, es importante que sea fácil de usar y accesible para todos.
WordPress mostrará una barra de desplazamiento horizontal si un elemento es más ancho que el diseño de su sitio web. Esto se llama ‘desbordamiento’. Tener una barra de desplazamiento horizontal puede romper su diseño y hacer que su sitio web sea menos fácil de usar.
Una página web con barras de desplazamiento horizontales y verticales puede desorientar al visitante y dificultar su navegación. Puede hacer que las personas abandonen su sitio, lo que genera menos conversiones y ventas.
Deshabilitar el desbordamiento puede ser beneficioso para usted, ya que hará que su sitio sea más fácil de usar e intuitivo.
Deshabilitar el desbordamiento es un proceso extremadamente fácil. Con eso en mente, echemos un vistazo a cómo deshabilitar fácilmente la barra de desplazamiento horizontal de desbordamiento en WordPress.
Método 1: agregar el fragmento de CSS usando el personalizador de temas
Puede deshabilitar el desbordamiento en WordPress simplemente agregando un código CSS en la opción ‘CSS adicional’ del personalizador de temas.
Todo lo que tienes que hacer es ir al panel de control de WordPress y hacer clic en Apariencia » Personalizar.
Nota: Es posible que vea Apariencia » Editor en vez de personalizar. Esto significa que su tema usa el editor de sitio completo (FSE) en lugar del Personalizador de temas, y debe consultar nuestra guía sobre cómo arreglar el personalizador de temas faltante o usar Método 2 abajo.
Una vez que esté en la página Personalizar, haga clic en la opción ‘CSS adicional’ y luego simplemente copie y pegue el siguiente código.
html, body {
max-width: 100%;
overflow-x: hidden;
}
Una vez que haya pegado el código, se eliminará cualquier desbordamiento y podrá verlo aplicado en el panel de vista previa en vivo de su sitio web.
¡No olvide hacer clic en el botón ‘Publicar’ en la parte superior de la página cuando haya terminado!
Método 2: agregar el fragmento de CSS usando WPCode
También puede agregar el CSS a través de un fragmento de código usando WPCode plugin.
Código WP es el fragmento de código más popular plugin, utilizado por más de 1 millón de sitios web. Recomendamos este método ya que este plugin facilita agregar código personalizado a WordPress sin tener que editar ninguno de sus archivos de tema.
Entonces, lo primero que debe hacer es instalar y activar el Código WP plugin en tu sitio web. Para más detalles, puedes ver nuestra guía paso a paso sobre cómo instalar un WordPress plugin.
Una vez que haya activado el pluginagregará un nuevo elemento de menú etiquetado Fragmentos de código a su barra de administración de WordPress. Haga clic en él y accederá a la página ‘Todos los fragmentos’.
Continúe y haga clic en el botón ‘Agregar nuevo’ para agregar su código CSS.
Ahora que está en la página ‘Agregar fragmento’, puede buscar en la biblioteca de fragmentos de WPCode o puede comenzar desde cero con el suyo propio. Eso es lo que harás aquí.
Simplemente coloque el cursor sobre ‘Agregue su código personalizado (nuevo fragmento)’ y haga clic en ‘Usar fragmento’.
Una vez que esté en la página ‘Crear fragmento personalizado’, comience ingresando un título para su fragmento de código. Esto es solo para usted y puede ser cualquier cosa que lo ayude a identificar el código.
A continuación, deberá seleccionar el ‘Tipo de código’ en el menú desplegable de la derecha. Tenga en cuenta que WPCode no ofrece una opción para CSS, por lo que deberá hacer clic en la opción ‘Universal Snippet’.
A continuación, todo lo que tiene que hacer es copiar y pegar el siguiente fragmento de código CSS en la ‘Vista previa del código’.
<style type="text/css">
html, body {
max-width: 100%;
overflow-x: hidden;
}
</style>
Se verá así una vez que hayas pegado el código:
Después de eso, desplácese hacia abajo hasta la sección ‘Inserción’. Aquí encontrará dos opciones, ‘Inserción automática’ y ‘Código corto’.
Elegirá la opción ‘Insertar automáticamente’ para que su código se inserte y ejecute automáticamente en su sitio.
Sin embargo, si solo desea deshabilitar la barra de desplazamiento horizontal en algunas páginas específicas, puede usar la opción de lógica condicional en WPCode para mostrar solo el fragmento en una página específica.
Como alternativa, puede utilizar el Código WP Pro versión para cargar fragmentos en páginas de publicaciones específicas usando el Editor de bloques.
Una vez que haya elegido su opción, vaya a la parte superior de la página y cambie el interruptor de ‘Inactivo’ a ‘Activo’ en la esquina superior derecha.
Luego, simplemente haga clic en el botón ‘Guardar fragmento’.
¡Eso es todo! Acaba de eliminar las barras de desplazamiento de desbordamiento horizontales de su sitio.
Esperamos que este artículo le haya ayudado a aprender cómo deshabilitar el desbordamiento en su sitio de WordPress. Es posible que también desee ver nuestras selecciones expertas de WordPress imprescindibles plugins para hacer crecer su sitio y nuestra guía para principiantes sobre cómo crear un formulario de contacto en WordPress.
visto en: wpbeginner