Cómo añadir una barra lateral personalizada en WordPress (sin código) 

En mis primeros sitios, me costaba encajar menús y formularios en el diseño hasta que descubrí lo que podía hacer una barra lateral. Aprender a añadir una barra lateral en WordPress resultó ser uno de los mejores cambios que hice para mantener a los visitantes interesados.

Es el lugar donde puedes mantener a los lectores interesados con enlaces de navegación, publicaciones recientes o incluso un formulario de suscripción. En esta guía, te mostraré cómo añadir una barra lateral en WordPress paso a paso utilizando 4 métodos en los que confío para todos mis proyectos.

Puedes añadir una barra lateral en WordPress en unos pocos clics utilizando el constructor visual de SeedProd, el Personalizador de Apariencia para temas clásicos, o el Editor de Apariencia para temas de bloques. No se requiere código para ninguno de ellos.

¿Qué es una barra lateral de WordPress?

Una barra lateral de WordPress es una sección vertical que se sitúa junto a tu contenido principal, normalmente en el lado izquierdo o derecho de la página. Es un área de widgets donde puedes mostrar contenido adicional como menús, publicaciones recientes, anuncios o formularios de suscripción sin saturar el espacio del artículo principal.

A diferencia de tu contenido principal, que cambia de una página a otra, una barra lateral a menudo permanece igual en todo tu sitio. También puedes configurar barras laterales diferentes para páginas distintas si necesitas más flexibilidad.

Tu tema de WordPress controla si las barras laterales están disponibles, cuántas puedes usar y dónde aparecen. Algunos temas las incluyen por defecto, mientras que otros pueden requerir que añadas las tuyas.

La mayoría de las barras laterales predeterminadas vienen con widgets básicos que no siempre se ajustan a tus objetivos. Si quieres más control, puedes crear una barra lateral personalizada y elegir exactamente qué se muestra a tus visitantes.

¿Para qué puedes usar tu barra lateral de WordPress?

Puedes añadir casi cualquier contenido a tu barra lateral usando los widgets de WordPress.

Aquí tienes algunos ejemplos:

• Navegación – Puedes usar widgets de menú de navegación para ayudar a los usuarios a encontrar páginas relevantes o un menú para filtrar tus publicaciones de blog por categoría.
• Buscar – Añadir un cuadro de búsqueda a tu barra lateral es una excelente manera de ayudar a los usuarios a encontrar lo que buscan rápidamente.
• Suscripción por correo electrónico – Añade un formulario de suscripción por correo electrónico a tu barra lateral para recopilar direcciones de correo electrónico y hacer crecer tu lista.
• Contenido destacado – Tu barra lateral es un lugar estupendo para mostrar publicaciones individuales que son más valiosas para los usuarios que otras.
• Redes sociales – Añade botones para seguir en redes sociales y un widget para compartir para aumentar tus seguidores.
• Anuncios – Tu barra lateral es un lugar excelente para mostrar anuncios si los utilizas para generar ingresos.
• Llamadas a la acción (CTA) – Si tienes un nuevo curso en línea, producto u oferta, puedes añadir una CTA a tu barra lateral para animar a los lectores a que la consulten.

Esto cubre qué es una barra lateral y por qué es útil. Ahora añadamos una a WordPress.

Compartiré 4 métodos a continuación: el Personalizador de WordPress, la pantalla de Widgets, el Editor de Sitio y un creador visual de sitios web. Ninguno de ellos necesita código.

Qué método es el adecuado para ti depende de tu configuración. Si deseas control de diseño y barras laterales ilimitadas, utiliza SeedProd (Método 1).

Si estás en un tema clásico, el Personalizador es la opción más rápida (Método 2). Si estás en un tema de bloques como Twenty Twenty-Five, ve directamente al Método 4.

¿Cómo crear una barra lateral personalizada de WordPress con SeedProd?

Quizás quieras una única barra lateral personalizada, o varias para diferentes partes de tu sitio.

En cualquier caso, necesitarás un plugin de WordPress o algo de código personalizado para crear una. La ruta más fácil es SeedProd, que lo hace sin código.

SeedProd es el mejor constructor de sitios web de WordPress de arrastrar y soltar. Puedes usarlo para crear temas y diseños de páginas de WordPress personalizados sin código.

SeedProd utiliza plantillas individuales para crear todas las partes de tu tema. Una de esas plantillas es la Barra lateral, que te permite añadir una barra lateral personalizada a tu sitio con solo unos pocos clics.

Mejor aún, puedes crear tantas barras laterales como quieras con SeedProd, y mostrarlas en páginas y publicaciones específicas de tu sitio web.

Así que sigue los pasos a continuación para añadir una barra lateral a WordPress con SeedProd.

Paso 1. Instalar el constructor de sitios web SeedProd

El primer paso es instalar el plugin SeedProd Website Builder.

Nota: Necesitarás una licencia Pro o Elite de SeedProd para usar la función Theme Builder.

Puedes seguir esta guía sobre cómo instalar un plugin de WordPress si necesitas ayuda con este paso.

Después de instalar y activar el archivo .zip del plugin, ve a la página SeedProd ≫ Ajustes e introduce los detalles de tu clave de licencia. Puedes encontrar tu clave de licencia en el sitio web de SeedProd en tu panel de cuenta.

Paso 2. Crear las plantillas de tu tema de WordPress

Para crear una barra lateral personalizada con SeedProd, primero necesitarás crear las diferentes partes de tu tema. Es más rápido de lo que suena y no editarás ningún archivo de plantilla directamente.

Primero, ve a la página SeedProd » Theme Builder. Verás una lista de plantillas para tu tema actual de SeedProd en esta página.

Cuando lo abras por primera vez, solo verás una plantilla CSS Global.

Para empezar, tienes dos opciones.

1. Usar una de las plantillas de SeedProd listas para usar como punto de partida
2. Crear manualmente plantillas de tema desde cero

Sugiero empezar con una plantilla de tema predeterminada. SeedProd genera todos los archivos por ti, así que empiezas con un tema funcional en lugar de una página en blanco.

Para elegir una plantilla de tema, haz clic en el botón Themes y selecciona uno de los temas disponibles. Hay diferentes temas para diferentes sitios web, así que elige uno que se ajuste mejor a tus necesidades.

Después de elegir un tema, SeedProd genera todas las plantillas por ti. Ahora puedes editar cada una en el editor de arrastrar y soltar.

Paso 3. Personalizar tu barra lateral de WordPress

Para personalizar tu barra lateral con SeedProd, busca la plantilla Sidebar y haz clic en el enlace Edit Design.

Hacer eso lanzará tu barra lateral en el constructor de arrastrar y soltar de SeedProd. Verás una vista previa en vivo de tu plantilla de barra lateral en la columna derecha con un panel de edición en la columna izquierda.

Cambiar un elemento en tu barra lateral es tan simple como apuntar y hacer clic. Por ejemplo, puedes hacer clic en el icono de la papelera para eliminar bloques.

O puedes hacer clic en cualquier bloque para ver su configuración en el panel izquierdo.

Puedes añadir casi cualquier cosa usando los bloques de SeedProd. Arrastra un bloque desde la izquierda y suéltalo en su lugar en tu barra lateral.

Algunos de los bloques entre los que puedes elegir incluyen:

• Template Tags – Bloques que te permiten agregar contenido dinámico de WordPress, como publicaciones de blog, comentarios, imágenes destacadas, etc. Esta es una excelente manera de crear una barra lateral dinámica.
• Standard Blocks – Estos son elementos populares de diseño web que la mayoría de los sitios web utilizan, como imágenes, botones, texto y videos.
• Bloques avanzados – Funciones avanzadas de generación de leads como formularios de contacto, perfiles sociales, botones para compartir, formularios de suscripción, Google Maps y más.
• WooCommerce – Si tienes una tienda en línea, puedes usar los bloques de WooCommerce para mostrar productos populares, carritos de compra y otras funciones de la tienda en tu barra lateral.

Además de agregar contenido a tu barra lateral, SeedProd también te permite personalizar sus colores, fuentes, espaciado, bordes y mucho más.

Por ejemplo, si haces clic en el icono de configuración de una sección, puedes ver opciones para cambiar el color de fondo, subir una imagen de fondo y cambiar el ancho. Luego, hay más configuraciones en la pestaña Avanzado que te permiten controlar los bordes, el espaciado y más.

Cuando estés satisfecho con tu nueva barra lateral, haz clic en el botón verde Guardar en la esquina superior derecha de tu pantalla.

Ahora repite este proceso para las otras plantillas de tu tema, incluyendo:

• Página Individual
• Publicación Individual
• Índice/Archivos del Blog
• Página de inicio
• Encabezado
• Pie de página

Repite para cada parte, y podrás crear un tema de WordPress personalizado que se ajuste a tu sitio.

Paso 4. Publicar tu barra lateral personalizada en WordPress

Cuando estés satisfecho con tu barra lateral personalizada de WordPress, el último paso es activarla en tu sitio de WordPress.

En SeedProd, activas un interruptor para hacerlo público.

Ve a la página SeedProd » Theme Builder y activa el interruptor junto a la opción ‘Enable SeedProd Theme’ a ‘Yes’.

SeedProd ahora reemplazará tu diseño existente con el nuevo tema y barra lateral de WordPress.

Ahora visita tu sitio para ver tu barra lateral personalizada en su lugar.

Cómo Mostrar una Barra Lateral Diferente en Páginas Diferentes

Una barra lateral rara vez encaja en todas las páginas. Los enlaces que ayudan en una entrada de blog pueden sentirse fuera de lugar en tu página de contacto o en una página de ventas.

Mostrar una barra lateral diferente en diferentes páginas soluciona eso. Puedes poner publicaciones recientes junto a tus artículos, un botón de reserva en tu página de servicios y nada en absoluto en una página de destino.

También mantiene a los visitantes en movimiento. Un diseño interactivo y bien dirigido puede aumentar la retención de usuarios hasta en un 60%, por lo que una barra lateral que coincida con la página se gana su espacio.

Con SeedProd puedes crear tantas barras laterales como quieras y asignar cada una a una plantilla específica. Aquí tienes la forma más rápida de hacerlo.

¿Prefieres ver primero? Aquí está la parte de nuestro tutorial de Theme Builder que cubre las partes globales reutilizables.

Paso 1. Duplica tu Barra Lateral Existente

En lugar de crear una segunda barra lateral desde cero, duplica la que ya tienes. Esto mantiene las fuentes, el espaciado y el estilo consistentes en todo tu sitio.

En SeedProd » Theme Builder, pasa el ratón sobre la parte de plantilla Sidebar y haz clic en Duplicate.

Aparece una copia en tu lista de partes del tema. Haz clic en Edit Design en el duplicado para abrirlo en el constructor visual.

Paso 2. Personaliza el Duplicado para su Página

Ahora cambia el contenido para que encaje donde aparecerá. Para eliminar un bloque, pasa el ratón sobre él y haz clic en el icono de la papelera.

Luego arrastra los bloques que quieras. Para una barra lateral de archivo, cambio el formulario de suscripción por un bloque de publicaciones recientes y un par de testimonios.

Haz clic en Guardar cuando el diseño se vea bien. Se mantiene fiel a la marca porque empezaste con tu barra lateral original.

Paso 3. Asigna la Barra Lateral a una Plantilla Específica

A continuación, decide qué páginas deben usar la nueva barra lateral. Los temas de SeedProd suelen incluir una plantilla Single Post para las entradas del blog y una plantilla Archives, Search Results para las páginas de categorías y resultados de búsqueda.

En este ejemplo, quiero que las páginas de archivo utilicen mi nueva barra lateral. Busca la plantilla Archives, Search Results y haz clic en Edit Design.

Dentro del editor, pasa el ratón por encima del área de la barra lateral hasta que aparezca la barra de herramientas naranja, luego haz clic para seleccionarla. El panel izquierdo dirá Editing: Template Parts.

Abre el menú desplegable Template Part y elige la barra lateral que acabas de crear.

El diseño se actualiza de inmediato. Haz clic en Save y tus páginas de archivo ahora mostrarán una barra lateral diferente a la de tus entradas de blog.

Repite estos pasos para cualquier otra plantilla, como Páginas o un diseño específico de WooCommerce. Cada una puede tener su propia barra lateral.

Cómo Mostrar Barras Laterales Diferentes sin un Page Builder

No necesitas un constructor de páginas para esto si prefieres evitarlo. Hay dos rutas sin constructor, dependiendo de tu tema.

En un tema clásico, el Personalizador integrado a menudo te permite establecer diseños de barra lateral separados para entradas, páginas y archivos. Cubro eso en el método del Personalizador a continuación.

En un tema de bloques, asignas el contenido de la barra lateral por plantilla en el Editor del Sitio. Te guío a través de eso en el método del tema de bloques más abajo.

Si deseas control por página en un tema clásico sin un constructor, un plugin gratuito como Custom Sidebars, Dynamic Widget Area Manager crea áreas de widgets adicionales y las asigna a publicaciones, páginas o categorías específicas.

Funciona con la mayoría de los temas y no necesita código. La desventaja es que estás limitado a diseños basados en widgets, sin el control visual completo que te ofrece SeedProd.

¿Cómo añadir una barra lateral usando el personalizador de WordPress?

El personalizador integrado de WordPress facilita la adición de una barra lateral personalizada a tu sitio de WordPress. El personalizador utiliza la configuración de tu tema predeterminado de WordPress para controlar el diseño, el contenido y la ubicación de tu barra lateral.

Para usar este método, necesitarás un tema de WordPress que incluya áreas de widgets laterales. Si aún no tienes un tema, aquí tienes los temas de WordPress más populares para pequeñas empresas.

Para esta guía, estoy usando el Astra WordPress Theme.

Paso 1: Añadir el diseño de tu barra lateral de WordPress

Después de instalar tu tema, ve a Apariencia ≫ Temas y haz clic en el botón azul Personalizar.

Esto te llevará a la página del Personalizador de WordPress, donde puedes editar el diseño y el estilo de tu tema. La configuración varía de un tema a otro, pero usaré Astra aquí para que puedas ver cómo funciona.

Mira el panel izquierdo dentro del personalizador y busca el encabezado 'Barra lateral'. Haz clic en ese encabezado para abrir las opciones de personalización de tu barra lateral.

En la siguiente pantalla, puedes elegir entre las siguientes opciones de barra lateral:

• Diseño predeterminado – Sin barra lateral, barra lateral derecha o barra lateral izquierda.
• Páginas – Dónde mostrar la barra lateral en páginas individuales.
• Entradas – Dónde mostrar tu barra lateral en entradas individuales.
• Archivos – Cómo se ve tu barra lateral en páginas de archivo como tu página de blog.

También puedes elegir el ancho de tu barra lateral en la misma página. Cuando estés satisfecho con el diseño de tu barra lateral, haz clic en el botón Publicar.

Paso 2. Añadir widgets a tu barra lateral con el Personalizador

Después de elegir el diseño de tu barra lateral, puedes empezar a añadirle widgets. Para ello, busca el encabezado 'Widgets' en el menú del Personalizador de WordPress y haz clic para abrir la configuración.

En la siguiente pantalla aparece una lista de las barras laterales actualmente disponibles para esa página en particular, así que haz clic en la barra lateral que deseas personalizar.

Ahora verás un constructor de barras laterales, listo para mostrar los widgets que elijas. Haz clic en el icono más (+) para buscar un bloque o widget que desees mostrar en tu barra lateral.

Al hacer clic en un bloque, se añadirá automáticamente a tu barra lateral.

Sigue añadiendo widgets a tu barra lateral hasta que tenga el aspecto que deseas. Luego haz clic en el botón Publicar para guardar tus cambios.

Ahora, cuando visites tu página, verás tu barra lateral personalizada de WordPress.

¿Cómo añadir widgets a tu barra lateral de WordPress?

El siguiente método utiliza la pantalla de widgets de WordPress para añadir una barra lateral a WordPress. Es similar al método anterior, pero solo te permite añadir widgets a tu barra lateral en lugar de cambiar la ubicación de la barra lateral.

Ve a Apariencia ≫ Widgets desde tu panel de WordPress para usar este método. Puedes ver todas las barras laterales que tu tema admite actualmente en esta pantalla.

En mi caso, el tema incluye 4 áreas de barra lateral:

1. Barra lateral principal
2. Encabezado
3. Sección 1 de la barra del pie de página
4. Sección 2 de la barra del pie de página

Añadir widgets funciona como en el paso anterior. Haz clic en el icono más y busca los widgets que desees.

Cuando hayas terminado de crear tu barra lateral, haz clic en el botón Actualizar. Ahora puedes visitar tu sitio y ver tu nueva barra lateral.

¿Cómo añadir una barra lateral en un tema de bloques de WordPress?

Los temas de bloques como Twenty Twenty-Five no utilizan áreas de widgets de barra lateral tradicionales. En su lugar, creas un efecto de barra lateral directamente dentro de las plantillas de tu sitio utilizando el Editor del Sitio.

Yo mismo me he encontrado con esta confusión. Cuando cambias a un tema de bloques, el Personalizador ya no controla la ubicación de la barra lateral, y eso confunde a mucha gente.

Para a tilde;adir una barra lateral en un tema de bloques, ve a Apariencia → Editor en tu panel de WordPress. Haz clic en Plantillas y elige la plantilla que deseas editar, como Entrada abricante o Pabricantegina.

Dentro del editor de plantillas, haz clic en el botabricanten + y busca Columnas. Inserta una disposiciabricanten de dos columnas y ajusta el tamaabricanteo para que la columna de la barra lateral sea mabricantes estrecha que la columna de contenido.

A tilde;ade el contenido principal de tu pabricantegina a la columna mabricantes ancha usando un bloque de Contenido de la entrada. En la columna mabricantes estrecha, a tilde;ade contenido de la barra lateral como Entradas recientes, Buscar o un bloque de HTML personalizado.

Cuando estabricantes satisfecho con la disposiciabricanten, haz clic en Guardar. Tu barra lateral aparecerabricante ahora en todas las pabricanteginas que utilicen esa plantilla.

Ten en cuenta que esto se aplica solo a los temas de bloques. Si estabricantes utilizando un tema clabricantesico, los mabricantetodos 1, 2 o 3 anteriores son la opciabricanten correcta.

Preguntas frecuentes sobre cómo añadir una barra lateral a WordPress

abricanteCabricantemo a tilde;ado una barra lateral izquierda y derecha en WordPress?

Para una barra lateral derecha, ve a Apariencia → Personalizar y busca la configuraciabricanten de Diseabricanteo o Barra lateral de tu tema. Elige Barra lateral derecha o Barra lateral izquierda entre las opciones de diseabricanteo. Con SeedProd, configuras la colocaciabricanten de las columnas directamente en el editor de arrastrar y soltar. Para temas de bloques, usa el bloque Columnas del Editor del Sitio y coloca el contenido de la barra lateral en la columna que prefieras.

abricanteQuabricante abricantes una barra lateral en WordPress?

Una barra lateral de WordPress es un abricanterea de widgets vertical que se sitabricantea junto a tu contenido principal, generalmente en el lado izquierdo o derecho de la pabricantegina. Puedes llenarla con menabricantes de navegaciabricanten, entradas recientes, formularios de suscripciabricanten por correo electrabricantenico o anuncios. La mayorabricantea de los temas clabricantesicos de WordPress incluyen una barra lateral por defecto. Los temas de bloques no incluyen una a menos que la a tilde;adas a travabricantes del Editor del Sitio.

abricanteCabricantemo edito mi barra lateral de WordPress?

Para temas clabricantesicos, ve a Apariencia → Widgets y a tilde;ade o reorganiza bloques en tu abricanterea de barra lateral. En el Personalizador, ve a Apariencia → Personalizar → Widgets en su lugar. Con SeedProd, abre el Theme Builder, busca la plantilla de Barra lateral y haz clic en Editar diseabricanteo para actualizarla en el editor visual. Tus cambios se publican cuando guardas y publicas.

abricanteQuabricante debo hacer si mi tema de WordPress no tiene barra lateral?

Si tu tema clabricantesico no incluye una barra lateral, cambia a un tema que admita abricantereas de widgets o usa el Theme Builder de SeedProd para crear una. Para temas de bloques, la configuraciabricanten de la barra lateral del Personalizador no aparecerabricante porque los temas de bloques usan el Editor del Sitio. Ve a Apariencia → Editor, abre tu plantilla y a tilde;ade un bloque de Columnas para crear la disposiciabricanten de la barra lateral.

abricantePuedo mostrar diferentes barras laterales en diferentes pabricanteginas en WordPress?

Sabricante. Muchos temas clabricantesicos te permiten asignar diferentes abricantereas de barra lateral a tipos de pabricantegina especabricanteficos, como entradas, pabricanteginas y archivos, a travabricantes del Personalizador. Con SeedProd, puedes crear barras laterales ilimitadas y asignar cada una a una plantilla o pabricantegina especabricantefica. Eso facilita mostrar una barra lateral de blog en las entradas y una barra lateral diferente en tus pabricanteginas de servicios o de destino.

¿Dónde gestiono diferentes barras laterales en SeedProd?

Todas tus barras laterales se encuentran en SeedProd » Theme Builder como partes de plantilla. Duplicas o añades una parte de Barra Lateral allí, luego abres cualquier plantilla, seleccionas su área de barra lateral y eliges qué barra lateral mostrar en el menú desplegable Template Part.

¿Puedo añadir una barra lateral personalizada a las páginas de WooCommerce?

Sí. SeedProd es compatible con WooCommerce, por lo que puedes asignar una barra lateral personalizada a las páginas de productos, archivos de tienda, carrito y pago. Crea la barra lateral como una parte de plantilla, luego asígnala a la plantilla de WooCommerce correspondiente.

¿Puedo eliminar la barra lateral por completo de una página?

Sí. Simplemente deja el bloque de barra lateral o la parte de plantilla fuera del diseño de esa página, y el contenido llenará todo el ancho. Esta es una opción común para páginas de destino y páginas de contacto donde una barra lateral solo distraería.

Controlar correctamente la barra lateral significa que cada pabricantegina trabaja mabricantes para ti. Puedes dirigir a los lectores a tu mejor contenido y mantenerlos interesados sin cambiar tu diseabricanteo principal.

Para obtener la m ilde{a}¡xima flexibilidad de dise ilde{n}o, el Theme Builder de SeedProd te permite crear barras laterales personalizadas ilimitadas y asignarlas a cualquier p ilde{a}¡gina o publicaci ilde{o}³n. No se necesita c ilde{o}³digo.

También te puede interesar esta publicación sobre los mejores ejemplos de lead magnet para hacer crecer tu lista. Y si estás refinando todo tu diseño, consulta nuestra guía sobre cómo cambiar el diseño de tu blog en WordPress.

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.