C贸mo resaltar textos en WordPress y Divi

Inicio / Blog / Snippets / C贸mo resaltar textos en WordPress y Divi

Autor: Jefferson M

Publicaci贸n: 18 Abr, 2023

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.

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

0 comentarios

Enviar un comentario

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

Solicitud de cancelaci贸n de suscripci贸n

Aviso importe

馃毄 Debes solicitar la cancelaci贸n de tu suscripci贸n al menos 24 horas antes de tu renovaci贸n, de otro modo, no podremos procesar a tiempo la cancelaci贸n antes de tu renovaci贸n.

Al cancelar tu suscripci贸n, perder谩s el acceso a todo esto:

馃毄 A m谩s de mil contenidos especializados en el aprendizaje del dise帽o web
馃毄 El soporte personalizado en Divi
馃毄 Acceso al grupo de Discord
馃毄 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
馃毄 Puntos y rangos obtenidos en la plataforma

鉁 Te ofrecemos la opci贸n de pausar tu suscripci贸n 2 o 3 meses y as铆 no perder谩s el progreso obtenido en la plataforma.

Lamentamos mucho 馃槱 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos env铆es lleno este formato. Esto nos ayudar谩 a poder seguir mejorando nuestra propuesta de valor y siendo 煤til para todos los usuarios.

Solicitud de cancelaci贸n

驴Por cu谩l o cu谩les razones deseas cancelar tu suscripci贸n?

驴Qu茅 caracter铆sticas mejorar铆as en nuestra web?

驴Cu谩l es tu nivel de satisfacci贸n en relaci贸n con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

驴En esta escala que tanto recomendar铆as a UXDIVI a un amigo o colega? donde 1 es "no lo recomendar铆a" y 5 es "Lo recomendar铆a totalmente"

14 + 13 =


Iniciar Sesi贸n

驴No tienes cuenta? Registrarse

Otros planes

隆Accede a m谩s de 1330 contenidos especializados en Dise帽o Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 馃敟

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

驴A qu茅 accedes con este plan?

Lifetime

Un solo pago 馃敟

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

驴A qu茅 accedes con este plan?

Con este plan accedes a:

  1. 鉁 Todos los cursos
  2. 鉁 Todos los tutoriales pr茅mium
  3. 鉁 Todos los plugins y layouts
  4. 鉁 Soporte pr茅mium v铆a email
  5. 鉁 Acceso a la comunidad en Discord

Con este plan accedes a:

  1. 鉁 Todos los cursos
  2. 鉁 Todos los tutoriales pr茅mium
  3. 鉁 Todos los plugins y layouts
  4. 鉁 Soporte pr茅mium v铆a email
  5. 鉁 Acceso a la comunidad en Discord
  6. 鉁 Descuentos en Templates para Divi