Resaltar textos en WordPress y Divi: 2 formas

Con la segunda forma también puedes insertar una clase particular dentro de un texto en HTML para lograr el mismo efecto y darle el aspecto resaltado a cualquier parte de ese mismo texto. Así pues, en este artículo te explicaré cómo hacer ambas formas para resaltar cualquier tipo de texto en Divi, desde la más simple hasta una versión más personalizada con tus propios colores.

Por qué resaltar texto mejora la lectura de tu sitio

Antes de meternos en el cómo, quiero que entiendas por qué vale la pena dominar esto. La gran mayoría de las personas no lee las páginas web palabra por palabra: las escanea, busca lo que le interesa, se detiene en lo que le llama la atención y sigue de largo. Resaltar texto es la herramienta que te permite controlar dónde se detienen esos ojos. Bien usado, un resaltado eleva una frase clave, un beneficio o una llamada a la acción por encima del resto. Mal usado es contraproducente: si resaltas medio párrafo no destacas nada, solo ensucias la lectura. La regla de oro es la moderación: resalta lo justo, las palabras que cargan el peso del mensaje, y deja que respiren rodeadas de texto normal.

Consejo: Antes de resaltar, pregúntate qué pasaría si alguien leyera solo las partes resaltadas de tu página. Si esas frases sueltas cuentan la idea central, lo estás haciendo bien. Si no dicen nada coherente, estás resaltando por estética y no por estrategia.

Creando textos resaltados con la propiedad "mark"

La propiedad "mark" de CSS permite resaltar un fragmento de texto con un fondo de color amarillo. Es muy fácil de usar y es compatible con todos los navegadores modernos. De hecho, la etiqueta mark es un elemento semántico del HTML, lo que significa que no solo cambia la apariencia visual, sino que también le comunica a los navegadores y a las tecnologías de accesibilidad que ese texto tiene una relevancia especial. Es la forma más correcta y rápida de resaltar.

Para crear texto resaltado con la propiedad "mark" en Divi, sigue estos pasos:

👉 Abre la página en la que deseas resaltar el texto en el constructor de Divi.

👉 Selecciona el módulo de texto en el que deseas resaltar el texto.

👉 Selecciona el texto que deseas resaltar y haz clic en el botón de "Formato de texto".

👉 En el menú que aparece, selecciona "Marcar" o "Mark" (dependiendo del idioma en el que estés trabajando).

👉 El texto resaltado aparecerá con un fondo amarillo claro.

O simplemente colocar el texto dentro un HTML usando este ejemplo:

<mark>Tu texto resaltado aquí</mark> 

👉 Puedes ajustar el color del resaltado mediante la propiedad "background-color" en tu archivo de CSS. Por ejemplo, si deseas cambiar el color a un tono más oscuro, puedes agregar esta regla CSS:

.mark {
   background-color: #FFC107;
}

Puedes ver un ejemplo del resultado aquí:

Con ello crearás un texto con un resaltado completo simple. Esta primera forma es ideal cuando solo necesitas el clásico subrayado amarillo y no quieres complicarte. Ahora bien, si quieres crear un efecto de texto resaltado más personalizado, y con algunos estilos de CSS más específicos, puedes seguir el segundo método, que te da control total sobre el color, el padding y la forma del resaltado. Lo verás a continuación.

Creando textos resaltados con una clase CSS en particular

Otra manera de resaltar un fragmento de texto en Divi es mediante el uso de una clase CSS particular dentro de un texto HTML. Esta técnica te permite tener más control sobre el aspecto visual del resaltado, incluyendo la elección de colores y otros estilos. La gran ventaja frente a la etiqueta mark es que puedes definir tantas variantes como quieras: un color para destacar beneficios, otro para advertencias, otro para tu marca. Cada clase es un estilo de resaltado reutilizable en todo tu sitio.

Para crear texto resaltado con una clase particular en Divi, sigue estos pasos:

👉 Abre la página en la que deseas resaltar el texto en el constructor de Divi.

👉 Selecciona el módulo de texto en el que deseas resaltar el texto.

👉 Encuentra el texto que deseas resaltar y envuelve ese texto en una etiqueta de "span".

👉 Agrega una clase a la etiqueta de "span". Puedes elegir cualquier nombre para la clase, pero asegúrate de que sea descriptivo y fácil de recordar, nosotros usamos por ejemplo: ux-resaltado-completo

<span class="clase-aqui">TEXTO RESALTADO</span>

Ejemplo usando en el tutorial:

<h1>Join Us for the Divi<span class="ux-resaltado-completo">2022 Webinar</span> Weekend!</h1>

👉 Ahora agrega una regla CSS en tu archivo de estilos para la clase que acabas de crear. Por ejemplo, si deseas resaltar el texto en amarillo de fondo, puedes agregar esta regla:

/*texto resaltado*/
.ux-resaltado-completo {
  position: relative;
  color: #ffffff;
  background-color: #49C0B6;
  font-size: inherit;
  padding: .2em .3.5em;
  border-radius: 3px;
  margin: 0 8px;
}

👉 Guarda los cambios y revisa tu sitio web. El texto resaltado debe aparecer con un fondo amarillo y un borde redondeado:

Vale la pena entender qué hace cada propiedad para adaptarlo a tu gusto. El background-color es el color del resaltado (el que cambiarías por el de tu marca), el padding da el espacio interno para que se vea como una "etiqueta" y no apretado contra las letras, el border-radius redondea las esquinas y el color define el color del texto, que conviene que contraste bien con el fondo para que se lea sin esfuerzo.

Podemos usar el mismo método para agregar resaltados a los parrafos, por ejemplo:

<span class="ux-resaltado-completo-2">Duis fringilla feugiat a potenti ornare vitae.</span> Odio donec ullamcorper commodo, morbi. 
Pharetra tristique suspendisse augue mattis amet. Habitant urna mauris lorem sed. 
Justo in amet, placerat pellentesque. Elit ac proin faucibus egestas non diam velit augue amet. 
Tortor pellentesque velit.

Y usando la siguiente regla CSS:

/*texto resaltado*/
.ux-resaltado-completo-2 {
  position: relative;
  color: #FFF;
  background-color: #ef5f5f;
  font-size: inherit;
  padding: 5px 8px;
  border-radius: 3px;
  margin: 0 0px;
}

Podemos tener un resultado práctico para el resaltado de los textos de párrafos en Divi:

Como ves, con la misma técnica y solo cambiando el nombre de la clase y el color de fondo, ya tienes dos estilos de resaltado distintos. Esa es la potencia del método: defines tu paleta una vez y la reutilizas en todo el sitio. Te recomiendo crear de dos a tres clases máximo, para no terminar con un arcoíris de colores que confunda al lector.

Consejo: Cuida siempre el contraste entre el color del texto y el color de fondo del resaltado. Un texto blanco sobre un amarillo claro es casi ilegible. Si usas fondos claros, opta por texto oscuro; si usas fondos saturados, el texto blanco funciona mejor. La accesibilidad no es opcional, es parte de un buen diseño.

Resaltado parcial en cualquier texto en Divi (bonus).

Finalmente, podemos hacer un resaltado parcial en cualquier tipo de texto dentro de Divi, simplemente debes cambiar las reglas CSS a aplicar dentro del diseño, para obtener un resultado un poco diferente. Este efecto es uno de mis favoritos porque imita el trazo de un marcador real pasado por encima de las palabras, en lugar de un bloque de color sólido. Le da un toque más editorial y orgánico, muy de moda en sitios bien diseñados. Puedes usar el siguiente HTML para estructurar el texto:

<h2><span class="ux-color-resaltado">Welcome to An Inspirational Summit</span></h2>

Ahora, aplica las siguientes reglas de CSS para darle unos estilos particulares:

/*Colores resaltados en el texto*/
.ux-color-resaltado {
    text-decoration: none;
    box-shadow: inset 0 -.7em 0 rgba(239,95,95,0.8);
    color: inherit;
}

En este caso, se usó la propiedad "box-shadow" para darle una pequeña sombra al texto, de forma que no lo cubriera por completo en su altura, sino de forma parcial, dando el siguiente resultado:

El truco está en el valor negativo del box-shadow (ese -.7em): controla qué porción de la altura del texto cubre el resaltado. Acércalo a cero para cubrir casi toda la palabra, aléjalo para un subrayado grueso en la base. Y como usamos rgba con transparencia, el resaltado deja entrever el texto debajo, reforzando la sensación de trazo hecho a mano.

Preguntas frecuentes sobre resaltar texto en Divi

¿Cuál de las dos formas debería usar para resaltar texto?

Depende de cuánto control quieras. Si solo necesitas el clásico resaltado amarillo de forma rápida, la etiqueta "mark" es perfecta y la aplicas en segundos. Si quieres definir tus propios colores, varias variantes de resaltado o efectos como el de marcador parcial, conviene usar la clase CSS personalizada. Para la mayoría de los proyectos de marca, recomiendo el método de la clase porque te da coherencia visual total.

¿Dónde pego las reglas CSS en Divi?

Tienes dos lugares principales. El más recomendado es ir a "Opciones del tema > CSS personalizado" o a las opciones del personalizador, donde el CSS se aplica a todo el sitio. También puedes pegarlo dentro de un módulo de código en una página específica si solo lo necesitas ahí. Para clases de resaltado que reutilizarás en todo tu sitio, lo mejor es ponerlas en el CSS global del tema.

¿El texto resaltado afecta el SEO de mi página?

El resaltado visual con clases CSS no afecta directamente el SEO. La etiqueta "mark", al ser semántica, sí le indica a los buscadores que ese texto tiene relevancia, lo cual es un pequeño plus. Pero lo que de verdad importa para el SEO es que tu contenido sea útil y esté bien estructurado. Usa el resaltado para mejorar la legibilidad y la experiencia del usuario, que es lo que indirectamente sí beneficia tu posicionamiento.

¿Puedo cambiar el color del resaltado por el de mi marca?

Por supuesto, y es justamente lo que te recomiendo. En cualquiera de los métodos con clase CSS solo tienes que cambiar el valor de "background-color" por el código de color de tu marca. Así tus resaltados dejan de verse genéricos y refuerzan tu identidad visual en cada página. Recuerda siempre verificar que el texto siga siendo legible sobre ese nuevo color de fondo.

Conclusiones

En resumen, crear texto resaltado en Divi es muy fácil, ya sea utilizando la propiedad CSS "mark" o mediante el uso de una clase particular. Ambas técnicas te permiten destacar un fragmento de texto importante en tu sitio web y mejorar la experiencia del usuario. La primera es ideal por su rapidez y simpleza; la segunda te abre la puerta a un control total sobre colores, formas y efectos, incluyendo el elegante resaltado parcial tipo marcador que vimos en el bonus.

Más allá de la parte técnica, recuerda siempre el principio que vimos al inicio: resaltar es guiar la mirada del lector hacia lo que de verdad importa. Úsalo con moderación y con criterio, definiendo dos o tres estilos coherentes con tu marca, y verás cómo tus textos comunican mejor y se sienten más profesionales. Elige la forma que mejor se adapte a tus necesidades y dale a tu texto el resalte que se merece.

¿Te resultó útil este tutorial? Déjame tus comentarios acá abajo y comparte el resultado que lograste. Y si quieres aprender a dominar todas las posibilidades de diseño que te ofrece Divi, te invito a dar el siguiente paso con nuestros cursos completos.

🎓 ¿Listo para crear sitios web con detalles de diseño profesionales? En uxdivi.com/cursos/ encontrarás cursos completos para dominar Divi y WordPress de principio a fin.