Preajuste de acordeón
Última actualización: 8 abril, 2025
Los acordeones son una excelente manera de mostrar contenido específico solo cuando el usuario lo solicita y crear un diseño limpio. Este artículo te mostrará cómo usar acordeones en Sitejet.
Cómo trabajar con acordeones
Puede agregar un acordeón haciendo clic en la categoría “Acordeón” en la barra lateral.
Simplemente arrastra y suelta el ajuste preestablecido en la posición que prefieras en el sitio web o haz clic una vez para pegarlo después del último elemento seleccionado. Una vez añadido el ajuste preestablecido de acordeón, se verá así en el editor del sitio web:
Como puedes ver, un acordeón siempre consta de un disparador y un contenido:
- Este es el disparador. Los titulares, entre otros elementos, pueden usarse como enlace para dirigirse a páginas web, archivos u otros elementos; en este caso, a nuestro contenido. Puedes personalizar el disparador modificando la configuración en el panel izquierdo al hacer doble clic en él.
- Este es el contenido de nuestro Acordeón. Nuestro contenido puede ser cualquier cosa.
- En nuestro ejemplo, utilizamos un elemento contenedor y agregamos un elemento de texto (4.) para mostrar el contenido.
Como puede ver en la siguiente imagen, puede agregar cualquier cosa al elemento contenedor principal, como imágenes, videos, titulares, etc. Aquí agregamos un elemento de imagen encima del elemento de texto:
Para que el contenido de este acordeón sea visible al pulsar el disparador, se necesita una animación. Al ser un ajuste preestablecido, la animación ya se añadió al elemento contenedor. Sin embargo, puede usar estos ajustes para cambiar la animación, por ejemplo, cómo o qué tan rápido se abre. Los elementos con animación se indican con un icono de estrella delante del nombre del elemento en la ruta de navegación inferior.
Una vez que hayas personalizado el acordeón según tus necesidades, puedes activar el modo de vista previa haciendo clic en el ícono del ojo en la barra superior:
Consejo: El primer contenedor de contenido está configurado para ser visible por defecto. Si desea que este contenedor solo se vea al hacer clic, vaya a la configuración de animación y seleccione “Elemento oculto” en “Inicial”.
Acordeones de imágenes
Como ya mencionamos, puedes usar diferentes elementos como activadores. En lugar de un título, también puedes usar una imagen. En ese caso, las “Pestañas de imagen” son un ajuste preestablecido muy útil.
Una vez que hayas agregado el acordeón de imágenes a tu sitio web, verás esto:
- En este ejemplo, el elemento de imagen es nuestro disparador. Puedes cambiar la imagen de marcador de posición subiendo una nueva imagen o seleccionándola en el Administrador de medios.
- Puede agregar texto encima de la imagen cambiando el texto del marcador de posición.
- En “Enlace”, puedes vincular el disparador a cualquier elemento, ya sea otra página, fuentes externas o un elemento específico. Para este acordeón, y para los acordeones en general, la opción “Siguiente elemento” es la más útil. Por eso ya está seleccionada. Vinculará el disparador al siguiente elemento o contenedor en el editor. En este caso, nuestro cuadro de contenido.
Para crear más activadores y cuadros de contenido, puede seleccionar el activador y presionar [CTRL+D] para duplicarlo, o hacer clic en el icono de copia pequeña mientras pasa el cursor sobre el elemento. Al copiar elementos de acordeón, asegúrese de que el activador y su contenido correspondiente estén uno debajo del otro; de lo contrario, el mecanismo de enlace “Siguiente elemento” no funcionará correctamente. Puede comprobarlo fácilmente pasando el cursor sobre los elementos y observando las etiquetas, de modo que “Activador 1” esté seguido de “Contenido 1”, y así sucesivamente.
Este artículo es una traducción del original en inglés titulado “Accordion Preset” publicado por Sitejet.
