Personaliza los botones de tu sitio para que coincidan con tu marca.

Utiliza los estilos del sitio para editar el aspecto de los botones de tu sitio. Puedes cambiar el color, la forma y el estilo del texto, que es una gran manera de adaptar las llamadas a la acción al diseño gráfico de tu sitio. Para ayudarte a crear un aspecto coherente, los cambios de estilo que hagas afectan a la mayoría de los botones de tu sitio.

Mira el video

Esta guía se centra en las opciones de estilo de botones de la versión 7.1. Para los botones de la versión 7.0, consulta Aplicar estilo a botones en la versión 7.0.

Forma y fuentes de los botones

Al aplicar estilo a los botones, recomendamos abrir una página con un botón para que puedas revisar los cambios en la vista previa del sitio a medida que los haces. Para aplicar estilo a los botones de tu sitio:

1. Abre Estilos del sitio y haz clic en Botones.
2. Haz clic en el tipo del botón cuyo estilo quieres cambiar: Principal, Secundario o Terciario. Para informarte mejor, revisa tipos de Botones.

Puedes configurar los siguientes ajustes para cada tipo:

• Texto. La fuente y los estilos de fuente para los botones de ese nivel.
• Forma: Establece la forma y si el botón tiene un relleno de color (Relleno) o solo un delineado (Sin relleno).
• Delineado: Establece el grosor del contorno de los botones Sin relleno. En los botones con Relleno, al cambiar el control deslizante del contorno, se cambia el relleno fuera del botón.
• Relleno horizontal: El relleno a la izquierda y a la derecha del texto del botón.
• Relleno vertical. El relleno encima y debajo del texto del botón. Este ajuste no afectará los bloques de botón establecidos en  Llenar, en las secciones del Editor dinámico.Cambia el tamaño de los bloques para agregar relleno vertical en su lugar.

Los cambios se guardan automáticamente. Para aplicar la configuración de un tipo a los otros tipos, haz clic en Aplicar a todos los tipos de botones. Para restablecer los estilos de un tipo a la configuración predeterminada, haz clic en Restablecer estilos de botones.

Ten en cuenta que, aunque puedes establecer estilos generales de forma y tamaño, todos los botones aumentan de tamaño y cambian de forma para adaptarse al texto. Si incluyes mucho texto en un botón, es posible que tenga un aspecto diferente al esperado. Para garantizar el máximo control sobre el aspecto de los botones, recomendamos mantener el texto por debajo de 25 caracteres.

Colores de los botones

Para garantizar que los botones coincidan con el diseño de tu sitio, siguen los colores globales de tu sitio.

• Establece el fondo y los colores del texto del botón en el panel Colores haciendo clic en el icono del lápiz del tema.
• Cada tipo de botón tiene sus propios ajustes para los colores de fondo y texto en cada combinación de colores, y los bloques tienen sus propios ajustes de color.
• Cuando el botón está configurado en Relleno, el color de fondo rellena el botón. Cuando está configurado como Sin relleno, el color de fondo se aplica al delineado y al texto, y rellena el botón al desplazar el cursor.
• Al usar la forma Subrayado, establece el color del texto del botón con el ajuste de fondo del botón. Establece el color de fondo del botón con el ajuste de texto del botón.
• Puedes usar diferentes colores de botones en otras secciones cambiando el tema cromático para las secciones con botones.

Para obtener más información, visita Cómo cambiar los colores.

Tipos de botones

El panel de Botones divide los estilos de los botones en tres tipos: Primario, Secundario y Terciario. Aparte de los botones de encabezado, los bloques de botones y los botones de envío de los bloques de formulario, no puedes cambiar el tipo de un botón. La mayoría de los botones siguen la configuración de estilo principal, pero puedes variar los estilos de los bloques de botones en tu sitio configurados como secundarios y terciarios.  

Esta es una excelente manera de destacar las llamadas a la acción más importantes para tus visitantes o de distinguir entre los diferentes tipos de enlaces. Usa la siguiente tabla para saber qué tipos se aplican a qué botones.

En algunos casos, ciertos ajustes no afectarán ciertos botones de tu sitio web si esto pudiese alterar el diseño de tu sitio. Por ejemplo, para conservar el diseño del bloque de newsletter, los ajustes de relleno no afectarán los botones de dicho bloque.

Para obtener información sobre cómo configurar el tipo de bloque de botones, consulta Bloques de botones.

Aplicar estilo a botones en la versión 7.0

Si tu sitio está en la versión 7.0, usa estos ajustes en todo el sitio para editar la apariencia de la mayoría de los botones:

1. Ir a una página que utilice botones.
2. Vuelve al panel Sitio web, haz clic en Diseño y luego en Estilos del sitio.
3. Desplázate hasta Botones. Para los bloques de botón, la sección se llama Bloque de botón (pequeño), (mediano) o (grande).

Utiliza los siguientes retoques:

• Estilo del botón: elige Sólido, Contorno o Relieve. Para Contorno, el texto automáticamente se muestra como blanco o negro al pasar el mouse sobre él, según el color del botón.
• Forma de botón: elige cuadrado, redondeado o píldora.
• Color del botón: Cambia el color de fondo del botón.
• Color del texto del botón: Modifica el color del texto.
• Fuente del botón: Cambia la fuente. No es posible cambiar el tamaño del texto en los botones de bloque de formulario y de newsletter.
• Alternar o (Superposición): disponible en algunas plantillas, establece colores alternativos para ayudar a que los botones de las imágenes de fondo o los colores se destaquen.

Los ajustes globales del sitio afectan a los siguientes botones:

• Botones Añadir al carrito
• Bloques de botones
• Botones del bloque de donación
• Botones Enviar del bloque de formulario
• Botones del bloque de newsletter
• Botón Bloque de registro de miembros

Hay unos pocos tipos de botones que tienen opciones de estilo distintas:

• Los botones del carrito de compras tienen diferentes opciones en ciertas plantillas.
• Los botones de la página de portada poseen opciones especiales para los botones.
• Los bloques de imágenes incluyen opciones especiales para los botones.
• El estilo de los botones de banner de la familia Bedford se modifica en la sección Banner.
• El estilo del botón de navegación del encabezado de la familia Bedford se modifica en la Navegación del sitio.
• El estilo de los botones de navegación del encabezado de la familia Brine se modifica en Encabezado: navegación principal y en Encabezado: navegación secundaria.