12 formas de personalizar una plantilla en Squarespace con tu branding
Sea que ya tienes tu marca y tu identidad visual bien definidas o que estés empezando, este post te va a servir igual si quieres lanzarte a probar Squarespace pero no sabes bien cuánta flexibilidad tiene la plataforma para modificar el diseño de las plantillas... o cuán sencillo puede ser.
Si estás empezando y no tienes ni muy claro qué quieres conseguir con tu web, no tiene sentido que inviertas en un diseñador, porque lo más probable es que tu idea de negocio se vaya modificando por el camino, y tengas que rediseñar a cada rato.
Y sí, no es lo mismo un diseño bonito que un diseño estratégico y funcional, pero hay que empezar por algún lado, no?
Pero aunque estés en modo DIY con tu marca y tu blog debes tener algunas cosas definidas para no ir como pollo sin cabeza cuando te enfrentes a la tarea de personalizar tu web... eso te va a ahorrar un montón de tiempo y vas a tener algo con sentido (aunque sea mínimo) en vez de colores y tipografías bonitas sin ningún fundamento.
Antes de meterte a personalizar una plantilla, ten primero definidas algunas cuestiones básicas de tu identidad visual. Estas son, como mínimo:
un logo
tipografías (no más de dos, una para los títulos y otra para los textos)
colores
el estilo de imágenes que vas a utilizar
Todo esto lo debes definir en función del cliente ideal que quieres atraer, y debes tenerlo bien definido en un Brand Board (o Guía de Estilo). Si no sabes bien lo que es, o necesitas ayuda para crear la tuya puedes revisar este post en donde lo explico con más detalle.
Si ya estás en una fase más avanzada con tu negocio y tienes todo esto listo, pues mejor que mejor.
El editor de estilos de Squarespace
¿Sabes cómo en Wordpress en dependencia de la plantilla que tengas puedes cambiarle más o menos cosas?
Pues la buena noticia con Squarespace es que todos los temas traen predeterminadas un montón de opciones para personalizar.
Y cuando digo un montón, es un montónnnnnnn...
La inmensa mayoría se agrupan en el editor de estilos, que está en el Inicio → Diseño → Estilos del sitio.
Una vez que estás dentro, tienes dos opciones: o vas buscando en el panel las opciones que quieres modificar, o haces clic directamente en el diseño de tu web, y automáticamente se seleccionan en el panel los elementos que puedes modificar de esa selección en específico.
Ahora bien, una vez aquí ¿qué puedes empezar a hacer para que tu blog se empiece a parecer más a tu marca?
Personaliza los elementos básicos de tu identidad visual
1. añade tu logo
Lo primero que puedes hacer cuando empiezas a personalizar una plantilla, es subir tu logo. Esto lo haces en el panel Diseño→ Logo & Título.
Ahí puedes escoger dejar un título tipográfico (o sea, que sea solo texto) y después cambiarle la tipografía que escojas, o subir una imagen de tu logo. Después en el editor de estilos podrás cambiarle el tamaño y en algunas plantillas la posición en la que aparece (centrado, a un lado, encima o debajo del menú principal).
Incluso si estás apurada y no tienes nada, Squarespace te da la opción de crearte un logo muy básico haciendo clic en “crear nuevo logo”.
Te lleva a esta página, y ahí puedes jugar con algunas opciones. Y aquí tienes las principales características que deben tener un buen logotipo.
2. crea un favicon y súbelo también
Además del logo, aquí puedes subir también tu favicon, para que la experiencia con tu web sea todavía más personalizada y profesional. Deja muy mala impresión cuando ves una web con un diseño supuestamente profesional, y que tiene el favicon de la compañía de hosting en vez del de la marca.
Pequeños detalles que hacen grande al amor ;)
Para el favicon lo único que tienes que hacer es subir una versión reducida de tu logo, o un elemento que se relacione con él. El que yo uso aquí en Visual Bloom es una de las flores que acompañan el logotipo, porque hubiera sido irreconocible a ese tamañito.
3. cambia las tipografías
Otra de las cosas que me encantan de Squarespace es la cantidad de tipografías de tremendísima calidad que tiene, listas para usar. Son miles, millonessssssssssss….. ok, no tanto como millones, pero sí decenas ¡y hasta me atrevería a decir que cientos!
Se te cansa el dedo de darle a la ruedita del mouse para ver todas las tipografías que tiene Squarespace!
Las jala de Google Fonts y de Adobe Typekit, así que imagínate. Y, como ya las tiene instaladas por defecto, es una cosa menos de la que hay que preocuparse.
Sencillamente invaluable esto.
Aquí es cuando viene bien tener definidas de antemano las tipografías que vas a usar para que no te vuelvas loca con tantas opciones. Cuando llegues a esta parte, nada más que es seleccionarlas en la biblioteca de Squarespace.
Y puedes modificar las tipografías de:
el menú de navegación,
las del cuerpo de texto,
las de las etiquetas h1, h2, h3,
las del menú del footer,
las de las descripciones de las imágenes,
las de las citas…
Incluso en algunas plantillas como Brine, puedes asignar valores diferentes (tanto de tipografía, como de su tamaño y color) a los textos h1, h2 y h3 que tienes encima de los banners a página completa, para que tengan un formato diferente a los del cuerpo del texto.
Relacionado: Cómo escoger una plantilla para tu web en Squarespace.
Además de la tipografía, aquí puedes cambiar otros parámetros de la fuente como:
tamaño
color
estilo (normal, itálicas, negritas)
espaciado entre las letras (esto es muy conveniente en los textos con tamaños pequeñitos porque cuando añades un poco de espacio entre las letras se leen mejor)
si tiene alguna decoración el texto (subrayado, tachado, etc)
si quieres que por defecto esté siempre en minúsculas, en mayúsculas, en itálicas...
4. personaliza los colores
Otra de las cosas que vas a querer cambiar para que tu web vaya ganando personalidad son los colores. Ten a mano los códigos de los colores de tu marca, y ve modificándolos con el editor de estilos haciendo clic en cada circulito y poniendo tu color.
Para que tengas una idea, puedes cambiar los colores de:
las tipografías, y de los diferentes formatos de texto (h1, h2, h3)
de los enlaces (tanto de los que aparecen en el cuerpo del texto, como los del menú principal y del footer)
los fondos de página, de la barra de menú principal y del footer.
los colores de los botones (tanto el color de fondo del botón como del texto)
5. más cosas que puedes cambiar en el editor de estilos
Además de tipografías y colores hay otras cosas del diseño que puedes cambiar en el editor de estilo:
el estilo de los botones (si los quieres redondos, cuadrados, o con las esquinas redondeadas; el color y la tipografía del texto de los botones; si los quieres de color sólido, o solo con la línea del borde)
el tamaño del logo
el espacio entre el menú principal y el cuerpo (body) de la página
el ancho del menú lateral en las plantillas que lo tienen incluido
si quieres que cada página de la web tenga un banner con una imagen, o no (depende de si la plantilla que escojas trae esa opción)
o si quieres que aparezca el título de cada página, o no...
Qué puedes personalizar fuera del editor de estilos
Una vez que hayas cambiado tipografías, colores y hayas subido tu logo, la plantilla va a ir teniendo más que ver con tu marca... pero no hay que parar aquí.
Para darle una imagen todavía más personalizada, mete mano al diseño de los elementos de las páginas:
6. utiliza elementos gráficos hechos a medida
Las imágenes tienen mucha fuerza, y cuando las utilizas alineadas con tu marca ayudan mucho a que le sigas dando tu personalidad a cualquier plantilla.
Puedes usar fotografías, ilustraciones, íconos u otros elementos gráficos que le den un toque distintivo a tu web.
Por ejemplo:
Lauren, de Elle&Company, ha diseñado íconos e ilustraciones personalizados en toda su web que enriquecen la identidad visual de su marca, y los usa tanto para los opt-ins que ofrece, como para representar las diferentes categorías que tiene en su blog:
Maite Uralde, utiliza elementos gráficos junto con las fotografías que tiene en su web, y para las portadas de sus posts diseña ilustraciones a medida. Esto le da un toque distintivo y diferente… algo que está alineado con los valores de su marca personal:
En mi caso, utilizo la fotografía con unos colores y un estilo particular y también algunos elementos gráficos hechos a medida. Todo esto aleja la imagen de mi web de la plantilla genérica, y le da un toque personal que refuerza los valores de mi marca.
En este post te enseño más ejemplos de webs con un diseño auténtico y diferente hechas en Squarespace.
7. juega con el diseño de las páginas
Aunque Squarespace trae diseños predeterminados para las páginas en cada plantilla, no tienes que quedarte con ellos... es más, te recomiendo que los cambies.
Una de las maravillas de Squarespace son los bloques de contenido, que son básicamente eso: los bloques con los que vas armando la fachada de tu casa digital. Hay de muchísimos tipos y los puedes arrastrar y cambiarles el tamaño, para irlos organizando de la manera que más te convenga.
Haz clic en la imagen para verla a tamaño completo.
Los que más se suelen usar para mover el diseño de las páginas son los bloques de galerías, los de resumen, los separadores, y los de imagen. A cada uno de estos tipos de bloques les puedes tunear un montón de opciones, y lo mejor es ir probando para ver todo el potencial que tienen.
El bloque de imagen por ejemplo lo puedes utilizar para mover un poco la disposición de los elementos en una página. Por ejemplo, Caroline de Made Vibrant los usa para darle un diseño diferente a la disposición de contenidos en las entradas de su blog.
¿Quieres seguir modificando tu plantilla?
Pues sigue jugando con los bloques y combina varios al mismo tiempo.
8. añade tus redes sociales
Con Squarespace puedes vincular tus redes sociales directamente en la plataforma. Y una vez que las tienes vinculadas, pues puedes añadir un bloque de redes sociales en donde quieras. Por ejemplo, aquí voy a poner un bloque de mi cuenta de Instagram:
Personaliza todavía más
Pero si después de todo esto quieres personalizar todavía más tu sitio, pues siguen habiendo cosas en Squarespace a las que les puedes dar tu estilo!
Por ejemplo:
9. una página privada
Todas las páginas de mi curso de fotografía gratuito están protegidas por contraseña (edito: este curso ya no está disponible, pero igual he dejado el ejemplo). Esto es muy útil si tienes, por ejemplo, una biblioteca de recursos solo para usuarios registrados. Y esta página de acceso también la puedes personalizar.
Puedes ponerle tu logo, una imagen de fondo, cambiarle el texto, las tipografías y los colores.
La de Visual Bloom se ve así:
10. barra de anuncio
En Squarespace tienes la opción de agregar una barra superior en el sitio con algún anuncio que quieras destacar, o algún opt-in.
Y esta barrita también la puedes personalizar para ponerle tu color, texto, y tipografía.
11. página de checkout
Con Squarespace puedes crear una tienda online dentro de si web muy fácilmente y tiene algunas opciones para ajustar el diseño de la página de pagos. Por cuestiones de seguridad esta página no tiene tantas posibilidades de personalización como el resto del sitio, pero puedes cambiarle algunas cosas como colores y logo. La de mi web luce así:
12. y si todavía quieres más usa CSS
Aunque inicialmente te dije que aquí me iba a concentrar solo en lo que podías hacer sin tocar una línea de código, no puedo dejar de hablar del CSS.
Por supuesto, si todo lo que Squarespace te ofrece solo haciendo clic no te es suficiente, siempre puedes meter mano al código. Puedes añadir CSS que afecte todo el sitio, o solo a ciertas páginas.
Como ves, hay un montón de cosas que puedes personalizar en una plantilla de Squarespace, sin necesidad de meterte con el código, para hacerla tuya y que tenga una imagen original y que te distinga como marca. Squarespace es una plataforma que te va a dar muchísima flexibilidad y libertad para cambiar cosas en el contenido y el diseño del tu sitio sin miedo a "romperlo", o sin tener que depender de un diseñador o un programador para hacer pequeños cambios y que queden bien.
