ReInSpirit

  • Contacto
  • Blog
  • Servicios
    • Alojamiento Web
    • Desarrollo y diseño web
  • Descuento E T
  • Sobre Nosotros

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

10 mayo, 2020 por Pedro Mendez 11 comentarios

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.

circulos numeros colores

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);

circulos con sombra

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.

..Entradas Relacionadas

  • Plugin Diseñador de Camisetas y Sudaderas para WooCommerce
  • Como hacer que los mapas de Google tengan un diseño responsive
  • Plugin de WordPress para Torneos de Golf en tu Móvil
  • 7 Plugins de WordPress para evitar que copien contenidos
  • Como Vender Música con un Reproductor de Audio para WooCommerce

Publicado en: Diseño, Wordpress

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Comentarios

  1. José Gabriel Suarez Manrique dice

    13 febrero, 2020 a las 4:43 AM

    Excelente aporte, muchas gracias.

    Responder
  2. Lucia dice

    7 marzo, 2020 a las 12:04 PM

    ¡Hola Pedro! Gracias por el aporte, funciona perfecto con los colores y códigos que facilitas, pero a la hora de añadir un color nuevo, por ejemplo span.orange, y poner el código hexadecimal del color elegido no me funciona. ¿a qué puede ser debido?

    Responder
    • Pedro Mendez dice

      8 marzo, 2020 a las 2:05 PM

      Es raro eso Lucia. Debe de funcionar sin problemas. Mira a ver si te falta algo en código

      Responder
  3. Cristhian dice

    16 abril, 2020 a las 5:41 AM

    Excelente aporte, me sirvio para una pagina web que estoy llevando. Saludos

    Responder
  4. Mario dice

    19 abril, 2020 a las 11:45 PM

    Hola, me ha gustado esto. Consulta, he visto esto mismo pero animado, es decir, contando números. Me puse a buscar pero no encontré para html ( que es lo que domino ) cuando hablan de css es chino para mi. Tienes algún dato que pueda ayudar con esto?

    Responder
    • Pedro Mendez dice

      8 abril, 2020 a las 8:32 PM

      Hola Mario. Te recomiendo que empieces con HTML básico y CSS. Hay muchos tutoriales buenos en la red para aprender, como puede ser este https://www.w3schools.com/html/ y este https://www.w3schools.com/css/. Saludos!

      Responder
  5. Juan Moreno dice

    27 abril, 2020 a las 7:21 PM

    Excelente, buen aporte.

    Responder
  6. Verónica Torres dice

    13 octubre, 2020 a las 6:50 PM

    Gracias Pedro, me ha servido mucho, sabes cómo hacer para que quede horizontal?

    Responder
    • Pedro Mendez dice

      16 octubre, 2020 a las 3:43 PM

      Buenas Verónica,
      Que tiene que quedar horizontal?
      Saludos

      Responder
  7. jose chavez dice

    11 septiembre, 2021 a las 10:50 PM

    Excelente Pedro, gracias por el aprote. Tengo un detalle, todo jala bien, pero tengo una imagen y a esa imagen le puse tu aporte, solo que me baja la imagen y quisiera que se pusiera por encima de ella, como se le hace para eso, gracias de antemano.

    Responder
    • Pedro Mendez dice

      14 septiembre, 2021 a las 11:56 AM

      Buenas Jose,
      Puedo ver un ejemplo de lo que dices?
      Saludos

      Responder

Deja una respuesta Cancelar la respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Descarga gratis la guía

guia 14 plugins

Política de privacidad


Más un correo a la semana con algún truco y consejo. ¿Te apuntas?

También con regalos y ofertas

icono Twittericono Facebookicono YouTube

Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (48)
  • Diseño (40)
  • Email Marketing (3)
  • Genesis (4)
  • Google (14)
  • herramientas (23)
  • hosting (8)
  • Marketing en Internet (13)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (24)
  • Sin categoría (22)
  • Trabajo (7)
  • Wordpress (510)

© Copyright 2021 ReInSpirit.com · Todos los derechos reservados ·Aviso legal·Política de Privacidad·Dos Hermanas (Sevilla)