Aplica estilo a los encabezados nativos de Gutenberg

Usa el bloque Heading de WordPress para estructurar una página y elige su apariencia entre los helpers existentes de POM Theme. Esta guía está dirigida a editores de contenido que utilicen el tema POM Theme con el editor de bloques activado.

Elige el nivel del encabezado y su apariencia

1. Abre Pages > Add Page, o edita una página en el editor de bloques.
2. Inserta Heading y escribe el título.
3. Elige su nivel H1–H6 con los controles nativos de nivel de encabezado. Usa el nivel que se ajuste a la estructura del documento, no el tamaño de fuente que quieras.
4. Abre la barra lateral de ajustes del bloque y expande Text.
5. Elige Text size: Inherit, Heading appearance 1–6, Display 1–4, o un helper basado en rem disponible.
6. Elige Text color, Font weight, Line height y Capitalization si es necesario.

Por ejemplo, un H2 con Heading appearance 3 sigue siendo un H2 en el esquema de la página y en el HTML renderizado. Inherit usa el estilo del tema para el nivel semántico seleccionado. Los estilos Display son ajustes visuales predefinidos, no niveles de encabezado adicionales. Los grosores de fuente dependen de las fuentes instaladas en el tema.

Las selecciones de paleta guardan una ranura numerada, no un color personalizado separado. Los cambios en la paleta del tema se aplican al contenido que use esa ranura. Estos controles no generan CSS en el frontend ni estilos en línea.

Alineación, espaciado y visibilidad

Usa Text alignment en la barra de herramientas del bloque para la alineación heredada, a la izquierda, al centro, a la derecha o justificada. En Spacing and visibility, elige los helpers existentes de margen superior/inferior, opacidad en pasos del 10 %, centrado en pantallas pequeñas y los dispositivos que deben mostrar el encabezado.

Los encabezados ocultos siguen siendo editables con un indicador sombreado en el editor. La visibilidad por dispositivo solo cambia la presentación; no es una regla de permisos ni una forma de proteger contenido confidencial.

Enlaces, palabras seleccionadas y anclas

• Sigue usando los controles nativos de negrita, cursiva y enlace. Selecciona el título completo antes de añadir un enlace si todo el título debe ser clicable.
• Selecciona palabras y abre Theme text formatting directamente en la barra de herramientas flotante para aplicar colores de texto/fondo de la paleta o un helper de tamaño existente. Estas selecciones también usan clases.
• Usa Advanced > HTML anchor para un enlace de sección estable y asegúrate de que el ancla sea única en la página.
• Las transformaciones nativas entre Párrafo y Encabezado conservan los ajustes compartidos de los helpers de POM. Los contenedores de iconos de párrafo no se transfieren a un encabezado.

Heading no añade iconos de párrafo ni controles de capitular. Para un texto de apoyo sencillo, usa Paragraph. Para un subtítulo coordinado y capas decorativas, usa Compound Heading a continuación.

Líneas de título horizontales

Selecciona un encabezado y activa Title decoration > Horizontal title lines. Las líneas existentes del tema se extienden junto a su texto y siguen el color del encabezado. Esto funciona tanto para encabezados independientes como para encabezados dentro de Compound Heading. El título sigue siendo editable con las herramientas nativas de texto, enlace y nivel de encabezado.

Compón un título, un subtítulo y un título de fondo

1. Inserta Compound Heading. Empieza con un Heading nativo; no se inserta ningún subtítulo hasta que se solicite. También puedes transformar un Heading existente en Compound Heading sin volver a escribirlo.
2. Escribe el título directamente en el lienzo. Selecciona el Heading hijo para elegir su nivel semántico, tamaño visual, paleta y tipografía.
3. Selecciona el padre usando el selector de padres de la barra de herramientas o la Vista de lista. Usa Add subtitle para insertar un Paragraph nativo opcional con la apariencia de subtítulo existente.
4. Elige Composition variant: Plain title, Horizontal lines, Background title o Lines and background. La misma opción está disponible en la barra de herramientas del padre y en el panel Composition.
5. Elige la Subtitle position por encima o por debajo del título. Edit title y Edit subtitle devuelven directamente a sus controles nativos. Elimina un subtítulo no deseado a través del menú de bloque de ese Paragraph.
6. Para una variante de fondo, abre Decorative title e introduce el Background title text, su color de paleta y el grosor de fuente. También puedes editar este texto en el lienzo. Es decorativo, está oculto para los lectores de pantalla y no crea otro encabezado en el esquema del documento.
7. Usa la barra de herramientas del padre para la alineación general. Su barra lateral ofrece Center below 992px, Spacing superior/inferior, Visibility por dispositivo y Organization para el ancla HTML y las clases adicionales.

El título de fondo acepta hasta 500 caracteres de texto sin formato; los saltos de línea manuales se convierten en espacios y el texto se ajusta de forma natural al ancho disponible. Cambiar de variante lo conserva, junto con el subtítulo. La tipografía de los hijos y la alineación explícita anulan los ajustes de composición heredados. Un subtítulo es un Paragraph, de modo que los enlaces y el énfasis siguen siendo nativos y editables. El insertador normal ofrece un título y un subtítulo; el texto extra pegado se conserva y la Vista de lista puede moverlo fuera de la composición.

Compound Heading guarda HTML normal y los helpers existentes del tema. No tiene hoja de estilos ni script específicos del bloque en el frontend. Por lo tanto, los cambios de paleta y tipografía del tema siguen afectándolo sin necesidad de volver a guardar. Esto no añade fórmulas arbitrarias de tamaño de fuente en línea ni una etiqueta de encabezado no semántica; elige en su lugar los helpers de apariencia existentes.

Encabezados existentes

El formato nativo guardado previamente permanece intacto. Si aparece Previous formatting, usa Reset previous block formatting para borrar el estilo antiguo a nivel de bloque antes de cambiar a los helpers de POM. Esto no borra tu título ni sus enlaces en línea y énfasis.

Verifica antes de publicar

1. Guarda el borrador, vuelve a abrirlo y confirma que el texto y los ajustes seleccionados permanecen intactos.
2. Comprueba el esquema del documento: cambiar la apariencia no debe cambiar el nivel del encabezado.
3. Abre la vista previa del frontend y comprueba la tipografía, los enlaces, las anclas y cada opción de visibilidad por dispositivo.
4. Verifica la legibilidad frente al fondo circundante y evita saltarte niveles de encabezado por motivos visuales.
5. Para Compound Heading, comprueba también ambas posiciones del subtítulo, el color de la línea y el ajuste del texto decorativo en anchos de teléfono y tableta. Un título decorativo no debe contener información esencial que esté ausente del encabezado visible.

Si faltan los paneles, comprueba que el bloque seleccionado sea Heading y que estés usando el editor de bloques de WordPress. Si el texto conserva un color o tamaño antiguos, revisa Previous formatting y cualquier formato aplicado directamente a las palabras seleccionadas. El CSS personalizado aplicado en otro lugar también puede afectar al resultado final.

Relacionado: Aplica estilo a los párrafos, Tipografía y Clases e identificadores CSS.