Botones

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre el bloque de botones
3. Documentación de Company XYZ sobre los ajustes de encabezado
4. Documentación de Company XYZ sobre los ajustes de fondo de sección
5. Documentación de Company XYZ sobre los ajustes de espaciado de sección
6. Documentación de Company XYZ sobre los ajustes de separadores
7. Documentación de Company XYZ sobre los ajustes de visibilidad
8. Documentación de Company XYZ sobre los ajustes de ancho del diseño

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Use Buttons para colocar una o más acciones claras donde los clientes necesiten un siguiente paso evidente. Funciona bien para llamadas a la acción en páginas de destino, grupos de enlaces rápidos, mensajes promocionales o accesos directos de navegación simples. Para obtener una visión general más amplia de cómo funcionan las secciones y los bloques en el editor, consulte documentación de Shopify sobre secciones y bloques

Ajustes principales

Los controles principales de la sección determinan cómo se distribuye el grupo de botones en escritorio y móvil. Los ajustes de alineación independientes le permiten mantener una presentación más amplia en escritorio mientras ajusta el diseño para pantallas más pequeñas.

Layout alterna el grupo entre una fila horizontal y una columna vertical. Las filas funcionan mejor para un conjunto pequeño de etiquetas cortas, mientras que las columnas son más fáciles de revisar cuando las etiquetas son más largas o cada acción necesita más espacio.

Cuando añade más de un botón, Button width ayuda a controlar el ritmo visual. Mantenga anchos mixtos cuando las etiquetas varíen notablemente en longitud y use anchos iguales cuando desee un grupo de botones más limpio y uniforme.

Consejo

Si los botones se sienten apretados en móvil, pruebe primero un diseño en columna antes de reducir el texto de los botones. Las acciones apiladas suelen ser más fáciles de revisar y pulsar.

Tipos de bloque admitidos

1. Button

Bloque Button

Un bloque Button añade otra acción a la sección con su propio texto, enlace, estilo, icono, comportamiento de ancho en móvil y visibilidad por dispositivo. Más información sobre el Botón.

Use bloques Button cuando quiera varias acciones en el mismo grupo, como llamadas a la acción primarias y secundarias o una breve lista de enlaces de destino. También puede ocultar botones individuales por dispositivo, lo que resulta útil cuando móvil y escritorio necesitan conjuntos de acciones ligeramente diferentes.

Si utiliza varios bloques Button juntos, mantenga clara la jerarquía visual. Una acción principal fuerte y una o dos acciones de apoyo suelen funcionar mejor que varios botones con la misma prominencia.

Ajustes específicos de la sección

Ajustes de color

Los ajustes de color reemplazan los colores predeterminados del icono, el texto y el subtítulo solo para esta sección. Son más útiles cuando añade un fondo personalizado y necesita más contraste o un tratamiento de color más intencional.

Ajuste estos colores juntos en lugar de uno por uno. Si el área del encabezado se vuelve más difícil de leer sobre el fondo, actualice primero los colores del texto y del subtítulo antes de cambiar los estilos de los botones.

Si utiliza un fondo o superposición personalizados, compruebe siempre que el texto del encabezado, los iconos y los botones sigan siendo fáciles de leer de un vistazo.

Ajustes estándar de sección

Ajustes de encabezado

Ajustes de encabezado controlan el contenido introductorio opcional encima del grupo de botones. En esta sección, también pueden incluir un botón integrado, lo que resulta útil cuando quiere un diseño sencillo de encabezado y acción sin depender solo de bloques Button.

Use el área de encabezado cuando los botones necesiten contexto, como un breve mensaje de venta o una instrucción. El botón integrado tiene su propio estilo, icono, enlace, colocación y controles de ancho en móvil, y esos ajustes solo se aplican a ese botón de nivel de sección.

Si combina el botón integrado con bloques Button, decida qué acción debe liderar. Mantenga un botón visualmente dominante para que la sección no parezca una lista de opciones en competencia.

Nota

Los botones solo con icono se reservan mejor para los casos en que el significado sea inequívoco. Las etiquetas de texto suelen ser más claras y fáciles de revisar.

Ajustes de fondo de sección

Ajustes de fondo de sección le permiten colocar el grupo de botones sobre un color, degradado, imagen o video. Esto puede convertir un área de acción simple en una sección promocional más sólida, pero los fondos también afectan la legibilidad y el espaciado.

Use fondos más claros para introducciones con mucho texto o aumente la intensidad de la superposición cuando la imagen de fondo compita con los botones. Los medios de fondo específicos para móvil pueden ayudar a mantener la sección más limpia en pantallas más pequeñas.

Ajustes de espaciado

Ajustes de espaciado controlan el espacio encima y debajo de la sección. Reduzca el espaciado cuando Buttons complementa contenido cercano, o auméntelo cuando quiera que las acciones destaquen como su propio destino.

Ajustes de separador

Ajustes de separador añaden una línea opcional encima o debajo de la sección. Use separadores cuando quiera una separación visual suave sin introducir un tratamiento de fondo completo.

Ajustes de visibilidad

Ajustes de visibilidad controlan si toda la sección aparece en escritorio, móvil o en ambos. Esto resulta útil cuando quiere una sección de acción dedicada para móvil en lugar de intentar forzar un solo diseño para todo.

Ajustes de ancho

Ajustes de ancho controlan el ancho del contenido y el ancho exterior de la sección. Los anchos de contenido más estrechos pueden hacer que un grupo pequeño de botones parezca más intencional, mientras que los anchos de sección más amplios son más eficaces cuando combina la sección con un fondo sólido.

Precaución

Los cambios de ancho pueden verse diferentes en el editor que en la página publicada, especialmente con diseños de ancho completo o full-bleed. Obtenga una vista previa de la página antes de finalizar el espaciado y la alineación.

Notas de uso

1. Mantenga breve la lista. Use esta sección para un conjunto de acciones enfocado, no para un menú largo de enlaces.
2. Ajuste el diseño a la longitud de las etiquetas. Elija una fila para textos de botón cortos y una columna cuando los botones necesiten más espacio.
3. Priorice una acción principal. Haga que el botón más importante sea visualmente el más fuerte y mantenga las acciones secundarias más discretas.
4. Revise por separado escritorio y móvil. La alineación, el ancho, la visibilidad y las opciones de medios pueden cambiar el diseño y la legibilidad de la sección entre vistas.
5. Use el estilo predeterminado de forma intencional. Los valores en blanco, transparentes o de otro modo neutros suelen conservar el estilo de reserva, mientras que los colores o medios explícitos hacen que la sección se sienta más independiente.
6. Compruebe el comportamiento de los medios antes de publicar. Si utiliza medios distintos para escritorio y móvil, confirme el recorte, la carga y la legibilidad del texto en ambos tamaños.