¡Hola amigos! Soy Carlos, de Byteweb.es, y en el vídeo de hoy, vamos a abordar un tema muy solicitado: cómo alinear los iconos en el widget de acordeón de Elementor cuando el encabezado hace un salto de línea. Como podrán ver, he forzado algunos saltos de línea para ilustrar el problema, y el icono aparece centrado. Sin embargo, con este tutorial, lograremos alinearlos correctamente, incluso cuando el encabezado se extiende a lo largo de varias líneas.
Pasos a seguir:
Preparación del Contenido:
Comencemos desde cero. Crearé una estructura de ejemplo con el widget de acordeón. Busquemos el widget de acordeón en Elementor y agreguemos algunos títulos largos para simular el problema. En este caso, he duplicado algunos acordeones y he añadido contenido diferente para visualizar mejor los cambios.
Forzar Saltos de Línea:
Verifiquemos cómo los iconos se desalinean cuando el título se extiende a lo largo de varias líneas.
Solución con CSS Personalizado:
Accedemos a las opciones avanzadas del widget y seleccionamos la pestaña «CSS Personalizado». Aquí, pegaremos el siguiente código CSS. (Este código estará disponible al final del tutorial).
Personalización Adicional:
Si deseamos ajustar aún más la alineación, podemos experimentar con el valor de margin-top en el código CSS. Esto es útil si el tamaño de la fuente o el interlineado afectan la alineación. Actualizamos la página para aplicar los cambios y observamos cómo la alineación mejora.
¡Y eso es todo! Con estos sencillos pasos, lograremos alinear los iconos del widget de acordeón de Elementor, incluso cuando los encabezados se extienden a través de múltiples líneas. Si encuentran útil este tutorial, no olviden darle «Me gusta», suscribirse al canal, activar la campanita para futuras notificaciones y dejarnos cualquier pregunta o duda en los comentarios. ¡Nos vemos en próximos vídeos! ¡Hasta luego!
.elementor-widget-n-accordion .e-n-accordion-item-title {
align-items: start;
}
selector i{
margin-top: 10px;
}
