Una sección de preguntas frecuentes vive o muere por acordeón: las preguntas permanecen compactas, las respuestas aparecen al hacer clic y la página nunca se siente larga. El Acordeón avanzado widget adentro Complementos maestros para Elementor construye ese patrón con un giro que la mayoría de los widgets de acordeón omiten: cada elemento puede contener texto sin formato o una plantilla completa de Elementor guardada, por lo que una respuesta puede ser un formulario de contacto, una tabla de precios o incluso otro acordeón.
Esta guía recorre el widget en una sección de preguntas frecuentes reales, desde la lista de elementos hasta el acordeón con estilo en la página en vivo.
¿busca qué hace el widget en lugar de cómo configurarlo? El Descripción general del widget Elementor Accordion cubre las características, opciones de estilo y precios en una sola página.
Qué hace el widget Advanced Accordion #
El widget representa una pila de elementos plegables. Cada fila tiene un título, un área de contenido y un icono de alternancia que oscila entre los estados de expansión y colapso. El Tipo de acordeón dropdown elige el comportamiento: Acordeón mantiene un elemento abierto a la vez, cerrando el último cuando se abre uno nuevo; Alternar permite a los visitantes mantener abiertos varios elementos a la vez.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- El widget Advanced Accordion habilitado en el panel de opciones de complementos maestros, en Widgets básicos.
- Opcional: una plantilla Elementor guardada si desea cargar una dentro de un elemento de acordeón.
Agregue y administre elementos de acordeón #
En el Contenido tab, la lista de elementos contiene una entrada por pregunta. Haga clic en un elemento para expandir su configuración, duplicar o eliminar filas con los íconos al lado de cada una y presione Agregar artículo para ampliar la lista. La demostración ejecuta preguntas frecuentes sobre plomería de cinco preguntas.
Debajo de la lista se encuentran los controles compartidos:
- Mostrar icono activo/inactivo?: alterna los íconos de expandir y contraer a la derecha de cada título.
- Icono de expansión e icono de contracción: dos pestañas, una selector de iconos cada una. Más sobre estos a continuación.
- Alternar velocidad (ms): qué tan rápido se abren y cierran los elementos, 300 milisegundos por defecto. Ese valor predeterminado se siente ágil; Pasados los 600, el acordeón comienza a sentir como si se estuviera estancando.
- Etiqueta HTML del título: el marcado alrededor de cada pregunta, div de forma predeterminada. Elija H3 si las preguntas deben alimentar la estructura de encabezado de la página.
Coloque texto o una plantilla completa dentro de un elemento #
Abra un solo elemento y aparecerán los controles por elemento: Activo como predeterminado comienza la página con ese elemento abierto, Habilitar icono personalizado le da su propio icono de alternancia y Habilitar color de fondo tiñe solo esa fila.
El que hay que recordar es Tipo de contenido. Configure el texto para obtener una respuesta escrita normal o para Sección guardada y elige cualquier plantilla de tu biblioteca Elementor. La demostración carga una sección de contacto, completa con un formulario de trabajo, dentro del primer elemento del acordeón:
Así es también como funcionan los acordeones anidados: guarde un acordeón como plantilla y luego cárguelo dentro de un elemento de otro acordeón. Categorías con subpreguntas, módulos de cursos con lecciones, ese tipo de estructura. Dos niveles es el límite práctico; más profundo que eso y los visitantes pierden la pista de dónde están.
Establezca los iconos de expandir y contraer #
El Expandir icono y Icono de contraer cada pestaña abre la biblioteca de iconos de Elementor. El icono de expansión se muestra en elementos cerrados, el icono de colapso en el abierto.
Los pares coincidentes se leen mejor: con el corazón hacia abajo con el corazón hacia arriba, más con menos, chevron con chevron. La demostración se asienta en carets.
Estilo los títulos #
El Estilo la pestaña se rompe Artículos, Título, Contenido, y Alternar iconos. La sección Título lleva Normal, Flotar, y Activo estados Unidos, por lo que la pregunta abierta puede verse diferente del resto.
- Tipo de fondo y color: la barra de título se llena por estado.
- Color y tipografía del texto: el texto de la pregunta.
- Alinearea titlului: izquierda, centro o derecha.
- Tipo de borde, radio de borde, sombra de caja, relleno: la demostración utiliza un radio de 8 píxeles y un acolchado de 20 por 16 para barras suaves y espaciosas.
La demostración le brinda a los títulos un fondo gris claro y texto azul, y el lienzo se actualiza en vivo mientras el selector de color está abierto:
Estilo el área de contenido #
El Contenido la sección estiliza el panel de respuestas: Color de fondo, Color del texto, Tipografía, Acolchado, y Sombra de texto. Mantenga el fondo de respuestas más ligero que las barras de título para que los elementos abiertos se lean como conectados pero distintos.
Diseñe los iconos de alternancia #
El Alternar iconos la sección termina y termina la fila.
- Posición del icono: a la izquierda del título, a la derecha del mismo o ninguno.
- Tamaño de icono, espaciado, relleno: la demostración ejecuta iconos de 18 píxeles.
- Colores de iconos: Estados normal, flotante y activo, cada uno con fondo y color de icono.
El resultado en la página #
En la página en vivo, el acordeón se comporta exactamente como está configurado: una pregunta abierta a la vez, los carets se giran a medida que se alternan los elementos y las barras de título con estilo mantienen la sección escaneable.
Casos de uso comunes #
- Secciones de preguntas frecuentes en páginas de destino, páginas de precios y páginas de productos.
- Formularios de contacto o cotización dentro de una respuesta, usando el tipo de contenido de la sección guardada como la demostración.
- Acordeones anidados para conjuntos de preguntas de categorías y subcategorías.
- Esquemas del curso o documentación donde cada módulo se expande a sus lecciones.
- Listados de trabajos con el rol como título y detalles en el panel.
Consejos para un mejor acordeón #
- Elija el tipo Accordion para las preguntas frecuentes. Una respuesta abierta mantiene a los visitantes enfocados; Alternar trajes contenido de referencia que las personas comparan una al lado de la otra.
- Abra la pregunta más preguntada de forma predeterminada. Establezca Active como predeterminado en su mejor pregunta para que la sección nunca comience completamente cerrada.
- Utilice H3 como etiqueta HTML del título en las páginas de preguntas frecuentes. Los motores de búsqueda leen las preguntas como títulos adecuados.
- Mantenga los pares de iconos consistentes. Un caret que cambia de dirección comunica el estado instantáneamente; Los iconos que no coinciden hacen pensar a los visitantes.
- Peso de la plantilla mental en secciones guardadas. Un formulario o tabla dentro de un artículo es genial; una sección de ancho completo con imágenes pesadas se cargará incluso cuando esté colapsada.
Vídeotutoriales #
Si prefieres ver el Acordeón Avanzado en acción, este video explica con qué facilidad cualquiera puede construir uno, de principio a fin:
Y este muestra cómo agregar un acordeón anidado, cargando un acordeón dentro de otro con el tipo de contenido de la Sección guardada:
Preguntas frecuentes #
¿qué es el widget Advanced Accordion en Master Addons?
Es un widget Elementor para secciones de contenido plegables. Agrega elementos con títulos y respuestas, elige acordeón o alternar comportamiento, establece íconos de expansión y colapso y diseña los títulos, contenido e íconos por estado. Los elementos pueden contener texto o una plantilla guardada completa.
¿cuál es la diferencia entre el tipo Accordion y Toggle?
Accordion mantiene un elemento abierto a la vez, cerrando el elemento anterior cuando se abre uno nuevo. Alternar permite a los visitantes abrir varios elementos a la vez y cerrar cada uno de forma independiente. Ambos se configuran desde el menú desplegable Tipo de acordeón en la pestaña Contenido.
¿Puedo poner un formulario o plantilla dentro de un artículo de acordeón?
Sí. Establezca el tipo de contenido del elemento en la sección guardada y elija cualquier plantilla de su biblioteca Elementor. La demostración carga una sección de contacto completa con un formulario de trabajo dentro de un elemento de acordeón, y cualquier otra plantilla guardada funciona de la misma manera.
¿cómo creo un acordeón anidado en Elementor?
Primero guarde un acordeón como plantilla Elementor. Luego, en el acordeón principal, establezca el tipo de contenido de un elemento en la sección guardada y elija esa plantilla. El acordeón interior se carga dentro del elemento exterior, lo que le brinda dos niveles de contenido plegable.
¿Puede un elemento permanecer abierto de forma predeterminada?
Sí. Expanda el elemento en la pestaña Contenido y active como predeterminado. Ese elemento comienza a abrirse cuando se carga la página, lo que funciona bien para la pregunta que más hacen los visitantes.
Envolviendo #
El widget Advanced Accordion maneja el patrón de preguntas frecuentes estándar y luego va más allá: íconos y fondos por elemento, estilo de tres estados y un tipo de contenido de sección guardada que coloca formularios, tablas o acordeones anidados completos dentro de cualquier elemento. Explore el conjunto completo de Widgets y extensiones de complementos maestros para ver qué más se envía con el complemento y verifique página de precios para extras profesionales como patrones de acordeón.
