¿Cómo se mantiene el acordeón cerrado por defecto en Elementor?

Elementor es el constructor de páginas más utilizado y altamente personalizable para WordPress. Sin embargo, hay algunas cosas que los usuarios no encuentran una opción directa para cambiar en algún momento. 

Por ejemplo, el contenido del widget acordeón está abierto por defecto. Muchas personas quieren que esté cerrado, pero no encuentran la opción para cerrarlo.

Entonces, ¿cómo se mantiene el acordeón cerrado por defecto en Elementor?

Para mantener los elementos del acordeón cerrados por defecto en Elementor, vaya al widget del acordeón Ficha Contenido >> Interacción. Utilice el botón “Estado por defecto” >> “Todo colapsado”, entonces Publique.

Así que aquí estoy dando 3 métodos fáciles para mantener el acordeón cerrado por defecto en Elementor. 

Así que, ¡empecemos!

Formas fiables de mantener el acordeón cerrado o plegado

Al utilizar Elementor's widget acordeón, el “primer elemento”, o “primera diapositiva”, de la el acordeón está abierto por defecto. Y el contexto es legible. Pero esto puede no ser su preferencia.

Según hemos podido saber, Elementor no proporciona ninguna configuración para cerrar o contraer la diapositiva del acordeón por defecto.

Pero no se preocupe, porque eso eran los viejos tiempos. Ahora, puedes cerrar o abrir el acordeón como quieras. Elementor ofrece ahora un ajuste incorporado.

Además, después de probar y probar, he encontrado otros 2 métodos fáciles.

Puede cerrar o abrir el acordeón utilizando los 3 métodos siguientes.

• Método 1: Utilizar la configuración de Elementor (Método gratuito)
• Método 2: Utilizar un simple código CSS (Requiere Elementor PRO)
• Método 3: Utilizar código JavaScript (para usuarios avanzados pero gratuito)

Método 1: Utiliza la configuración de Elementor

Esta es la solución más fácil para mantener el Elemento de acordeón cerrado o contraído. Está disponible en la configuración integrada de Elementor. También es un método para principiantes sin codificación. Esto es para los usuarios libres de Elementor.

Empecemos siguiendo estos pasos:

• Abra su página en el editor Elementor, donde tiene la sección acordeón.

• Seleccione un elemento en el widget de acordeón.

• En la barra lateral izquierda, vaya a Ficha Contenido >> Interacción.

• Establezca el estado por defecto en Todo colapsado.

• Publique ahora.

¡Y ya está!

Consejo: Establezca el número máximo de elementos expandidos en 1 (opcional). Es muy recomendable para una experiencia de usuario más limpia. Siéntase libre de ajustar la velocidad de animación y los estilos de icono para que coincida con su diseño.

Ahora, ¡la gran pregunta! ¿Funciona esto con la versión gratuita de Elementor? 

Sí, funciona. Siempre que estés utilizando la última versión. Esta función está disponible en Elementor Free.

Método 2: Utilizar un simple código CSS (Requiere Elementor PRO)

Si estás trabajando en sitios o plantillas más antiguos en los que la alternancia incorporada no está disponible (antes de la actualización), CSS ofrece una solución rápida sin necesidad de rediseñar. Por lo tanto, puede seguir este método para mantener el Acordeón Artículo cerrado o colapsado. Sin embargo, esto es sólo para usuarios de Elementor Pro.

• Abra su página en el editor Elementor, donde tiene la sección acordeón.

• Seleccione el widget de acordeón.
• En la barra lateral izquierda, vaya a Ficha Contenido >> Disposición.

• Duplique el primer elemento del acordeón (tenga en cuenta que debe duplicar el primer elemento, no todo el widget).

• Copie cualquiera de los siguientes códigos CSS

.elementor-accordion .elementor-accordion-item:first-of-type {

display: none;}

.elementor-accordion {

  borde superior: 1px sólido #D4DFF2C7;

}

• Vaya a la pestaña Avanzado del widget acordeón.

• A continuación, desplácese hacia abajo y pegue el código CSS en el campo CSS personalizado.

• Ahora, publicar la página.

Después de actualizar la página pegando el CSS, el primer elemento de acordeón duplicado se ocultarán, mientras que el resto de elementos se contraerán por defecto, tal y como usted quería.

Método 3: Utilizar código JavaScript

Si te perdiste el primer método por problemas de versión y el segundo método por no tener Elementor Pro, entonces sigue este método gratuito. 

Todo lo que necesitas hacer en este método es añadir un widget HTML y un pequeño código que te ayudará a cerrar el acordeón. He aquí cómo hacerlo.

• Abra su página en el editor Elementor, donde tiene la sección acordeón.

• Justo encima de tu widget acordeón, coloca un “Widget HTML” desde el panel de elementos.

• Copie el código JavaScript proporcionado a continuación.

• Pegue el código JavaScript anterior dentro del código HTML.

• Una vez hecho esto, publique la página y véala en directo.

• Ahora, verás que tu primer acordeón empieza cerrado.

Consejo profesional: ¿Utiliza varios widgets de acordeón en su sitio web y desea aplicar la misma funcionalidad en todas partes? Sólo tiene que añadir el fragmento de JavaScript a Elementor > Códigos personalizados. Esto hará que funcione de forma consistente en todas las páginas y entradas.

Bonificación: 4 plantillas de acordeón premium listas para usar

¿Por qué utilizar Acordeón básico de Elementor cuando puedes conseguir fácilmente un diseño atractivo y rico en funciones plantillas acordeón?

Claro, el widget por defecto de Elementor hace el trabajo. Pero si buscas una experiencia más dinámica y visualmente atractiva, necesitarás algo más avanzado.

Y el Pack Elementor Las plantillas acordeón le ofrecen mucho más. Como estilos avanzados, integración de iconos, control de animaciones y flexibilidad de diseño. Mejorarán al instante la presentación de tus contenidos.

Ya sea para crear preguntas frecuentes, desgloses de servicios o secciones de contenido interactivo, estas plantillas premium le ahorrarán tiempo y le proporcionarán un aspecto elegante sin las molestias de la personalización manual.

Aquí tiene 5 plantillas acordeón premium de Element Pack:

Acordeón 01: Sirve para organizar contenidos con un acordeón moderno y responsivo, preguntas frecuentes o un Spoiler.

Acordeón 02: Este es un diseño de acordeón limpio y sensible para una mejor legibilidad.

Acordeón 03: Muestre de forma ordenada las preguntas frecuentes o los spoilers con un acordeón adaptable.

Acordeón 04: Gestión de contenidos sin esfuerzo mediante modernos widgets de acordeón.

Acordeón 05: Proporcione una navegación fluida al usuario habilitando URL basadas en hash que abran instantáneamente acordeones o pestañas específicos al cargar la página.

PREGUNTAS FRECUENTES

Última palabra

Si estás trabajando con la última versión de Elementor. El ajuste Estado por defecto de Elementor es la forma más fácil y eficaz de mantener todos los elementos del Acordeón cerrados por defecto.

Este método, con sólo unos clics, garantiza una experiencia limpia. No se necesita código personalizado. Esta función integrada es ideal para los creadores que quieren resultados rápidos sin ajustes técnicos.

Sin embargo, si está utilizando una versión anterior de Elementor. Necesita un control más preciso sobre el comportamiento de sus Acordeones. Por ejemplo, dirigirse a widgets específicos, personalizar animaciones o ignorar conflictos de temas. Entonces, utilizar un enfoque basado en JavaScript o CSS podría ser una mejor manera.

Y si desea omitir por completo el estilo manual, existe otra opción inteligente. Puede utilizar las plantillas de acordeón ya preparadas disponibles en Element Pack Pro.

Estas plantillas tienen un diseño profesional, son totalmente adaptativas y se han creado pensando en la usabilidad en el mundo real. Ya sea para crear preguntas frecuentes, desgloses de servicios o secciones de contenido interactivo. Estos diseños prediseñados ahorran tiempo y ofrecen resultados fluidos.