Lista simple y numerada con mejores diseños
Personalizar listas en WordPress

Lista simple y numerada con mejores diseños

Hola chicos. En éste nuevo artículo compartiré con ustedes dos maneras de darle un mejor estilo a las listas ya sea numeradas o con viñetas. Como todos ya sabemos los estilos predeterminados que tienen estas listas dentro de nuestro wordpress son muy clásicas en cuanto a diseño.

Por ello me he tomado un buen tiempo para compartir con ustedes este corto y breve post, igual espero sea de gran ayuda para muchos. Yo también te invito desde ya a compartirlo en las redes sociales con más personas que estén dedicadas a esto del diseño web cómo ganar dinero por internet.

Dando una mejora apariencia a nuestras listas simples y numeradas  de nuestro theme en wordpress

Por defecto el diseño de nuestro theme en cuanto al apartado css, las listas simples y numeradas vendrán predeterminadas sin estilo alguno por lo que los cambios que agreguemos en el css adicional no perjudicarán en nada al propio del tema. Entonces cómo podemos mejorar las listas de nuestras entradas o páginas hechas en wordpress? Para ello te invito a seguir leyendo el artículo.

Mejorando estilos a la lista simple

Este primer apartado de estilos css lo aplicaremos para darle una mejor apariencia a las listas simples dentro de wordpress para ello deberás copiar el siguiente código css en; apariencia, personalizar y css adicional. Finalmente le vamos a dar al botón publicar para que hagan efecto los cambios.

ul.lista {
    margin: 0 0 1.5em;
    padding: 0;
    list-style: none;
}
ul li {
    margin-bottom: 0.1rem;
}
ul.lista li:before {
    content: "\f0b2";
}
ul.lista li:before {
    position: relative;
    left: 0;
    font-family: FontAwesome;
    font-size: 1.2em;
    vertical-align: baseline;
    color: #ffb100;
    padding-right: 6px;
}

Ejemplo de lista simple

  • Copiar el código css
  • Pegarlo en css adicional
  • Publicar los cambios
  • Aplicar las clases en modo html
Te Recomiendo Leer:   Mejores Hostings para alojar tu web utilizando wordpress - Para principiantes

Aplicando la clase css en el html de nuestra entrada o pagina

Para ello debes entrar en modo html y ubicarte en la apertura de <ul> y escribir de la siguiente manera.

<ul class="lista">
 	<li>Copiar el código css</li>
 	<li>Pegarlo en css adicional</li>
 	<li>Publicar los cambios</li>
 	<li>Aplicar las clases en modo html</li>
</ul>

Donde «class=»lista»» será a lo que le hemos dado un estilo css personalizado. El icono puedes reemplazarlo por que que desees, puedes hacer uso de fontawesome.com, para buscar el que más te guste. Presta atención a la imagen siguiente para que puedas copiar y pegar el icono. Todo lo que está en corchetes son solo algunos iconos que te he mostrado, hay muchos más.

iconos para escoger
Iconos para escoger

Seleccionando nuestro icono

 

dando estilos a la lista en wordpress

Y eso sería todo para la lista simple. Como puedes ver el proceso es muy fácil y el resultado es muy llamativo. Puedes cambiar el color del icono y también el content. En éste caso a mí me gusta trabajar con el amarillo; pero ya el color dependerá de cada uno.

Mejorando los estilos de la lista numerada

Esto es para darle estilos coloridos con un fondo a la lista numerada para ello deberás copiar los estilos css que te dejaré a continuación en el apartado apariencia,  personalizar, css adicional y posteriormente le vas a dar al botón publicar.

/*Lista personalizada*/
ol.pasos {
    list-style-type: none;
    margin: 0 0 1.5rem 1.5rem;
}

ol {
    list-style: decimal;
}
ol {
    margin: 0 0 1.5em 3em;
}
ol.pasos li {
    counter-increment: step-counter;
    margin: 0 0 1rem;
    padding: 0 0 0 32px;
    font-family: "Segoe UI", serif;
    position: relative;
}
*, *:before, *:after {
    box-sizing: inherit;
}
ol.pasos li:before {
    content: counter(step-counter);
    font-size: 1.1rem;
    background-color: brown !important;
    color: #fff;
    font-weight: bold;
    padding: 3px 3px 3px;
    border-radius: 10px;
    font-family: "Lato", serif;
    display: block;
    min-width: 40px;
    text-align: center;
    position: absolute;
    top: 3px;
    left: 0;
}
*, *:before, *:after {
    box-sizing: inherit;
}

Para agregar la clase css y conseguir el resultado de la imagen destacada, solo debes escribir de la siguiente manera en formato html en tu editor wordpres.

<ol class="pasos">
 	<li>Numero 1</li>
 	<li>Numero 2</li>
 	<li>Numero 3</li>
 	<li>Numero 4</li>
</ol>

Y el resultado será de la siguiente manera.

  1. Copiar los estilos css
  2. Pegarlos en css adicional
  3. Darle al botón publicar
  4. Escribir la clase css en el html de nuestra lista
Te Recomiendo Leer:   Mejores Hostings para alojar tu web utilizando wordpress - Para principiantes

Y el resultado será mucho más que atractivo. Aquí nuevamente debes hacer cambios en el color del icono de la lista, en lo personal me gusta trabajar con el color amarillo.

Conclusión

Realizar éste proceso para muchos puede resultar algo trabajoso; además que no ayuda en lo mínimo al posicionamiento web de tu sitio web; pero como en mi caso es un blog personal si me gusta compartir a mis lectores algo interesante cada nueva publicación. Ademas de ello, aplicar éstos estilos no influye en nada a la listas predeterminadas del theme, y podrás seguir usandolas con total normalidad.

David Cruz

Blogger y SEO. El que estés leyendo este y otros artículos de mi blog dice mucho de mi trabajo. Aquí encontrarás artículos que te ayuden a crear una pagina web con la que podrás dar inicio a la libertad financiera. "SEO". Crear estrategias que mejore la visibilidad en los resultados de google, mejorando así el posicionamiento orgánico.

Deja un comentario

Cerrar menú