Nuestros códigos CSS favoritos de Squarespace en 2025

¿Quieres tener un control total sobre el aspecto de tu página web de Squarespace? ¡Estos códigos CSS son tu arma secreta! ¿Y si quieres un cambio de diseño que Squarespace no ofrece en su configuración y no encuentras el plugin perfecto? Ahí es donde entra en juego el editor de CSS. Squarespace te permite añadir tu propio código personalizado. ¡Esta funcionalidad te abre un sinfín de posibilidades para añadir elementos únicos, scripts, ajustes estéticos y mucho más!

¿Quieres aprender CSS?

Si quieres aprender CSS para Squarespace, echa un vistazo a estos cursos.

¿Quieres prescindir del CSS con un complemento de animación?

Hay dos extensiones que te permiten personalizar y dar estilo a tu sitio web sin tener que modificar ninguno de los fragmentos de código que aparecen a continuación: SquareKicker y Spark Plugin.

Aviso legal

Antes de empezar, tengo que sentar algunas bases. El editor de CSS es una herramienta muy potente, pero tiene un inconveniente: el código mal formado o gestionado de forma incorrecta puede resultar perjudicial para tu sitio web.

Aunque puedes modificar muchos elementos de tu sitio web con CSS,Squarespace indica expresamente: «Solo debes utilizar CSS para cambiar las fuentes, los colores y los fondos. Otros cambios en el CSS podrían dañar tu sitio web».

Dicho esto, nadate impiderealizar otros cambios en tu sitio web. Siempre que el código CSS esté bien implementado, no afectará negativamente a tu sitio web. Solo hay que tener en cuenta algunas cosas.

• Si estás utilizando una plantilla 7.0 y quierescambiar de plantilla, tendrás que volver a aplicar el código personalizado, ya que no se transfiere automáticamente. En la versión 7.1 sí se transfiere.

• Squarespace no ofrece asistencia ni ayuda para la resolución de problemas relacionados con el código personalizado. Si tu CSS provoca algún fallo, no te ayudarán a solucionarlo.

• Squarespace no tiene en cuenta el código personalizado cuando actualiza su plataforma. Por lo tanto, si modifican una clase CSS en su diseño y eso hace que tu código deje de funcionar, tendrás que arreglarlo tú mismo.

• El CSS personalizado tiene un límite de 128 000 caracteres. Esto debería ser mucho, mucho más de lo que necesitarás, pero conviene tenerlo en cuenta si vas a realizar un montón de personalizaciones CSS.

Por último, ten en cuenta que el editor de CSS personalizado no es la única forma de realizar modificaciones de código en tu sitio web. Existen varias opciones que podrían adaptarse mejor a tus necesidades.

Bloque de código (básico):Se trata de un bloque de contenido que permite ejecutar código CSS, HTML o Markdown personalizado en una página concreta. Es adecuado para realizar cambios a nivel de contenido o de página. Disponible en todos los planes.

Bloque de código (avanzado):Se trata del mismo bloque, pero además permite añadir iframes (no recomendado por motivos de SEO) y código JavaScript. Solo está disponible en los planes Business y Commerce.

Inyección de código:esta opción permite inyectar código en todo el sitio web, como el píxel de seguimiento de Facebook o un servicio de chat en directo. Solo está disponible en los planes Business y Commerce.

Editor de CSS:Esta es la herramienta principal que vamos a utilizar hoy. Está disponible en todos los planes y te permite añadir CSS personalizado a tu sitio web a nivel de página. Squarespace recomienda no realizar cambios de maquetación con él, pero no pasa nada si lo haces correctamente. Si buscas un editor de CSS con un diseño más elegante, prueba Resurface.

Bloque de incrustación:se trata de un bloque de código único que ejecuta código de incrustación, lo que te permite incrustar contenido de sitios como Facebook, Instagram y cualquier otra plataforma que utilice oEmbed. Disponible en todos los planes.

Plataforma para desarrolladores de Squarespace:esta herramienta permite realizar cambios significativos en una plantilla únicamente en la versión 7.0. Solo está disponible en los planes Business y Commerce; considérala una herramienta de desarrollo avanzada.

Además, tienes totalmente prohibido ejecutar código del lado del servidor fuera de la función de inyección de código, que es limitada. No puedes ejecutar código SQL, Ruby, PHP ni nada por el estilo.  

En fin, dicho todo esto, ¡vamos a ver las cosas chulas que se pueden hacer con CSS! Hay un montón, así que quédate por aquí para descubrirlas.

Trucos y ajustes interesantes de CSS

Complemento de barra lateral

Empezando precisamente por lo que Squarespace recomienda no hacer, échale un vistazoa esta opción de barra lateral. Está diseñada como un complemento, así que no tendrás que perder el tiempo modificando demasiado código directamente. En su lugar, cambia el diseño y el formato de tu sitio web para añadir una barra lateral, en la que se puede mostrar contenido como la biografía de un autor, un bloque de entradas recientes o un formulario de suscripción al boletín. Es muy sólida y resulta muy útil para fines de marketing, ¡así que échale un vistazo!

Animaciones de CTA  

Vaya, esto sí que mola. ¿Sabías que con CSS —solo CSS, sin ningún otro lenguaje de programación— se pueden crear animaciones? Se pueden hacer cosas alucinantes con esto. Muchas páginas web con fondos de efecto parallax y elementos que aparecen al desplazarse por la página utilizan CSS para ello, pero eso no esexactamente lo quete voy a enseñar aquí.

Seguramente habrás visto en alguna página web casos en los que un elemento se mueve de forma intermitente cada 30 segundos más o menos. A veces, un botón se tambalea, una llamada a la acción rebota un poco o un recuadro parpadea ligeramente. Hace años, para conseguirlo había que utilizar animaciones en formato .gif o (¡qué horror!) animaciones en Flash. Hoy en día, se puede hacer con CSS.

Echa un vistazoa https://animate.style/. Esta página web es un recurso enorme de fragmentos de código CSS para pequeñas animaciones, como rebotes, destellos, pulsaciones, balanceos y oscilaciones. Hay docenas de ellas (hay dos barras de desplazamiento a la derecha, por si no puedes acceder a la mayoría), todas ellas con demostraciones y guías de instalación.  

Ahora bien, esta página web está pensada para utilizar CSS en cualquier contexto, no específicamente en Squarespace. Así que tendrás que utilizar la función de inserción de código para incorporar su script principal y, a continuación, utilizar elementos CSS personalizados para señalar los elementos que quieras animar. Pero es bastante sencillo, ¡así que anímate a probarlo!

Fundido simple  

Esta técnica CSS es un pequeño ajuste muy sencillo, y probablemente ya hayas visto algo parecido antes. Al pasar el cursor por encima de un elemento, como una imagen o un botón de menú, los colores aparecen gradualmente. En el caso de las imágenes, se puede utilizar para resaltarlas, añadirles color o atenuarlas ligeramente. En cuanto a los elementos del menú, resulta excelente para resaltar un color de fondo y mostrar a los usuarios sobre qué elemento se encuentra el cursor. Es fácil, muy ligero y una mejora perfecta para la usabilidad.

Esta páginacontiene fragmentos de código para tres casos de uso diferentes: texto con efecto de desvanecimiento, imágenes resaltadas y fondos para elementos de menú. Elige el caso de uso que te interese, copia y pega el código, y ya estás listo.

Degradados de color  

Por si no lo sabes, un degradado es cuando dos colores se funden entre sí pasando por los tonos intermedios. Son ideales para crear transiciones de color sutiles y variaciones significativas de un extremo a otro de un elemento.  

Antes, si querías que algo tuviera un degradado, tenías que realizar una serie de complicados pasos con un programa de edición de imágenes para conseguir que los colores quedaran tal y como te gustaban. Incluso así, si los usuarios navegaban por tu página web con una pantalla más grande o más pequeña que la que habías diseñado, el resultado se veía raro y desajustado.

Con CSS, puedes crear un degradado que funcione. Solo tienes que especificar el elemento, seleccionar los colores y el código se encarga del resto.  

«¿No resulta muy tedioso elegir y especificar los colores?» ¡Para nada! Lo sería… si lo hicieras a mano, pero ¿por qué ibas a tener que hacerlo así?Este generadores una herramienta excelente precisamente para esto. Te permite elegir los colores de los extremos, los colores de transición en el centro y especificar en qué punto de la barra quieres que se produzca la transición. Incluso puedes hacer clic para añadir más puntos de anclaje con colores adicionales y crear un arcoíris completo.  

Puedes crear degradados tanto lineales como radiales (circulares), y puedes especificar códigos hexadecimales exactos de color si estos forman parte de tu identidad de marca. Todo el código se genera dinámicamente debajo del generador, por lo que puedes copiarlo y pegarlo cuando lo hayas ajustado a tu gusto.

Esquinas redondeadas  

Esta técnica es otro de esos elementos que parecen sencillos a simple vista. No pensarías que sería complicado crear esquinas redondeadas alrededor de una imagen o un elemento de texto, ¿verdad? Sin embargo, si alguna vez has intentado hacerlo sin recurrir a un código personalizado un poco raro, ¡es una locura! Antes, incluso tenías que recurrir a imágenes de fondo perfectamente alineadas, tablas con elementos alineados para crear bordes y otras tonterías por el estilo.

Todo eso ya es cosa del pasado. El CSS te permite crear fácilmente esquinas redondeadas para cualquier elemento. ¿Quieres esquinas redondeadas en una imagen? ¿Quieres un recuadro redondeado para resaltar una llamada a la acción? ¿Quieres que tu lightbox tenga esquinas redondeadas? Es muy fácil con un poco de CSS.  

Esta técnica es solo uno de los muchos ajustes sencillos de CSS que puedes realizar, proporcionados por W3Schools. W3Schools es una organización dedicada al diseño web que ofrece miles de tutoriales sencillos sobre todo tipo de temas, desde HTML hasta animaciones avanzadas con CSS.En esta páginase explica en detalle el elemento de esquinas redondeadas, y puedes consultar todos los demás ajustes de CSS a través de la barra lateral.

Elementos ocultos  

Bueno, eso, por ejemplo, ya es un poco más grave.  

Un problema que tienen muchas páginas web, incluida Squarespace, es la visualización en dispositivos móviles mediante el diseño adaptativo. Concretamente, la página analiza todo el código de la página y carga todos los elementos, ajustando lo que se muestra en función del tamaño de la ventana de visualización (es decir, tu navegador).  

Los elementos ocultos suelen estar bien. Excepto por una cosa: ¿qué pasa si tienes, por ejemplo, una barra lateral con un par de imágenes? Esa barra lateral no se cargará en el móvil porque quedaría demasiado apretada. Pero, como la web carga el contenido antes de determinar qué se muestra, sigues dedicando tiempo a cargar las imágenes de la barra lateral. Estos recursos ralentizan la velocidad de carga de tu web.

Si consultas tu informe de Google PageSpeed Insights y ves «aplazar las imágenes fuera de pantalla» como error, a esto es a lo que se refiere.

La solución a esto suele ser la carga diferida, pero hay un nuevo elemento CSS llamado «content-visibility» que ayuda en este sentido. Es relativamente nuevo y, aunque todavía no es compatible con todos los navegadores, resulta de gran utilidad. Es muy probable que la carga diferida cuente con mayor compatibilidad en los próximos años. En esta páginase explica en detalle en qué consiste este elemento, cómo funciona y cómo utilizarlo. ¡Échale un vistazo!

Pequeños retoques en el aspecto  

Enesta páginahay una serie de ajustes que, aunque son cambios estéticos muy pequeños, modifican de forma notable el aspecto de tu página web. ¿Qué ajustes?

• Elimina el subrayado de los enlaces, que Squarespace añade de forma predeterminada.

• Elimina los guiones (-) del texto que aparece en la pantalla del móvil cuando el texto se ajusta a la línea.

• Elimina el espacio sobrante en la parte inferior de una plantilla basada en Brine.

• Reducí el ancho de la columna en la que se muestra el contenido de tu blog.

• Limita la visualización de las páginas de productos en dispositivos móviles a un producto por fila.

Se trata de pequeños ajustes relativamente sencillos, pero pueden cambiar por completo el aspecto de tu página web y hacerla mucho más moderna y elegante. Puede que no parezca gran cosa, pero pruébalos y verás lo importantes que son.

Otras recopilaciones de trucos CSS 

Aquí solo estoy dando una idea general de lo que se puede hacer con CSS. Algunos de los enlaces de arriba ya son páginas con docenas de ajustes de CSS, pero hay muchos más por ahí, incluidas guías más avanzadas.

Aquí tienes algunos que puedes echar un vistazo.

• ENORME LISTA DE TRUCOS Y AJUSTES PARA SQUARESPACE (CON ENLACES Y EJEMPLOS). Esta página lo tiene todo, desde cómo crear un bloque de resumen hasta cómo ocultar etiquetas en las entradas del blog. No todos tienen que ver con CSS, pero, en cualquier caso, todos son ingeniosos y útiles.

• «50 Design Tweaks», de Five Design Co.Tal y como indica el título, esta página recoge 50 retoques diferentes que puedes añadir a tu sitio web. Entre ellos se incluyen desde añadir animaciones al pasar el cursor y sombras proyectadas hasta convertir imágenes en círculos o utilizar diseños personalizados para las viñetas. Además, casi todos se realizan con código CSS sencillo.

• «35 fragmentos de código», de Paige Brunton.Este artículo es otra lista exhaustiva de trucos CSS, entre los que se incluyen añadir estilos al encabezado, personalizar el enlace «Leer más» y dividir los fondos en dos segmentos. Muchos de ellos son bastante específicos, pero si te gustan las opciones de diseño que ofrecen, son estupendos.

Con todos estos recursos, deberías poder hacer prácticamente cualquier cosa que se te ocurra para tu página web.

¿Cuál es tu truco CSS favorito de esta lista? ¿Hay alguno que te gustaría compartir y que no aparezca en ella? ¿Tienes alguna duda a la hora de implementar alguno de estos trucos en tu página web? ¡Cuéntamelo!

---

¿Buscas más complementos de Squarespace?