• 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

Destacar texto en WordPress

[ hace 2 meses ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

css editor

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

 
¿Aún con dudas?, en el siguiente artículo se detallan los puntos anteriores:

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar imágenes por programación en WordPressAgregar imágenes por programación en WordPress
  • Redireccionar página de error 404 al inicio en WordPressRedireccionar página de error 404 al inicio en WordPress
  • Logout menú en Easy Digital Downloads
  • Mostrar las variaciones en la lista de productos de WooCommerceMostrar las variaciones en la lista de productos de WooCommerce
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

Presentación

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

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

Ajax en WordPress de manera correcta

Eliminar el slug de la URL de un Custom Post Type

Configura el tema Twenty Twenty One WordPress

Subir archivos en WordPress usando Ajax

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