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?
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
En 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:
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.
