12 formas de personalizar una plantilla en Squarespace con tu branding

cómo personalizar una plantilla de Squarespace para que refleje tu marca
 Aunque Squarespace trabaje con plantillas es posible personalizarlas y lograr un resultado original, auténtico y que te diferencie. ¿Y lo mejor de todo? Que puedes cambiarle un montón de cosas a la plantilla sin tocar una sola línea de código. En este post te doy las claves para que te lances a hacerte tu web en Squarespace sin miedo a parecerte a nadie. #Squarespace #diseñoweb #blog #SquarespaceEnEspañol

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.

separador.png

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, tengo algo para ti... solo haz clic en el botón para descargarla directamente (no es necesario tu correo):

banner-Brand-Board-plantilla.jpg

 

Si ya estás en una fase más avanzada con tu negocio y tienes todo esto listo, pues mejor que mejor!

Y ahora sí ¡vamos a meter mano a la obra diseñística!

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 → Editor de Estilos.

 Aquí te muestro rapidito todas las opciones que tienes en el editor de estilos de Squarespace. Si quieres ver esto más despacio, puedes ir al video original pinchando en el GIF.

Aquí te muestro rapidito todas las opciones que tienes en el editor de estilos de Squarespace. Si quieres ver esto más despacio, puedes ir al video original pinchando en el GIF.

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.

 Como ves, cuando haces clic en un área de tu web en Squarespace, se seleccionan automáticamente las opciones del diseño que puedes personalizar. Igual que con el GIF anterior, si quieres verlo a una velocidad normal pincha en la imagen. 

Como ves, cuando haces clic en un área de tu web en Squarespace, se seleccionan automáticamente las opciones del diseño que puedes personalizar. Igual que con el GIF anterior, si quieres verlo a una velocidad normal pincha en la imagen. 

Te estoy enseñando aquí estas opciones del editor de estilos para que vayas teniendo una idea de cómo funciona Squarespace por dentro, y porque esta es la parte de la administración de tu sitio en la que vas a hacer la mayoría de los cambios de diseño.

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.

 Squarespace te da la opción de crearte un logo muy básico haciendo clic en “crear nuevo logo”.

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!

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 Pacific (la que yo uso) 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.

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

 personaliza los colores en una plantilla de Squarespace

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...

cosas que 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. Por ejemplo, los separadores que ves no son los que trae Squarespace por defecto, sino una ilustración de puntos dibujados. 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 (gallery block), los de resumen (summary block), los de espacio (space block), y los de imagen (image block). 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 (de quién soy fan como ya debes haberte dado cuenta a estas alturas 😬) 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.

    Aquí tienes varios ejemplos de cosillas que he hecho con Visual Bloom:

    Squarespace trae un bloque de suscripción al newsletter predeterminado (al que, por cierto, le puedes cambiar las tipografías, colores y otros elementos del diseño en el editor de estilos). Pero yo quería añadirle algo más… 

    Combiné un bloque de imagen + el bloque de newsletter + otro bloque de imagen para incluir el separador personalizado que diseñé:

    En este otro combino una bloque de imagen (para el banner) + un bloque de formulario con la opción de modo Lightbox (para que solo se vea el botón y el formulario se abra cuando se haga clic):

    En la página sobre mí verás que todo el texto no está alineado en la misma columna. Esto se hace combinando bloques de texto con bloques de espacio:

     en la página “sobre mi” verás que el texto no está alineado en la misma columna. Esto se hace combinando bloques de texto con bloques de espacio.

    8. añade tus redes sociales

    Oh yeah... 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 (¡te digo que lo de los bloques es una locura!) en donde te dé tu florido deseo. 😎

    Por ejemplo, aquí voy a poner un bloque de mi cuenta de Instagram:

     
     
     

    Y si hay alguno que no viene por defecto en Squarespace (como el de Pinterest), pues seleccionas un bloque de código, copias el código que te da Pinterest aquí y taránnnnnn....

     

    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: esto era así inicialmente, 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.

     barra de anuncio en Squarespace

    Y esta barrita también la puedes personalizar para ponerle tu color, texto, y tipografía.

    11. página de checkout

    No sé si sabes, pero Squarespace tiene integrada la funcionalidad de tienda online. Yo esto no lo uso todavía porque no vendo ningún producto en mi web, pero si tienes una tienda o sencillamente vendes algún infoproducto, también puedes modificar el diseño de la página de checkout… no tiene taaaantas opciones como otras páginas, pero puedes cambiarle algunas cosillas.

    Para enseñarte cómo puede quedar, me puse a trastear con las opciones de la mía:

    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.

    en resumen

    Pues que hay un montón de cosas que puedes personalizar en una plantilla de Squarespace, sin meterte con el código, para hacerla tuya y que tenga una imagen original y que te distinga como marca. Y aquí ni siquiera te he hablado de todo lo que puedes hacer con la funcionalidad que tiene de crear landing pages o páginas de aterrizaje.

    Squarespace es una plataforma que te va a dar muchísima flexibilidad y libertad para cambiar cosas en 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. Por supuesto, aunque sea fácil de trastear, siempre es importante partir de un buen concepto de diseño de marca y de la web, porque sin eso solo vas a tener un blog bonito que no va a cumplir la función que debe.

     

    separador.png

    ¿quieres seguir aprendiendo sobre Squarespace?

    Suscríbete a la newsletter y recibe tips, lo último de Visual Bloom, y ofertas exclusivas para suscriptoras.

    diseño-web-Squarespace.jpg
    Importante: *
    La responsable de tus datos soy yo, Mónica Durán. Necesito estos datos para poderte enviar mi newsletter, y serán gestionados también por Mailchimp, con servidores en Estados Unidos protegidos por un Escudo de Privacidad. Podrás ejercer los derechos que tengas escribiendo a hola@visualbloom.co. Y puedes consultar más info en mi política de privacidad.