• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Destacar texto en WordPress

Destacar texto en WordPress

[ 2 agosto 2023 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

css editor

Suscríbete a DecodeCMS:  

Usualmente cuando creamos contenido buscamos enfatizar algunos textos, podemos usar negritas, inclinados o subrayados, sin embargo existe también la opción de destacado o hightligth, en este artículo veremos como usar esta opción en WordPress.

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

Resultado final remarcado texto Gutenberg

 

Destacar texto con el editor Gutenberg

En versiones actuales de WordPress ya tiene la opción de destacar, puedes hacerlo de la siguiente forma:

  • Primero selecciona el texto que quieres resaltar
  • Luego en la barra superior despliega las opciones
  • Finalmente ubica la opción de resaltado

 

Texto en Gutenberg resaltado

 
Luego aparecerá opciones de colores tanto si quieres cambiar el color de texto como el color de fondo.

Selección de colores destacar

 

Destacar texto a través de código

La otra opción que tienes para destacar texto es usar directamente código. Puedes utilizar la etiqueta HTML mark directamente como parte del código HTML generado en el editor de WordPress.

  • En el bloque de párrafo, selecciona los tres puntos verticales
  • Luego selecciona Editar como HTML

 

Edición HTML bloque Gutenberg

 
Aparecerá el párrafo como HTML, puedes agregar la etiqueta mark al texto que quieres resaltar y luego regresar a la edición visual.

Etiqueta mark HTML en bloque

 
Ten en cuenta que en este caso dependes de los estilos del navegador o del tema que tiene para la etiqueta HTML mark. Sin embargo puedes agregar estilos personalizados, por ejemplo:

mark {
    background-color: yellow;
    color: black;
}

Puedes agregar este código como parte de tu archivo style.css de tu tema hijo

 

Conclusión

Como has podido comprobar puedes resaltar texto en WordPress de manera simple a través de las opciones del editor Gutenberg o si quieres algo más personalizado puedes hacerlo directamente con código HTML.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Quitar el menú de WooComerce en la administración de WordPress para ciertos usuariosQuitar el menú de WooComerce en la administración de WordPress para ciertos usuarios
  • Eliminar automáticamente las imágenes al borrar una entradaEliminar automáticamente las imágenes al borrar una entrada
  • Ocultar precios de productos a usuarios visitantesOcultar precios de productos a visitantes en WooCommerce
  • Deshabilitar Información de Usuarios de la REST API de WordPressDeshabilitar Información de Usuarios de la REST API de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Bryan

    12 agosto, 2023

    Hola buenas tardes, hay algún modo de poder crear una lista de favoritos para woocomerce sin plugins, mmm ya sea desde el fuctions php o sobre escribiendo algun archivo de woocomerce, saludos.

    • Jhon Marreros Guzmán

      14 agosto, 2023

      Lo que sucede es que que ese tipo de funcionalidad implica mucho código adicional, es por eso que cuando hay mucho código de por medio mejor crear un plugin con ese código.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Omnisend
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad SEO social woocommerce

Populares

Deshabilitar la REST API de WordPress

Guardar las búsquedas internas en WordPress

Deshabilitar Información de Usuarios de la REST API de WordPress

Configura el tema Twenty Twenty One WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2026 Todos los derechos reservados