Tutorial WordPress: Ocultar títulos duplicados en builders con CSS (Elementor/Divi)

Introducción: por qué aparecen títulos duplicados en builders

Cuando usas constructores visuales como Elementor o Divi es habitual encontrarse con el mismo título renderizado dos veces: una vez por el tema (por ejemplo, la etiqueta entry-title generada por single.php) y otra por el módulo del builder que inserta su propio encabezado dentro del contenido. Esto causa problemas de SEO, accesibilidad y diseño. En este tutorial verás opciones limpias y prácticas para ocultar esos títulos duplicados, desde soluciones puramente CSS hasta una alternativa con JavaScript para casos más complejos.

Antes de tocar nada: ¿por qué elegir CSS o JS?

CSS: rápido, no requiere código adicional del lado servidor. Ideal cuando el DOM es predecible y basta con ocultar un selector concreto o un título cuando existe el otro.
JavaScript: necesario cuando debes comparar el texto de dos elementos y decidir ocultar uno solo si su contenido es idéntico —CSS no puede comparar texto—. También útil cuando el builder inserta los elementos en diferente orden o con clases dinámicas.
Configuración del builder/tema: siempre que sea posible, desactiva el título duplicado desde las opciones del tema o del builder (Elementor Canvas, Theme Builder, o la opción de mostrar/ocultar título en Divi o en el editor de la plantilla). Si no puedes, sigue con CSS/JS.

Inspecciona el DOM primero

Abre las herramientas de desarrollador (F12) y localiza las clases de los títulos. Ejemplos frecuentes:

Título del tema: .entry-title o h1.entry-title
Título de Elementor: .elementor-heading-title dentro de .elementor-widget-heading
Título de Divi: módulos con .et_pb_module o encabezados dentro de .et_pb_text (la clase exacta puede variar según plantilla)

Estrategias CSS: reglas simples y robustas

A continuación hay un conjunto de reglas CSS comunes que ocultan el título del tema cuando el builder ya muestra su propio encabezado. Ajusta selectores a tus clases concretas.

1) Ocultar el título del tema cuando el widget del builder está presente (ambos órdenes)

Esta solución cubre los casos en que el título del tema y el del builder están uno al lado del otro en cualquiera de los dos órdenes.

/ Ocultar entry-title si hay un heading de Elementor junto a él /
.entry-title   .elementor-widget-heading,
.elementor-widget-heading   .entry-title,
.entry-title   .wp-block,
.wp-block   .entry-title {
  display: none !important
}

/ Añade variantes para Divi si tus headings están dentro de .et_pb_module /
.entry-title   .et_pb_module,
.et_pb_module   .entry-title {
  display: none !important
}

2) Ocultar por presencia de clase del builder (más simple y fiable)

Si el builder añade una clase de contenedor a todo el contenido de la página (por ejemplo .elementor o .et_builder), puedes ocultar el título del tema solo en páginas construidas con ese builder:

/ En páginas creadas con Elementor, oculta el título del tema /
.elementor .entry-title {
  display: none !important
}

/ En páginas creadas con Divi (ajusta la clase si difiere) /
.et_builder .entry-title {
  display: none !important
}

3) Ocultar el título del builder cuando prefieres el del tema

Si prefieres mantener el título del tema y ocultar el del builder:

/ Oculta el título generado por el widget de Elementor /
.elementor .elementor-heading-title {
  display: none !important
}

/ Divi: ejemplo para ocultar encabezados dentro de módulos /
.et_builder .et_pb_module h1,
.et_builder .et_pb_module h2 {
  display: none !important
}

4) Solución basada en estado vacío o :only-child

Si tienes elementos vacíos o quieres mostrar el título solo si es único, usa selectores de CSS como :only-child o :empty:

/ Mostrar el título del tema solo si es el único encabezado en su contenedor /
.entry-title {
  display: none
}
.entry-title:only-child {
  display: block
}

/ Ocultar un título builder si está vacío (poco común) /
.elementor .elementor-heading-title:empty {
  display: none !important
}

Dónde colocar el CSS para que tenga efecto

Personalizador de WordPress: Apariencia → Personalizar → CSS Adicional.
Opciones del tema: muchas plantillas o Divi/Enfold/GeneratePress ofrecen una caja para CSS personalizado.
En Elementor: cada página o plantilla permite CSS a nivel de sección o widget (pro). También puedes usar Apariencia → Personalizar para reglas globales.
Un plugin de snippets/CSS o child theme: para mantener el CSS seguro ante actualizaciones.

Limitaciones del enfoque puramente CSS

CSS no puede comparar el texto de dos elementos. Si ambos títulos son idénticos y estás obligado a ocultar solo uno según su contenido, necesitas JavaScript.
Si el builder inserta su título con clases dinámicas o mediante JavaScript después de la carga, puede que tengas que usar selectores más específicos o recargar estilos.
El uso de !important puede ser necesario si el tema o el builder aplica reglas con alta especificidad. Úsalo con moderación.

Solución con JavaScript: comparar textos y ocultar duplicados

Si los dos títulos existen y solo quieres ocultar uno cuando su texto coincide exactamente, usa JS. Ejemplo: ocultar el título del tema .entry-title si su texto coincide con el título de Elementor .elementor-heading-title.

// Busca títulos y oculta el del tema si su texto coincide con el del builder
(function() {
  function hideDuplicateTitles() {
    var themeTitle = document.querySelector(.entry-title)
    var elementorTitle = document.querySelector(.elementor-heading-title)
    if (!themeTitle  !elementorTitle) return

    var tText = themeTitle.textContent.trim()
    var eText = elementorTitle.textContent.trim()

    if (tText  eText  tText === eText) {
      // Decide cuál ocultar: aquí ocultamos la del tema
      themeTitle.style.display = none
    }
  }

  // Ejecutar al cargar y también después de eventos de AJAX (si el builder lo usa)
  document.addEventListener(DOMContentLoaded, hideDuplicateTitles)
  // Observador para cambios dinámicos en el DOM
  var observer = new MutationObserver(function() {
    hideDuplicateTitles()
  })
  observer.observe(document.body, { childList: true, subtree: true })
})()

Incrustar el script mediante functions.php

Un método sencillo para añadir el script es imprimirlo en el pie de página desde functions.php. Ejemplo:

// Añadir al functions.php del child theme function mi_tema_ocultar_titulos_duplicados() { ?>

Buenas prácticas y consideraciones SEO y accesibilidad

Si ocultas un título visualmente con CSS (display:none), asegúrate de que no creas duplicados semánticos en el HTML que confundan a motores de búsqueda. Lo ideal es eliminar uno de los títulos en origen (tema o builder) si es posible.
Para accesibilidad, evita duplicar encabezados h1. Mantén una única jerarquía lógica de encabezados.
Si ocultas mediante CSS, recuerda que el texto sigue siendo parte del DOM y puede ser indexado. Si quieres que no se indexe, lo correcto es no imprimirlo en el HTML o usar técnicas del lado servidor.

Casos prácticos y ejemplos rápidos

Situaciones comunes y la regla recomendada:

Elementor imprime título y tema también	Usa .elementor .entry-title {display:none !important} o una regla JS que compare textos.
Divi añade título duplicado dentro de un módulo	Usa selectores que detecten .et_pb_module .entry-title o .et_builder .entry-title {display:none}
Título mostrado por blocks (Gutenberg) y por el tema	Selector tipo .entry-title .wp-block {display:none} o manejar desde plantilla.

Resumen de pasos prácticos

Inspecciona el HTML y localiza las clases de ambos títulos.
Intenta primero desactivar uno desde las opciones del tema o del builder.
Si no es posible, aplica CSS específico por builder (ej. .elementor .entry-title {display:none}).
Si necesitas comparar el texto para ocultar solo cuando sean idénticos, añade el pequeño script JavaScript mostrado.
Coloca CSS y scripts en el child theme, en el personalizador o usando un plugin de snippets para no perderlos con actualizaciones.

Conclusión

Ocultar títulos duplicados en Elementor o Divi puede ser una tarea sencilla con CSS en la mayoría de los casos. Cuando el DOM es dinámico o necesitas lógica basada en contenido (texto exactamente igual), una solución ligera en JavaScript es la opción adecuada. Siempre que sea posible, lo más limpio es evitar que el título se renderice dos veces: revisa primero las opciones del tema y del builder antes de aplicar estilos temporales.

SushiHost