1º Subrayado html WordPress. Diseño web

El subrayado en Gutemberg nos puede ayudar a captar la atención. El color vivo, las imágenes, los videos, el diseño minimalista, pero impactante que haga que nos detengamos a mirar y a leer se imponen. La claridad del negro y el blanco están bien, pero al lector hay que entrarle también por los ojos.

Aquí empiezo una serie para explicar unos sencillos trucos para captar la atención de vuestros lectores y añadirle un plus de originalidad al editor de textos Gutemberg de WordPress que, bajo mi punto de vista, ha nacido un pelín cojo en algunas cuestiones.

Subrayado Gutemberg

El subrayado en Gutemberg ha desaparecido el subrayado de los textos. El editor nuevo de WordPress solamente nos permite la negrita, la cursiva y el tachado, pero si queremos subrayar no podemos hacerlo directamente con este editor, sino que tendremos que acudir a la instalación de otro editor vía plugin.

No soy muy partidaria de introducir nuevos editores a tu Gutemberg. Según la plantilla que tengamos, hay que andar con cuidado, porque podrían ser incompatibles con nuestro theme.

Para añadir un subrayado, vamos a usar lenguaje html, y os voy a plantear varias propuestas para hacer un subrayado a negro o aportándole un poco de color. Y partimos de la base que usamos el editor Gutemberg de WordPress, así que para usar html seleccionaremos la opción ‘Editar como html ‘o ‘Html personalizado

Vamos a ello.

> Subrayado en negro

Después de seleccionar la edición html del bloque, simplemente añadiremos el siguiente código con el texto que queremos subrayar:

<u>texto que queremos 
subrayar </u>

y nos quedará así:

texto que queremos subrayar

Si además que queremos añadirle negrita a ese mismo texto solamente deberíamos hacer lo siguiente:

<strong><u>texto que 
queremos subrayar 
</u> </strong>

y nos quedará así:

texto que queremos subrayar

> Subrayado a color

Si el subrayado en negro no nos convence, podemos aportarle un poco de color al texto para llamar todavía más la atención. En este caso, se complica un poco la etiqueta.

Haremos lo mismo que en el caso anterior. Seleccionaremos un bloque y elegiremos ‘Editar como html ‘o ‘Html personalizado

Subrayado a principio o dentro de párrafo

Dependiendo de si el texto subrayado se encuentra al inicio de un párrafo o entre medias de éste usaremos una etiqueta diferente.

Para subrayar un texto que está al principio de párrafo:

<p><a href="change-
underline-color.php" 
style="text-decoration: 
none; border-bottom: 
1px solid #ff0000; 
color: #000000;">Texto 
que queremos escribir 
en subrayado, en este 
caso en color rojo </a>

El resultado:

Texto que queremos escribir en subrayado, en este caso en color rojo

Si el texto que hay que subrayar está entre medio del texto vamos a ver cómo nos quedaría. Para ello usamos un texto ficticio como el siguiente:

Prueba de texto sin 
subrayar y a continuación
 <a href="change-underline
-color.php" style="text-
decoration: none; border-
bottom: 1px solid #ff0000; 
color: #000000;">texto que 
queremos escribir en subrayado, 
en este caso en color rojo </a>.

Nos quedaría lo siguiente:

Prueba de texto sin subrayar y a continuación texto que queremos escribir en subrayado, en este caso en color rojo .

Podemos cambiar el color del subrayado (antes hemos usado el rojo), solamente tenemos que buscar el código html del color con el que nos interesa subrayar el texto. Si es CYAN usaremos el código #00ffff ; Si es AMARILLO usaremos el código #00ffff ; para el VERDE usaremos el códido #0AF92C …

En internet están las paletas de colores html. Cada uno que use los que más le gusten.

Subrayado con más grosor

Y si nos gustan los subrayados más fuertes, incrementaremos los pixels del código que introducimos en cada subrayado, pasaremos por ejemplo de 1 a 2 o a 3, según lo que querramos. Siguiendo el ejemplo anterior, pasamos el subrayado a 2 pixels y nos quedaría la siguiente secuencia que tendríamos que introducir en un bloque html:

<p><a href="change-
underline-color.php" 
style="text-decoration: 
none; border-bottom: 
2px solid #ff0000; 
color: #000000;">Texto 
que queremos escribir en 
subrayado, en este caso 
en color rojo y con dos 
pixels de grosor </a>.

Texto que queremos escribir en subrayado, en este caso en color rojo y con dos pixels de grosor .

Espero que os haya gustado. Este es el primer artículo de una serie que voy a preparar para explicar cómo mejorar el contenido de nuestros textos y hacerlos más atractivos al lector.

Podéis puntuarlo también:

(7 votos, promedio: 4,86 de 5)

Cargando...