Encabezado

Enlaces destacados

1. Documentación de Company XYZ sobre iconos
2. Documentación de Company XYZ sobre ajustes de encabezado
3. Documentación de Company XYZ sobre encabezados
4. Documentación de Company XYZ sobre ajustes de color
5. Documentación de Company XYZ sobre ajustes de visibilidad
6. Documentación de Shopify sobre secciones y bloques

Videos útiles

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Use el bloque Heading para introducir contenido, dividir páginas largas y crear una jerarquía de lectura más clara. Combina un título, texto de apoyo opcional y una llamada a la acción opcional en un solo bloque flexible.

Use solo un H1 en una página. Para la mayoría de los títulos dentro de la página, elija H2 o un nivel inferior para que la estructura de la página siga siendo clara y apta para SEO.

Ajustes de encabezado

Estos ajustes dan forma al mensaje y la jerarquía del bloque. Úselos para controlar la alineación, elegir el nivel de encabezado adecuado, añadir texto de apoyo y decidir si el bloque debe incluir un botón. Para una visión general más amplia de cómo funcionan los bloques en el editor de temas, consulte la documentación de Shopify sobre secciones y bloques

Los mejores resultados suelen venir de asignar a cada capa de texto una función distinta: una leyenda breve para el contexto, un encabezado principal para el mensaje clave y un subtítulo para detalles adicionales. Si el contenido empieza a parecer repetitivo, quite la capa menos importante en lugar de rellenar todos los campos.

Los campos de icono le permiten añadir un emoji o un nombre de icono para dar más énfasis visual. Esto funciona mejor cuando el icono refuerza el significado del encabezado en lugar de actuar solo como decoración. Para orientación sobre iconos, consulte Icons.

Elija el tipo de encabezado según la posición del bloque en la página, no solo por el tamaño visual. Si necesita más ayuda para decidir la estructura del encabezado, consulte Ajustes de encabezado y la Encabezado específica del bloque.

El botón es opcional, pero útil cuando el encabezado introduce un siguiente paso, como explorar, leer más o abrir un destino destacado. Los estilos rellenos hacen que la acción sea más visible, mientras que los estilos simples o más pequeños mantienen el foco en el contenido del encabezado.

El diseño y la posición del botón importan más cuando el espacio es reducido. En móvil, mover el botón debajo del texto o hacerlo de ancho completo puede mejorar la comodidad al tocar y hacer que el bloque sea más fácil de escanear.

Consejo

Si usa un botón solo con icono, asegúrese de que el icono comunique claramente la acción. Una etiqueta de texto breve suele ser más fácil de entender de un vistazo.

Ajustes estándar de bloque

Ajustes de color

Estos colores reemplazan el estilo predeterminado del tema solo para este bloque. Úselos cuando el encabezado necesite más contraste, un acento diferente o un tratamiento más suave del texto de apoyo que el contenido circundante.

Priorice la legibilidad, especialmente si el bloque aparece sobre un fondo recargado u oscuro. Las opciones en blanco o con estilo predeterminado suelen conservar el estilo de reserva del tema, mientras que los colores o degradados explícitos hacen que el bloque se sienta más independiente del contenido circundante.

Si desea más contexto sobre los controles de color compartidos, consulte Ajustes de color.

Ajustes de visibilidad

Use los controles de visibilidad para mostrar el bloque en todos los dispositivos u ocultarlo en escritorio o móvil. Esto es útil cuando desea un tratamiento de encabezado más breve, una posición distinta del botón o una pila de contenido más simple en pantallas pequeñas.

Nota

La visibilidad específica por dispositivo funciona mejor cuando cada versión tiene un propósito claro. Evite duplicar el mismo encabezado a menos que los diseños de móvil y escritorio realmente necesiten un tratamiento de contenido diferente.

Revise las vistas de escritorio y móvil después de hacer cambios de visibilidad, ya que el diseño, la alineación y el comportamiento de los medios pueden diferir entre ventanas gráficas.

Para más información sobre el comportamiento de visibilidad compartida, consulte Ajustes de visibilidad.

Notas de uso

1. Elija el nivel de encabezado adecuado. Haga coincidir el tipo de encabezado con la estructura de la página y reserve H1 para el título principal de la página.
2. Haga que cada campo de texto tenga un propósito. Use la leyenda, el encabezado y el subtítulo solo cuando cada uno aporte un valor distinto.
3. Haga que la acción del botón sea obvia. Añada un botón solo cuando el bloque deba llevar a algún sitio y use un texto conciso que indique a los visitantes qué ocurre después.
4. Compruebe ambas ventanas gráficas. Revise los diseños de escritorio y móvil después de cambiar la alineación, la visibilidad o la posición del botón para que el bloque siga leyéndose con claridad en cada tamaño de pantalla.
5. Use las anulaciones de forma selectiva. Aplique colores personalizados, degradados o medios específicos por dispositivo solo cuando el estilo predeterminado o el diseño compartido ya no se ajusten al contenido.
6. Mantenga la legibilidad de los medios. Si usa medios separados para escritorio y móvil, asegúrese de que el recorte y el comportamiento de reserva sigan dando soporte al encabezado y a cualquier texto superpuesto.