Acordeón avanzado
Los bloques largos de texto abruman, pero las respuestas ocultas frustran. Un acordeón encuentra el equilibrio perfecto cuando está cuidadosamente diseñado. Master Addons Adderion Element le brinda control total sobre esta herramienta interactiva clásica. Elija entre un comportamiento limpio de Accordion (uno abierto a la vez) o un comportamiento flexible de Alternar (múltiples abiertos). Complete elementos con texto, imágenes o incluso plantillas guardadas completas. Luego, diseñe cada estado: el título normal, el desplazamiento, el elemento abierto activo y el área de contenido en sí. No es sólo para preguntas frecuentes; es para listas de funciones, especificaciones de productos, portafolios o cualquier contenido que se beneficie de una presentación limpia y revelada bajo demanda.
Modos de comportamiento dual y contenido dinámico
Comience definiendo cómo se comporta su acordeón. Seleccione Tipo de acordeón: acordeón tradicional para un flujo enfocado de un solo elemento abierto, o cambie para un estilo de lista de verificación más flexible donde los usuarios pueden abrir varios elementos. Luego, cree sus elementos. Para cada pestaña, establezca un título y elija un tipo de contenido. Vaya más allá del texto simple 'use Contenido para texto y medios enriquecidos, o seleccione entre Sección guardada, Widget guardado o Plantilla de página guardada para insertar bloques completos de contenido prediseñados. Esto lo convierte en una poderosa herramienta para la creación de páginas modulares y la reutilización de diseños complejos.
- Dos modelos de interacción: acordeón (apertura única) para procesos escalonados, alternancia (apertura múltiple) para listas de verificación o funciones.
- Fuentes de contenido enriquecido: complete elementos de acordeón con texto simple, imágenes o secciones y plantillas completas de Elementor guardadas.
- Elemento activo predeterminado: establezca cualquier elemento para que sea activo como predeterminado cuando se carga la página.
- Gestión sencilla: agregue, elimine y reordene elementos con el botón + Agregar elemento y el repetidor intuitivo.
Estilo y estructura de títulos basados en el estado
La barra de título es en lo que los usuarios hacen clic -gnante para que cada estado visual sea intencional. Estilee el título por separado para sus estados Normal, Flotante y Activo (abierto). Para cada estado, defina un tipo de fondo (color, gradiente), color de texto y tipografía únicos. Controle la alineación del título, el relleno, el borde, el radio del borde y agregue una sombra de caja. Este nivel de detalle le permite crear un viaje visual claro: un valor predeterminado neutral, un desplazamiento atractivo y un estado “abierto” distinto que confirma la acción del usuario.
- Diseño de triple estado: aplique estilos distintos a las barras de título Normal, Hover y Active.
- Fondos avanzados: utilice colores sólidos o degradados para diferentes estados para crear profundidad.
- Control completo de caja: ajuste el acolchado, los bordes y la sombra de la caja para que cada barra de título sea un componente diseñado.
Iconos de alternancia personalizables con estados duales
Vaya más allá del icono del triángulo genérico. Habilite el ícono personalizado para elegir cualquier ícono de la biblioteca para las acciones Expandir (estado cerrado) y Contraer (estado abierto). Coloque el ícono hacia la izquierda o hacia la derecha. Luego, diseñe estos íconos de forma independiente para los estados Normal, Flotar y Activo, cambiando su color, tamaño y fondo. Ajuste el espaciado y el relleno de los íconos alrededor del ícono para una alineación perfecta. Esto convierte un indicador funcional en una parte coherente de su lenguaje de diseño.
- Iconos duales: establezca diferentes íconos para los estados “más” (expandir) y “menos” (colapsar).
- Estilo de iconos específico del estado: cambie el color y el fondo del icono cuando el elemento esté suspendido o activo.
- Alineación correctamente: icono de control Alineación, posición y espaciado en relación con el texto del título.
Área de contenido y estilismo de contenedores
El contenido que se desliza hacia abajo merece su propia consideración de diseño. Diseñe el área de Contenido con su propio color de fondo, color de texto, tipografía y relleno interno. Agregue una sombra de texto para que sea legible si es necesario. Luego, diseñe el contenedor general de elementos que contiene todas las secciones de acordeón: establezca el espacio entre elementos, un borde global, un radio de borde y una sombra de caja. Esto garantiza que todo el widget se sienta como un componente unificado y pulido, y que el contenido abierto sea fácil y agradable de leer.
- Diseño del área de contenido: diseñe el fondo y el texto del contenido desplegable para una legibilidad óptima.
- Pulido a nivel de contenedor: aplique Border Radius y Box Shadow a todo el grupo de acordeón.
- Espaciado de elementos: controle el espaciado (margen) entre cada elemento del acordeón para lograr una apariencia limpia y separada.
Preguntas frecuentes sobre acordeón avanzado
¿cuál es la diferencia práctica entre el tipo “Acordeón” y “Alternar”?
Acordeón: Sólo se puede abrir un elemento a la vez. Al abrir un nuevo elemento se cierra automáticamente el anterior. Lo mejor para páginas de preguntas frecuentes o instrucciones secuenciales donde desea minimizar el desplazamiento y centrar la atención.
Alternar: se pueden abrir varios elementos simultáneamente. Los usuarios pueden ampliar varios elementos para comparar o recopilar información. Lo mejor para listas de verificación de funciones, listas de especificaciones de productos o contenido donde los usuarios necesitan ver varias secciones a la vez.
¿Puedo hacer que un elemento comience a abrirse cuando se carga la página?
Sí. Al editar un elemento individual en la pestaña Contenido, encontrará una opción Activo como predeterminado. Establezca esto en Sí para el elemento que desea abrir previamente. Sólo un elemento debe tener esto configurado en un tipo de acordeón para evitar conflictos.
¿qué son la "Sección guardada" o la "Plantilla de página guardada" como tipos de contenido?
Estas son potentes funciones de Elementor Pro. Si tiene una sección (como un perfil de equipo) o una plantilla de página completa (como un formulario de contacto) guardada en su biblioteca Elementor, puede seleccionarla para que aparezca dentro del elemento acordeón. Esto le permite incorporar diseños complejos y prediseñados dentro de su acordeón.
¿cómo funcionan los estados activos y flotantes en dispositivos móviles?
En los dispositivos táctiles, el primer toque a menudo activará los estados Hover y Active en rápida sucesión (cuando se abre el elemento). El estilo que aplique al estado Activo es más importante para dispositivos móviles, ya que mostrará qué elemento está abierto actualmente. Es posible que el estado Hover no se vea como un paso separado.
¿Puedo controlar la velocidad de apertura y cierre de la animación?
Sí. En la pestaña Contenido, encontrarás Alternar velocidad (ms). El valor está en milisegundos (p. ej., 300). Un número menor (como 200) lo hace más rápido y ágil; un número mayor (como 500) lo hace más lento y deliberado.
¿el acordeón es accesible para navegación por teclado y lectores de pantalla?
Se debe poder acceder a un widget de acordeón correctamente codificado. El uso de etiquetas HTML de título semántico (como <div>, <h3>) ayuda a estructurar el contenido. Los estados interactivos y los atributos ARIA para estados expandidos/contraídos generalmente son manejados por el widget para garantizar que los lectores de pantalla puedan anunciar los cambios.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
