5 formas de crear y editar botones y enlaces en Squarespace

6 dic

Todo lo que debes saber sobre enlazar y crear botones en tu web. Actualizado versiones 7.0 y 7.1.

Colocar un botón en tu web debe ser una tarea que te resulte súper fácil pues es una función que estarás usando constantemente.

Ya sea que quieras enlazar a otra página dentro de tu web o que quieras llevar a tus visitantes a otro sitio, en diseño web estaremos siempre usando un montón de botones pues es la forma en que haremos efectiva cualquier llamada a la acción. Básicamente, queremos que nuestros visitantes hagan click.

Así que el día de hoy te traigo un tutorial con 5 formas que tienes para crear botones y colocar enlaces en tu web en Squarespace, cómo editar su apariencia ya sea que tu web se encuentre en la versión 7.0 o la 7.1, y algunos tips y mejores prácticas.

Para el BLOG

Cómo funcionan los enlaces en Squarespace

Independientemente del tipo de botón que utilices, encontrarás que al hacer click en la “tuerquita de configuración” aparecerán las siguientes alternativas:

Enlazar a una dirección web fuera de tu sitio
Enlazar a una página dentro de tu sitio
Enlazar a tu correo electrónico (para que se abra en outlook)
Enlazar a un teléfono
Enlazar a un archivo que puedes alojar directamente en tu web (checa este tutorial)

Y en cualquiera de estos casos puedes señalar, si deseas, que el enlace abra en la misma ventana del navegador o en una nueva. Como regla general (que a veces podría romperse por alguna razón estratégica), los enlaces que lleven a otra página en tu mismo sitio web deberían abrirse en la misma ventana, los enlaces que apunten a otro sitio web deberían abrirse en una nueva ventana del navegador.

1 Bloque de botón en Squarespace

¿Cómo funciona el bloque básico de botón? Con este bloque puedes crear botones en 3 tamaños y alinearlos hacia la derecha, a la izquierda o al centro.

Sigue el tutorial en el video en el minuto 00:37

En la versión 7.0 podrás asignar un estilo diferente a cada botón (desde DISEÑO > ESTILO DEL SITIO), sin embargo, aunque se aprecia la flexibilidad, mi recomendación es que no les asignes un estilo totalmente diferente ya que en diseño, mantener la consistencia y coherencia es importante.

Ejemplo de bloques de botón en Squarespace:

Botón grande

Botón mediano

Botón chico

En la versión 7.1 el mismo estilo deberá mantenerse igual en los botones, excepto por el tamaño, a menos que utilices código CSS. Sin embargo, como te explico en el video, esto no es necesariamente algo malo, de hecho te ayudará a mantener una buena práctica de diseño en tu web. Para editar el estilo debes ir a DISEÑO > BOTONES. El color cambiará según el tema de la sección y eso puedes ajustarlo en DISEÑO > COLORES >TEMAS DE SECCIÓN.

2 Enlaces en el bloque de texto

Puedes enlazar palabras dentro de un texto, por ejemplo estas palabras son un enlace. Esto lo haces dentro del propio bloque de texto.

Sigue el tutorial en el video en el minuto 11:03

Para cambiar el color del enlace de texto en la versión 7.0, dirígete a DISEÑO > ESTILOS DE LA PÁGINA > pasa el color sobre el bloque de texto y encontrarás la opción de editar el color.

Para cambiar el color del enlace de texto en la versión 7.1, dirígete a DISEÑO > COLORES > identifica el tema de la sección y haz scroll al apartado de ENLACES para cambiar el color.

3 Botones en bloques de diseño de imagen

Los diseños de imagen que ofrece Squarespace nos permiten crear diseños muy dinámicos que podemos acompañar con una llamada a la acción si colocamos un botón.

Sigue el tutorial en el video en el minuto 14:34

Ejemplo de un bloque de imagen con diseño de tarjeta en Squarespace:

Esta es una tarjeta

Aquí puedes colocar texto.

Llamada a la acción

Para colocar un enlace en este tipo de bloques, dale click a EDITAR el bloque, bajo el apartado de DISEÑO haz scroll para decidir si quieres añadir un ENLACE EN LA IMAGEN, ya sea directamente en la imagen o añadiendo un botón.

En la versión 7.0 tienes mucha flexibilidad para editar la apariencia del botón, sin embargo, procura mantener una congruencia en el diseño los botones de toda tu web. Para cambiar el estilo, dirígete a DISEÑO > ESTILO DEL SITIO > y pasa el cursor para resaltar el bloque de imagen completo (no sólo el botón) y darás con las distintas opciones disponibles).

En la versión 7.1, este botón tomará la configuración que hayas asignado al bloque de botón. Si quieres algo diferente, tendrás que aplicar código CSS.

4 Colocar un botón en tu menú de navegación

Esto es algo que varía muchísimo de versión 7.0 a la 7.1 y también entre las plantillas de la versión 7.0, en el tutorial el ejemplo que doy es usando la plantilla BRINE (la familia de plantillas que más recomiendo de esta versión.

Sigue el tutorial en el video en el minuto 18:38

Para colocar un botón en el menú de navegación en BRINE squarespace 7.0

Asegúrate de colocar la página (o páginas) que quieres destacar en tu navegación secundaria y luego en DISEÑO > ESTILOS DEL SITIO > pasa el cursor por dicho enlace y señala que quieres convertirlo en botón. Luego podrás cambiar la apariencia con las opciones que encontrarás.

Para colocar un botón en el menú de navegación en Squarespace 7.1 (cualquier plantilla)

Desde cualquier página, haz click en EDITAR> EDITAR ENCABEZADO DEL SITIO > ELEMENTOS y activa el botón.

El estilo del botón tomará la configuración que hayas asignado a los botones del bloque de botón. Sin embargo, puedes seleccionar entre el tamaño del grande, mediano o chico y asignar un tipo de letra diferente desde DISEÑO > ASIGNAR ESTILOS > BOTÓN DEL ENCABEZADO.