Cómo cambiar el diseño de las listas en el tema Astra

Estarás conmigo en que los estilos de las listas de elementos en Astra son bastante sosos, minimalistas siendo generosos. Vamos, que son feos y no aportan nada, no destacan.

¿Te animas a cambiarlos?

El diseño por defecto de las listas en Astra

Con el tema Astra activo, da igual si es la versión gratuita o la Pro, cuando creas una lista de elementos en el editor, por ejemplo:

No es que el aspecto las mismas sea, digamos, espectacular…

¿Le damos algo de color?

Personalizar el diseño de listas de elementos en Astra

Ayudándonos de un poco de CSS podemos darles algo o mucho más de alegría, color, y atraer atención hacia nuestras listas de elementos, ordenados o sin ordenar.

Por ejemplo ¿qué te parece este otro aspecto?

Mucho más vistosos esos números y listas con un color de fondo y algo de estilo ¿a que reclaman más atención?

Bien, pues para conseguir esos efectos solo tienes que añadir el siguiente código CSS en la sección de CSS adicional del Personalizador de WordPress:

/* Estilos lista ordenada */ 
.entry-content ol {
counter-reset: my-ol-counter;
margin-left:1.5em; 
}
.entry-content ol li {
position: relative;
padding-left: 30px;
list-style: none; 
} 
.entry-content ol li:before {
position: absolute;
top:50%;
left: 0;
width: 20px;
height: 20px;
margin-top: -10px;
color: #fff;
text-align:center;
background-color: #28769d;
content: counter(my-ol-counter,decimal);
counter-increment: my-ol-counter;
font-size: 11px;
-webkit-border-radius: 50%;
border-radius: 50%; 
}

/* Estilos lista desordenada */ 
.entry-content ul {
margin-left:1.5em;
}
.entry-content ul li {
position: relative;
padding-left: 30px;
list-style: none; 
}
.entry-content ul li:after{
position: absolute;
top: -webkit-calc( 50% - -1px);
top: calc( 50% - -1px);
left: 0; width: 20px;
height: 20px;
margin-top: -10px;
padding-top: 2px;
color: #fff;
text-align:center;
background-color: #28769d;
content: "\e900";
font-size: 11px;
font-family: 'Astra';
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); 
}

O sea, lo copias y lo pegas aquí:

Publicas los cambios y ya lo tienes. Monísimas las listas ¿verdad?

Ahora, si quieres cambiar colores, tamaño, estilos, etc., solo tienes que hacer modificaciones en el CSS de ejemplo para adaptarlo a los estilos y colores de tu web. Quedará genial, y conseguirás más atención sobre tus listas de elementos.

(1 votos, promedio: 5) Valora este artículo para ayudar a mejorar la calidad del blog

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

Deja un comentario

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

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido