Lección 03

¿Cómo subrayar y justificar texto en WordPress?

WordPress, a partir de la versión 4.7 en diciembre de 2016, por alguna razón que muchos diseñadores desconocemos, dejó de mostrar los botones de subrayado y justificar texto en su editor de texto.

En esta lección te mostraré algunas alternativas para recuperar estas funciones que pueden llegar a ser muy útiles en el desarrollo de nuestro sitio web.

Índice del contenido
    Add a header to begin generating the table of contents

    1. Justificar y subrayar texto mediante HTML

    Si no eres amante de instalar plugins en WordPress, siempre puedes utilizar algunas reglas HTML y CSS.

    La verdad es que es mucho más limpio que utilizar plugins (menos código en tu sitio web) pero también es más tedioso si lo vas a utilizar en tu proyecto repetidamente.

    A partir de la versión 5.0 de WordPress, el editor clásico ha sido sustituido por el editor de contenidos Gutenberg.

    Ahora Gutenberg trabaja con bloques. Sin embargo, uno de estos bloques llamado Clásico, simula el editor de texto que existía en WordPress inicialmente.

    Veamos las siguientes imágenes:

    Editor de texto antiguo de WordPress
    Editor de texto antiguo de WordPress
    Editor de texto de WordPress con Gutenberg
    Editor de texto de WordPress con Gutenberg

    Como puedes apreciar en las imágenes, el editor de texto clásico de Gutenberg es muy similar al antiguo editor de texto de WordPress salvo que ya no existen las pestañas Visual y HTML.

    Es muy importante tener acceso al código HTML de este bloque si queremos añadir reglas de edición de texto.

    Para esto, en la barra superior, haz clic en el icono (tres puntos verticales) Más opciones y selecciona la opción Editar como HTML.

    Mas opciones en Gutenberg
    Mas opciones en Gutenberg

    Para subrayar texto mediante HTML utiliza la siguiente regla:

    <p style="text-decoration:underline;">Texto</p> 

    Para justificar texto mediante HTML utiliza la siguiente regla:

    <p style="text-align:justify;">Texto</p> 
    Subrayado y justificado de texto en Gutenberg con HTML
    Subrayado y justificado de texto en Gutenberg con HTML

    En la lección, HTML y CSS para WordPress, puedes encontrar algunas reglas básicas que podemos usar en el desarrollo de nuestro sitio web.

    Para salir del editor HTML, haz clic en el icono (tres puntos verticales) Más opciones y selecciona la opción Editar visualmente.

    Subrayado y justificado de texto en Gutenberg con HTML
    Subrayado y justificado de texto en Gutenberg con HTML

    Anuncio publicitario

    2. Justificar y subrayar texto mediante Plugins

    Re-add text underline and justify es un plugin con el que podremos recuperar los botónes de subrayar y justificar texto y casi no carga contenido adicional al código fuente del sitio web.

    Para instalar el plugin:

    1. Dirígete al apartado Plugins >> Añadir nuevo.
    2. En el campo de búsqueda escribe Justify.
    3. Haz clic en Instalar ahora y seguidamente en Activar.

    Una vez activo el plugin, no tienes que hacer nada más. Los botones se añaden automáticamente al editor de texto de Gutenberg.

    Botones subrayar y justificar texto en Gutenberg
    Botones subrayar y justificar texto en Gutenberg

    En el apartado Ajustes >> Escritura se ha añadido un selector donde podemos elegir que queremos que se muestre: si queremos esconder los botones, mostrar los botones o añadir solo el botón de justificar texto.

    Opciones de subrayado y justificado del plugin Re-add text underline and justify
    Opciones de subrayado y justificado del plugin Re-add text underline and justify

    3. Justificar y subrayar texto con Elementor

    Si estas utilizando Elementor, no hace falta que hagas nada de lo anterior. Elementor, por defecto, incluye el botón de subrayar texto en su caja de edición de texto.

    Botón subrayar el texto en Elementor
    Botón subrayar el texto en Elementor

    La pestaña Estilo, del editor de texto de Elementor, incluye la opción Alineación con la que puedes justificar el texto sin necesidad de plugins ni reglas CSS.

    Botón justificar el texto en Elementor
    Botón justificar el texto en Elementor

    Anuncio publicitario

    4. Conclusión

    Subrayar y justificar texto en WordPress son acciones que no se utilizan muy frecuentemente. Sin embargo, si te gusta darle un toque personal a tu contenido, con estas opciones que te acabo de mencionar, lo puedes conseguir.

    Fíjate en la versatilidad que tiene utilizar un editor de contenidos como Elementor. Si aún no lo estás utilizando, deberías plantearte cambiar de herramientas para el desarrollo de tu sitio web.

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de WordPress y ayudas a otras personas que desean aprender.

    (10 votos, promedio: 4.8 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.

    Suscríbete y aprende WordPress desde cero.

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    guest
    4 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    Edpilo

    Muchas gracias por el aporte, a mi me aparecía el icono de justificar, sin embargo desapareció, aplique la opción de código ccs, para justificar todo, pero algunos párrafos sobre todo los que están con viñetas no se justifican, voy a probar como me va con estos tips.

    javier

    Hola compañero, a mi no me sale la opción de justificado en Elementor y tengo la última actualización. Por qué puede ser? mi web es cooltourspain.es Saludos y gracias por tu comentario

    4
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.