Cómo cambiar el lado de la barra lateral en WordPress (4 métodos)

Cuando empezamos a personalizar temas de WordPress, mover la barra lateral de derecha a izquierda parecía que debería ser simple.

Sin embargo, descubrimos que muchos usuarios tienen dificultades con este cambio básico de diseño porque cada tema lo maneja de manera diferente, y algunos no hacen la opción obvia.

Después de ayudar a los usuarios a través de WPBeginner, hemos aprendido que la posición de la barra lateral puede impactar significativamente cómo los visitantes interactúan con tu contenido.

Ya sea que sigas las mejores prácticas de diseño o te adaptes a los hábitos de lectura de tu audiencia, saber cómo cambiar la posición de tu barra lateral es una habilidad valiosa.

En esta guía, te mostraremos las maneras más fáciles de cambiar la posición de tu barra lateral en WordPress.

¿Cómo Cambio el Lado de la Barra Lateral en mi Tema de WordPress?

Para cambiar el lado de la barra lateral en tu tema de WordPress, primero debes identificar si estás usando un tema clásico o un tema de bloques. El método que uses dependerá completamente de tu tipo de tema.

Los temas clásicos suelen usar el Personalizador de Tema o CSS personalizado para este cambio. Los temas de bloques usan el Editor de Sitio Completo más nuevo.

Aquí te mostramos cómo comprobar rápidamente cuál tienes. En tu panel, ve a Apariencia. Si ves un menú de ‘Editor’, estás usando un tema de bloques. Si en su lugar ves ‘Personalizar’ y ‘Widgets’, tienes un tema clásico.

Mover la barra lateral puede ser útil por muchas razones. Por ejemplo, los sitios web con idiomas de derecha a izquierda se sienten más naturales con la barra lateral en el lado izquierdo.

También podrías querer mejorar la experiencia del usuario en tu sitio. Si notas que los visitantes de tu sitio de comercio electrónico escanean las páginas en un patrón específico, ajustar la barra lateral puede hacer que las compras se sientan más intuitivas.

Con todo esto en mente, veamos cómo cambiar el lado de la barra lateral en tu blog o sitio web de WordPress.

Tenemos 4 métodos sencillos, y puedes usar los enlaces rápidos a continuación para saltar al que prefieras:

• Método 1: Cómo cambiar el lado de la barra lateral con el Personalizador de WordPress (Temas Clásicos)
• Method 2: How to Change the Sidebar Side With Code (Classic Themes)
• Método 3: Cómo cambiar el lado de la barra lateral con FSE (Temas de Bloques)
• Método 4: Cómo cambiar el lado de la barra lateral con CSS Hero (Todos los Temas)
• Alternativa: Crea barras laterales personalizadas con un plugin constructor de páginas de WordPress
• Preguntas frecuentes sobre las barras laterales de WordPress

Método 1: Cómo cambiar el lado de la barra lateral con el Personalizador de WordPress (Temas Clásicos)

Este método es para personas que usan un tema clásico. Esto significa que aún puedes usar el personalizador de WordPress para estilizar el diseño de tu sitio, y la sección de Widgets en el menú Apariencia del administrador de WordPress todavía existe.

Si el personalizador de temas no está disponible en tu panel de WordPress, es probable que estés usando un tema de bloques y debas saltar al tercer método.

A veces, los desarrolladores de temas clásicos ofrecen múltiples ubicaciones para la barra lateral entre las que puedes elegir. Puedes confirmar si esto es cierto usando el personalizador de WordPress y eligiendo la posición de la barra lateral que prefieras allí.

Primero, ve a Apariencia » Personalizar. Estamos usando el tema Hestia como ejemplo.

Aquí, dirígete a la página Configuración de Apariencia » Configuración General desde la columna izquierda

Como puedes ver, Hestia tiene tres plantillas de barra lateral: una sin barra lateral, una con barra lateral izquierda y una con barra lateral derecha. Esto nos permite cambiar el lado de la barra lateral con un solo clic. Aquí, hemos cambiado el lado de la barra lateral a la izquierda.

Esta configuración controla el diseño predeterminado de la barra lateral para todo tu sitio web. Sin embargo, Hestia también te permite personalizar la posición de la barra lateral del blog por separado, de modo que solo afecte a tus publicaciones de blog o a la página de publicaciones.

Una vez que hayas realizado los cambios, puedes agregar los widgets disponibles a la barra lateral como de costumbre. Para obtener más información, consulta nuestra guía sobre cómo agregar y usar widgets en WordPress.

Luego, simplemente haz clic en ‘Publicar’.

Si bien esta es una función conveniente, todo depende del tema. Recomendamos encarecidamente consultar la documentación de tu tema para ver si puedes cambiar la barra lateral usando el personalizador.

Si no es así, salta al siguiente método.

Método 2: Cómo cambiar el lado de la barra lateral con código (Temas Clásicos)

Si tu tema clásico no ofrece múltiples barras laterales para elegir, puedes cambiar el lado de la barra lateral manualmente usando código CSS.

La mayoría de los temas clásicos usan una propiedad CSS llamada float para posicionar la barra lateral y el área de contenido uno al lado del otro. Nuestro objetivo es encontrar el CSS para ambos elementos y simplemente invertir su dirección de flotación.

Recomendamos usar un sitio de staging y/o un tema hijo para experimentar con este método. De esta manera, si ocurre un error, no afectará a tu tema principal y/o a tu sitio web en vivo.

Además, usar un tema hijo puede evitar que tus cambios se sobrescriban cuando haya una actualización del tema.

Paso 1: Usa la herramienta Inspeccionar para localizar la clase CSS de tu barra lateral

Lo primero que harás es abrir tu sitio web. Luego, pasa el cursor sobre el área de tu barra lateral y usa la herramienta Inspeccionar de tu navegador.

Si usas Chrome, puedes hacer clic derecho en el área y seleccionar 'Inspeccionar'.

Para más información, puedes consultar nuestra guía sobre conceptos básicos del elemento de inspección.

Ahora, lo que quieres hacer es pasar el cursor sobre las líneas HTML y CSS en la parte superior derecha de la página.

Cuando veas que toda tu área de barra lateral está resaltada, haz clic en esa línea. Para nosotros, fue <aside id="secondary" class="sidebar widget-area">.

La pestaña 'Estilos' en la parte inferior de la página tiene todas las propiedades CSS relacionadas con la barra lateral.

En nuestro caso, vimos que la clase CSS para el área de la barra lateral es .sidebar. También hay reglas que determinan la posición de la barra lateral, que, en este caso, es el lado izquierdo.

Sabemos esto porque cuando desmarcamos la regla margin-left, la barra lateral se mueve al otro lado.

Aquí está el código para el área de la barra lateral de nuestro tema:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

Puedes copiar y pegar este código en un editor de texto porque lo necesitaremos para un paso posterior. O puedes simplemente dejar esta pestaña abierta para más tarde.

Ahora que conocemos la clase CSS para el área de la barra lateral, también tenemos que encontrar la clase para el área de contenido principal que muestra todas tus publicaciones o el contenido de las publicaciones.

Lo que puedes hacer es pasar el cursor sobre las líneas HTML y CSS para ver qué línea resalta el área de contenido principal. Aquí, descubrimos que era la línea <div id="primary" class="content-area">.

Como antes, puedes desplazarte hacia abajo hasta la pestaña de ‘Estilos’ para ver cuál es la clase CSS de esa área. En este caso, fue .content-area. Aquí está el código para ello:

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

De nuevo, puedes copiar y pegar el código CSS de tu área de contenido en un editor de texto o mantener esta pestaña abierta para el siguiente paso.

Ahora que conocemos las clases CSS de tu barra lateral y tu área de contenido, podemos editar el archivo style.css de tu tema para cambiar el lado de la barra lateral.

Paso 2: Personaliza el archivo style.css de tu tema

Por lo general, necesitarás editar tu style.css directamente usando el administrador de archivos de tu proveedor de hosting web o un cliente FTP. Sin embargo, el archivo style.css puede ser bastante largo y, si cometes un error, podría afectar el diseño de todo tu sitio web y arruinar la experiencia de usuario.

Es por eso que recomendamos usar WPCode. Hemos descubierto que es la forma más segura y sencilla de agregar CSS personalizado sin editar directamente los archivos de tu tema.

Si los cambios en tu código causan errores no intencionales, puedes desactivarlo con un solo clic y tu sitio web volverá a la normalidad.

Para obtener más información, consulta nuestra reseña de WPCode.

Primero, procede a instalar WPCode en tu WordPress. Si necesitas instrucciones paso a paso, lee nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez hecho esto, ve a Fragmentos de código » + Añadir fragmento. Luego, selecciona 'Añadir tu código personalizado (Nuevo fragmento)' y haz clic en el botón '+ Añadir fragmento personalizado'.

Ahora, escribe un título para tu código personalizado. Puede ser algo como 'Cambiar lado de la barra lateral'.

Luego, cambia el Tipo de código a ‘Fragmento de CSS’.

Una vez hecho esto, necesitas insertar los fragmentos de código CSS de tu barra lateral y áreas de contenido en el cuadro de vista previa del código.

Puedes separarlos con un espacio vacío para que sea fácil identificarlos, así:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Ahora, personalicemos este código CSS. Lo que quieres hacer es cambiar las propiedades CSS que definen las ubicaciones de la barra lateral y las áreas de contenido principal.

En nuestro caso, estas clases CSS tienen propiedades float, margin, padding y width, pero esto puede verse diferente dependiendo de tu tema.

Para nuestra área de barra lateral, cambiamos left por right en las propiedades de float y margin. Esto significa que el área de la barra lateral estará en la dirección opuesta a donde se colocó originalmente.

.sidebar {
float: right;
margin-right: 75%;
padding: 0;
width: 25%;
}

Con esa parte hecha, cambiemos la ubicación del área de contenido. Lo que nos funcionó es que cambiamos float: left por float: right y margin-right por margin-left. Esto le dice a WordPress que mueva el área de contenido hacia la derecha.

Adicionalmente, agregamos las propiedades position: relative y right: 100%. Estas aseguran que nuestra área de contenido no se salga demasiado hacia la derecha.

.content-area {
float: right;
margin-left: -100%;
width: 70%;
position: relative;
right: 100%;
}

De nuevo, lo que funciona para nuestro tema puede no funcionar con el tuyo porque cada tema tiene diferentes nombres para sus clases CSS y usa diferentes propiedades. Recomendamos leer esta referencia completa de CSS para averiguar qué funciona mejor para tu tema.

Adicionalmente, siéntete libre de experimentar con los porcentajes del ancho y los márgenes en el código para ajustar la ubicación de la barra lateral.

Una vez que hayas cambiado tu fragmento de código, desplázate hacia abajo hasta la sección de Inserción. Asegúrate de que el Método de Inserción sea 'Insertar Automáticamente'.

En cuanto a la Ubicación, selecciona 'Pie de página de todo el sitio' para que tu código pueda anular el código existente en tu archivo style.css.

Ahora, puedes hacer clic en el interruptor en la esquina superior derecha para hacer que el código esté 'Activo' y hacer clic en 'Guardar Fragmento'. Luego, previsualiza tu sitio web para ver los resultados.

Si miras las capturas de pantalla anteriores, puedes ver que la barra lateral en nuestro sitio web de demostración estaba en el lado derecho.

Después de editar el código en style.css, el tema ahora tiene una barra lateral izquierda:

Ahora que has cambiado el lado de la barra lateral, puedes empezar a cambiar o agregar más contenido a la barra lateral. Aquí tienes algunas ideas para ayudarte:

• Cómo agregar una imagen en un widget de barra lateral de WordPress
• Cómo agregar un enlace a los títulos de los widgets en WordPress
• Cómo agregar estilos personalizados a los widgets de WordPress
• Cómo deshabilitar widgets no deseados en WordPress
• Cómo personalizar la visualización de los archivos de WordPress en su barra lateral

Método 3: Cómo cambiar el lado de la barra lateral con FSE (Temas de Bloques)

Si usas un tema de bloques, no verás una sección de Widgets en tu administrador de WordPress. Quizás te preguntes cómo cambiar el lado de la barra lateral si ese menú no existe.

Afortunadamente, el proceso es mucho más simple en comparación con el de los temas clásicos. Esto se debe a que los temas de bloques usan bloques de Gutenberg, y puedes simplemente arrastrar y soltar los elementos para cambiar su posición usando el editor de sitio completo (FSE).

En segundo lugar, los temas de bloques generalmente tendrán una plantilla que incluye una barra lateral. Simplemente necesitamos cambiar eso, y cada página que use la plantilla se verá afectada. Puedes consultar la documentación de tu tema para ver cómo se llama la plantilla y acceder a ella.

Para la demostración, usaremos el tema Twenty Twenty-Four, que tiene una página con una plantilla de barra lateral.

Primero, ve a Apariencia » Editor en tu panel.

Aquí, verá algunos menús para personalizar tu tema de bloques.

Selecciona 'Plantillas'.

Ahora, busca la plantilla con la barra lateral que te gustaría editar.

En Twenty Twenty-Four, esa es la 'Página con barra lateral' y 'Única con barra lateral'. Dependiendo de tu tema, el nombre de la plantilla puede no mencionar claramente que tiene una barra lateral, así que, de nuevo, deberías consultar la documentación de tu tema.

Continúa y selecciona esa plantilla de barra lateral.

Típicamente, los temas de bloques incluirán la barra lateral y el área de contenido principal en un bloque de columnas. Esto mantiene todo ordenado, organizado y bien separado unos de otros.

Para cambiar el lado de la barra lateral, solo necesitas seleccionar la columna que compone la barra lateral y moverla.

La forma más fácil de hacer esto es hacer clic en la función 'Vista de lista' en el lado izquierdo de la página.

Luego, haz clic en el bloque 'Columnas' para expandirlo y pasa el cursor sobre su contenido hasta que encuentres la columna que contiene los elementos de la barra lateral.

En nuestro caso, ayudó que el tema Twenty Twenty-Four tenga una parte de plantilla llamada 'Barra lateral', por lo que identificarla fue fácil. Dicho esto, algunos temas pueden incluir solo un grupo de bloques regular y sin nombre que componen la barra lateral.

Sabrás que has seleccionado la columna correcta cuando aparezca un resaltado rectangular y una barra de herramientas alrededor de todo el grupo de bloques para la barra lateral.

Ahora, en la barra de herramientas de la columna de la barra lateral, verás flechas que puedes usar para cambiar la posición de la columna.

Haz clic en él y, dependiendo de cómo esté diseñado el bloque de Columnas, es posible que necesites jugar con la posición hasta que encuentres el ajuste correcto.

Es posible que el desarrollador del tema haya agregado algunas columnas vacías para crear espacio entre el área de contenido principal y el área de la barra lateral.

Si deseas eliminarla, simplemente busca la columna vacía correcta usando la función Vista de lista como antes. Luego, en la barra de herramientas del bloque, haz clic en el menú de tres puntos y selecciona 'Eliminar'.

O si deseas crear más espacio entre el área de la barra lateral y el área de contenido, puedes abrir la pestaña de configuración del bloque y cambiar a la sección 'Estilos'.

Luego, en la sección 'Dimensiones', puedes arrastrar el control deslizante para el relleno, margen o espaciado del bloque.

Una vez hecho, haz clic en ‘Guardar’.

Luego, puedes previsualizar todas las páginas en móvil y escritorio que estén usando la plantilla que acabas de editar para ver cómo se ve.

¿Qué pasa si has editado la plantilla, pero tus páginas o publicaciones no la están usando?

Todo lo que necesitas hacer es abrir la página o publicación en el editor de bloques. Luego, en el panel de configuración de la publicación, haz clic en el enlace en el campo 'Plantilla' y selecciona 'Cambiar plantilla'.

Ahora, simplemente elige la plantilla que esté usando la barra lateral.

Después de eso, puedes actualizar la página o publicación.

Para obtener más consejos y trucos usando el editor de sitio completo o de bloques, consulta estas guías:

• Cómo editar un sitio web de WordPress (Guía definitiva)
• Cómo personalizar los colores de tu sitio web de WordPress

Método 4: Cómo cambiar el lado de la barra lateral con CSS Hero (Todos los Temas)

El siguiente método utiliza un plugin de pago llamado CSS Hero, que es el mejor plugin de WordPress para la edición visual de CSS. Este plugin facilita la personalización del CSS de tu tema sin tocar ningún código, lo que lo hace ideal para principiantes.

Este método también funciona con todos los temas, así que si encuentras que los métodos anteriores son un poco limitantes, puedes usar este en su lugar. Dicho esto, no hay una versión gratuita del plugin, por lo que tendrás que comprar un plan de pago.

Para más información sobre el plugin y sus precios, consulta nuestra reseña de CSS Hero.

Primero, descarga el plugin a tu computadora e instálalo en tu sitio web de WordPress. Para obtener instrucciones paso a paso, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Una vez instalado, verás un menú de ‘CSS Hero’ en la barra de herramientas. Haz clic en él para abrir el editor visual de CSS.

Ten en cuenta que, dado que no todos los temas de WordPress funcionan de la misma manera, la forma en que uses CSS Hero para cambiar el lado de la barra lateral será diferente. Por lo tanto, te animamos a jugar con la plataforma para ver qué funciona para ti.

Dicho esto, te mostraremos qué configuraciones personalizamos para cambiar el lado de la barra lateral de derecha a izquierda.

Primero, haz clic en el área de la barra lateral en tu página. Sabrás que has hecho clic en la correcta cuando todos los elementos de tu barra lateral estén seleccionados como un grupo y tengan un resaltado rectangular a su alrededor.

En el lado izquierdo de la página, verás algunos menús para personalizar tus elementos.

En nuestra experiencia, las configuraciones que pueden cambiar la ubicación de la barra lateral son Posición, Medidas y Espaciado.

Posición determina cómo se coloca la barra lateral en relación con los otros elementos de la página. Aquí, puedes seleccionar 'Absoluto', lo que te dará cierta libertad sobre dónde debe estar la barra lateral.

Desde aquí, puedes cambiar los píxeles Superior, Derecho, Inferior e Izquierdo para colocar la barra lateral.

Puedes ver que ahora la barra lateral y el área de contenido principal están en el mismo lado.

Para solucionar esto, puedes pasar el cursor sobre el contenedor que conforma el área de contenido principal y hacer clic en él.

Ahora, en el panel lateral izquierdo, simplemente ajusta las configuraciones de Posición hasta que encuentres el ajuste correcto.

Lo que hicimos fue dejar la posición como 'Relativa' y ajustar los píxeles de la Derecha.

Técnicamente, esto es todo lo que necesitas hacer. Pero si quieres ajustar el tamaño de la barra lateral, selecciona el área de la barra lateral y ve a la configuración de 'Medidas'.

Aquí, puedes cambiar el ancho y la altura de la barra lateral.

Si deseas cambiar el espaciado entre el área de la barra lateral y el área de contenido principal, puedes ir a 'Espaciados'.

Aquí verás algunos controles deslizantes para ajustar el relleno y margen del elemento.

Nuevamente, te animamos a explorar la configuración de este plugin para cambiar el lado de la barra lateral a tu gusto exacto.

Una vez que hayas terminado, puedes hacer clic en el botón 'Guardar' en la esquina inferior derecha de la página.

Alternativa: Crea barras laterales personalizadas con un plugin constructor de páginas de WordPress

Hasta ahora, hemos explorado métodos para cambiar la ubicación de la barra lateral para todo tu sitio web. Pero, ¿qué pasa si solo quieres barras laterales específicas para ciertas páginas o tipos de publicaciones? Después de todo, no todas las páginas necesitan el mismo contenido de barra lateral.

Por ejemplo, tu página de inicio podría beneficiarse de una barra lateral más general con íconos de redes sociales y una llamada a la acción. Sin embargo, una página de producto podría ser mejor con una barra lateral que muestre productos relacionados o reseñas de clientes.

En este caso, es posible que desees crear barras laterales personalizadas para tu tema de WordPress. Con barras laterales personalizadas, puedes:

• Asignar barras laterales específicas a diferentes páginas o tipos de publicaciones. Esto te permite adaptar el contenido de tu barra lateral a las necesidades específicas de cada página.
• Crear una experiencia de usuario más dinámica y atractiva. Al ofrecer contenido relevante en la barra lateral, puedes mantener a los visitantes interesados y motivados para explorar tu sitio web más a fondo.

Aquí es donde un plugin de constructor de páginas de WordPress resulta útil. Estos plugins ofrecen funcionalidad de arrastrar y soltar y extensas bibliotecas de plantillas, lo que facilita la creación de barras laterales personalizadas.

Recomendamos usar SeedProd, que es un popular y fácil de usar plugin constructor de páginas y temas. Con SeedProd, puedes diseñar fácilmente páginas y temas personalizados con su interfaz amigable.

Puedes consultar estos artículos para obtener más información:

• Cómo agregar encabezado, pie de página o barra lateral personalizados para cada categoría
• Cómo mostrar una barra lateral diferente para cada publicación y página en WordPress

Alternativamente, puedes usar el constructor de páginas Thrive Architect. Esta herramienta también tiene toneladas de kits de temas y plantillas de páginas de destino, e incluso ofrece una función para crear un widget de barra lateral flotante y fijo. Esto es útil para mantener tu barra lateral fija mientras los usuarios se desplazan por la página.

Preguntas frecuentes sobre las barras laterales de WordPress

Aquí hay algunas preguntas que nuestros lectores hacen frecuentemente sobre las barras laterales en sus sitios web:

¿Cómo cambio la posición de la barra lateral en WordPress?

El método que uses depende de tu tema. Para temas clásicos, puedes cambiar la posición en el Personalizador de Temas si la opción existe, o agregando CSS personalizado. Para temas de bloques modernos, simplemente puedes arrastrar y soltar la columna de la barra lateral hacia el otro lado en el Editor de Sitio Completo.

¿Cómo personalizar la barra lateral en WordPress?

Puedes personalizar el contenido de la barra lateral usando widgets o bloques. Si tienes un tema clásico, navega a Apariencia » Widgets para agregar o eliminar elementos.

Si usas un tema de bloques, ve a Apariencia » Editor y edita la parte de la plantilla de la barra lateral directamente agregando o eliminando cualquier bloque de WordPress.

¿Cómo agrego una barra lateral izquierda y derecha en WordPress?

Agregar una barra lateral tanto a la izquierda como a la derecha requiere un tema que soporte un diseño de tres columnas.

Si tu tema no tiene esta opción incorporada, la forma más fácil de crear un diseño personalizado de tres columnas es con un plugin constructor de páginas de WordPress como SeedProd o Thrive Architect.

¿Cómo cambiar el ancho de la barra lateral en WordPress?

La forma más confiable de cambiar el ancho de la barra lateral es con CSS personalizado. Puedes usar la herramienta de Inspeccionar de tu navegador para encontrar el selector CSS de tu barra lateral y luego agregar una nueva regla de ancho, como .sidebar { width: 30%; }.

Alternativamente, un plugin como CSS Hero te permite ajustar el ancho visualmente sin código.

Esperamos que este tutorial de WordPress te haya ayudado a aprender cómo cambiar el lado de la barra lateral en WordPress. También te puede interesar nuestro artículo sobre cómo agregar un menú adaptable a pantalla completa en WordPress y nuestra lista de los mejores trucos para la barra lateral de WordPress para obtener resultados máximos.

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.