Cómo añadir un botón personalizado en Squarespace

El botón de acción (CTA) es el elemento de mayor valor en una página de destino, ya que cada visitante que diriges al proceso de pago, a un formulario de contacto o a un recurso descargable tiene que hacer clic en uno para llegar allí. Y un botón que destaca de la sección que lo rodea — con su propio color, un icono o un efecto hover — obtiene una tasa de clics notablemente mejor que uno que pasa desapercibido.

Squarespace cuenta con un bloque de botón nativo, pero su estilo se configura desde el panel global de Estilos del sitio en lugar de seleccionar el botón directamente. Los botones vienen en tres tipos: primario, secundario y terciario. Cada tipo se aplica de forma uniforme en todo tu sitio, por lo que dispones de tres diseños de botón en total. Cambiar el estilo de un botón primario afecta a todos los botones primarios que tengas, y lo mismo ocurre con los tipos secundario y terciario. Además, las opciones de configuración son limitadas por sí solas, sin posibilidad de añadir iconos, efectos hover ni degradados.

Existen dos formas de darle a un botón su propio diseño sin modificar todos los demás botones de tu sitio. Puedes escribir o comprar CSS personalizado y pegarlo en tu panel de CSS personalizado para apuntar a ese bloque específico, o puedes usar un widget alojado gratuito, diseñar el botón en un constructor visual y pegar el código de inserción en un bloque de código.

Si eres propietario de un sitio en Squarespace, especialista en marketing o diseñador que quiere un botón CTA personalizado en Squarespace sin escribir CSS ni pagar a un desarrollador por un fragmento de código, esta guía te explica cómo añadir un botón en Squarespace usando ambos métodos — empezando por el método CSS y luego el widget.

Opción 1: Usar bloques nativos con fragmentos de CSS personalizado

La forma estándar de conseguir un diseño de botón único en una página de Squarespace es añadir el bloque de botón nativo y luego sobrescribir su estilo con tu propio CSS. Squarespace dispone de un panel de CSS personalizado para ello, y apuntar a un solo bloque por su ID mantiene el cambio en un único botón en lugar de afectar a todos los botones de su tipo.

A continuación te explicamos cómo añadir un botón en Squarespace con CSS personalizado:

1. Abre la página en tu editor, pasa el cursor sobre la sección donde quieres añadir el botón, haz clic en Add Block y selecciona Button.

2. Haz clic en el icono de lápiz o haz doble clic en el botón para establecer tu texto y enlace. Elige primario, secundario o terciario, y luego haz clic en Save en la esquina superior izquierda.

3. A continuación, encuentra el ID del bloque. Cada bloque en una página de Squarespace tiene un ID único, y colocarlo delante de tu CSS limita el cambio a ese único botón en lugar de aplicarlo a todos los botones de su tipo. Puedes encontrarlo inspeccionando la página en tu navegador, haciendo clic derecho en el bloque y seleccionando Inspect, o usando una de las extensiones gratuitas de navegador para encontrar IDs en Squarespace. 

4. Fuera de tu editor, ve a Website en la barra lateral, haz clic en Pages, luego en Custom Code y selecciona Custom CSS.

5. Escribe y guarda tus reglas — apunta a ese ID de bloque y luego haz clic en Save. Los estilos propios de Squarespace son lo suficientemente específicos como para que a menudo necesites añadir !important para que los tuyos surtan efecto. Una vez guardado, ese único botón se verá como deseas mientras que todos los demás botones de tu sitio permanecerán tal como estaban.

Equivocarse en la segmentación es el problema más común, ya que un fragmento de código escrito para “.sqs-block-button-element” sin un ID de bloque delante cambia el estilo de todos los botones nativos de tu sitio, incluido el botón CTA del encabezado y los botones de pago. Otro problema frecuente es cómo se visualiza en móvil — anchos fijos y tamaños de fuente grandes que se ven bien en escritorio pueden empujar el botón fuera de la pantalla del teléfono o dividir el texto en líneas de una sola letra.

Los fragmentos de código son bastante fáciles de encontrar, y los diseñadores de Squarespace publican muchos de forma gratuita en sus blogs, aunque los efectos hover y de animación más elaborados suelen venderse como complementos de pago. En cualquier caso, estás pegando código que no escribiste en un panel que afecta a todo tu sitio, y tendrás que depurarlo por tu cuenta si algo no se ve bien.

Opción 2: Añadir un widget de botón personalizable y gratuito (recomendado)

Crear el botón en una herramienta independiente es la alternativa al CSS personalizado en Squarespace, ya que estás colocando un nuevo botón en la página en lugar de sobrescribir el estilo de uno nativo. Aquí, configuras el botón en un constructor visual, copias el código de inserción y lo pegas en un bloque de código en tu página.

Antes de empezar, comprueba tu plan de Squarespace. Añadir un código de inserción en un bloque de código es una función premium que requiere el plan Core o superior. Con el plan básico, el código permanece en el bloque pero no funciona.

En cuanto a qué widget elegir, el Widget de Botón de Jotform es un widget de botón gratuito para Squarespace que te ofrece más control visual que el bloque nativo. Puedes personalizar los colores de fondo, texto y hover de forma independiente, añadir un icono antes o después de la etiqueta, y ajustar el radio de las esquinas, la altura, el relleno, el tamaño del texto y la sombra. 

A continuación te explicamos cómo añadir un botón en Squarespace usando el widget:

1. En tu página de Workspace de Jotform, haz clic en Create, selecciona Website Widget, busca “Button” y luego haz clic en Use Widget.

2. En la pestaña General, elige qué hace el botón — ya sea abrir una página web, iniciar un correo electrónico o abrir un chat de WhatsApp — y luego introduce la URL del enlace y la etiqueta del botón. Cambia a la pestaña Style para colores, iconos y formas, y luego a la pestaña Layout para elegir si el botón es en línea o flotante y si aparece en escritorio, móvil o ambos.

3. Haz clic en Publish y luego haz clic en Copy Code en la sección Embed. 

4. En tu editor de Squarespace, haz clic en Add Block, elige Code, establece el modo del bloque en HTML, elimina el texto de marcador de posición, pega tu código y haz clic en Save.

Dado que el botón se estiliza en Jotform en lugar de en tu panel de CSS personalizado, no entrará en conflicto con tus Estilos del sitio globales, y tus cambios no afectarán a otros botones de tu sitio. Probar un color o una etiqueta diferente significa editar el widget en lugar de buscar un ID de bloque y reescribir un fragmento de código.

Potencia tu sitio de Squarespace con widgets inteligentes y sin servidor

Como especialista en marketing, propietario de un sitio o diseñador, tu tiempo es demasiado valioso para gastarlo rastreando un ID de bloque solo para que un botón CTA se vea diferente al resto de tu sitio. Un widget de botón resuelve eso en pocos minutos, y puedes cambiar su estilo más adelante sin volver a tocar tu panel de CSS personalizado.

Un botón es solo una de las muchas cosas que puedes añadir a una página de Squarespace sin un fragmento de código ni un complemento de pago. El directorio de widgets gratuitos para sitios web de Jotform cuenta con más de 150 opciones, incluyendo

• Un temporizador de cuenta regresiva para un lanzamiento o una fecha límite de inscripción, creando urgencia que un botón estático no puede generar
• Un popup para la oferta de registro que de otro modo necesitarías un complemento premium para ejecutar
• Un feed de redes sociales que mantiene tus últimas publicaciones en la página, para que un sitio que actualizas de vez en cuando siga pareciendo actual

Cada uno se inserta a través de un bloque de código de la misma manera que el botón. Esto significa que no necesitas comprar otro fragmento de código ni complemento cada vez que quieras añadir un elemento más a una página.

Si todavía estás creando un sitio web o planificando una reconstrucción, vale la pena saber qué elementos puedes añadir más adelante sin necesidad de un desarrollador. La integración de Jotform con Squarespace inserta formularios en tu sitio de la misma manera, de modo que un botón que dirige a las personas a una página de registro puede conectar con el formulario que recopila su información.

Sin importar qué alternativa de botón de acción elijas en Squarespace, un botón que destaque vale más que uno que se mimetiza con todo lo demás en la página. El widget es simplemente una forma más rápida y económica de conseguir el clic.