Titulares WordPress sin plugins

ATRAE LA ATENCIÓN CON TUS TITULARES PERSUASIVOS

Los titulares WordPress destacados que pongas entre los párrafos resaltarán la información importante, reforzarán la idea-fuerza y dan un respiro al lector haciendo que la lectura sea más cómoda y placentera, animándolo a continuar hasta el final del post.

Necesitamos repetir la idea-fuerza y atraer la atención de un solo vistazo, especialmente cuando visitan el post desde un smartphone.

Es un recurso periodístico que machaca con lo importante del mensaje, mejora la maquetación del texto y hacen fácil la lectura.

Al distinguirlos de un solo vistazo predispone al lector a continuar leyendo porque, de manera inconsciente le llama la atención sin darse percatarse de ello.

¿Cómo puedo poner titulares WordPress entre las noticias?

En WordPress, como sabes, existen infinidad de plugins que lo hacen, aunque tendrás que introducir un shortcode para que lo haga.

Esto es tan fácil de codificar que creemos que no merece la pena instalar un plugin para hacerlo.


este es un ejemplo de cómo destacar titulares entre el texto del post


Si ya utilizas Gutenberg es tan fácil como crear dos bloques reutilizables

Bloque reutilizable para Gutenberg que modifique las líneas de los titulares WordPress que se ponen entre el texto
Elemento reutilizable para Gutenberg, modificar la línea <hr> con una clase CSS

Uno para el elemento <hr> (línea) y otro para el elemento <p> (párrafo).

Bloque reutilizable Gutenberg para titulares WordPress
Elemento reutilizable para el párrafo destacado entre el texto. Usamos el elemento <p> con una clase CSS

Lo haremos utilizando el bloque de HTML personalizado y para el primero pondremos el código ‘<hr class=nota/>‘ y para el de los párrafos el código ‘<p class=nota> </p>‘ .  Así lo podremos reutilizar todas las veces que necesitemos.

Personalizar css para titulares WordPress
Personalizar el código CSS para poner Titulares WordPress que destaquen entre el texto.


Pero nos falta el código Css para lo que nos iremos al personalizador de nuestro tema y en el apartado de CSS adicional incluiremos este código:

CSS para titulares WordPress entre el texto
Código CSS adicional para hacer titulares WordPress entre el texto

Css para personalizar los titulares WordPress entre párrafos

/* CSS para personalizas los titulares destacados* /

hr.nota{ height:3px; background-color:black; margin-top :15px!important; margin-bottom:15px!important; border: 0; width: 80%; }

p.nota{ color:red; font-weight: bold; text-transform:uppercase; text-align:justify; line-height: 1.6; margin-left:10%; margin-right:10%; }

/ *FINAL CSS para personalizar los titulares destacados */

Titulares wordpress que venden


Algunos comentarios para personalizar y adaptar el código


Este código es solamente un ejemplo, tu puedes adecuarlo a tus tema y a tus gustos personales.

Puedes modificar el espesor de la línea modificando dentro de hr.nota, la línea height:3px; y pones los píxeles que quieras.

También puedes cambiar el color de la línea modificando background-color:black; por el que prefieras.

Con width: 80%; consigues que las líneas no ocupen toda la extensión dejando un margen del 10% por cada lado. Modifícalo a tu gusto.

margin-top :15px!important; y margin-botton se utilizan para que los elementos anteriores y siguientes respeten esa separación y no se peguen. Ponemos !important para forzar al navegador a ignorar otras reglas css que existan y cumpla solo estas.

En cuanto al texto que vamos a poner modificamos el color y lo hacemos rojo color:red; lo ponemos en negrita font-weight: bold; y todo en mayúsculas text-transform:uppercase;.

Luego justificamos el párrafo text-align:justify; y el espacio entre líneas line-height: 1.6; por último modificamos los márgenes para que coincidan con los que le pusimos a la línea con margin-left:10%; y margin-right:10%;.

Como ves es un código muy sencillo que puede hacer que tus post tengan mucho más éxito.

CONSULTA NUESTROS ÚLTIMOS POSTS. ESPERAMOS TUS COMENTARIOS


¡Suscríbete a nuestra newsletter!

suscríbete