Cómo deshabilitar el desbordamiento en WordPress (eliminar el desplazamiento horizontal)


¿Desea deshabilitar el desbordamiento en su sitio web de WordPress?

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 utiliza el editor de sitio completo (FSE) en lugar del Personalizador de temas, y debe consultar nuestra guía sobre cómo corregir el personalizador de temas faltante o utilizar el Método 2 a continuación.

Elija la opción CSS adicional del personalizador de temas

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!

Pegue el código CSS en el campo CSS adicional

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 utilizando el complemento WPCode.

WPCode es el complemento de fragmentos de código más popular, utilizado por más de 1 millón de sitios web. Recomendamos este método ya que este complemento facilita agregar código personalizado a WordPress sin tener que editar ninguno de los archivos de su tema.

Entonces, lo primero que debe hacer es instalar y activar el complemento WPCode en su sitio web. Para obtener más detalles, puede ver nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Una vez que haya activado el complemento, agregará 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.

Vaya a Fragmentos de código y haga clic en Agregar nuevo

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’.

Haga clic en el botón 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’.

Seleccione fragmento universal como tipo de código

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:

Pegue su código CSS en WPCode

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.

Elija un modo de inserción

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.

Alternativamente, puede usar la versión WPCode Pro 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’.

Guarde su fragmento de CSS

¡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. También es posible que desee ver nuestras selecciones expertas de complementos de WordPress imprescindibles para hacer crecer su sitio, y nuestra guía para principiantes sobre cómo crear un formulario de contacto en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress. También puedes encontrarnos en Gorjeo y facebook





Source link