¿Recuerdas usar un resaltador amarillo para marcar pasajes importantes en los libros de texto? El equivalente digital en WordPress es igual de útil para hacer que la información clave destaque en tu sitio web.
Pero muchos principiantes no se dan cuenta de lo fácil que es agregar este formato a su contenido.
A lo largo del tiempo que hemos administrado WPBeginner, hemos notado que las técnicas sencillas como el resaltado de texto a menudo marcan la mayor diferencia en cómo los lectores interactúan con el contenido.
Cuando se usa estratégicamente, el texto resaltado puede guiar a los visitantes a tus puntos más importantes y mejorar la retención del mensaje.
En esta guía, te mostraremos varios métodos sencillos para resaltar texto en WordPress.
⚡Respuesta Rápida: Cómo Resaltar Texto en WordPress
¿Tienes prisa? Consulta rápidamente las formas más sencillas de resaltar texto en WordPress:
- Usa la opción nativa de Resaltado (Método 1) si solo necesitas resaltar algunas palabras o frases en publicaciones individuales.
- Usa WPCode para agregar una clase CSS global de resaltado (Método 2) si deseas un estilo de resaltado consistente y de marca en todo tu sitio.
Por qué y cuándo resaltar texto en WordPress
Resaltar texto es una forma fácil de enfatizar información importante en tu contenido. Dirige la atención del usuario a detalles que no quieres que se pierdan.
Por ejemplo, resaltar una oferta de descuento en tu sitio web de WordPress con un color diferente atraerá la atención del lector, ayudándote a generar más ventas.
Aquí tienes una muestra de cómo podría verse el resaltado de texto en una entrada de blog:
Resaltar texto en un color diferente también puede ayudar a los usuarios con discapacidades visuales o dificultades de lectura a navegar y comprender el contenido más fácilmente. Incluso puede mejorar la apariencia de tu contenido y hacerlo más atractivo visualmente.
Sin embargo, resaltar demasiado texto en tu página puede ser una distracción y reducir su efectividad. Es por eso que recomendamos resaltar solo información importante como llamadas a la acción, advertencias y otros detalles a los que los lectores deben prestar atención.
Dicho esto, veamos cómo resaltar texto fácilmente en WordPress. Puedes usar los enlaces rápidos a continuación para saltar al método que desees usar:
- Método 1: Resaltar texto en WordPress usando el editor de bloques
- Method 2: Highlight Text in WordPress Using WPCode (Recommended)
- Extra: Usa SeedProd para resaltar páginas importantes en tu sitio web
Método 1: Resaltar texto en WordPress usando el editor de bloques
Este método es para ti si quieres resaltar texto fácilmente en WordPress usando el editor de bloques (Gutenberg).
Primero, deberás abrir una publicación existente o nueva en el editor de contenido desde la barra lateral de administración de WordPress.
Una vez allí, simplemente selecciona el texto que deseas resaltar. Luego, haz clic en el ícono de flecha hacia abajo en la barra de herramientas del bloque para ver más opciones.
Esto abrirá un menú desplegable donde deberás elegir la opción 'Resaltar' de la lista.
Ahora se abrirá una herramienta de selección de color en tu pantalla. Desde aquí, primero deberás cambiar a la pestaña 'Fondo'.
Después de eso, elige un color de resaltado predeterminado de las opciones dadas.
También puedes seleccionar un color personalizado para resaltar texto haciendo clic en la opción 'Personalizado' para lanzar una herramienta 'Cuentagotas'.
Finalmente, no olvides hacer clic en el botón 'Publicar' o 'Actualizar' para guardar tus cambios.
Ahora puedes visitar tu blog de WordPress para ver el texto resaltado en acción.
Método 2: Resaltar texto en WordPress usando WPCode (Recomendado)
Si deseas usar consistentemente un color específico para resaltar texto en todo tu sitio web de WordPress, entonces este método es para ti.
El principal beneficio de este método es el control global. Si alguna vez decides cambiar el color de resaltado, solo necesitas actualizar el fragmento de código una vez. Actualizará automáticamente el color de resaltado en todo tu sitio.
Puedes resaltar texto fácilmente en WordPress agregando código CSS a los archivos de tu tema. Sin embargo, el más mínimo error al ingresar el código podría dañar tu sitio web, haciéndolo inaccesible.
Es por eso que recomendamos usar WPCode, que es el mejor plugin de fragmentos de código de WordPress del mercado.
Después de pruebas exhaustivas, hemos descubierto que es la forma más fácil y segura de agregar código a tu sitio web sin editar directamente los archivos de tu tema. Para más detalles, consulta nuestra reseña de WPCode.
Crea un fragmento de código con WPCode
Primero, necesitas instalar y activar el plugin WPCode. Para más instrucciones, por favor consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
Nota: WPCode también tiene un plan gratuito que puedes usar para este tutorial. Sin embargo, actualizar al plan de pago desbloqueará más funciones como una biblioteca en la nube de fragmentos de código, lógica condicional inteligente y más.
Tras la activación, dirígete a la página Fragmentos de código » + Añadir fragmento desde la barra lateral de administración de WordPress.
A continuación, simplemente haz clic en el botón ‘+ Añadir fragmento personalizado’ bajo la opción ‘Añade tu código personalizado (Nuevo fragmento)’.
Luego, necesitas seleccionar un tipo de código. Para este tutorial, selecciona la opción ‘Fragmento de CSS’.
Después de eso, añade un nombre adecuado para tu fragmento de código.
Esto te llevará a la página ‘Crear fragmento personalizado’, donde puedes empezar escribiendo un nombre para tu fragmento de código.
El nombre es solo para tu referencia y puede ser cualquier cosa que te ayude a recordar para qué es el código.
A continuación, copia y pega el siguiente código en el cuadro ‘Vista previa del código’:
mark {
background-color: #ffd4a1;
}
Una vez que hayas hecho eso, añade el código hexadecimal de tu color de resaltado preferido junto a la línea background-color en el código.
En nuestro ejemplo, estamos usando #ffd4a1, que es un color marrón claro.
Después de eso, desplázate hacia abajo hasta la sección ‘Inserción’.
Desde aquí, selecciona el método ‘Inserción automática’ para ejecutar el código tras la activación.
A continuación, dirígete a la parte superior de la página y cambia el interruptor de ‘Inactivo’ a ‘Activo’.
Finalmente, haz clic en el botón ‘Guardar fragmento’ para almacenar tus cambios.
Resaltar texto en el Editor de Bloques
Ahora que el fragmento CSS se ha activado, necesitamos aplicar el formato. Dado que este es un estilo personalizado, cambiaremos brevemente a la vista HTML para un bloque específico para envolver el texto.
Primero, abre una publicación existente o nueva en el editor de bloques de WordPress.
Desde aquí, haz clic en el ícono de ‘Opciones’ en la barra de herramientas del bloque en la parte superior. Esto abrirá un nuevo menú desplegable donde debes seleccionar la opción ‘Editar como HTML’.
Ahora verás el contenido del bloque en formato HTML.
Aquí, simplemente envuelve el texto que deseas resaltar dentro de las etiquetas <mark> </mark> de esta manera:
<mark>highlighted-text</mark>
Esto resaltará el texto en el color hexadecimal que elegiste en tu fragmento de WPCode.
Después de eso, haz clic en la opción ‘Editar visualmente’ en la barra de herramientas del bloque para volver al editor visual.
Una vez que hayas terminado, haz clic en el botón ‘Actualizar’ o ‘Publicar’ para guardar tus cambios.
Ahora, puedes visitar tu sitio web para ver el texto resaltado en acción.
Extra: Usa SeedProd para resaltar páginas importantes en tu sitio web
Hemos explicado cómo formatear palabras específicas en tu contenido. Sin embargo, a veces es posible que desees resaltar secciones o páginas enteras de tu sitio, como un formulario de contacto o un cupón de regalo.
Por ejemplo, si tienes una tienda en línea y acabas de lanzar una venta de temporada, entonces podrías querer resaltar esa oferta en tu sitio web.
Puedes resaltar estas secciones creando páginas de destino para ellas. Estas son páginas independientes en tu sitio web diseñadas para generar clientes potenciales.
Para crear páginas de destino visualmente atractivas para tu sitio web, te recomendamos usar SeedProd. Es el mejor constructor de páginas de destino de WordPress del mercado que viene con un constructor de arrastrar y soltar, más de 350 plantillas prediseñadas y más de 90 bloques.
Varias de nuestras marcas asociadas han creado sus sitios web completos con él y han tenido excelentes experiencias. Para más detalles, consulta nuestra reseña de SeedProd.
El plugin facilita la creación de páginas de destino atractivas que resaltan secciones importantes de tu sitio web como un formulario de contacto, anuncio de ventas, sorteos, testimonios, formularios de suscripción, páginas de inicio de sesión y más.
Aparte de eso, también puedes usar SeedProd para crear temas personalizados, páginas de "próximamente", páginas de mantenimiento y mucho más.
Para obtener detalles, puedes ver nuestro tutorial sobre cómo crear una página de destino en WordPress.
Esperamos que esta guía te haya ayudado a aprender cómo resaltar texto en WordPress. También te puede interesar nuestra guía paso a paso sobre cómo personalizar los colores en WordPress para hacer tu sitio web más estético y nuestra comparativa de los mejores creadores de sitios web con IA para WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Resaltar texto es genial para captar la atención. Hasta ahora, solo había usado el subrayado, pero por varios comentarios en mis artículos, recibí comentarios de que algunos usuarios lo pasaban por alto. Es por eso que tiene más sentido para mí enfatizar la importancia del texto de esta manera. Usé un fragmento en el plugin WP Code y las etiquetas . Funciona muy bien, y gracias al fragmento, también pude usar un color estilizado para que coincidiera con el diseño de mi sitio web.
Mrteesurez
Mientras leía tu publicación sobre el redimensionamiento de texto, veo que es beneficioso en mi sitio web educativo, ya que me preocupo por los usuarios que podrían tener discapacidades visuales o dificultades de lectura. Resaltar texto es otra excelente manera que también puedo usar para mostrar texto importante de forma más clara a los usuarios.
¡Agradezco esta guía, gracias WPbeginner!
Dennis Muthomi
Cuando elijo un color personalizado para el resaltado, ¿cómo puedo agregar un color personalizado de mi elección para que aparezca en las 5 opciones de color predeterminadas que se muestran en la parte inferior del selector de color? Sería útil si pudiera guardar un color hexadecimal personalizado para reutilizarlo fácilmente en lugar de tener que ingresarlo manualmente cada vez.
Soporte de WPBeginner
En este momento no tenemos un método sencillo que recomendar, ¡pero si encontramos uno, nos aseguraremos de compartirlo!
Administrador
Dennis Muthomi
hola, gracias por tomarte el tiempo de responder, definitivamente estaré atento en caso de que descubras un buen método en el futuro
Jiří Vaněk
En ese caso, te recomendaría usar un constructor de páginas en su lugar. Por ejemplo, Elementor tiene una función similar y la uso en sitios web donde está instalado Elementor. Puedes configurar una paleta de colores personalizada, que Elementor recuerda, y luego usarla para resaltar.
Ralph
¡Una forma tan simple de hacer que algo destaque! ¡Genial! Esto debe estar relacionado con la personalización de mi tema, pero cuando resalto el texto en sí o el fondo, cambia la fuente. Lo cual es extraño, ya que al personalizar establecí todas las fuentes en todos los escenarios a solo 2 fuentes. La primera para encabezados y la segunda para todo lo demás. Supongo que tendré que pasar otra noche en eso.
Soporte de WPBeginner
Eso es muy extraño, te recomendaríamos que te pongas en contacto con el soporte de tu tema para ver si hay algún tipo de conflicto de estilo.
Administrador
Prakash Joshi
Hola,… gracias por la publicación. Intenté usar las herramientas de HTML de marca y del editor avanzado. Pero hay un problema. El texto resaltado se pone en negrita automáticamente. ¿Por qué está sucediendo esto? ¿Tienes alguna solución??
Soporte de WPBeginner
Si sucede automáticamente, deberías consultar con el soporte de tu tema específico para asegurarte de que no sea un conflicto con el estilo predeterminado del tema.
Administrador
Luqman khokhar
Buena publicación sobre cómo resaltar texto específico, según mi experiencia, la segunda y tercera opción están bien porque muchos complementos no son un buen enfoque. Pueden ralentizar tu sitio.
Soporte de WPBeginner
Gracias, pero el número de plugins no es el factor principal para la velocidad de tu sitio, te recomendamos echar un vistazo a nuestras recomendaciones a continuación:
https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site
Administrador