Como crear círculos de colores con números utilizando HTML y CSS en Wordpress

Vamos a ver como crear unos círculos básicos de colores numerados en nuestro sitio web de Wordpress sin necesidad de instalar plugins, usando HTML y CSS de la forma que vemos a continuación.

Para aumentar el tamaño de estos se puede envolver el código HTML utilizando las etiquetas de título h1 h2 h3… o simplemente añadir un «font-size» para cada regla CSS.

Incluye este código HTML con el color que deseas utilizar en el editor de la página o entrada de Wordpress

<h1><span class="grey">1</span>Un circulo gris con un número interior</h1>

 

<h1><span class="red">2</span>Un circulo rojo con un número interior</h1>

 

<h1><span class="blue">3</span>Un circulo azul con un número interior</h1>

 

<h1><span class="green">4</span>Un circulo verde con un número interior</h1>

 

<h1><span class="pink">5</span>Un circulo rosa con un número interior</h1>

⚙️ Instalación

Sólo es necesario copiar todo el código CSS y pegarlo al final del archivo style.css o en el archivo del tema hijo.

/* Círculos de colores numerados */
span.red {
  background: red;
   border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 15px;
  text-align: center;
  width: 1.6em; 
}

span.grey {
  background: #cccccc;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 15px;
  text-align: center;
  width: 1.6em; 
}

span.green {
  background: #5EA226;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 15px;
  text-align: center;
  width: 1.6em; 
}

span.blue {
  background: #5178D0;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 15px;
  text-align: center;
  width: 1.6em; 
}

span.pink {
  background: #EF0BD8;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 15px;
  text-align: center;
  width: 1.6em; 
}

Rodea los números utilizando los códigos span en su editor de texto.

<h1><span class="blue">3</span></h1>

Además si lo necesitas puedes incluir código CSS para un efecto sombra y añadirlo a cada regla CSS.

-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);

Esto es un buen método para crear estilos en nuestra web sin necesidad de instalar plugins que generan shortcodes o si estos los trae nuestro theme por defecto. De ese modo evitarás problemas si cambias de plantilla en el futuro, o tienes que eliminar el plugin por cualquier motivo. Si necesitas eliminar códigos cortos que se han quedado en las páginas o entradas de tu Wordpress sigue el enlace anterior.