Uno de los problemas de diseño más comunes que vemos es cuando la barra lateral aparece debajo del contenido en lugar de al lado. Esto hace que un sitio parezca roto al instante y puede confundir a los visitantes.
Esto suele ocurrir después de una edición de tema, instalación de un plugin o un pequeño cambio de código; incluso una etiqueta de cierre faltante puede alterar el diseño. Lo hemos visto muchas veces mientras ayudábamos a los usuarios a solucionar problemas de sus temas.
La buena noticia es que es fácil de arreglar una vez que sabes dónde buscar. No necesitas ser un desarrollador para rastrear el problema.
En esta guía, te mostraremos las causas más probables y te guiaremos a través de pasos sencillos para que tu barra lateral vuelva a su lugar.
¿Qué Causa el Error de Barra Lateral Debajo del Contenido en WordPress?
La causa más común de que la barra lateral aparezca debajo del contenido es un error de HTML o CSS que rompe el diseño.
Cada <div> en HTML necesita ser cerrado correctamente. Si la plantilla responsable de mostrar la página tiene una etiqueta <div> sin cerrar, esto romperá el diseño.
De manera similar, una etiqueta </div> de cierre no deseada o extra también puede afectar el diseño y hacer que la barra lateral se mueva hacia abajo.
Además del HTML, el CSS también afecta el diseño general de cada elemento en tu sitio web de WordPress. Se utiliza para definir el ancho, la alineación y el flotado de los elementos en tu diseño.
En pocas palabras, si el ancho de tu área de contenido es mayor que el espacio disponible, forzará a la barra lateral a moverse hacia abajo.
Primero, necesitarás averiguar qué código específico está causando este error de barra lateral en WordPress.
Dicho esto, veamos cómo solucionar y corregir fácilmente el error de la barra lateral debajo del contenido en WordPress. Puedes usar estos enlaces rápidos para saltar a una solución de solución de problemas específica:
- Deshacer cambios recientes en tu tema de WordPress
- Borra la caché de WordPress
- Descartar plugins de WordPress
- Corregir etiquetas rotas que rompen el diseño
- Encontrar el CSS que mueve la barra lateral debajo del contenido
- Qué hacer si todavía ves la barra lateral debajo del contenido
- Aprende más formas de solucionar errores comunes de WordPress
1. Deshacer cambios recientes en tu tema de WordPress
Por lo general, el problema de la barra lateral es causado por cambios en los archivos de tu tema de WordPress.
Si recientemente hiciste algún cambio en tu tema de WordPress o en tu tema hijo, examinar esos cambios será una forma rápida de corregir este error.
También puedes contactar directamente al desarrollador de tu tema para obtener soporte. Para más información, consulta nuestro tutorial sobre cómo pedir soporte de WordPress correctamente y obtenerlo.
Si no puedes averiguar qué cambios necesitas revertir, sigue leyendo y te mostraremos otras formas de solucionar el problema.
2. Borrar la caché de WordPress
Cuando haces cambios que no aparecen de inmediato, esto a menudo se debe a problemas de caché.
Es común que los plugins de caché te muestren una versión anterior de la misma página. Limpiar la caché de WordPress y la caché del navegador te ayudarán a ver los cambios aplicados a tu sitio web.
3. Descarta los plugins de WordPress
La apariencia y el estilo de tu sitio de WordPress están controlados por el tema que estás utilizando. Sin embargo, a veces los plugins de WordPress también pueden agregar su propio HTML y CSS a tu sitio web.
Por ejemplo, agregar un formulario de contacto en una página o un lightbox popup cargará CSS y HTML adicionales.
Para asegurarte de que el problema no sea causado por un plugin de WordPress, puedes desactivar temporalmente todos los plugins de WordPress en tu sitio web.
Para hacer esto, simplemente ve a Plugins » Plugins Instalados en tu panel de administración de WordPress y marca la casilla junto a 'Plugin' en la parte superior de la lista. Luego, abre el menú desplegable, selecciona 'Desactivar' y haz clic en 'Aplicar'.
Si el problema desaparece, entonces esto significa que un plugin estaba causando el problema. Simplemente activa todos tus plugins de WordPress uno por uno, revisando tu sitio web después de cada plugin para averiguar cuál está causando el problema.
Después de eso, puedes contactar al soporte del plugin para encontrar una solución e informar el problema.
Para obtener una guía detallada, puedes consultar nuestros tutoriales sobre cómo desactivar fácilmente plugins de WordPress y cómo desactivar plugins cuando no puedes acceder al área de administración de WordPress.
4. Corregir etiquetas <div> rotas que rompen el diseño
Como mencionamos anteriormente, las etiquetas <div> rotas son una de las causas comunes de que la barra lateral se mueva debajo del contenido.
Si el problema se produce en un área específica de tu sitio web, puedes revisar la plantilla responsable de mostrar ese código.
Por ejemplo, si este problema solo ocurre en publicaciones individuales, es posible que desees revisar la plantilla single.php. Para averiguar qué plantilla debes consultar, consulta nuestra hoja de referencia completa sobre la jerarquía de plantillas de WordPress.
La forma más fácil de encontrar y corregir rápidamente un elemento div sin cerrar es usando la herramienta validadora de W3C.
También puedes usar la herramienta Inspect o aplicaciones de editor de código que te ayudan a depurar código resaltando las etiquetas de inicio y fin de los elementos.
Aquí tienes un ejemplo de cómo resaltar las etiquetas de inicio y fin de un elemento:
Al mirar el código, debes asegurarte de que cualquier etiqueta <div> que se abra también tenga una etiqueta de cierre </div>.
De manera similar, también querrás buscar una etiqueta de cierre </div> huérfana que no tenga una etiqueta <div> de apertura correspondiente.
Si has encontrado las etiquetas HTML rotas, entonces arreglarlas resolverá el problema de la barra lateral que aparece debajo del contenido.
5. Encuentra el CSS que Mueve la Barra Lateral Debajo del Contenido
El CSS controla los aspectos más importantes del diseño de tu sitio web. Tu tema de WordPress utiliza CSS para definir el ancho del contenido y las áreas de la barra lateral dentro de un diseño de cuadrícula.
Este valor está en el porcentaje del área de visualización disponible. En dispositivos móviles, tu tema empujará automáticamente la barra lateral debajo del contenido.
Para averiguar qué CSS está causando el problema, puedes usar la herramienta de inspección. Simplemente mover tu contenido al campo del contenedor, la sección de contenido y las áreas de la barra lateral te mostrará su ancho y alto.
Por ejemplo, si tu área de contenido tiene un 70% de ancho y el área de la barra lateral tiene un 33%, entonces se moverá automáticamente hacia abajo. Al calcular estos valores, también podrías considerar el espacio utilizado por los valores de relleno y margen en cada sección.
Qué hacer si todavía ves la barra lateral debajo del contenido
Si ninguno de los pasos anteriores funcionó, no te preocupes, todavía hay algunas cosas más que puedes intentar.
Primero, te recomendamos que revises nuestra guía completa de solución de problemas de WordPress. Es una excelente manera de descartar otros problemas ocultos que podrían estar afectando tu diseño.
También puedes habilitar el modo de depuración en WordPress. Esto no solucionará el error directamente, pero podría mostrarte un error de PHP o de un plugin que esté rompiendo tu diseño.
Si el modo de depuración apunta a un plugin específico, intenta desactivarlo temporalmente o reemplazarlo con una alternativa que no afecte el diseño de tu tema.
Aprende más formas de solucionar errores comunes de WordPress
¿Experimentando otros problemas en tu sitio de WordPress? Consulta los tutoriales a continuación:
- Cómo solucionar el error de JSON no válido en WordPress (Guía para principiantes)
- Problemas Comunes del Editor de Bloques de WordPress y Cómo Solucionarlos
- Cómo solucionar el error de carga de imágenes HTTP en WordPress
- Cómo solucionar el problema del botón 'Añadir medio' que no funciona en WordPress
- Cómo solucionar el error 'Otra actualización está actualmente en progreso' en WordPress
- Cómo solucionar el problema de que las imágenes destacadas aparezcan dos veces en las publicaciones de WordPress
- Cómo solucionar el problema del editor de sitio en blanco en WordPress (Paso a paso)
Esperamos que este artículo te haya ayudado a aprender cómo solucionar el problema de la barra lateral de WordPress debajo del contenido. También puedes consultar nuestro manual definitivo de errores comunes de WordPress y nuestro artículo sobre cómo mostrar barras laterales diferentes para cada publicación y página de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Alessio
Gracias por compartir, eso solucionó mi problema. Me alegra ver que no fui el único que lo experimentó.
Soporte de WPBeginner
You’re welcome, glad our guide was helpful
Administrador
Gina Detwiler
No estoy seguro de cómo encontrar ese elemento div. ¿Puedes dar más detalles? He tenido este problema desde el principio con mi sitio y no sé cómo solucionarlo.
Soporte de WPBeginner
Deberías echar un vistazo al código de tu tema personalizado en un editor de código y eso debería ayudarte a encontrar el div incorrecto. También puedes echar un vistazo a tu sitio usando la herramienta 'inspeccionar elemento': https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
Shai
¡Muchas gracias!
Me ahorraste mucho tiempo intentando resolverlo.
Como dijiste, tenía un elemento div extra cerrado
Dale Jennings
Estoy intentando poner mis publicaciones actuales a la izquierda y las publicaciones recientes en una barra lateral derecha, y la barra lateral está al final de la página, además es demasiado ancha, y no entiendo de qué estabas hablando ya que soy nuevo en esto. ¿Cuál es una solución fácil? ¿O hay alguna?
Ayla
Tengo el problema de que mi barra lateral aparece al final de cada página. No soy muy hábil con esto, así que no he hecho nada sofisticado aparte de transferir mi dominio de Google recientemente. He estado construyendo el sitio en WordPress y no tuve ningún problema hasta que cambié el tema. Intenté las instrucciones anteriores pero no pude encontrar nada de eso.
Soporte de WPBeginner
Hola Ayla,
Intenta cambiar temporalmente a tu tema anterior o a un tema predeterminado. Si esto resuelve el problema, entonces el problema es con tu tema. Intenta contactar al desarrollador del tema para ver si pueden ayudarte a solucionarlo.
Administrador
Jared H
¡Arreglé mi problema, gracias por publicar!
Dene
gracias chicos – esta publicación acaba de resolver mi problema. Muy apreciado
Donald Efiom
Tengo el mismo problema ahora mismo y no parece que pueda encontrar dónde editar el HTML de la página de la tienda donde muestro productos usando el plugin wcommerce. Cuando inspecciono el elemento en mi navegador, puedo depurar el error y corregirlo, pero en mi directorio raíz real, no encuentro la página que contiene el HTML de la página de la tienda de WooCommerce que pueda editar. ¡Por favor, ayuda!
Maria Appleby
Por más que lo intento, no puedo solucionar el problema de mi barra lateral. Busqué bloques abiertos. Eliminé una entrada de blog que estaba defectuosa con HTML debido a que copié contenido. Probé un tema diferente. Quité mis widgets (y luego intenté agregar uno para ver qué pasaba – el botón “seguir blog” – todavía en la parte inferior). Probé el validador pero realmente no entiendo lo que me dice. Cuando ingresé diferentes URLs de entradas de blog, obtuve los mismos mensajes de error. Lamento sonar tan estúpida… He tenido el blog por mucho tiempo, pero solo recientemente comencé a agregar mucho contenido, y todavía no sé muy bien lo que estoy haciendo. La barra lateral terminó yendo del lado derecho, a la parte inferior del blog, muy recientemente (en los últimos días). ¿Puedes ayudarme?
Soporte de WPBeginner
Hola Maria,
Parece que estás usando un blog de WordPress.com. Por favor, consulta nuestra guía sobre la diferencia entre WordPress.org autoalojado vs. blog gratuito de WordPress.com.
Administrador
Sparsh Goyal
Tengo el mismo problema pero no puedo resolverlo. Solo mi página de inicio tiene este problema. La página de tipo de publicación y la página de tipo de página funcionan bien. La barra lateral de mi página de inicio va a la parte superior en lugar de ir justo al lado de mi contenido. ¿Puedes revisar qué está saliendo mal en mi sitio web? Mi sitio es coasilat.com
Mustafa
Gracias. El problema está resuelto. Era un elemento div extra. Cuando lo eliminé, el problema se solucionó.
Jan Reilink
¡Me salvaste la vida, gracias!
Asha Shendre
Tuve problemas todo el día por esto.
La solución del problema la obtuve solo aquí.
Gracias..
Muchas gracias señor…
Harish
Gracias por tu ayuda
Sly
Hola, soy principiante. No sé NADA de código CSS o HTML, no edito mi tema, no tengo un tema hijo. Solo agrego plugins para lo que necesite hacer. Parece que tengo el problema con TODAS MIS ENTRADAS DE BLOG. La barra lateral está debajo de las entradas del blog. No tengo idea de qué es un div y cómo arreglarlo. Estimados profesionales, ¿cuál sería la mejor manera para que yo resuelva este problema de la barra lateral?
Tamara
Soy principiante y tampoco soy programador, pero pude resolver este problema usando el enlace del Validador W3 en esta página. En la parte superior del validador, en Opciones, marqué todas las disponibles y luego ingresé la dirección web de mi blog y ejecuté el validador. Debajo de una lista numerada de errores, había una visualización muy detallada (e intimidante, pero aguanta) de los errores tal como se encuentran dentro del texto de mi blog. Me enfoqué en los mencionados en este artículo. Al desplazarme por el informe detallado, encontré un error resaltado en rojo. Como mi texto se mostraba, pude ver que estaba en una de mis entradas de blog justo después de un enlace de internet que había insertado. Fui a esa entrada de blog en el panel de WordPress, hice clic en "editar" y eliminé el enlace. (Manteniendo presionado "eliminar" para asegurarme de que obtuve cualquier cosa invisible que pudiera haber allí y retrocediendo un par de letras por la misma razón). Luego guardé la entrada del blog. ¡Mi página web se arregló! Luego volví a editar la entrada del blog para volver a agregar el enlace y todo siguió bien. Problema resuelto.
Lisa W Boyle
Gracias, pude encontrar y arreglar el problema inmediatamente basándome en tus instrucciones. Descubrí que coloqué un extra en mi archivo single.php. ¡Eres un salvavidas, muchas gracias!
Roney Oenophile
No sé qué hice mal, por favor ayúdenme. Estaba editando texto y accidentalmente presioné una combinación de teclas que cambió la forma en que se veía. Ahora faltan pocos botones como pantalla completa. Y el botón de publicar se movió al lado izquierdo. Y la imagen que subí con la publicación se movió encima de mi contenido y ahora es muy grande. No sé cómo sucedió, no sé cuál es el problema. No soy bueno con las computadoras. Normalmente escribo publicaciones. Por favor, ayúdenme. La dirección de mi página es wordpress.com
Soporte de WPBeginner
Por favor, consulta nuestra guía sobre la diferencia entre WordPress.org autoalojado vs blog gratuito de WordPress.com. Necesitas contactar al soporte de WordPress.com.
Administrador
Danielle
Es la primera vez que me encargo de actualizar nuestro sitio… intenté actualizar la página de inicio estática y de alguna manera mi barra lateral se fue al final. No puedo ver ninguna etiqueta de < o >… ¡ayuda! ¡No quiero decirle a la persona de la que me hice cargo que ya la arruiné si puedo averiguar qué hice!
giovanni
¿Alguien puede ayudarme, tengo el mismo problema…
este es mi header.php
Susan
¡Perfecto! ¡Gracias! ¡Supe en el momento en que dijiste div exactamente quién en mi blog comunitario tenía que editar su publicación!
Leah
This is happening to me right now every time I try out a new theme. Only one widget stays on the sidebar and the rest goes to the bottom of the content. But when I go back to my current theme, everything looks okay. I still can’t figure it out.
Sam
¡Ah! ¡Me acabas de ahorrar mucho tiempo y frustración! Gracias
srik
¡Muchas gracias por esto! Fue realmente útil
Amy
Gracias por esta publicación. Estoy intentando solucionar este problema en mi sitio web ahora mismo. Intenté todo lo mencionado en esta publicación, pero todavía tengo problemas. Sé un poco sobre sitios web, pero estoy completamente perdido en cuanto a por qué mi barra de navegación superior se divide en 2 líneas y por qué mi barra lateral se empuja hacia abajo. Mi sitio web aún no está en línea, pero aquí está el sitio web
¡Gracias por cualquier ayuda!
sean
Problema similar con mi blog personalizado dentro de mi sitio web; la barra lateral se desliza debajo del pie de página si no hay suficiente contenido para empujarla hacia abajo.
Descubrí que eliminar (o más seguro, comentar) lo siguiente solucionó el problema:
No sé para qué es este div vacío y hasta ahora no ha afectado negativamente al blog. Otra razón más obvia se debe a divs sin etiquetas de cierre; es un poco más difícil hacer un seguimiento de todas tus etiquetas div abiertas/cerradas en WP ya que el pie de página y el encabezado se eliminan a diferencia de un sitio HTML estándar.
Sean
Eh, eso es comentar el div "delimitador" vacío al final de varias páginas de WP; ¡desapareció de mi comentario original!
David Pomazzo
¿Puedes ver mi sitio web y ayudarme? http://www.americasfreedomfighters.com/ Inserté Google AdSense y ahora mi barra lateral está empujada hacia abajo y tengo una historia que aparece en la barra lateral. Muchas gracias.
Jen
THANK YOU! It was the content width that did it for me
Cecilia
Tengo este problema y no puedo resolverlo (he estado intentando durante varios días)
Aquí está mi sitio:
Por favor, realmente necesito ayuda. ¡¡¡Gracias!!!! =)
Soporte de WPBeginner
Probablemente necesites agregar `clear` antes de finalizar tu div `.hfeed` así:
1-click Use in WordPress
Administrador
Katie Clark
Tengo este problema, y ni siquiera sé por dónde empezar, ya que no he hecho ninguna edición hoy. ¿Alguna sugerencia? Aquí está mi sitio
http://clarkscondensed.com/
Personal editorial
Tu sitio se ve bien en Chrome.
Administrador
Doomish
¡Gran consejo! Será de gran ayuda, y el comentario de Kathy es típicamente lo que me sucede.
kathy
Dado que la mayoría de los temas tienen el CSS adecuado, creo que este es casi siempre un problema de HTML mal cerrado. Por lo general, ocurre en una página específica porque el usuario ha intentado agregar su propio HTML en el editor de publicaciones y las cosas se descontrolaron a partir de ahí. Error simple, pero puede llevar mucho tiempo depurar.