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.

Cómo elegir una plantilla de Squarespace

¿Estás creando una página web con Squarespace?

La primera pregunta que tendrás que responder es: «¿Qué tema voy a utilizar?». Para mucha gente, a esta le sigue inmediatamente otra: «¿Cómo elijo la plantilla adecuada de Squarespace?».

Una de las ventajas de utilizar Squarespace es que hay muchos temas entre los que elegir. Por un lado, están los temas disponibles a través de la propia plataforma de Squarespace; por otro, están los temas de diseñadores externos, como los temas de SQSP.

Squarespace es conocido por su compromiso con los diseños atractivos y de nivel profesional, así que, en realidad, solo tienes que elegir cuál se adapta mejor a tus necesidades. A continuación te ofrecemos un resumen de cómo lo elegiríamos nosotros:

Descargar aquí: Recursos para elegir plantillas de Squarespace

Conocer las plantillas de Squarespace

Hay que conocer algunos términos específicos de Squarespace. En primer lugar, existen dos versiones diferentes de Squarespace: la 7.0 y la más reciente, la 7.1. Si quieres actualizar una página web creada con la plataforma 7.0, la plantilla que elijas tendrá una mayor importancia, ya que cuenta con un conjunto fijo de parámetros de estilo que no se pueden modificar. 

Por el contrario, si utilizas la versión 7.1, la plantilla que elijas es solo un punto de partida. Puedes personalizar tu sitio web como quieras, ya que todos los sitios de la versión 7.1 forman parte de la misma «familia» de plantillas y cuentan con las mismas funciones y opciones de estilo.

¿«Familia», te preguntarás? Es otro término de Squarespace. Una «familia» de plantillas significa que todas las plantillas de esa familia comparten la misma estructura y funcionalidad subyacentes. Esto es especialmente importante en la versión 7.0, ya que tu limitación se reduce a las características y opciones de estilo disponibles en las distintas familias. Squarespace ofrece tablas comparativas de plantillas en los que puedes comparar características y buscar plantillas de la misma familia.

También nos encanta el trabajo que ha realizado aquí I Love Creatives al agrupar las plantillas en familias. Esto te ofrece una buena visión general de cómo se relacionan entre sí las plantillas.

Echa un vistazo a las plantillas de Squarespace por categoría

Siempre puedes empezar echando un vistazo a los temas que Squarespace tiene disponibles por categoría. Para encontrarlos, ve a su página de temas y explora las categorías disponibles en la parte izquierda. Por ejemplo, si eres músico, busca en la sección de músicos y bandas; si eres fotógrafo, busca en la sección de fotografía.

La ventaja de buscar de esta forma es que Squarespace ya ha creado estos temas pensando precisamente en el uso concreto que se les va a dar. Las funciones básicas que probablemente necesites ya están integradas.

Echa un vistazo a la vista previa del tema y fíjate también en lo que otros clientes de Squarespace han hecho con la misma plantilla. Es importante analizar la estructura real de las páginas en lugar de distraerte con el contenido. El tema determina la estructura y eso es lo que obtendrás. Esto te ayudará a hacerte una idea de si el tema te servirá. 

Si hay algún inconveniente en elegir una plantilla de esta forma, es que corres el riesgo de parecerte a todos los demás que tienen un negocio de la misma actividad en tu zona. Si todos los restaurantes de Los Ángeles seleccionaran la opción «restaurantes», ¡es muy probable que acaben teniendo un aspecto similar! 

Dicho esto, no creas que tienes que limitarte a una plantilla diseñada específicamente para tu categoría. Siempre que la plantilla cuente con las características que necesitas, puedes adaptarla a tu página web.

Un consejo rápido: si utilizas la versión 7.0 y buscas algo muy versátil, Brine suele ser la mejor opción. Hay varias plantillas de la misma familia y ofrece la mayor flexibilidad y funcionalidad. Si utilizas la 7.1, no importa: todas las funciones están disponibles.

Descarga gratuita: Consigue aquí nuestros recursos para elegir temas de Squarespace

Descubre las características imprescindibles

Quizá ya sepas que hay algunas funciones muy concretas e imprescindibles que debe tener tu página web. ¡Genial! Esta es una buena forma de reducir lo que puede ser una cantidad abrumadora de opciones.

De hecho, te recomendamos que primero hagas una lista de lo que no puede faltar. Así evitarás enamorarte de una plantilla concreta y darte cuenta después de que no tiene esa función concreta que realmente te interesa.

¿Por dónde empezar? Anota un sencillo flujo de acciones que te gustaría que realizara alguien que visite tu página web. Por ejemplo, si tienes un negocio de servicios (como el creador de páginas web Squarespace), quizá quieras que los visitantes pasen de la página de inicio a la página «Quiénes somos» y, a continuación, a una página de servicios que también incluya un formulario de contacto para que puedan ponerse en contacto contigo. Se trata de un flujo muy sencillo, pero algunas personas querrán funciones adicionales, como el desplazamiento con efecto de paralaje o una galería de imágenes en forma de presentación.

Con tu lista de características preferidas, puedes buscar una plantilla que se ajuste a ellas. «I Love Creatives» ofrece una comparativa de características muy útil si te desplazas hacia abajo en esta página; o bien, «Using My Head» ofrece una comparativa más detallada aquí.

Guías de plantillas de Squarespace

Si utilizas la versión 7.0 y has elegido una plantilla de Squarespace, estas guías de plantillas son para ti. Esta página se actualizó por última vez en 2020 y contiene enlaces clave para trabajar con plantillas, realizar cambios de estilo y trabajar con cada plantilla concreta.

Si realmente no sabes qué plantilla elegir, te puede ayudar leer la guía de la plantilla que más te guste. ¡Puedes informarte sobre cada pequeño detalle antes de tomar tu decisión definitiva!

Si tienes la versión 7.1, encontrarás todos los detalles aquí. Ten en cuenta los siguientes puntos clave:

«La versión 7.1 no es compatible actualmente con:

• Cambio de plantilla: para modificar el diseño de tu sitio web, utiliza páginas prediseñadas, secciones de página personalizables y temas de estilo.

• Páginas de álbumes y galerías: en su lugar, añade bloques de audio y secciones de galería.

• Modo de desarrollador: «La plataforma para desarrolladores solo está disponible en la versión 7.0».

Tampoco es posible cambiar de versión del sitio, aunque sí se puede volver a crear un sitio de la versión 7.0 en la 7.1. 

Temas de Squarespace de terceros

¿Cuál es la mejor forma de asegurarte de que tu página web no se parezca a todas las demás? Pues bien, hay un par de opciones: 1) puedes realizar personalizaciones (o contratar a alguien para que las haga) en tu sitio web o, 2) buscar un tema de terceros; ahí es donde entramos nosotros en SQSP Themes.

Todos nuestros temas se seleccionan cuidadosamente para garantizar que cumplimos con los elevados estándares que los usuarios esperan de cualquier tema de Squarespace. Cuentan con numerosas funciones y podrás encontrar algo que se adapte a casi cualquier necesidad que tengas. 

También existe la posibilidad de añadir funcionalidades mediante diversos opciones de plugins. Por ejemplo, quizá quieras añadir una galería de vídeos, entradas y productos relacionados, contadores de tiempo o sliders de testimonios. Una ventaja de los plugins es que son fáciles de activar o desactivar, lo que significa que puedes añadir funcionalidades sin necesidad de un rediseño importante.

¿Necesitas cambiar de plantilla?

Cómo cambiar de plantilla de Squarespace 7.0 a 7.0

Cómo cambiar de plantilla de Squarespace 7.0 a 7.1

Cómo cambiar de plantilla en Squarespace de la versión 7.1 a la 7.1

Reflexiones finales

Hay algunas cosas que debes saber sobre Squarespace antes de elegir un tema, sobre todo si utilizas la versión 7.0 o la 7.1. La diferencia es importante para asegurarte de que dispondrás tanto del tema como de la función que deseas.

En general, nos encanta Squarespace por sus atractivas páginas web y sus elegantes diseños. Si sabes qué funciones necesitas, puedes elegir con total tranquilidad prácticamente cualquier plantilla que las incluya y conseguir una página web preciosa.