Introducción — por qué aparece un título duplicado

Al usar page builders (Elementor, Divi, Beaver Builder, WPBakery, etc.) es habitual que la plantilla del tema y el constructor generen cada uno su propio título (H1) de página. El resultado es un título duplicado visible en la misma página: uno proviene del tema (normalmente con la clase .entry-title o .page-title) y otro lo inserta el page builder dentro del contenido. Esto afecta la estética y, en algunos casos, la experiencia de lectura. La forma más rápida y no invasiva de resolverlo es ocultar con CSS únicamente el título que no quieras mostrar, manteniendo un solo H1 visible para usuarios y buscadores.

Consideraciones previas

• Identifica cuál título eliminar: usa el inspector del navegador (F12) para localizar la clase del título que quieres ocultar — suele ser .entry-title, .page-title, o la clase del propio constructor como .elementor-heading-title.
• SEO y accesibilidad: evita eliminar ambos H1. Si prefieres mantener el H1 del tema por SEO, oculta el del builder si mantienes el del builder, oculta el del tema. Si necesitas ocultar visualmente pero conservar el texto para lectores de pantalla, utiliza una técnica de visually-hidden en lugar de display:none.
• Dónde añadir el CSS: Apariencia → Personalizar → CSS adicional, o el archivo style.css de un child theme, o un plugin de CSS personalizado.
• Uso de !important: a veces los estilos del theme o del builder tienen mayor especificidad usar !important puede ser necesario, pero úsalo con prudencia.

Pasos prácticos para ocultar el título duplicado

1. Abre la página afectada y usa el inspector para localizar la etiqueta H1 o H2 duplicada y su(s) clase(s).
2. Decide cuál de los dos títulos quieres ocultar (tema o builder).
3. Aplica un selector CSS específico (preferible sobre selectores globales) para ocultar solo en páginas donde exista el builder o solo en la página concreta.
4. Prueba en móvil y escritorio y comprueba con la herramienta de auditoría que sólo queda un H1 visible.

Ejemplos útiles — CSS listos para copiar

Los siguientes ejemplos son plantillas típicas que sirven como punto de partida. Asegúrate de inspeccionar y adaptar selectores a tu tema y constructor.

1) Ocultar el título del tema en páginas creadas con Elementor

/ Oculta el título del tema (entry-title) en páginas construidas con Elementor /
body.elementor-page .entry-title {
  display: none !important
}

/ Alternativa accesible: lo mantiene para lectores de pantalla pero lo oculta visualmente /
body.elementor-page .entry-title {
  position: absolute !important
  width: 1px !important
  height: 1px !important
  padding: 0 !important
  margin: -1px !important
  overflow: hidden !important
  clip: rect(0 0 0 0) !important
  white-space: nowrap !important
  border: 0 !important
}

2) Ocultar el título del tema en páginas hechas con Beaver Builder

/ Beaver Builder suele añadir la clase fl-builder al body /
body.fl-builder .entry-title {
  display: none !important
}

3) Ocultar el título del tema en páginas hechas con Divi

/ Divi añade .et_builder_inner_content en el contenido cuando se usa el constructor /
body.et_builder_inner_content .entry-title {
  display: none !important
}

4) Ocultar el título del builder (cuando quieres mantener el del tema)

/ Ejemplo: ocultar el título añadido por Elementor (no recomendado si quieres afectar a todos los headings) /
.elementor-widget-heading .elementor-heading-title {
  display: none !important
}

/ O con selectores más concretos: solo en páginas con la clase elementor-page /
body.elementor-page .elementor-widget-heading .elementor-heading-title {
  display: none !important
}

5) Ocultar título solo en una página concreta (por ID)

/ Cambia 42 por el ID de la página que quieras afectar /
body.page-id-42 .entry-title {
  display: none !important
}

6) Casos de títulos como hermanos (cuando uno está justo después del otro)

/ Si el título del tema y el del builder son adyacentes, se pueden usar selectores de hermano /
.entry-title   .elementor-heading-title,
.elementor-heading-title   .entry-title {
  display: none !important
}

Cómo elegir el selector correcto (guía rápida)

1. Inspecciona el H1 que quieres ocultar y copia la(s) clase(s) y/o la jerarquía DOM.
2. Si el título tiene una clase genérica del tema (.entry-title), intenta combinarla con la clase del body que indique el uso del builder (p. ej. body.elementor-page .entry-title).
3. Si la clase del builder está dentro del contenido, usa una ruta específica (p. ej. .elementor-widget-heading .elementor-heading-title), pero procura no ocultar todos los headings globalmente.
4. Prueba con la consola del inspector para ver el resultado antes de pegar el CSS en tu sitio.

Tabla rápida: selectores típicos por constructor

Constructor	Selector de ejemplo para ocultar título del tema
Elementor	body.elementor-page .entry-title
Divi	body.et_builder_inner_content .entry-title
Beaver Builder	body.fl-builder .entry-title
WPBakery / Visual Composer	inspecciona .wpb_wrapper o usa body.page-id-XX .entry-title

Buenas prácticas y recomendaciones finales

• Ser específico: evita reglas demasiado genéricas que puedan ocultar encabezados legítimos en otras partes del sitio.
• Accesibilidad: si tu objetivo es ocultar visualmente pero mantener el texto para lectores de pantalla, usa la técnica visually-hidden (ver ejemplo más arriba) en lugar de display:none.
• Probar en variantes: revisa la página a distintas resoluciones y comprueba si el builder añade clases responsive que cambien la situación.
• Documenta cambios: añade un comentario en tu CSS explicando por qué ocultas ese selector, así lo entenderás en el futuro.

Ejemplo: añadimos el CSS en el personalizador de WordPress

Ve a Apariencia → Personalizar → CSS adicional y pega la regla adaptada. Por ejemplo, para ocultar el título del tema en todas las páginas creadas con Elementor:

/ Oculta título del tema en páginas con Elementor /
body.elementor-page .entry-title {
  display: none !important
}

Notas finales

Ocultar títulos duplicados con CSS es rápido y reversible sin embargo, comprueba siempre que dejas un único H1 visible y que la solución no afecta negativamente a la accesibilidad ni al SEO. Ajusta los selectores al HTML real de tu tema y constructor — el inspector del navegador es tu mejor herramienta para ello.