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?

Amplia lista de trucos y ajustes para Squarespace (con enlaces y ejemplos)

Squarespace es una pequeña pero potente plataforma. Sin embargo, gran parte de su potencia radica en que está prácticamente preconfigurada y lista para usar. Una persona sin experiencia en diseño web puede tener una página web en funcionamiento, totalmente operativa, en tan solo un par de horas. 

Dicho esto, es posible que muchos administradores web de nivel intermedio o avanzado quieran sacar más partido a la plataforma del que esta suele permitir. Hay varias formas de hacerlo, y he recopilado todas las que he podido encontrar. Estos trucos, ajustes, complementos y otras personalizaciones son posibles dentro del marco de Squarespace, pero pueden requerir un poco de programación personalizada. Por suerte, todo es bastante sencillo.

¡Empecemos!

Trucos de SEO para Squarespace

Para empezar, veamos una serie de trucos y ajustes de SEO relativamente sencillos que puedes aplicar. Se trata de pequeños ajustes que puedes implementar y que mejoran la forma en que Google ve tu sitio web, cómo lo ven los usuarios y cómo se utiliza. No suponen una gran diferencia, pero sí tienen algún efecto, y no cuesta nada aplicarlos.

Slider de testimonios

La prueba social forma parte del SEO moderno y puede contribuir en gran medida a reforzar la confianza y la interacción con tu sitio web. 

Un elemento clave de la prueba social son los testimonios, y este complemento te ofrece una forma estupenda de mostrar muchos de ellos en un control deslizante, de forma rápida y sencilla.

Aplicar automáticamente la etiqueta «nofollow» a los enlaces de afiliados

Esta guía te ofrece instrucciones paso a paso para añadir atributos a enlaces concretos o a clases enteras de enlaces. 

En concreto, su objetivo es añadir atributos «nofollow» a los enlaces de afiliados y ocultarlos, lo que puede resultar útil tanto para el SEO como para la usabilidad.

Página 404 personalizada

Cada vez que un usuario accede a tu sitio web y llega a una página que no existe, acaba en una página 404. 

Estas páginas no son precisamente emocionantes y, a menudo, ahuyentan a los usuarios. Personalizar tus páginas 404 te permite captar su atención y ayudarles a encontrar lo que buscaban, y en esta guía te explicamos cómo hacerlo.

Mejoras en el blog de Squarespace

El blog de Squarespace es, por defecto, bastante potente y cuenta con numerosas funciones. Sin embargo, no es perfecto, así que aquí tienes algunas cosas que puedes hacer para mejorar su aspecto, su experiencia de usuario y su funcionalidad.

Comentarios de Facebook

El sistema de comentarios predeterminado de cualquier blog suele dejar mucho que desear; este complemento te permite integrar los comentarios de Facebook en tu blog. 

Los comentarios de Facebook tienen una ventaja fundamental: casi todo el mundo ya ha iniciado sesión.

Ajustes de fuente

Squarespace te permite utilizar prácticamente cualquier fuente de la biblioteca de Google Fonts, así como una amplia selección de Adobe Fonts, pero es necesario configurar una integración para que funcionen. 

Esta es una guía sobre cómo hacerlo.

Barra de anuncios fija

Squarespace te permite crear una barra de anuncios en la parte superior de la página, pero en cuanto el usuario se desplaza hacia abajo, esa barra desaparece. 

Se trata de un sencillo ajuste para que se mantenga fijo en la parte superior de la página, acompañando al usuario mientras se desplaza por ella.

Ajustes en la experiencia de usuario de Squarespace

No existe una experiencia de usuario perfecta. Los gustos en cuanto al diseño web, las tendencias y la actividad cambian cada año. Sin embargo, hay bastantes aspectos que puedes ajustar o implementar para mejorar la experiencia de usuario. A lo largo de los años he ido recopilando bastantes de ellos, y esta lista recoge mis ajustes favoritos y más eficaces.

Complemento de barra lateral para Squarespace

Este es un complemento que te permite crear una barra lateral con contenido para mostrarla en cualquier página de tu sitio web. 

Es una forma ingeniosa de incrustar contenido de una página a otra, funciona tanto con la versión 7.0 como con la 7.1, y es muy fácil de instalar, adaptar al tema y personalizar.

Pestañas de acordeón

¿Alguna vez has visto una página web con una sección de preguntas frecuentes o un directorio en el que se ven los títulos, pero el contenido que hay debajo de ellos permanece oculto hasta que haces clic en ellos? 

Se trata de una interfaz tipo acordeón, y este complemento te permite crear y configurar la tuya propia sin necesidad de tener conocimientos de programación.

Enlaces al índice

Muchos blogs, incluido el mío, incluyen un índice para cada entrada. Puedes hacer clic en un enlace de la barra lateral y saltar directamente al punto correspondiente de la entrada del blog. 

Para ello, es necesario utilizar enlaces de anclaje internos en la página, y en mi guía se explica cómo implementarlos de forma rápida y sencilla.

RSS como resumen

Muchos blogs cuentan con una sección de «artículos relacionados», y Squarespace te permite configurar una en el bloque de resumen. Sin embargo, esto solo funciona con las colecciones preconfiguradas que hayas creado. 

Este complemento te permite configurar una fuente RSS —ya sea de tu propia web o de otras como Medium, Feedburner y Wix— para ampliar las posibilidades de incrustar contenido.

Temporizador de cuenta atrás

Este es un sencillo complemento para añadir un temporizador de cuenta atrás a tu página web. 

Es útil para despertar el miedo a perderse algo (FOMO) ante una oferta por tiempo limitado, generar interés por un evento próximo y hacer una cuenta atrás para el lanzamiento de un nuevo producto.

Galería de estilo «Masonry»

El diseño predeterminado de la galería de imágenes en Squarespace es una cuadrícula, pero puede resultar un poco soso, sobre todo con imágenes de diferentes alturas. 

Este complemento convierte las galerías en diseños de estilo «masonry» que se ajustan al espacio disponible, lo cual resulta mucho más adecuado para imágenes variadas.

Navegación por puntos en la galería

Siempre que tengas una galería de imágenes que se van sucediendo una tras otra, es recomendable indicar a los usuarios en qué punto de la presentación se encuentran y cuántas imágenes hay en la galería. 

Esto añade puntos para cada uno, resaltando aquel en el que se encuentra el usuario.

Contador de imágenes de la galería

Al igual que la navegación por puntos, esta opción añade un recuento sencillo de las imágenes de una galería, con un número que indica en qué imagen se encuentra el usuario, por ejemplo, 4/12. 

Sencillo y fácil.

Herramientas para potenciar el comercio electrónico en Squarespace

Si estás intentando vender algo a través de Squarespace —¿y quién no lo está?—, esta sección te resultará fundamental. Mejorar las páginas de tus productos, el proceso de conversión y la gestión de diversos aspectos secundarios es clave para contar con una tienda online sólida y con todas las funciones necesarias. Estos son algunos de mis ajustes favoritos y los trucos más eficaces.

Lightbox Anything

Este es un complemento que te permite crear una ventana emergente con la información que desees, que se muestra al hacer clic. 

Muestra tablas de tallas, especificaciones de productos, una propuesta de venta adicional o cualquier otra cosa que se te ocurra, de forma rápida y sencilla.

Sincronizar imágenes de variantes de productos

Mantener una imagen coherente en toda tu tienda es de vital importancia para transmitir profesionalidad, lo cual genera confianza y contribuye a aumentar las conversiones. 

Squarespace eCommerce ya se encarga de parte de esto de forma predeterminada, pero este complemento mejora esa funcionalidad.

Área exclusiva para socios

Ofrecer a los miembros de tu comunidad —o simplemente a los clientes que pagan— acceso exclusivo a contenidos o productos es una forma estupenda de fomentar las conversiones. 

Sin embargo, configurar un área exclusiva para socios puede resultar un poco complicado, así que he grabado un vídeo explicativo sobre cómo hacerlo.

Listas de espera

Si tienes una cantidad limitada de un producto concreto y se agota, ¿qué harán tus usuarios? 

Este código les permite inscribirse en una lista de espera para recibir una notificación cuando el producto vuelva a estar disponible.

Variantes de colores del producto

Muchas tiendas de comercio electrónico utilizan puntos de colores o con motivos para que puedas ver una vista previa del producto en diferentes colores y diseños. 

Este complemento te permite hacer lo mismo con Squarespace. Lo único que tienes que hacer es introducir los códigos hexadecimales correctos.

Indicador de existencias

Si dispones de un stock limitado y quieres aprovechar esa limitación para crear una sensación de «miedo a perderse algo» (FOMO) y fomentar las conversiones, este plugin te permite añadir ese indicador a las páginas de tus productos.

Integraciones de servicios de Squarespace

Squarespace es muy potente, pero no puede hacerlo todo. Esta sección es relativamente breve y solo recoge algunas de las cosas que se pueden hacer con las integraciones de Squarespace, pero se trata de algunos de los trucos más eficaces que he utilizado a lo largo de los años. 

Opiniones sobre Yotpo

Yotpo es uno de los sistemas más potentes que existen para el comercio electrónico, pero en Squarespace sus posibilidades son limitadas. 

Una de las mejores opciones es incluir las reseñas de Yotpo en las páginas de tus productos, pero añadirlas manualmente lleva una eternidad. Este plugin lo hace automáticamente por ti.

Parábola

Parabola, una sencilla herramienta de automatización, te permite hacer cosas muy útiles, como exportar pedidos a una hoja de cálculo de Google. 

Es fácil de usar, así que le eché un vistazo y grabé un vídeo sobre cómo funciona.

Mailchimp y Google Analytics

La gestión del correo electrónico y de los boletines informativos se realiza mejor con una herramienta como Mailchimp, pero quizá te interese realizar un seguimiento más avanzado del rendimiento de tus boletines a la hora de generar conversiones. 

Esta guía te ayuda a configurar el seguimiento de Google Analytics para los boletines gestionados por Mailchimp.

Pasarelas de pago alternativas

Por defecto, Squarespace solo te permite utilizar PayPal y Stripe para procesar pagos. Esto es suficiente para muchos comerciantes, pero si perteneces a una categoría de alto riesgo, esas pasarelas de pago no te servirán. 

En lugar de arriesgarte a que te bloqueen el acceso sin previo aviso, utiliza esta guía para configurar una pasarela de pago alternativa.

Trucos y ajustes adicionales

Por desgracia, no puedo abarcar todo lo que se puede hacer con Squarespace en un solo artículo. En lugar de intentarlo, aquí tienes una selección de mis recursos favoritos que puedes utilizar para descubrir otros trucos, ajustes y pequeños usos ingeniosos de las herramientas que ofrece Squarespace. 

Más de 40 consejos y trucos de My Billie Designs: esta es una entrada estupenda con un montón de consejos y trucos, recopilados de diez expertos en la plataforma Squarespace. Algunos de ellos ya se han mencionado anteriormente, como crear una barra lateral para el blog, personalizar las páginas 404 o crear un área exclusiva para miembros en tu sitio web. Otros son ajustes básicos, como personalizar tu favicon y utilizar bloques de resumen. Y hay algunos consejos más originales.  ¡Échale un vistazo!

20 trucos para Squarespace de Cinnamon Wolfe: Cinnamon es una bloguera profesional y experta en Squarespace. Aquí nos ofrece un montón de trucos útiles, entre los que se incluyen:

- Utilizar la tecla ESC para iniciar sesión en tu sitio web.

- Desactivar el clic con el botón derecho para proteger tus activos.

- Personalizar el pie de página de tu sitio web (y eliminar el aviso «Powered by Squarespace»)

- Ajustes en la funcionalidad de los comentarios.

Algunos de sus consejos son muy sencillos, del tipo «así es como se usa Squarespace», mientras que otros se refieren a funciones avanzadas. ¡Seguro que aprendes algo nuevo al leerlo!

50 plugins y ajustes imprescindibles de SQSP Themes – ¡Eh, ese soy yo! Este es otro directorio de plugins, trucos y ajustes útiles que escribí hace un tiempo. Hay un pequeño solapamiento aquí —es una entrada más antigua y esta otra incluye algunos de los mismos plugins—, pero la entrada anterior también aporta mucho valor único.  Échale un vistazo y dime cuál es tu favorito.

Más de 30 consejos y trucos de «Productive and Free »: «Productive and Free» es un blog de Tet, un coach de productividad. La mayoría de los consejos y trucos de esta lista están pensados para ayudarte a ajustar tu sitio web, publicar contenido y optimizar el SEO de tu página de forma rápida y productiva. Prepárate para un curso intensivo sobre las funciones básicas e intermedias de Squarespace; probablemente descubrirás algo que no sabías hasta ahora.

127 ejemplos de sitios web creados con Squarespace: este no es un artículo de consejos y trucos.  Más bien, es una lista de ejemplos de páginas web de gran calidad creadas con Squarespace. Me gusta porque es una forma estupenda de ver lo que hacen otras personas, qué tipo de funciones personalizadas están implementando y qué estilos de diseño han puesto en práctica. En concreto, puede servirte de inspiración para cosas interesantes que puedes hacer en tu página web, y luego puedes buscar cómo implementarlas.

6 ajustes avanzados para aumentar las conversiones: esta entrada, de Sophia Ojha, no es ni mucho menos tan extensa ni tan detallada como algunas de las anteriores. Sin embargo, se centra específicamente en los ajustes que puedes realizar en tu sitio web para aumentar las tasas de conversión en general. Ponerlos en práctica te dará una idea de cómo incluso los pequeños detalles pueden influir en las tasas de conversión de los usuarios.

Tus favoritos

Yo ya he terminado; ¿y tú? ¿Hay algún ajuste, truco, consejo, complemento o integración que te guste especialmente y que se me haya pasado por alto, pero que consideres imprescindible? 

Me encantaría que me dejaseis vuestros favoritos en los comentarios. Siempre estoy aprendiendo y mejorando como desarrollador de Squarespace, y no puedo hacerlo si no aprendo de gente como vosotros. ¡Gracias de antemano!

5 formas de dar formato a tu logotipo en tu página web de Squarespace

Ya has elegido el nombre de la web y el nombre de la marca. Has elegido una plantilla para tu web de Squarespace. La has personalizado para que tenga exactamente el aspecto que quieres. Solo te queda una cosa: ¡el logotipo!

Un logotipo es un elemento clave de la imagen de marca moderna. Hay datos que indican que Google da preferencia a los sitios web que utilizan logotipos gráficos frente a los que solo incluyen texto. Squarespace te permite utilizar sin problemas un título de texto para tu sitio web, pero hay un espacio destinado al logotipo, y casi siempre es una buena idea incluir uno.

No te preocupes demasiado por elegir un logotipo definitivo desde el principio. Al ser una página web pequeña, tienes la ventaja de poder ir cambiándolo a medida que crezcas. Una empresa como Pepsi o Home Depot tiene que darle mucha importancia al cambio de logotipo. Una marca pequeña puede elegir un logotipo y, si dentro de un año ya no encaja con la marca, cambiarlo sin ningún problema.

Lo que quiero decir es lo siguiente: ¡pon un logotipo en marcha! Crea uno que tenga buen aspecto y sirva como lugar de espera, que no te moleste usar, y da por bueno que sea suficiente. Ya puedes invertir en uno mejor más adelante si quieres, pero, por ahora, un logotipo básico es mejor que nada.

Squarespace tiene algunas peculiaridades y características interesantes en su sistema de logotipos que conviene conocer. Es fundamental dar el formato adecuado a un logotipo, teniendo en cuenta los distintos formatos y posiciones. Claro, puedes limitarte a subir un archivo JPG cuadrado y darlo por bueno, pero hay una forma mejor de hacerlo.

Formato general del logotipo

En primer lugar, conviene saber que el logotipo de tu sitio web sustituye al encabezado textual del mismo. Cuando escribes el nombre de tu sitio web, este aparece debajo del título del sitio. Sin embargo, debes asegurarte de especificar el título de tu sitio web de todos modos.  Esto se debe a que el título de tu sitio web es lo que la imagen utiliza como texto alternativo cuando la subes. El texto alternativo es sumamente importante para el SEO y la accesibilidad, por lo que no conviene que algo tan importante como tu logotipo carezca de él.

Otra cosa importante que debes tener en cuenta es que, en Squarespace, tu logotipo siempre enlazará con tu página de inicio de forma predeterminada. Ahora bien, en el 99,999 % de los casos, eso es precisamente lo que quieres que haga.  Prácticamente todas las páginas web de Internet hacen que su logotipo enlace a la página de inicio; hoy en día, es simplemente una práctica habitual en Internet. Sin embargo, si quisieras hacer alguna jugarreta con tu logotipo o hacer que enlace a otras páginas en días festivos concretos o algo por el estilo, tendrás que hacerlo mediante código personalizado.

Por lo general, cuanto más grande sea la imagen que utilices para tu logotipo, mejor. Sin embargo, eso no significa que puedas subir un archivo de 100.000 x 100.000 píxeles como logotipo. Squarespace ajustará el tamaño de tu archivo de imagen para que se adapte al área de visualización que le corresponda en la plantilla de tu sitio web. Esto varía en función de la plantilla en la versión 7.0, pero está estandarizado en todas las plantillas de la versión 7.1.

Una imagen demasiado pequeña se ampliará, lo que puede hacer que se vea pixelada. Por el contrario, una imagen más grande se reducirá. En el caso de logotipos sencillos y limpios, esto no supone ningún problema. Sin embargo, en el caso de imágenes complejas, se pueden perder algunos detalles. ¡Asegúrate de que tu logotipo se vea bien a diferentes escalas!

Squarespace establece una serie de requisitos generales para las imágenes, incluidas las que se utilizan en los logotipos.

• Solo se admiten archivos JPG, PNG y GIF. No se pueden utilizar archivos como PDF, DOC o PSD.

• Tu imagen no puede superar los 20 MB. Sin embargo, dado que la velocidad del sitio web es un factor que influye en el posicionamiento en los buscadores y que las imágenes suelen ser la parte más lenta de un sitio web, deberías intentar que tus archivos no superen los 500 kb. Plantéate utilizar una herramienta de optimización de imágenes para reducir el tamaño de una imagen sin perder calidad.

• Los nombres de los archivos de imagen solo pueden contener letras, números, guiones bajos y guiones. No se pueden utilizar símbolos como «?», «&» o «%», ni caracteres acentuados, debido al funcionamiento del código del back-end.

• Las resoluciones disponibles son muy altas: 60 megapíxeles. Probablemente, tu logotipo ni siquiera ocupe un solo megapíxel, así que esto no debería suponer ningún problema. Esto es más relevante en el caso de las imágenes generales que subas a tu blog y a las páginas de productos.

• El modo de color de las imágenes es RGB. Las imágenes en CMYK suelen destinarse a la impresión y no se mostrarán correctamente en un navegador si no se optimizan.

• El perfil de color ideal es sRGB. Si no sabes lo que significa, no te preocupes; prácticamente todas las aplicaciones de edición de imágenes que utilices para tu logotipo exportarán los archivos correctamente.

• Se permiten los fondos transparentes (para que no tengas que ajustar los colores al color de fondo de tu página web), pero debes utilizar un archivo PNG para guardarlo con transparencia.

Hay un montón de detalles, particularidades y excepciones que comentaré más adelante en esta entrada, pero, en general, esto es todo lo que tienes que tener en cuenta.

Creación de un logotipo

Crear tu logotipo es una tarea que puede resultar abrumadora, sobre todo si no eres diseñador gráfico. Por suerte, en realidad no es tan difícil.

Aunque puedes utilizar Photoshop o tu editor de imágenes favorito para crear una imagen, también puedes recurrir simplemente a Squarespace Logo. Squarespace Logo es una herramienta en línea que ofrece Squarespace y que te permite crear un logotipo partiendo de cero.  Introduces el nombre de tu marca, tu eslogan y eliges un símbolo para añadirlo. Posiciones, tipografías, colores: puedes elegir todo eso para cada elemento. La biblioteca de símbolos parece pequeña a primera vista, pero si escribes lo que quieras en la barra de búsqueda, aparecerán docenas más. 

Si te parece que el generador de Squarespace es un poco básico o no ofrece el diseño que buscas —o si prefieres algo más generado por IA o más personalizado—, puedes utilizar otro creador de logotipos. Existen muchos servicios diferentes que te permiten introducir el nombre de la marca, algunas palabras clave y otros detalles, y que generan una gran cantidad de logotipos entre los que puedes elegir. 

Y, por supuesto, siempre existe la opción de utilizar un servicio como Canva para crear uno desde cero con una biblioteca más amplia de elementos personalizados.

Imagen del logotipo del encabezado de la página web

Añadir la imagen de tu logotipo es muy fácil. Una vez que hayas elegido el archivo adecuado, puedes seguir estos pasos en función de la versión de tu sitio web y de tu plataforma.

En la versión 7.1 en un ordenador, haz clic en «Editar», luego pasa el cursor por encima del encabezado y haz clic en «Editar encabezado del sitio». Haz clic en «Título y logotipo del sitio», asegúrate de que el texto esté especificado y, a continuación, arrastra y suelta la imagen de tu logotipo en el cuadro de imagen. También puedes hacer clic en el cuadro y seleccionar el archivo. Puedes desplazarte hacia abajo y cambiar la altura de la imagen para que se adapte a diferentes pantallas. Asegúrate de guardar los cambios.

En la versión 7.0 para ordenador, pasa el cursor por encima de tu logotipo en cualquier página y haz clic en «Editar». También puedes ir al menú de inicio, hacer clic en «Diseño» y, a continuación, en «Logotipo y título». Sube tu imagen y guárdala.

En ambos casos, en la aplicación de Squarespace, pulsa en «Configuración» y, a continuación, en «Logotipo y título». Pulsa en el logotipo y, a continuación, sube tu imagen. Pulsa en «Atrás» y, a continuación, en «Guardar».

El aspecto y la disposición de tu logotipo variarán en función de la plantilla que utilices. Cada plantilla de la versión 7.0 tiene una forma diferente de mostrar el logotipo y un método distinto para cambiarlo, si es que se puede cambiar. Por ejemplo:

• Avenue: el logotipo puede aparecer a la izquierda, en el centro o a la derecha. Puedes cambiarlo mediante el ajuste «Estilo de diseño».

• Bedford – El logotipo solo aparece a la izquierda y no se puede modificar.

• Momentum: el logotipo aparece a la izquierda, pero puede situarse encima o debajo de la barra de navegación. Utiliza el ajuste «Posición de navegación» para cambiarlo.

Puedes consultar las diferencias entre cada conjunto de plantillas aquí.

Opciones de tamaño del logotipo

Cuando subes un logotipo a tu página web por primera vez, es posible que el tamaño con el que quieres que se muestre difiera considerablemente del deseado. Ahora puedes editar la imagen para que tenga exactamente el tamaño adecuado y se ajuste al espacio. Por desgracia, esto significa que necesitarás varios archivos de logotipo diferentes para distintos modos de visualización y, dado que solo puedes subir un logotipo, no acaba de funcionar. Por suerte, Squarespace te permite configurar el tamaño.

Entra en el editor de estilos y busca la sección correspondiente al tamaño de la imagen de tu logotipo. Se encuentra en la sección «Identidad visual del encabezado». Tienes que especificar el ancho de tu logotipo; la altura se generará automáticamente en función de las dimensiones de la imagen que hayas subido. La imagen no se distorsionará, así que no te preocupes por eso. Solo ten en cuenta que las imágenes demasiado altas estirarán tu página. 

Si no te importa que la imagen se distorsione, o si quieres establecer una altura máxima por si acaso, hay algunos ajustes de CSS que puedes realizar. Tienes que encontrar la clase CSS de la imagen de tu plantilla, así que ve a tu sitio web, haz clic con el botón derecho del ratón sobre tu logotipo y, a continuación, selecciona «Inspeccionar elemento». Deberías acceder directamente a ella. A continuación, puedes pegar el código CSS correspondiente en el código de tu sitio web, siguiendo las instrucciones de esta página.

El tamaño del logotipo es muy fácil de modificar en una web 7.1. Solo tienes que acceder al editor del encabezado de tu web e indicar allí las dimensiones. ¡Y ya está!

Opciones de texto del logotipo

Si no subes una imagen, aparecerá un texto con un estilo que se adapte al diseño de tu página web, en lugar de un logotipo. Si subes una imagen, aparecerá la imagen, pero el texto se convertirá en texto alternativo. ¿Qué ocurre, entonces, si quieres un logotipo con texto, algo como «TinySeed» o «BeAligned»?

Bueno, si te fijas bien en su logotipo, verás el truco. Hacen que el texto forme parte de la imagen. Así que lo único que tienes que hacer es crear tu logotipo con el texto integrado en la imagen. 

Lo complicado aquí es asegurarse de que tenga el tamaño y la resolución adecuados para evitar que se vea borrosa al redimensionarla para las diferentes versiones de tu página web. Lo mejor es utilizar una imagen grande con texto que no sea demasiado fino ni complejo. No puedo darte demasiados detalles porque todo depende de la tipografía, el estilo y el tamaño que elijas. Intenta que la imagen inicial no sea demasiado grande y no deberías tener problemas al redimensionarla.

Formato del favicon

Un favicon, también conocido como icono del navegador, es el símbolo que aparece en la pestaña en la que se carga tu sitio web, tanto en navegadores móviles como de ordenador. Básicamente, es una versión reducida de tu logotipo. Sin embargo, si tu logotipo es más grande, más complejo o incluye texto, no queda bien en un favicon. ¿Cómo se crea un buen favicon?

En primer lugar, debes saber que las especificaciones de imagen del favicon son diferentes a las de un logotipo.

• Los favicons se muestran con un tamaño de 16x16 píxeles, pero lo habitual es subir una imagen más grande, normalmente de entre 100x100 y 300x300. Los favicons siempre son cuadrados o circulares, por lo que los rectángulos no quedan bien.

• Por lo general, deberías utilizar un archivo PNG o ICO. El formato PNG no funciona con versiones muy antiguas de Internet Explorer, pero nunca he tenido ningún problema con él.

• El archivo tiene que ser pequeño. Menos de 100 kb.

Añadir tu favicon es muy sencillo, al menos. En la versión 7.1, haz clic en el menú de inicio, luego en «Diseño» y, a continuación, en «Icono del navegador». 

Sube tu imagen allí y guárdala. En la versión 7.0, haz clic en el menú de inicio, luego en «Diseño» y, a continuación, en «Logotipo y título». El icono del navegador se encuentra más abajo en la página.

Súbelo y guárdalo.

Cómo utilizar un logotipo en formato SVG

Si sabes lo que son los gráficos vectoriales, quizá te preguntes si puedes utilizar un archivo SVG para el logotipo de tu página web. Los archivos SVG son, en esencia, instrucciones de texto para crear una imagen vectorial que se puede ampliar o reducir sin pérdida de calidad. Son muy potentes, muy ligeros y no son archivos de imagen propiamente dichos, tal y como los conocemos tradicionalmente. Por desgracia, Squarespace no los admite de forma predeterminada. Sin embargo, puedes utilizarlos si lo deseas.

Para ello, básicamente tienes que hacer que Squarespace cargue el archivo SVG mediante código personalizado. 

En primer lugar, sustituye la imagen del logotipo del encabezado por un archivo PNG transparente del tamaño que desees que tenga la imagen del encabezado.

A continuación, crea tu logotipo en formato SVG. Aquí tienes una guía sobre cómo hacerlo.

Una vez que tengas tu archivo SVG, tienes que subirlo. En cualquier página de tu sitio web, selecciona un fragmento de texto y haz clic en el icono de enlace. En lugar de crear un enlace a una página, haz clic para crear un enlace a un archivo y sube tu archivo SVG. Básicamente, se trata de una solución alternativa para subir tu archivo a los servidores de Squarespace, ya que no requiere ningún software adicional y es un proceso bastante rápido.

Una vez que hayas subido el archivo de tu logotipo, haz clic en el enlace para obtener el nombre del archivo. Tendrá este aspecto:

https://yoursitename.com/s/svglogoname.svg

A veces, el nombre del archivo puede ser muy largo, como por ejemplo:

https://static1.yoursitename.com/static/605d8c67275bb80d4f-1b1fcb/t/602e9274f59cb32c9e67195c/1613265654987/file-name.svg

No pasa nada. Anótalo y déjalo a un lado. Puedes borrar el enlace al archivo; no hace falta que lo guardes en la página en la que lo hayas creado.

A continuación, utiliza código personalizado para añadir CSS a tu encabezado. El código exacto que necesitas depende de la plantilla de tu sitio web, por lo que no puedo enumerarlos todos. Solo tienes que buscar «logotipo SVG en nombre de la plantilla» para encontrar una guía, como esta para Brine. Asegúrate de hacer lo mismo también con tu logotipo para dispositivos móviles.

¡Y ya está! Tendrás un logotipo SVG perfectamente escalado y listo para usar.