Encabezado

Enlaces destacados

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

Videos útiles

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

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

Use esta sección para añadir un encabezado con estilo en cualquier lugar donde necesite un corte de contenido más claro, una introducción más sólida o una simple llamada a la acción. Es especialmente útil en páginas de destino y diseños de formato largo, donde la estructura de los encabezados ayuda a los visitantes a recorrer la página. Para una visión general más amplia de cómo se construyen las secciones, consulte documentación de Shopify sobre secciones y bloques

Use solo un H1 en una página. Si la página ya tiene un título principal, elija aquí H2 o un nivel inferior.

Ajustes de color

Estos ajustes anulan los colores habituales del tema solo para esta área del encabezado. Son más útiles cuando la sección se sitúa sobre un fondo personalizado o necesita un contraste más fuerte que el de la página circundante.

Ajuste juntos los colores del icono, del texto del encabezado y del subtítulo para que la sección tenga una intención clara. Si usa colores más claros o apagados, prévisualícelos tanto en móvil como en escritorio para asegurarse de que el texto siga leyéndose con comodidad.

Ajustes estándar de sección

Ajustes de encabezado

Ajustes de encabezado controlan el contenido y el diseño de esta sección, incluida la alineación, el icono, el subtítulo, el encabezado, el subencabezado y el botón opcional. Úselos para crear desde un simple título de sección hasta un bloque de introducción más promocional. Para ver los detalles de configuración en el editor, consulte documentación de Shopify sobre el editor de temas

Elija el tipo de encabezado según la estructura de la página, no solo por su apariencia. Use el subtítulo para dar un contexto breve, el subencabezado para un texto de apoyo breve y el botón solo cuando exista un siguiente paso claro para el visitante.

Si añade un botón, preste atención a su posición en escritorio y móvil. Colocarlo debajo del texto puede crear un flujo de lectura más limpio, mientras que un botón de ancho completo en móvil puede facilitar pulsar la acción.

Ajustes de espaciado

Ajustes de espaciado controlan el espacio superior e inferior del encabezado. Use más espaciado cuando el encabezado deba destacar por sí solo y menos cuando deba mantenerse visualmente unido al contenido cercano.

Un espaciado distinto para escritorio y móvil puede ayudar a que la sección se vea equilibrada en todos los dispositivos. Si el encabezado incluye un subtítulo o un botón, deje suficiente espacio para que el contenido no se sienta apretado.

Ajustes de fondo de sección

Ajustes de fondo de sección le permiten situar el encabezado sobre un fondo de color, degradado, imagen o vídeo. Esto puede convertir un encabezado sencillo en un divisor visual más sólido o en una introducción con estilo de banner.

Los overlays son útiles cuando el texto se sitúa sobre contenido multimedia y necesita mejor contraste. Como los fondos pueden cambiar la sensación del espaciado y el ancho, previsualice la sección en varios tamaños de pantalla antes de publicarla.

Precaución

Las imágenes recargadas o los fondos de vídeo pueden dificultar la lectura de los encabezados. Si la claridad disminuye, use un overlay o cambie a un fondo más sencillo.

Ajustes de separador

Ajustes de separador añaden una línea encima o debajo de la sección. Funcionan bien cuando desea un límite de contenido más limpio sin añadir más texto ni más espaciado.

Normalmente, un separador sencillo es suficiente para los encabezados. Si la página ya tiene divisiones visuales marcadas, use los separadores con moderación para evitar el desorden.

Ajustes de visibilidad

Ajustes de visibilidad controlan si este encabezado aparece en escritorio, móvil o en ambos. Esto es útil cuando desea tratamientos de encabezado diferentes para tamaños de dispositivo distintos.

Si oculta la sección en un dispositivo, asegúrese de que los visitantes sigan viendo allí un encabezado claro y cualquier contexto esencial. Evite usar cambios de visibilidad de formas que rompan la jerarquía del contenido de la página.

Ajustes de ancho

Ajustes de ancho controlan el ancho máximo del contenido y el ancho de la propia sección. Los anchos de contenido más estrechos suelen mejorar la legibilidad, mientras que los anchos de sección más amplios son más visibles cuando usa un fondo.

Use el ancho del contenido para que las líneas del encabezado y del subtítulo resulten cómodas de leer. Use el ancho de la sección cuando quiera que el tratamiento de fondo se mantenga contenido o se extienda más por la página.

Nota

Los cambios de ancho pueden verse diferentes en el editor que en la página publicada. Compruebe la vista previa de la página antes de finalizarlos.

Notas de uso

1. Mantenga lógicos los niveles de encabezado. Use H1 solo para el título principal de la página y use niveles inferiores para preservar una jerarquía de contenido clara.
2. Separe el mensaje del detalle. Ponga la idea principal en el encabezado, use el subtítulo para dar un contexto ligero y mantenga el subencabezado breve y de apoyo.
3. Use los botones con intención. Añada un botón solo cuando el encabezado deba conducir a una acción siguiente clara, y revise su posición en móvil antes de publicar.
4. Diseñe primero para la legibilidad. Cuando use colores personalizados o fondos multimedia, compruebe el contraste con cuidado para que el encabezado siga siendo fácil de leer.
5. Equilibre juntos el espaciado y el ancho. Ajuste el espaciado y el ancho como un par para que la sección no se vea ni apretada ni desconectada del contenido que la rodea.
6. Revise ambas vistas de dispositivo. Los controles de escritorio y móvil pueden afectar de forma diferente a la alineación, la visibilidad y el comportamiento del contenido multimedia, así que revise la sección en ambas vistas antes de publicar.
7. Considere las anulaciones como un compromiso más firme. Los valores vacíos o con estilo predeterminado suelen conservar el estilo circundante, mientras que los colores explícitos, los degradados o las opciones multimedia hacen que el área del encabezado se perciba más independiente.
8. Compruebe la legibilidad del contenido multimedia. Si usa contenido multimedia distinto para escritorio y móvil, revise el recorte, la carga, la reserva y la legibilidad del texto en cada tamaño de pantalla.