
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.
Índice
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 subrayarSi 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: