Lo que conviene saber sobre el mundo de Squarespace.
Para diseñadores, desarrolladores y personas que crean negocios en torno a Squarespace.
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?
6 integraciones de Squarespace para promocionar tu tienda online
¿Tienes una página web de Squarespace? Es importante contar con estrategias para promocionar tu negocio. Aquí tienes algunas herramientas estupendas que pueden ayudarte:
Nos encanta Squarespace por varias razones: sus fantásticos diseños, lo fácil que es de usar… La razón n.º 401 es que cuenta con una serie de herramientas estupendas que puedes utilizar para promocionar tu negocio.
Si llevas ya un tiempo con una página web, sabrás que no basta con «crearla y que la gente venga por sí sola». Hay millones de páginas web en Internet y tienes que conseguir, de alguna manera, atraer al menos parte del tráfico de los internautas hacia la tuya.
Crear una página web atractiva y funcional es solo el primer paso. A continuación, tendrás que plantearte cómo vas a promocionarla, atrayendo a más visitantes a tu sitio web y manteniendo su interés una vez que estén allí. Aquí tienes algunos plugins e integraciones estupendos que pueden ayudarte:
(Nota: Es posible que algunos de ellos contengan enlaces de afiliados)
Consulta aquí nuestros consejos sobre por dónde empezar a promocionar una nueva página web
N.º 1. Convertkit
Si quieres atraer más tráfico específico a tu página web, el marketing por correo electrónico es una forma estupenda de conseguirlo. La idea consiste en crear una lista de suscriptores de correo electrónico que formen parte de tu mercado objetivo y estén interesados en lo que tienes que decir.
A menudo la gente se pregunta si sigue mereciendo la pena dedicarse al marketing por correo electrónico, teniendo en cuenta que se prevé que el número de correos electrónicos enviados a diario supere los 306 000 millones este año. Los datos de varios estudios sobre marketing por correo electrónico indican que sí merece la pena. Ten en cuenta estos puntos:
En el ámbito del comercio electrónico, el correo electrónico presenta unas tasas de conversión más elevadas, con una media del 4,29 %, en comparación con las visitas directas (2,93 %), los buscadores (3,04 %) y las redes sociales (1,81 %). (Smart Insights)
El 59 % de los consumidores afirma que el marketing por correo electrónico influye en su decisión de compra. (Hubspot)
Merece la pena hacer marketing por correo electrónico, pero para utilizarlo con éxito, ¡necesitas las herramientas adecuadas! No te conviene introducir manualmente las direcciones de correo electrónico ni enviar correos masivos a todo el mundo cuando el contenido solo es relevante para un segmento concreto, por ejemplo.
Convertkit es una excelente herramienta de marketing por correo electrónico que se integra con las páginas web de Squarespace. La herramienta te permite hacer cosas como:
Amplía tu lista de correo electrónico utilizando funciones como formularios de registro y páginas de destino. Normalmente hay más opciones de diseño de las que encontrarás disponibles en Squarespace.
Crea correos electrónicos elegantes y con un aspecto profesional.
Implementa la automatización del marketing. Es fundamental para llevar a cabo una campaña de marketing por correo electrónico eficaz. Por ejemplo, puedes configurar secuencias automatizadas en función de las acciones o los intereses de las personas de tu lista. Puedes segmentar a tu público según sus intereses personales para enviar el mensaje adecuado en el momento oportuno. La captura de pantalla que aparece a continuación muestra un buen ejemplo:
Consulta los informes y realiza un seguimiento de las métricas para que puedas decidir qué aspectos podrías probar o mejorar.
Puedes empezar a utilizar Convertkit con un plan gratuito, pero los planes de pago ofrecen más funciones y permiten enviar un mayor número de correos electrónicos al mes.
N.º 2. RightMessage
El poder de la segmentación es una estrategia clave para llevar a cabo un marketing eficaz. La segmentación te permite hacer llegar el mensaje adecuado a las personas adecuadas en el momento adecuado. Esto significa que tus mensajes pueden ser muy relevantes para quienes los ven, lo que siempre dará mejores resultados que un enfoque «único para todos».
En cuanto a las herramientas que se integran con Squarespace, RightMessage es una opción excelente para enviar mensajes personalizados. Funciona segmentando a los visitantes de tu página web en función de su comportamiento, de modo que vean información que les resulte relevante. En otras palabras, no todos los visitantes de la página web ven siempre lo mismo.
A los visitantes se les pueden mostrar ofertas basadas en su recorrido como clientes. Esta es una forma de garantizar que el contenido sea relevante: si han consultado determinados productos o han interactuado con otros, eso revela cuáles son sus intereses.
RightMessage te permite dirigirte a:
Ofertas con consentimiento previo
Páginas de ventas
Páginas de destino
Tu lista de correo electrónico.
Cuentan con funciones que te permiten crear encuestas o cuestionarios en tu página web para que puedas conocer mejor a las personas que la visitan. La captura de pantalla que aparece a continuación muestra un ejemplo de cómo pueden ayudarte a segmentar a los visitantes de la página web:
Puedes disfrutar de una prueba gratuita de 14 días de RightMessage y los planes empiezan a partir de 29 dólares al mes.
N.º 3. Muestra de color del producto
¿Vendes productos con diferentes variantes de color? Los clientes querrán ver exactamente cómo son esos colores antes de decidirse a comprar, pero fotografiar y subir cada variante puede llevar mucho tiempo.
Aquí es donde entra en juego el plugin «Product Color Image Swatch». En lugar de mostrar un menú desplegable de texto con las variantes de color, puedes mostrar una imagen de muestra. Puedes configurar el plugin con tus propios códigos hexadecimales para los colores y también puedes subir tus propias imágenes o patrones.
En la siguiente captura de pantalla se muestra un ejemplo:
La licencia estándar de Product Color Image Swatch cuesta 39 dólares (para un sitio web), mientras que la licencia empresarial cuesta 117 dólares (para más de un sitio web).
N.º 4. Vídeo de la galería de productos
A veces, el vídeo es realmente la mejor forma de que los clientes se hagan una idea más clara de un producto que ven en Internet. Al fin y al cabo, no es como en las tiendas físicas, donde pueden coger los artículos y examinarlos: en Internet hay que mostrarlos desde todos los ángulos para que puedan acercarse lo más posible a esa experiencia.
Los análisis de diversos estudios demuestran que los vídeos de productos fomentan las ventas. Por ejemplo, una tienda online descubrió que los vídeos de productos aumentaban en un 144 % la probabilidad de que los clientes compraran. Por supuesto, para causar impacto, se necesita un vídeo de alta calidad que muestre el producto desde diferentes ángulos.
En las páginas web de Squarespace, también necesitas un complemento fiable para configurar tu vídeo. Aquí es donde entra en juego el complemento «Product Gallery Video». Puedes configurarlo tú mismo o pedir ayuda a nuestro servicio de asistencia personalizada.
Product Gallery Video cuesta 27 dólares para una licencia estándar (un solo sitio web) u 87 dólares para una licencia empresarial (varios sitios web).
N.º 5. SEMrush
Todo profesional del marketing que tenga éxito depende del acceso a datos de buena calidad. ¿Por qué? Porque es necesario hacer un seguimiento de las métricas adecuadas para supervisar tu progreso y averiguar qué es lo que funciona.
SEMrush cuenta con un completo conjunto de funciones que ofrecen información y análisis para optimizar muchos aspectos de tu estrategia de marketing. Por ejemplo:
Flujos de trabajo de SEO
Análisis del tráfico de pago
Análisis de redes sociales
Perspectivas sobre el marketing de contenidos
Datos de estudios de mercado.
En el momento de escribir este artículo, ofrecen unas 35 herramientas diferentes, supervisan miles de millones de palabras clave y billones de enlaces y dominios. Ofrecen una prueba gratuita de siete días, tras la cual puedes elegir uno de sus planes por niveles.
N.º 6. Referral Candy
Las recomendaciones de los clientes son una forma muy eficaz de promocionar tu negocio. Sabemos que la gente busca recomendaciones de personas que conoce y en las que confía. Las recomendaciones de boca en boca representan entre el 20 % y el 50 % de todas las decisiones de compra, por lo que encontrar formas de fomentar esas recomendaciones puede suponer un importante impulso para tu negocio.
Una forma de conseguirlo es poner en marcha un programa de recomendaciones entre tus clientes. Básicamente, se trata de recompensarles por recomendar a nuevos clientes a tu negocio. Puedes gestionarlo desde tu página web de Squarespace, pero necesitas las herramientas adecuadas para hacerlo.
Referral Candy es un software de programas de recomendación de clientes que se integra con tu página web de Squarespace. El sistema te permite automatizar tu programa de recomendaciones de modo que, una vez configurado, los clientes puedan recomendar a otras personas mediante un proceso de seguimiento establecido. Ofrecen unas plantillas estupendas y acciones de promoción en diferentes canales de marketing.
Referral Candy ofrece un periodo de prueba gratuito de 30 días, tras el cual debes contratar un plan mensual.
Más complementos de afiliados y de recomendaciones
Descarga aquí nuestros consejos para promocionar una nueva página web
Reflexiones finales
Squarespace te ofrece unas herramientas fantásticas para crear una página web preciosa, pero una vez que la tengas lista, ¡tienes que promocionarla!
Las herramientas que hemos destacado aquí abarcan varias áreas diferentes del marketing, todas las cuales pueden desempeñar un papel importante para tu negocio. ¿Por dónde deberías empezar? Te sugerimos que comiences por los aspectos que puedes gestionar en tu página web, como el SEO y la creación de una lista de correo electrónico. Siempre podrás pasar a estrategias más avanzadas (que pueden suponer una mayor inversión en software) una vez que tengas un flujo constante de clientes.
Independientemente de por dónde decidas empezar, es importante contar con una estrategia de marketing sólida. Así es como podrás destacar entre los millones de sitios web que hay.
Guía de fuentes de Squarespace: cómo cambiar las fuentes, los colores y los tamaños
Squarespace te permite personalizar fácilmente las fuentes, los colores y el tamaño del texto de tu página web mediante el panel «Estilos de la página ».
A continuación te explicamos cómo hacerlo paso a paso.
Paso 1: Abre el panel «Estilos del sitio»
Aquí es donde realizarás todos los cambios de diseño.
Cómo acceder a los estilos del sitio:
Ve al editor de tu página web (inicia sesión y haz clic en tu sitio).
Haz clic en el icono del pincel (esquina superior derecha del editor).
O bien, ve a «Diseño > Estilos del sitio » en el menú principal.
Esto abre el panel «Estilos del sitio», donde puedes ajustar las fuentes, los colores y otros parámetros de diseño.
Paso 2: Cambiar las fuentes
Puedes elegir un paquete de fuentes (estilos prediseñados) o seleccionar las fuentes manualmente.
Opción 1: Utilizar un paquete de fuentes (rápido y fácil)
Haz clic en «Fuentes » en el panel «Estilos del sitio».
Haz clic en «Cambiar paquete de fuentes» (verás diferentes combinaciones de fuentes).
Elige la que más te guste: se aplicará automáticamente a los títulos, los párrafos y mucho más.
Haz clic en «Guardar » cuando estés satisfecho con tu selección.
Opción 2: Personalizar las fuentes manualmente
Ve a «Estilos del sitio» > «Fuentes»
Haz clic en el tipo de texto que quieras modificar (encabezados, párrafos, botones, etc.)
Haz clic en el nombre de la fuente para abrir el selector de fuentes.
Explora o busca una fuente (Squarespace admite más de 1.600 fuentes de Google y Adobe).
Haz clic en una fuente para aplicarla.
Guarda los cambios.
💡 Consejo de experto: Puedes configurar diferentes tipos de letra para los encabezados (H1, H2, H3, etc.) y los párrafos (P1, P2, P3).
Squarespace es compatible con las fuentes web de Google y Adobe. Google Fonts ofrece más de 1.000 fuentes diferentes, de las cuales Squarespace admite unas 600. Adobe Fonts cuenta con 2.300 fuentes diferentes en su biblioteca, de las cuales Squarespace ofrece 1.000. ¿A qué se debe esta limitación? No estoy seguro. Puede que ofrezcan acceso completo y que Squarespace simplemente no haya actualizado las cifras que indican como compatibles, ya que antes había menos fuentes en las bibliotecas.
Cabe mencionar que, dado que Google y Adobe son empresas externas, a veces modifican sus servicios sin previo aviso. Pueden eliminar fuentes, independientemente del número de personas que las utilicen. Cuando esto ocurra, la fuente seguirá funcionando en tu sitio web, pero si decides cambiarla, no podrás volver a la anterior si la nueva no te convence. Afortunadamente, hay miles de fuentes disponibles, y muchas de ellas se parecen lo suficiente entre sí como para que probablemente puedas encontrar un sustituto adecuado. Eso en el caso de que te encuentres en esta situación concreta, algo que es poco probable que ocurra.
Si sabes qué fuente concreta quieres utilizar, puedes buscarla por su nombre. Si no sabes cómo se llama una fuente, puedes echar un vistazo a las fuentes disponibles para encontrar una que te guste.
Squarespace no ofrece acceso ilimitado a todas las fuentes desde el primer momento. Destaca unas cuantas fuentes para ofrecerte unas opciones iniciales. Entre estas opciones se incluyen algunas fuentes populares, así como aquellas que hayas elegido utilizar recientemente o que hayas añadido a tu sitio web en otras secciones.
Haz clic aquí para saber cómo añadir fuentes personalizadas a tu sitio web de Squarespace 7.1
Paso 3: Ajustar el tamaño de la fuente y los estilos de texto
Una vez elegidas las fuentes, es posible que quieras ajustar el tamaño, el grosor o el espaciado.
Cómo cambiar el tamaño de la fuente:
Abrir «Estilos del sitio» > «Fuentes»
Haz clic en el tipo de texto que quieras ajustar (encabezados, párrafos, etc.)
Busca el control deslizante de tamaño y arrástralo para aumentar o reducir el tamaño del texto.
Ajusta el resto de parámetros si es necesario:
Grosor de la fuente (normal, negrita, negrita extra, etc.)
Altura de línea (espacio entre líneas)
Espaciado entre letras (Ajusta el espacio entre las letras)
Transformación de texto (mayúsculas, minúsculas o estilo con la primera letra en mayúscula)
Cuando hayas terminado, haz clic en «Guardar ».
💡 Consejo: Previsualiza siempre los cambios en el móvil y en el ordenador para asegurarte de que se ven bien.
Ajustar los colores de la página web
A partir de la versión 7.1 de Squarespace, ya no tienes que gestionar los colores de forma individual, seleccionando elementos concretos y aplicándoles colores con la esperanza de que todo quede bien y mantenga la coherencia en los distintos tipos de páginas. En su lugar, eliges temas de color, que son paletas de colores que combinan entre sí y aplican colores a los distintos elementos de tu sitio web de forma generalizada. Aunque pueda parecer menos flexible, es tan personalizable como antes, solo que de otra manera.
Paso 4: Cambiar los colores de la página web
Squarespace 7.1+ utiliza un sistema de paleta de colores para garantizar un estilo coherente en todo el sitio web.
Cómo cambiar los colores de tu página web:
Abrir «Estilos del sitio» > «Colores»
Haz clic en «Editar paleta»
Elige tu combinación de colores:
Utiliza una paleta predefinida (conjuntos de colores ya preparados).
Extraer colores de una imagen (sube una imagen y Squarespace generará colores a partir de ella).
Elige un color principal y deja que Squarespace cree una paleta a juego.
Selecciona manualmente los colores con el selector de colores (si tienes colores específicos de la marca).
Guarda tu paleta: esto actualiza los colores en toda la web.
Paso 5: Cambiar los colores de secciones concretas
Cada sección de tu página web tiene un tema de color (claro, oscuro, brillante, etc.). ¡Puedes personalizarlos!
Cómo cambiar los colores de una sección:
Mientras editas una página, pasa el cursor por encima de una sección y haz clic en «Editar sección».
Haz clic en la pestaña «Colores » en la configuración de la sección.
Elige un tema de colores (Squarespace aplicará los colores a juego de tu paleta).
Guarda los cambios.
💡 ¿Necesitas más control? Puedes editar colores concretos dentro de un tema de color:
Abrir «Estilos del sitio» > «Colores»
Haz clic en un tema de color (como «Bright 2» o «Dark 1»).
Ajusta elementos concretos (fondo, texto, botones, etc.).
Guardar: se actualizarán todas las secciones que utilicen ese tema.
Modificaciones en la versión 7.0
Todo lo que he escrito anteriormente se refiere a Squarespace 7.1. He pensado que, dado que es la versión más reciente y mucha gente todavía se está adaptando a ella y aprendiendo cómo funciona, es ahí donde surgen la mayoría de las dudas más habituales.
En el caso de los sitios de la versión 7.0, todo es más complicado, pero, además, la mayoría de la gente ya sabe cómo hacerlo. Dado que la versión 7.0 ha sido la predeterminada durante años, el conocimiento sobre cómo personalizar un sitio está más arraigado. Aun así, quizá merezca la pena tratarlo brevemente.
Para cambiar las fuentes en la versión 7.0, hay que tener en cuenta el tema que estés utilizando, las fuentes que admita y el proceso que sigas para seleccionarlas. Elige una plantilla de página que quieras editar, haz clic en «Diseño», selecciona «Estilos» y allí encontrarás todas las opciones de fuentes.
La elección de una fuente concreta funciona de manera muy similar, pero se aplica de forma individual para cada tipo de página. Si quieres cambiar el aspecto del texto de los párrafos del cuerpo en las diferentes páginas de tu sitio web, tendrás que cambiar la fuente en cada tipo de página. Puedes seguir utilizando el mismo tipo de menú desplegable de «familia de fuentes» para buscar fuentes por nombre o incluso realizar una búsqueda (si sabes qué fuente quieres utilizar).
También puedes optar por utilizar la opción de fuentes personalizadas para añadir una fuente de Adobe que Squarespace no admita de forma predeterminada. Si decides hacerlo, ten en cuenta que es posible que algunas de las configuraciones de Squarespace, como las transformaciones, no funcionen correctamente con ella y que tengas que utilizar CSS personalizado para conseguir el resultado deseado. Dicho esto, dada la amplia variedad de opciones de fuentes disponibles, no es habitual que la gente quiera utilizar CSS solo para añadir una fuente diferente, salvo en circunstancias extremas, limitadas y personalizadas. Si quieres explorar los valores CSS, Mozilla ha elaborado una guía estupenda sobre el tema.
Para añadir una fuente personalizada, tiene que ser una fuente de Adobe (las fuentes de Google no funcionan) y debes utilizar la sección de fuentes personalizadas para hacerlo. Encontrarás las instrucciones en esta página. Básicamente, necesitas tener una suscripción a Adobe Creative Cloud y vincular esa cuenta con Squarespace. A continuación, podrás elegir una selección personalizada de fuentes de Adobe, que sustituirán a las fuentes disponibles en los estilos actuales de tu sitio web. Ten cuidado si las utilizas para otros fines en tu sitio web; no querrás sobrescribir las fuentes que ya utilizas.
Desde este menú también se pueden realizar pequeños ajustes en el texto.
Tamaño de la fuente: cambiar el tamaño del elemento de fuente en la página.
Altura de línea: modifica el espacio entre líneas en sentido vertical. Ten cuidado al utilizar 0 em, ya que puede provocar que el texto se superponga.
Espaciado entre letras: el espacio que hay entre las letras. Es similar al kerning, pero no es exactamente lo mismo.
Transformación de texto: elegir si el texto se puede escribir con mayúsculas a medida que se teclea, o si, por defecto, se escribe todo en mayúsculas, todo en minúsculas o con mayúsculas según las normas habituales.
Decoración del texto: añadir elementos al texto, como líneas superiores, subrayados o tachados.
Alineación del texto: alineación a la izquierda , a la derecha o centrada.
No es exactamente la misma selección de opciones, pero se acerca bastante.
Cambiar los colores de tu sitio web funciona prácticamente igual en la versión 7.0 que en la 7.1. La principal diferencia es que los colores se eligen por página, en lugar de por sitio web. Por lo tanto, si quieres cambiar los colores en todo el sitio web, tendrás que realizar el ajuste de color en cada página. Aquí puedes leer más sobre los ajustes de color individuales que puedes realizar y cómo llevarlos a cabo.
En general, Squarespace 7.1 ha hecho mucho por agilizar y eliminar esas pequeñas repeticiones molestas que eran inherentes a los sistemas de personalización de fuentes y colores. Todo ello forma parte de la optimización de sus temas, pasando de familias de temas individuales a un único tema centralizado con variaciones y ajustes modulares. Sin duda, supone un cambio, pero esta simplificación es bienvenida.
Resumen (guía rápida)
✅ Cambiar fuentes:
Ve a «Estilos del sitio» > «Fuentes», elige un paquete de fuentes O selecciona las fuentes manualmente.
✅ Ajustar el tamaño y el estilo de la fuente:
En «Estilos del sitio» > «Fuentes», utiliza el control deslizante de tamaño y ajusta el grosor, el espaciado y el estilo.
✅ Cambiar colores (en todo el sitio ):
Ve a «Estilos del sitio» > «Colores», edita tu paleta de colores y guarda los cambios.
✅ Cambiar colores (por sección):
Haz clic en «Editar sección» > «Colores» para alternar entre los temas «Claro», «Oscuro» y «Brillante».
Consejos finales
Previsualiza los cambios en el ordenador y en el móvil antes de guardarlos.
Utiliza paquetes de fuentes y colores predefinidos para aplicar estilos rápidamente.
Personaliza cada sección si quieres que cada zona tenga un aspecto único.
✅ Compatible con Squarespace 7.0 y 7.1 • ✅ Compatible con todas las plantillas • ✅ Adaptado a dispositivos móviles
⚠️ Requiere el plan Business de Squarespace o superior para disfrutar de todas las funciones.
💡 Los usuarios del Plan Personal pueden utilizar el método alternativo de Markdown. Consulta las preguntas frecuentes más abajo.
Añadir una ventana emergente tipo «Lightbox» a Squarespace
Lightbox Anything te permite abrir contenido personalizado en una ventana emergente a partir de botones, imágenes, enlaces de texto, galerías y mucho más.
Úsalo para formularios, vídeos, biografías del equipo, detalles de productos, portafolios, promociones, contenido restringido, ventas adicionales, galerías y secciones de página personalizadas, sin necesidad de redirigir a los visitantes a otra página.
Haz clic aquí para ver la demostración →
¿Quieres ver primero el proceso de configuración?
▶️ Haz clic aquí para ver el vídeo de configuración