¿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 extiende fuera de la pantalla. La mayoría de los temas de WordPress no utilizan el desplazamiento horizontal, ya que puede distorsionar 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 la 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 hace que su sitio sea más fácil de usar e intuitivo.
Deshabilitar el desbordamiento es un proceso extremadamente simple. Con eso en mente, veamos cómo deshabilitar fácilmente la barra de desplazamiento horizontal de desbordamiento en WordPress.
Método 1: Agregue 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.
Observación: podrías verlo Apariencia » Editor en vez de Ajustar. Esto significa que su tema está usando el editor de sitio completo (FSE) en lugar del personalizador de temas, y debe consultar nuestra guía sobre cómo corregir o usar el personalizador de temas faltante. Método 2 abajo.
Una vez que esté en la página Personalizar, haga clic en la opción «CSS adicional» y copie y pegue el siguiente código.
html, body {
max-width: 100%;
overflow-x: hidden;
}
Una vez que pegue el código, se eliminará cualquier desbordamiento y podrá ver cómo se aplicó en la ventana de vista previa en vivo de su sitio web.
¡No olvide presionar el botón ‘Publicar’ en la parte superior de la página cuando haya terminado!
Método 2: agregue 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.
Código WP es el complemento de fragmento de código más popular, utilizado por más de 1 millón de sitios web. Recomendamos este método porque 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 instalarlo y activarlo. Código WP complemento en su sitio web. Para obtener más información, puede consultar nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Después de activar el complemento, se 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 clips’.
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 comenzar desde cero con su propia biblioteca. Eso es lo que vas a hacer aquí.
Pase el cursor sobre ‘Agregar su código personalizado (nuevo fragmento)’ y haga clic en ‘Usar fragmento’.
Una vez que esté en la página «Crear fragmento personalizado», comience a ingresar un título para su fragmento de código. Esto es solo para ti, y puede ser cualquier cosa que te ayude a identificar el código.
A continuación, debe seleccionar el ‘Tipo de código’ en el menú desplegable de la derecha. Tenga en cuenta que WPCode no proporciona una opción para CSS, por lo que deberá hacer clic en la opción ‘Universal Snippet’.
Luego, todo lo que tiene que hacer es copiar y pegar el siguiente fragmento de código CSS en el ‘Ejemplo de código’.
<style type="text/css">
html, body {
max-width: 100%;
overflow-x: hidden;
}
</style>
Se ve así cuando pegas el código:
Luego desplácese hacia abajo hasta la sección «Insertar». Aquí encontrará dos opciones, ‘Inserción automática’ y ‘Código corto’.
Usted elige 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 el fragmento solo 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 haga clic en el botón ‘Guardar fragmento’.
¡Eso es! Acaba de eliminar todas las barras de desplazamiento de desbordamiento horizontales en 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 para crear un formulario de contacto en WordPress.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.
La publicación Cómo deshabilitar el desbordamiento en WordPress (eliminar el desplazamiento horizontal) apareció primero en AprenderWP.