Alinear los iconos en los listados de Elementor

Picture of Ricardo Trigueros
Ricardo Trigueros
GD especializado en diseño web e identidades corporativas.
Tabla de contenidos
Categorías del blog
Alinear los iconos en los listados de Elementor

Si, ya hemos hablado de Elementor en más de una ocasión, pero hoy nos vamos a centrar en como alinear los iconos en los listados de Elementor.

Elementor es un constructor de páginas web para WordPress que lo cierto es que te lo pone muy fácil a la hora de diseñar. Tiene todo tipo de recursos de forma nativa que te ayudan bastante a la hora de maquetar cualquier tipo de página web. Ahora bien, en ocasiones hay que tirar de conocimientos de HTML y CSS si queremos que todo quede tal y como nosotros queremos, porque en muchas ocasiones, Elementor no dispone de todos los ajustes necesarios y que nosotros quisiéramos que tuviera. Aún así hay que decir, que versión a versión, estos ajustes los van implementando.

Elementor dispone de un bloque muy interesante que ofrece la posibilidad de crear listados con iconos personalizados. Te permite no solo seleccionar iconos del propio repositorio de Elementor sino que además te permite subir tus propios archivos en formato SVG. Y hasta aquí genial.

Ahora bien, si la líneas del listado que estás introduciendo pasan de una a dos, tres o más filas verás que el icono que aparece al principio se centra verticalmente, ofreciendo una sensación bastante rara (como os muestro a continuación), ¿no os parece?

alinear iconos de listados de elementor

Ahora bien, esto actualmente no tiene una solución en Elementor que no sea otra que tocar un poco de código. Aquí os voy a dejar lo que tenéis que hacer para alinear los iconos en los listados de Elementor a la parte superior de cada línea para que aparezcan de forma correcta. Seguid las siguientes indicaciones y en dos minutos lo tendréis.

Alinear los iconos en los listados de Elementor

 

desplegar cssEn el bloque del listado de iconos

Si estás en el propio bloque del listado, solo tienes que irte a la pestaña de Avanzado y allí, en el último desplegable, «CSS Personalizado», vamos a desplegarlo y nos aparecerá un campo donde solo tendremos que añadir el código necesario para alinear correctamente los iconos.

Y, ¿cuál es el código que tienes que añadir? Pues lo dejo a continuación. Solo tendrás que copiar y pegar:

.elementor-icon-list-items .elementor-icon-list-item { position: relative; } 
.elementor-icon-list-items .elementor-icon-list-icon { position: absolute; top: 6px; /*Este número indica la distancia del icono con respecto a la posicón superior. Lo puedes cambiar por la distancia que prefieras*/ left: 0; } 
.elementor-icon-list-items .elementor-icon-list-text { margin-left: 12px; /*Este número indica la sangría que habrá entre el ícono y el texto. Cámbialo según tus necesidades*/ }

Después, tendrás que guardar los cambios para poder los resultados, dándole al botón de publicar. Lo que verás, será algo similar a esta imagen que te dejo a continuación:

Alinear los iconos en los listados de Elementor

Como verás, con Elementor lo tenemos todo mucho más fácil para llevar a cabo el diseño de las webs que queremos en WordPress, pero aún así, en muchas ocasiones hacen falta conocimientos más avanzados para ajustarlo todo como queremos.

Si tienes consultas, no dudes en dejarlo en comentarios.

Recibe los artículos en tu cuenta de correo
Picture of Ricardo Trigueros
Ricardo Trigueros
GD especializado en diseño web e identidades corporativas.

Deja un comentario

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

Artículos relacionados
¡Escríbenos!