C贸mo resaltar textos en WordPress y Divi

BL C贸mo resaltar cualquier texto en WordPress y Divi

En este tutorial te explicaremos dos formas en las cuales puedes resaltar textos dentro del editor de WordPress o dentro de Divi, atentos. Si deseas destacar una parte importante de un texto en tu sitio web creado con Divi, puedes hacerlo de varias maneras. Una de ellas es mediante el uso de la propiedad CSS “mark”.

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 efecto resaltado a cualquier parte del este mismo texto. As铆 pues, en este art铆culo te explicaremos c贸mo hacer ambas formas para resaltar cualquier tipo de texto en Divi.

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

脥ndice

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.

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铆:

BL C贸mo resaltar cualquier texto en WordPress y Divi

Con ello crear谩s un texto con un resaltado completo simple. 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, lo podr谩s ver 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.

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:

BL C贸mo resaltar cualquier texto en WordPress y Divi

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:

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. 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:

BL C贸mo resaltar cualquier texto en WordPress y Divi

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. Elige la que mejor se adapte a tus necesidades y dale a tu texto el resalte que se merece.

Art铆culos relacionados

Comentarios

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

隆Registrate en nuestro pr贸ximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas m谩s frecuentes que los usuarios hacen sobre Divi, adem谩s de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
10
d铆as
10
horas
10
minutos
10
segundos
隆Registrate en nuestro pr贸ximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
10
d铆as
10
hrs
10
min
10
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
驴A煤n no eres miembro Premium 猸 de UXDivi? 隆Esta es tu oportunidad de oro! 脷nete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
10
d铆as
10
horas
10
minutos
10
segundos
25% OFF BLACK FRIDAY SALE!
10
d铆as
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
10
d铆as
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!