Cómo añadir una barra lateral a tu blog de Squarespace 7.1

Si te has pasado a Squarespace 7.1 (o acabas de empezar a utilizarlo), es posible que eches en falta algo: la función integrada de barra lateral. En las plantillas anteriores de la versión 7.0, como «Five» o «Bedford», las barras laterales eran pan comido: bastaba con activar una opción y, ¡voilà!, aparecía un bloque con la biografía del autor, la suscripción al boletín o las entradas recientes. En la versión 7.1, no es tan sencillo. A continuación, explicaremos los métodos manuales que la gente utiliza para intentar añadir una barra lateral, y por qué usar un plugin puede ahorrarte un montón de tiempo y dolores de cabeza.

1. Por qué Squarespace 7.1 no tiene la opción de barra lateral

Squarespace 7.1 se ha diseñado para ser más flexible y adaptativo, utilizando el «Fluid Engine» para colocar elementos en cualquier lugar de una cuadrícula. Esto es ideal para diseños únicos, pero ha supuesto la eliminación de la zona específica de la «barra lateral». En su lugar, tienes dos opciones:

• Crea un diseño de varias columnas dentro de cada entrada del blog, o

• Utiliza la inyección de código avanzada para mostrar una barra lateral junto a las entradas de tu blog en todo el sitio web.

Ninguna de estas opciones es tan sencilla como activar o desactivar una barra lateral. Así pues, veamos cuáles son tus opciones:

2. Métodos manuales (y por qué pueden resultar tediosos)

A. Diseño de dos columnas en cada entrada

Cómo funciona:

1. Cuando edites una entrada del blog, haz clic en el área de contenido.

2. Utiliza la cuadrícula de Fluid Engine para dividir la entrada en dos columnas.

3. Coloca el contenido principal en la columna de la izquierda y añade bloques para la «barra lateral» (biografía del autor, anuncios, etc.) en la parte derecha.

4. Ajusta el tamaño de las columnas y personaliza el estilo como prefieras.

Inconvenientes:

• Tienes que hacer esto con cada una de las entradas del blog. Quizá no sea un problema si solo tienes unos pocos artículos, pero si tienes docenas (o cientos), acabarás copiando y pegando o reconstruyendo la barra lateral una y otra vez.

• Mantener la coherencia puede resultar complicado: si modificas la disposición de la barra lateral, tendrás que volver a actualizar todas las entradas o te arriesgas a que el diseño de tu blog resulte incoherente.

B. Crear una página personalizada con un bloque de resumen

Cómo funciona:

1. En lugar de utilizar la página de blog integrada de Squarespace, crea una nueva página.

2. Añade una sección de dos columnas en Fluid Engine: la columna de la izquierda para un bloque de resumen que muestre las entradas de tu blog, y la columna de la derecha para tu «barra lateral» (por ejemplo, entradas recientes, un bloque de boletín informativo o categorías).

3. De este modo, se crea un «feed de blog» con una barra lateral en la misma página.

Inconvenientes:

• Cuando los visitantes hacen clic en una entrada del bloque «Resumen», acceden a la plantilla predeterminada 7.1 para entradas de blog, que no incluirá tu barra lateral.

• Para mantener el mismo aspecto de la barra lateral en cada entrada individual, tendrías que replicar el diseño en cada entrada (como en el método anterior) o insertar código personalizado.

C. Inyección de código personalizado (avanzado)

Cómo funciona:

• Puedes añadir código CSS/HTML a través de «Configuración» → «Avanzado» → «Inversión de código», dirigiéndolo a la plantilla de las entradas del blog.

• Por ejemplo, podrías poner en espera el .sqs-block-content izquierda y crear un .barra lateral contenedor de la derecha y, a continuación, haz que se adapten al tamaño de la pantalla mediante consultas de medios.

• Deberías insertar el código HTML de la barra lateral en un área de inserción de código válida para todo el sitio o mediante el uso de plantillas parciales en la plantilla de la entrada del blog.

Inconvenientes:

• Se requiere un conocimiento de nivel medio a avanzado de HTML, CSS y JavaScript.

• Si Squarespace realiza cambios o cambias de plantilla, tu código puede dejar de funcionar.

• Mantener la adaptabilidad en los distintos dispositivos puede resultar complicado, sobre todo al añadir o eliminar elementos de la barra lateral.

3. La solución más sencilla: utiliza un plugin específico para la barra lateral

Aquí es donde entra en juego un plugin (como el «SQSP Themes Sidebar Plugin»). En lugar de tener que lidiar con código, diseños de varias columnas o duplicaciones manuales, un buen plugin de barra lateral:

1. Integralo con tu blog 7.1 actual

   • No es necesario que crees una página aparte ni que copies manualmente los diseños en cada entrada.

   • El complemento inserta automáticamente la barra lateral en todas las entradas (y, opcionalmente, en la página principal del blog).

2. Gestiona la capacidad de respuesta desde el primer momento

   • Un complemento bien diseñado está pensado para adaptarse a móviles, tabletas y ordenadores de sobremesa sin que tengas que escribir consultas de medios personalizadas.

3. Te permite configurar tu barra lateral desde un solo sitio

   • Añade una biografía del autor, una barra de búsqueda, entradas recientes o anuncios desde la interfaz de un plugin.

   • Realiza los cambios una sola vez y se aplicarán a todo tu blog. Se acabó tener que copiar y pegar bloques o reescribir el CSS.

4. Te ahorrará tiempo (¡y dolores de cabeza!)

   • Los métodos manuales pueden llevar muchísimo tiempo, sobre todo si tienes mucho contenido o tienes pensado publicar con regularidad.

   • Los plugins te ofrecen una forma unificada y que requiere poco mantenimiento de mostrar barras laterales en toda la web.

Cómo funciona el plugin «SQSP Themes Sidebar»

• Paso 1: Compra e instala el plugin siguiendo las instrucciones que se indican en SQSP Themes.

• Paso 2: Activa y configura los bloques de la barra lateral (por ejemplo, escribe una biografía del autor, añade un formulario para el boletín informativo o muestra un feed de «Entradas recientes»).

• Paso 3: Personaliza los colores, las fuentes y el espaciado en una interfaz sencilla, para asegurarte de que la barra lateral se adapte a la imagen de marca de tu sitio web.

• Paso 4: Disfruta de una barra lateral uniforme y con un aspecto profesional en las páginas de tu blog y en cada una de tus entradas sin tener que tocar nunca el código avanzado ni repetir los pasos de diseño.

4. ¿Qué enfoque deberías elegir?

• Si eres desarrollador o tienes un total de 2 o 3 entradas en tu blog: quizá te sientas cómodo con el código o no te importe crear diseños de dos columnas en unas pocas entradas. Puedes optar por hacerlo manualmente.

• Para todos los demás: un plugin específico para la barra lateral de Squarespace 7.1 es la forma más eficaz y fiable de conseguir una barra lateral coherente y totalmente adaptativa en todo tu blog. Te ahorra horas de mantenimiento y frustraciones a la hora de programar.

5. Reflexiones finales

Aunque el moderno sistema de «arrastrar y soltar» de Squarespace 7.1 es muy potente, echa en falta el sencillo botón de activación/desactivación que teníamos antes para las barras laterales. Por suerte, un buen complemento puede suplir esa carencia, sin necesidad de código ni de repetir diseños.

• ¿Quieres evitar pesadillas a la hora de programar? Prueba un complemento.

• ¿Necesitas una solución rápida para todo el sitio web? Prueba con un complemento.

• ¿Te cansa tener que copiar los bloques de diseño en cada entrada? Sin duda, prueba a usar un plugin.

En resumen: si te tomas en serio tu blog en Squarespace 7.1 y quieres una barra lateral optimizada, deja de lidiar con el código y hazte con el plugin «SQSP Themes Sidebar». Te ahorrarás tiempo, esfuerzo y posibles quebraderos de cabeza con el diseño, todo ello mientras le das a tu blog un aspecto coherente y profesional.

Más recursos

• Recurso oficial de Squarespace sobre las barras laterales (Nota: hace referencia principalmente a plantillas antiguas de la versión 7.0)

• Complemento de barra lateral de SQSP Themes (para una barra lateral 7.1 sin interrupciones)

• Descripción general del motor Fluid de Squarespace 7.1