¿Sabes que el 95% de los que usan Elementor para textos y títulos se quedan solo en lo visual? En este artículo te voy a enseñar cómo usar los widgets de texto y encabezado de Elementor Pro no para decorar, sino para estructurar, comunicar y vender de verdad, aplicando jerarquía SEO y principios de conversión que yo uso en los proyectos de mis clientes.

Llevo desde 2017 diseñando webs profesionales con Elementor, y te lo digo claro: he visto (y cometido) el error de centrarme solo en que un título ‘quede bonito’ con una fuente especial. El cambio llegó cuando entendí que un H1 no es un ‘título grande’, es la promesa principal de la página para el usuario y para Google. Ahora, en cada proyecto, la estructura de encabezados es lo primero que planifico, antes incluso de elegir colores.

Si solo buscas cómo cambiar la letra y el color, hay mil tutoriales. Yo voy a contarte lo que no te cuentan: cómo convertir esos widgets en tu herramienta más poderosa para guiar a la gente hacia lo que quieres que hagan, ¿vale?

Widget de Texto vs. Widget de Encabezado: No es lo mismo y te lo demuestro

Lo primero que tienes que entender es que, aunque a veces parezcan intercambiables, cada uno tiene un trabajo específico. Y confundirlos es uno de los errores más comunes que veo.

¿Cuándo usar cada uno? La regla de oro

La regla es muy sencilla, pero la rompemos constantemente por pura estética. ¿Para qué sirve un widget de encabezado? Para marcar la estructura jerárquica de tu contenido. Es decir, para los H1, H2, H3, H4… Esos títulos que le dicen a Google y a tus visitantes: «esto es un capítulo importante, esto es un subcapítulo, esto es un detalle».

¿Y el widget de texto? Para todo lo demás. Para párrafos, para listas, para citas, para cualquier bloque de contenido que no sea un título estructural. El problema es que el widget de texto también te deja poner el texto muy grande y en negrita, y ahí es donde nos perdemos.

El error que cometen el 90%: usar encabezados como ‘texto decorativo’

Este es el fallo que veo todos los días. Alguien quiere una frase destacada en grande, con una fuente especial, y en vez de usar un widget de texto y darle el tamaño que quiera, arrastra un widget de encabezado y lo pone como H2 o H3. ¿Por qué es un problema? Porque estás ensuciando la jerarquía real de tu página.

Imagina que Google está leyendo tu página y ve: H1 (tu título principal), H2 (un punto clave de tu servicio), H3 (otro punto clave), H2 (una frase decorativa que dice «¡La calidad es lo primero!»), H3 (más información)… Google se hace un lío. Ya no entiende cuál es la estructura lógica de tu argumento. Y lo mismo le pasa a un usuario que usa un lector de pantalla. Has priorizado que «quede bonito» sobre que se entienda.

Mi checklist rápido para decidir

Antes de elegir un widget, pregúntate esto:

  1. ¿Esta frase es un título que introduce una sección nueva de contenido? Si la respuesta es SÍ → Widget de Encabezado. Elige el nivel (H2, H3, etc.) según su importancia dentro de la página.
  2. ¿Es simplemente un texto que quiero que destaque visualmente (una cita, un dato, un call to action)? Si la respuesta es SÍ → Widget de Texto. Luego, dentro de sus opciones de estilo, le das el tamaño, peso y color que necesites para que destaque, sin tocar la jerarquía SEO.
  3. ¿Estoy usando muchos H2/H3 seguidos solo porque quiero texto grande y en negrita? Si es así, para. Vuelve al punto 1. Estás usando la herramienta equivocada.

Si aplicas este filtro, tu código HTML será mucho más limpio y Google te lo agradecerá. No es magia, es sentido común aplicado.

La jerarquía H1 a H6: Tu mapa secreto para Google y tus visitantes

Esto es lo que transforma una página de «bonita» a «eficaz». La jerarquía de encabezados no es una sugerencia de diseño, es la columna vertebral de tu contenido. Y en Elementor, traducirlo es muy sencillo, pero hay que saber qué significa cada nivel.

H1: No es un título, es tu promesa principal (y solo debe haber uno)

El H1 es lo más importante. No es el título más grande de la página, es el título único de la página. Es la promesa que le haces al que llega. Si tu página es la de contacto, el H1 debe ser algo como «Hablemos» o «Contacta con nuestro equipo», no «Inicio». En Elementor, normalmente tu H1 principal ya viene definido por el título de la página o por el encabezado hero de tu plantilla. Asegúrate de que solo hay uno por página. Si ves dos widgets de encabezado marcados como H1, estás cometiendo un error grave de SEO.

H2 y H3: Los pilares que estructuran tu argumento de venta

Aquí es donde se construye la lógica de tu página. Imagina que estás escribiendo un libro. Los H2 son los títulos de los capítulos principales. En una página de servicios, podrían ser «Diseño Web a Medida», «SEO Técnico», «Mantenimiento WordPress». Cada uno introduce una sección amplia.

Los H3 son los subcapítulos dentro de esos capítulos. Dentro de «Diseño Web a Medida», tus H3 podrían ser «Análisis y Estrategia», «Diseño en Elementor Pro», «Optimización para Conversiones». Van anidados bajo un H2. En Elementor, cuando arrastras un widget de encabezado, simplemente seleccionas en el desplegable «HTML Tag» si es Heading 2 (H2) o Heading 3 (H3). La clave está en la planificación: antes de diseñar, ya debes saber cuáles son tus H2 y H3.

H4 a H6: Para detalles y subdivisiones, no los ignores

Son menos comunes, pero tienen su utilidad. Los uso, por ejemplo, dentro de secciones de FAQ (Preguntas Frecuantes). El H2 podría ser «Preguntas Frecuantes», cada pregunta individual sería un H3, y si una respuesta tiene partes muy diferenciadas, podría usar un H4 para subtitularlas. O en textos de blog muy largos y técnicos. La idea es que nunca saltes de un H2 directamente a un H4. La jerarquía debe ser progresiva: H1 > H2 > H3 > H4… Esto crea un mapa perfecto para los buscadores.

Si lo haces bien, no solo ayudarás a posicionar, sino que harás la página mucho más fácil de escanear para una persona que llega con prisa. Y una página que se entiende rápido, es una página que convierte mejor.

Configuración profesional de tipografía en Elementor: Más allá de ‘elegir una fuente’

Aquí es donde la mayoría se queda. Eligen una fuente que les gusta, le ponen un tamaño y color, y ya está. Pero la diferencia entre un diseño amateur y uno profesional está en los detalles que nadie ve a simple vista, pero que el cerebro sí nota. Te voy a enseñar mi proceso.

  1. Familia, peso y variantes: construyendo contraste visual. No se trata de usar tres fuentes distintas. Se trata de usar una familia (o dos como mucho) y jugar con sus pesos. Por ejemplo, yo suelo trabajar con una fuente sans-serif como Inter o Open Sans. Para los H1 y H2 uso un peso Black o ExtraBold (900, 800). Para los H3 y párrafos destacados, Bold (700). Para el texto normal, Regular (400). Y para pies de foto o detalles, Light (300). Este contraste de pesos dentro de la misma familia da una sensación de cohesión y profesionalidad brutales. En Elementor Pro, en los estilos globales del Theme Builder, defines esto una vez y se aplica a todo.

  2. Tamaño, altura de línea y espaciado: la trinidad de la legibilidad. Esto es clave. Un error común es poner un tamaño de letra muy pequeño para que entre mucho texto, o una altura de línea (line height) muy ajustada. La receta que a mí me funciona: para texto de párrafo en desktop, tamaño entre 16px y 18px. Altura de línea entre 1.5 y 1.7 (es decir, 150% a 170% del tamaño de fuente). Y un espaciado entre párrafos (margin-bottom) generoso. Esto hace que el texto «respire» y sea mucho menos agotador de leer. En móvil, subo el tamaño a 17px-19px y la altura de línea a 1.6-1.8, porque la pantalla es más pequeña.

  3. El poder del ‘kerning’ y tracking para un look premium. ¿Letter-spacing? Suena técnico, pero es como el espacio entre las letras. Fíjate en una señal de tráfico bien hecha: las letras no están apelotonadas, tienen su huequito. Eso es el tracking. En Elementor lo puedes ajustar. Mi truco: para los títulos en mayúsculas o muy gruesos, le subo un poquito el letter-spacing (0.5px, 1px). Es como darles aire para que se lean mejor y parezcan más elegantes. Para el texto normal, lo dejo como está o incluso lo aprieto un pelín (-0.1px) para que no ocupe tanto. Son ajustes de milímetros, ¿vale? Pero son los que separan un diseño hecho con prisas de uno hecho con cuidado.

  4. Cómo establecer un sistema tipográfico global (y ahorrar tiempo). La mayor ventaja de Elementor Pro. No configures cada encabezado widget a widget. Ve a Elementor > Theme Builder y define los estilos globales de tipografía. Ahí creas un sistema: asignas la familia, tamaño, peso, altura de línea, letter-spacing, etc., para los H1, H2, H3, H4, párrafos, enlaces… Luego, cuando arrastres un widget de encabezado a una página, ya heredará esos estilos. Si un día decides cambiar la fuente de todos los H2 de tu web, lo cambias en un solo sitio. Esto es impagable en proyectos grandes y te da una coherencia visual total.

Estilos de texto avanzados: Sombras, fondos y degradados que sí funcionan

Elementor te da opciones para dar efectos a los textos. El peligro es usarlas mal y que tu web parezca una página de los 90. Te digo cuándo y cómo usarlas para que sumen, no resten.

Sombras de texto: cómo usarlas sin que parezca los años 90. La sombra por defecto suele ser muy fuerte y negra. Para que quede moderna, usa colores oscuros pero no negros puros (prueba un gris muy oscuro o un azul marino), baja mucho la opacidad (entre 10% y 30%), aumenta el desenfoque (blur) y reduce el desplazamiento (horizontal y vertical) a 1px o 2px. El objetivo es que la sombra sea casi imperceptible, pero que cree una sensación sutil de profundidad y separación del fondo. Yo la uso a veces en títulos sobre imágenes, para mejorar el contraste sin necesidad de poner un fondo sólido detrás.

Fondo de texto: para destacar frases clave sin romper la lectura. Esta es una de mis favoritas. En lugar de poner un botón, puedes aplicar un fondo de color a una frase dentro de un párrafo. Por ejemplo, para resaltar un dato clave o una call to action integrada en el texto. En Elementor, dentro del widget de texto, seleccionas la palabra o frase, le das a «Texto Background» y eliges un color. La clave: que el color tenga suficiente contraste con el color del texto (blanco sobre un color oscuro, o viceversa) y que no sea demasiado grande el padding. Debe parecer un subrayado grueso y moderno, no un recuadro que rompa el ritmo de lectura.

Gradientes de texto: el efecto moderno (y cómo no pasarse). Los gradientes en el texto están de moda, pero hay que usarlos con cabeza. Funcionan mejor en titulares grandes y con fuentes gruesas. En Elementor, en el color del texto, activas la opción de gradiente. Mi consejo: usa dos tonos de la misma gama cromática (ej. dos azules) o tonos análogos (azul y violeta). Evita los contrastes extremos (rojo y verde) porque pueden vibrar y ser ilegibles. Y sobre todo, úsalos muy puntualmente, en el H1 principal o en algún título de sección clave. Si lo pones en todos los textos, pierde todo su impacto y cansa la vista.

Mi flujo de trabajo con textos en un proyecto real

Para que veas cómo aplico todo esto, te cuento paso a paso cómo abordo la parte de textos cuando diseño una web para un cliente.

  1. Paso 1: Definir la jerarquía en un documento de texto (sin Elementor). Antes de abrir WordPress, abro Google Docs o Notion. Escribo el contenido principal de la página, o al menos un esquema. Y ahí marco mentalmente (o con negritas) cuál será el H1, los H2, los H3. Me pregunto: «¿Cuál es la idea principal? ¿Qué tres o cuatro puntos clave la sustentan? ¿Qué subpuntos tiene cada uno?» Esto me da un mapa claro. Si no haces esto, te pondrás a diseñar y luego tendrás que encajar el contenido a la fuerza, rompiendo la jerarquía.

  2. Paso 2: Mapear H1, H2 y H3 en la estructura de la página. Ahora sí, entro en Elementor. Creo las secciones principales de la página (Hero, Servicios, Proceso, CTA…). En cada sección, lo primero que coloco son los widgets de encabezado correspondientes a mi esquema. Si la sección «Servicios» tiene tres servicios, pondré un H2 para el título de la sección y un H3 para cada servicio. Solo después de tener esta estructura clara, añado columnas, imágenes, iconos y widgets de texto.

  3. Paso 3: Aplicar estilos globales desde el Theme Builder. Con la estructura en bruto montada, voy a Elementor > Theme Builder y configuro mi sistema tipográfico global. Defino cómo quiero que se vean todos los H2 de mi web (fuente, tamaño, color, márgenes…). Al guardar, veo cómo mi página se actualiza automáticamente, con todos los encabezados ya estilizados y coherentes. A partir de aquí, los ajustes que hago son excepciones puntuales en alguna página concreta.

  4. Paso 4: Refinar y ajustar para responsive (mobile-first). Aquí es donde más tiempo invierto. Cambio a la vista de móvil y reviso TODOS los textos. ¿Se rompe algún título en dos líneas de forma rara? Ajusto el tamaño o el letter-spacing solo para móvil. ¿Un párrafo queda demasiado apretado? Aumento la altura de línea solo en móvil. Elementor te permite modular casi cualquier valor tipográfico de forma independiente para escritorio, tablet y móvil. No des por hecho que lo que queda bien en desktop se verá bien en el teléfono. Yo siempre empiezo a ajustar desde móvil, que es como consume la mayoría de la gente hoy.

Errores comunes y cómo solucionarlos (los que veo cada día)

Termino con los problemas con los que más me encuentro revisando webs hechas con Elementor, y cómo los arreglo.

  • «Mi H1 no cambia de estilo» – El problema de la especificidad CSS. Esto pasa cuando has aplicado estilos directamente a un widget de encabezado (por ejemplo, le has puesto un color rojo) y luego intentas cambiarlo desde los estilos globales del Theme Builder. Los estilos directos en el widget tienen más prioridad (especificidad CSS). Solución: Ve al widget problemático, en la pestaña de estilo, busca las propiedades que no se actualizan (color, fuente…) y haz clic en el icono del «pincel tachado» para restablecer ese valor específico. Así, heredará el estilo global.

  • «Los textos se ven mal en móvil» – Ajustes responsive que nadie te cuenta. No basta con reducir el tamaño. Revisa la altura de línea (line height), que a menudo se queda muy pequeña. Revisa los márgenes superior e inferior de los encabezados, que en móvil pueden quedar muy grandes o muy pequeños. Usa los controles responsive de Elementor (el icono del móvil/tablet) para ajustar cada valor de forma independiente. Y recuerda: en móvil, a veces es mejor que un título grande baje un poco de peso (de Black a Bold) para mejorar la legibilidad.

  • «He roto la jerarquía con estilos personalizados» – Cómo revertirlo. Si te das cuenta de que has usado H3 como si fueran H2 por su estilo visual, tienes dos opciones. La buena: cambiar la etiqueta HTML del widget de H3 a H2 y luego ajustar su estilo para que se vea como tú quieres (quizás más pequeño que los otros H2, pero manteniendo la jerarquía correcta). La rápida (pero menos limpia): dejar el widget como H3, pero en los estilos globales del Theme Builder, darle al H3 el aspecto visual que quieres. La jerarquía semántica será correcta (H3), aunque visualmente parezca un H2.

  • «Uso muchas fuentes diferentes» – Cómo unificar y mantener personalidad. Es el caos más común. Para arreglarlo, elige una fuente principal para todo (párrafos, H2, H3, H4…). Luego, si quieres dar personalidad, elige una sola fuente decorativa solo para el H1 principal (y quizás para algún dato muy destacado). Nunca más de dos familias en toda la web. Luego, como te decía antes, juega con los pesos, los tamaños y los colores para crear variedad dentro de la misma familia. Una paleta tipográfica limitada siempre se ve más profesional y moderna que un muestrario de fuentes.

Al final, todo se reduce a esto: Elementor te da el martillo y los clavos, pero tú eres el que tiene que saber construir la casa. Si solo usas el 10% de lo que ofrece para cambiar colores, tu web será una más del montón.

Pero si empiezas a pensar como un arquitecto de la información, planificando la jerarquía, cuidando la legibilidad y guiando a la gente paso a paso hacia lo importante, entonces sí estarás construyendo algo que vende. No es solo una cuestión de estética, es de resultados. Y te lo digo porque lo veo en los proyectos de mis clientes.

Si quieres ver cómo aplico todo esto en pantalla, de principio a fin, tengo un vídeo completo donde lo muestro, desde que abro Elementor hasta que termino una página.

Y si te ha quedado alguna duda o tienes un proyecto entre manos, ya sabes dónde estoy.

Herramientas y recursos que menciono

Algunos de estos enlaces son de afiliado: si compras a través de ellos me llevo una pequeña comisión, sin coste extra para ti.