Crear textos destacados en tu WordPress

Crear textos destacados en WordPress

Cómo destacar textos en nuestra web

Esta semana vamos a ver cómo podemos crear textos destacados y llamadas a la acción (CTA) en nuestra página web hecha con WordPress.

Existen varios plugins que te permitirá crear llamadas a la acción, pero nosotros vamos a ahorrarnos el uso de plugins, y vamos a hacerlo mediante código.

¡Vamos a ello!.

Crear textos destacados en tu WordPress

En primer lugar, tenemos que saber qué uso podemos darle a lo que vamos a ver a continuación: podemos destacar un bloque de texto que sea importante, incluso podemos crear avisos personalizados para nuestros visitantes.

Por ejemplo, podemos crear una caja de texto en la que informaremos a nuestros lectores de que ese contenido es contenido premium y que deben registrase en el sistema para poder acceder a él.

Lo primero que vamos a hacer es crear una clase que contendrá los estilos que vamos a mostrar en esa cajita destacada. En mi caso el código para esta clase es el siguiente:

/* Destacar textos en nuestro WordPress */
.texto-destacado {
margin-bottom: 10px;
padding: 30px;
font-size: 18px;

background-color: #FF0000;
border: 2px solid #A10808;
}

En este código hemos creado una clase llamada .texto-destacado, que le aplica un color de fondo rojo al texto al que le apliquemos esta clase. El resultado es el siguiente:

Bloque de texto destacado en rojo
Bloque de texto destacado en rojo

Crear más CTA’s para destacar más objetos de nuestro WordPress

En el caso en que necesitemos destacar de varios colores (o con otras opciones específicas), otros textos u objetos de nuestra web, siempre podemos crear más clases con sus correspondientes atributos, Lo único a lo que tendremos que prestar atención es a la clase que tenemos que aplicar a cada objeto.

Ahora vamos a añadir otra clase que destaque textos dentro de una caja de color amarillo, en este caso puedes volverte loco con los estilos, añadiendo imágenes, grosores, bordes redondeados…

El código para nuestra caja amarilla sería el siguiente:

.destacado-amarillo {
background-image: url(https://www.josegonzalezbueno.com/wp-content/uploads/2019/07/candado.png);
background-repeat: no-repeat;
background-position: center 30px;
background-color: #FED405;
border: 2px solid #FE8905;
padding: 80px 30px 30px;
border-radius: 10px;
display: inherit!important;
text-align: center;
max-width: 700px;
margin: 0 auto 30px;
}

El resultado sería este:

Bloque de texto destacado en amarillo
Bloque de texto destacado en amarillo

Y como no, el código completo de las dos clases, sería el siguiente:

/* Destacar textos en nuestro WordPress */
.texto-destacado {
margin-bottom: 10px;
padding: 30px;
font-size: 18px;

background-color: #F18169;
border: 1px solid red;
}
/* Bloque destacado en amarillo */
.destacado-amarillo {
background-image: url(https://www.josegonzalezbueno.com/wp-content/uploads/2019/07/candado.png);
background-repeat: no-repeat;
background-position: center 30px;
background-color: #FED405;
border: 2px solid #FE8905;
padding: 80px 30px 30px;
border-radius: 10px;
display: inherit!important;
text-align: center;
max-width: 700px;
margin: 0 auto 30px;
}

Está de más decir que puedes cambiar los estilos para adaptar este código a los colores de tu empresa o del tema que estás utilizando.

Dónde debemos colocar este código

Y como siempre, tenemos que saber dónde y cómo debemos utilizar este código.

Lo primero, tenemos que saber que al estar utilizando una clase CSS, necesitamos un objeto que contenta todos los estilos que hemos creado. Normalmente se utilizan los contenedores <span>…texto…</span> o <div>…texto…</div>. En nuestro caso utilizaremos el contenedor <div>. Sería algo parecido a esto:

<div class=".texto-destacado">bloque de texto u objeto al que le vamos a aplicar estos estilos</div>

Y ahora debemos saber dónde tenemos que pegar el código de las clases: si tienes un plugin de funciones, deberás pegarlo ahí, y si no tienes este plugin de funciones, puedes pegarlo en el Personalizador de tu tema activo, para ello debes ir al Escritorio, menú Ajustes, opción Personalizar y pegarlo en el apartado CSS Adicional.

Código CSS para destacar textos en WordPress
Código CSS para destacar textos en WordPress


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *