Cómo entender los ajustes de diseño del blog de Squarespace

Squarespace se diseñó para dar prioridad a la facilidad de uso frente a la flexibilidad total en el diseño. Esto es especialmente cierto en el caso de las plantillas de blog. Para garantizar la coherencia y una experiencia de usuario sencilla, limitan el alcance de los cambios estructurales que se pueden realizar sin tener que modificar el código en profundidad.

Lo que puedes y no puedes hacer fácilmente

• PUEDES:

  • Elige la plantilla inicial más adecuada para reducir al mínimo las necesidades de personalización.

  • Utiliza los ajustes de las plantillas integradas para ajustar los formatos de fecha, activar o desactivar la visualización de categorías, controlar la longitud de los extractos y configurar los estilos de las imágenes.

  • Utiliza CSS personalizado para cambiar los colores, las fuentes y determinados espacios o estilos de los elementos. Esto ofrece cierta flexibilidad, pero tiene sus limitaciones.

• Es PROBABLE QUE NO PUEDAS (sin conocimientos avanzados de programación):

  • Modifica radicalmente la posición de elementos fundamentales, como la fecha de publicación de las entradas del blog o las categorías. Estas posiciones suelen estar codificadas de forma fija en el código HTML de la propia plantilla.

Cómo personalizar la plantilla de tu blog de Squarespace

1. Cambios menores: Utiliza las opciones disponibles en el editor de plantillas para realizar ajustes básicos en:

   • Fuentes

   • Colores

   • Colocación de imágenes

   • Espaciado

2. Cambios avanzados (código personalizado):

   • CSS:

     • Selecciona elementos HTML específicos utilizando sus clases e identificadores.

     • Cambia la posición de elementos como la fecha modificando propiedades como puesto, margen, y relleno.

     • Cambia el aspecto general con estilos de fuente, colores, etc.

   • JavaScript (casos de uso limitados):

     • Añadir comportamiento dinámico (por ejemplo, mostrar u ocultar elementos al interactuar con ellos).

     • Ten cuidado, ya que JavaScript puede interferir con las funciones básicas de Squarespace.

Consideraciones importantes

• Versiones de Squarespace: Las opciones de personalización pueden variar entre Squarespace 7.0 y 7.1. Asegúrate de saber qué versión tiene tu sitio web. Lee aquí para averiguar qué plantilla utiliza tu sitio web.

• Inyección de código: Puedes añadir CSS y JavaScript mediante la función «Inyección de código» en la configuración de tu sitio web.

• Copia de seguridad: Haz siempre una copia de seguridad de tu sitio web antes de realizar cambios importantes en el código.

Ejemplo: Cambiar la fecha (CSS)

Supongamos que la clase CSS del elemento de fecha de tu entrada del blog es .fecha-de-la-entrada-del-blog. A continuación te explicamos cómo puedes colocarlo debajo del título:

CSS

/* In Code Injection -> Advanced -> Header */
.blog-post-date {
    position: relative; /* Allows movement */
    top: 20px;          /* Distance to move down */
    left: 0;            /* Adjust if needed */
}

Soluciones alternativas y compensaciones

• Inyección de código: La inyección de JavaScript y, posiblemente, algo de HTML puede permitir reposicionar elementos. Sin embargo, se trata de una técnica avanzada que requiere conocimientos de programación. Además, estas personalizaciones son propensas a dejar de funcionar con las actualizaciones de Squarespace, lo que exige un mantenimiento continuo.

• «Trucos» CSS: A veces, ciertos trucos CSS permiten reposicionar elementos, pero su fiabilidad varía según las plantillas y carecen de estabilidad a largo plazo.

• Plataformas alternativas: Si es imprescindible disponer de un control estructural profundo sobre la presentación del blog, plataformas como WordPress ofrecen la posibilidad de editar las plantillas por completo, aunque requieren un mayor nivel de conocimientos técnicos para su configuración y mantenimiento.

• Compromiso: Es posible que tengas que adaptar tus expectativas de diseño a las limitaciones de Squarespace. Céntrate en los ajustes que se puedan realizar mediante la configuración integrada y el estilo CSS limitado.

• Bloques de resumen: Aunque se pierden algunas funciones automáticas del blog, los bloques de resumen de las páginas normales de Squarespace ofrecen mayor libertad a la hora de diseñar la maquetación. Valora si esta compensación merece la pena para tus necesidades concretas.

Documentación oficial de Squarespace:

• Configuración de la página del blog:. Este es el punto de partida fundamental que explica qué opciones de configuración ofrece Squarespace para personalizar el diseño y el aspecto de tu blog.

• Añadir código personalizado a tu sitio web: Aquí se explica cómo insertar código en tu sitio web de Squarespace. Recuerda que es probable que los cambios importantes en el diseño del blog requieran este método.

Recursos y ejemplos de la comunidad:

• Foro de Squarespace: El foro de la comunidad cuenta con muchos hilos sobre la personalización de blogs. Puedes buscar utilizando términos como «personalización de plantillas de blog» o «CSS del blog de Squarespace». Presta atención a las fechas de los hilos, ya que las actualizaciones de Squarespace pueden afectar a las soluciones más antiguas.

• Blogs sobre personalización de Squarespace: Hay varios blogs especializados en la personalización del código de Squarespace que suelen tratar ajustes relacionados con los blogs. Algunos de estos recursos son:

  • Will Myers: https://www.will-myers.com/

  • Secretos de Square: https://www.squaresecrets.com/

  • SquareKicker: https://www.squarekicker.com/