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

En mis primeros sitios, recuerdo que me costaba encajar menús y formularios en el diseño hasta que descubrí lo potente que podía ser 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 utilizando 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 – Puedes añadir fácilmente botones para seguir en redes sociales y un widget para compartir en redes sociales para aumentar tus seguidores y el conocimiento de tu marca.
• 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.

A estas alturas, ya sabes qué es una barra lateral y cómo es una forma fácil de mostrar contenido valioso a los visitantes de tu sitio web. Ahora veamos cómo añadir una barra lateral en WordPress.

Compartimos 4 métodos a continuación, utilizando el Personalizador de WordPress, la pantalla de Widgets, el Editor del Sitio y un constructor de sitios web visual. Ninguno de ellos requiere codificación.

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?

¿Quieres crear una barra lateral personalizada o usar varias barras laterales simultáneamente en tu sitio de WordPress?

Para ello, necesitarás un plugin de WordPress o el conocimiento para crear una nueva barra lateral desde cero con código. Por suerte, puedes crear fácilmente barras laterales personalizadas para WordPress con un plugin potente y ligero: SeedProd.

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 SeedProd Pro o Elite 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 deberás crear las diferentes partes de tu tema. No te preocupes; es muy fácil de hacer y no requerirá editar 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.

Como aún no hemos empezado, solo tenemos una plantilla de 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

Sugerimos empezar con una plantilla de tema prefabricada. Permite a SeedProd generar automáticamente todos los archivos de plantilla, dándote una ventaja para editar las plantillas según tus requisitos.

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 creará automáticamente todas las plantillas de tema para ti. Como resultado, ahora puedes editar cada plantilla individualmente en el editor visual 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 agregar una gran variedad de contenido a tu barra lateral usando los bloques de tema de SeedProd. Simplemente 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.
• Advanced Blocks – Funciones avanzadas para generar 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

Como resultado, puedes crear un tema personalizado de WordPress que se ajuste a todas las necesidades de tu negocio.

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, puedes aplicar tu barra lateral personalizada de WordPress con un simple interruptor.

Simplemente 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 puedes visitar tu sitio web para ver tu barra lateral personalizada de WordPress en acción.

Cómo añadir varias barras laterales en WordPress con SeedProd

Ahora que tienes una barra lateral personalizada, puedes editar el diseño cuando quieras. Pero, ¿y si quieres más de una barra lateral y quieres mostrarla en diferentes secciones de tu sitio web?

Por ejemplo, es posible que desees crear una barra lateral para páginas diferente de tu barra lateral del blog. Puedes hacerlo utilizando las partes de plantilla globales de SeedProd.

Aquí tienes la parte 13 de nuestro tutorial de Theme Builder que muestra cómo funcionan las partes globales:

Alternativamente, puedes seguir las instrucciones escritas a continuación.

Primero, ve a la página SeedProd » Theme Builder y haz clic en el botón Add New Theme Template.

Desde allí, elige la opción Global Part y haz clic en Save.

Ahora puedes construir tu barra lateral personalizada como lo hiciste en el paso anterior.

Después de crear tu nueva barra lateral, abre la plantilla Single Page en el editor de arrastrar y soltar de SeedProd.

Para hacer espacio para tu barra lateral, necesitarás reemplazar el diseño existente con una sección de 2 columnas.

A continuación, arrastra el bloque Template Part a la segunda columna de tu nueva sección.

Desde allí, puedes elegir la nueva barra lateral que creaste en el menú desplegable.

Haz clic en Save para guardar tus cambios, luego, cuando navegues a una página, se mostrará tu nueva barra lateral personalizada automáticamente, mientras que tus entradas de blog mostrarán tu primera barra lateral.

¿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, estamos usando el Tema de WordPress Astra.

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 podrás editar el diseño y la apariencia de tu tema. La configuración que veas en esta página variará según el tema, pero te mostraremos cómo añadir una barra lateral usando el tema Astra, para que te hagas una idea de lo que debes hacer.

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 nuestro caso, el tema incluye 4 áreas de barra lateral personalizables:

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 a tu barra lateral es similar al paso anterior. Simplemente haz clic en el icono más y busca los widgets que deseas añadir a tu barra lateral.

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.

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 ilde{a}©n te puede interesar esta publicaci ilde{o}³n sobre los mejores ejemplos de lead magnet para hacer crecer tu lista. Y si deseas barras laterales m ilde{a}¡s personalizadas, consulta esta gu ilde{i}a sobre C ilde{o}³mo a ilde{n}adir una barra lateral diferente para p ilde{a}¡ginas diferentes 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.