Hero - Básico

Enlaces destacados

1. documentación de Shopify sobre secciones y bloques
2. documentación de Shopify sobre la personalización de secciones
3. documentación de Company XYZ sobre ajustes de color
4. documentación de Company XYZ sobre ajustes de espaciado de sección
5. documentación de Company XYZ sobre ajustes de separadores
6. documentación de Company XYZ sobre ajustes de visibilidad
7. documentación de Company XYZ sobre ajustes de anchos de diseño

Videos útiles

Vídeo de Shopify Academy: personalización de tu tienda

Vídeo de Shopify Academy: personalización de tu tienda

Hero - Basic destaca el título de la página y los detalles de apoyo clave en la parte superior de las páginas de artículos y blog. También puede incluir la imagen destacada cuando haya una disponible, lo que facilita crear un encabezado visual más sólido sin añadir bloques de contenido adicionales. Para ver una descripción general de cómo se organizan las secciones del tema, consulte documentación de Shopify sobre secciones y bloques

Ajustes principales

Estos ajustes determinan la estructura general del hero y deciden cuánta información de apoyo aparece alrededor del título.

1. La ubicación de la imagen destacada define el tono visual del encabezado. Use una imagen de fondo para un aspecto más envolvente, elija la ubicación a la izquierda o a la derecha cuando desee una separación más clara entre la imagen y el texto, o elimine la imagen por completo para un diseño editorial más sencillo.
2. La alineación del texto afecta a lo formal, dramático o legible que se percibe el encabezado. La alineación a la izquierda suele ser la más fácil de revisar para contenido de artículos, mientras que el texto centrado puede funcionar bien para una presentación más estilizada.
3. Los detalles de la página le permiten mostrar u ocultar elementos como breadcrumbs, autor, fecha, etiquetas, compartir e impresión. Active solo los detalles que ayuden a los visitantes a entender o usar la página para que el encabezado se mantenga centrado.
4. La visualización del extracto añade un breve resumen cuando existe contenido de extracto. La opción desplegable es útil cuando desea incluir más contexto sin que un resumen largo domine la parte superior de la página.

Si muestra tanto un extracto largo como varios elementos de metadatos, el hero puede quedar saturado rápidamente. Cuando el título ya es descriptivo, normalmente funciona mejor un resumen más breve.

Ajustes de color

Los ajustes de color le permiten anular el tratamiento de color predeterminado de la sección para este hero únicamente. Esto es especialmente útil cuando la imagen destacada o el tratamiento de fondo necesitan más contraste que el resto del diseño de la página. Consulte documentación de Company XYZ sobre ajustes de color.

1. Los colores del encabezado y del texto deben ajustarse juntos para que el título siga siendo el elemento más destacado mientras los detalles secundarios permanecen legibles.
2. El color del icono ayuda a que elementos de utilidad como las acciones para compartir o imprimir sigan siendo visibles sin restar protagonismo al contenido principal.
3. El color, el degradado y la opacidad de la superposición son más importantes cuando la imagen destacada se usa como fondo. Úselos para mejorar la legibilidad y, al mismo tiempo, conservar suficiente detalle de la imagen para respaldar el diseño.

Consejo

Empiece ajustando la intensidad de la superposición antes de cambiar los colores del texto. En la mayoría de los casos, una superposición bien equilibrada resuelve los problemas de legibilidad de forma más limpia que usar colores de texto demasiado claros u oscuros.

Ajustes estándar de la sección

Si desea una visión general más amplia de los controles de la sección en el editor de temas, consulte documentación de Shopify sobre la personalización de secciones

Ajustes de espaciado

Ajustes de espaciado controlan el espacio por encima y por debajo del contenido del hero en escritorio y en móvil. Use más espaciado cuando la sección incluya una imagen de fondo o un extracto, para que el encabezado se perciba intencionado en lugar de apretado. Reduzca el espaciado cuando desee un encabezado de página más compacto y centrado en la utilidad.

Ajustes de separador

Ajustes de separador le permiten añadir una línea por encima o por debajo de la sección. En este hero, los separadores funcionan bien cuando desea una separación más clara entre el encabezado de la página y el contenido circundante. Si deja transparente el color del separador, se usa el comportamiento predeterminado del color del borde del tema.

Ajustes de visibilidad

Ajustes de visibilidad controlan si la sección aparece en escritorio, en móvil o en ambos. Esto puede ayudar cuando un encabezado con mucha imagen resulta eficaz en pantallas grandes, pero demasiado alto en las más pequeñas. Asegúrese de que la página siga teniendo un contexto claro del título en cualquier dispositivo en el que el hero esté oculto.

Ajustes de ancho

Ajustes de ancho controlan el ancho máximo del contenido y el ancho exterior de la propia sección. Los anchos de contenido más estrechos pueden mejorar la legibilidad de títulos y extractos, mientras que los anchos de sección más amplios generan un mayor impacto cuando usa una imagen de fondo. Compruebe los cambios de ancho en la vista de la página en vivo siempre que sea posible, ya que el encuadre del editor puede hacer que el espaciado se perciba de forma diferente.

Notas de uso

1. Elija la ubicación de la imagen de forma intencionada. Las imágenes de fondo crean una declaración visual más fuerte, mientras que la ubicación lateral o la ausencia de imagen mantiene el título y los detalles más fáciles de revisar.
2. Sea selectivo con los detalles de apoyo. Muestre solo los metadatos y las acciones de utilidad que aporten valor real para que el encabezado no compita con el contenido de la página.
3. Use los extractos para dar contexto, no para repetir. Un buen extracto debe añadir un resumen útil en lugar de repetir el título en una forma más extensa.
4. Priorice el contraste. Cuando use una imagen de fondo, ajuste juntos la superposición y los colores del texto para que el encabezado siga siendo fácil de leer en toda el área de la imagen.
5. Revise cuidadosamente el diseño móvil. Compruebe el espaciado, la visibilidad y la longitud del extracto en pantallas más pequeñas para que el encabezado se sienta equilibrado y no empuje demasiado hacia abajo el contenido principal.
6. Compare ambas vistas. Los controles de escritorio y móvil pueden producir diferentes comportamientos de alineación, visibilidad y medios, así que revise el hero en ambos tamaños de pantalla antes de publicar.
7. Use las anulaciones locales con moderación. Los valores en blanco o de estilo predeterminado suelen conservar el estilo de reserva, mientras que los colores, degradados o elecciones de medios explícitos hacen que este hero se sienta más independiente del resto de la página.