Editor de Wix Studio: agregar y personalizar un acordeón
6 min de lectura
Usa el elemento de acordeón para mostrar una gran cantidad de contenido en un espacio reducido. Al permitir que los visitantes expandan y contraigan los ítems, podrán encontrar fácilmente la información que necesitan sin tener que desplazarse por una larga lista.
En este artículo, aprenderás a hacer lo siguiente:
Agregar un elemento de acordeón
Selecciona un diseño de acordeón que te guste para comenzar. Puedes personalizar cada ítem en el acordeón para mostrar el contenido de tu cliente. Agrega los elementos que necesites y organízalos como quieras dentro del contenedor.
Para agregar un elemento de acordeón:
- Haz clic en Agregar elementos
a la izquierda del Editor. - Haz clic en Estilo.
- Haz clic en Acordeones.
- Arrastra a la página el elemento de acordeón que te guste.
- Edita el contenido de los ítems del acordeón:
- Selecciona el elemento de acordeón que acabas de agregar.
- Haz clic en Administrar ítems.
- Haz clic en el ítem que deseas editar.
Consejo: Esto abre el ítem en el lienzo para que puedas ver lo que muestra en la actualidad. - Agrega los elementos y la información correspondientes al ítem.
Agregar y administrar los ítems del acordeón
Administra los ítems que aparecen en el elemento de acordeón. Puedes agregar más ítems al contenido de tu cliente, asignarles nuevos títulos y cambiar el orden en el que aparecen.
Para agregar y administrar los ítems del acordeón:
- Selecciona el elemento de acordeón.
- Haz clic en Administrar ítems.
- Pasa el cursor sobre el elemento y haz clic en el icono Más acciones
. - Elige qué hacer con este ítem del acordeón: Duplicar, Renombrar o Eliminar.
Consejos:
- Haz clic en Agregar ítem en la parte inferior del panel para agregar un nuevo ítem en blanco.
- Puedes cambiar el orden de los ítems. Mantén pulsado el icono Reordenar
junto a un ítem y arrástralo a la ubicación deseada.
Elegir cómo se abre y se cierra el acordeón
Decide cómo se ve el elemento de acordeón cuando los visitantes cargan la página. Puedes tener todos los ítems abiertos para que la información sea accesible con facilidad, o cerrados, para lograr un aspecto más minimalista. También puedes elegir si los visitantes pueden abrir o no varios ítems al mismo tiempo.
Para elegir cómo se abre y se cierra el acordeón:
- Selecciona el elemento de acordeón.
- Haz clic en el icono Ajustes
. - Selecciona una opción en Elige el estado predeterminado:
- Todos los ítems cerrados: los visitantes ven primero los ítems de acordeón cerrados y pueden elegir cuál de ellos quieren expandir para leer más.
- Primer ítem abierto: los visitantes ven el contenido del ítem superior, mientras que los otros ítems permanecen cerrados.
- Todos los ítems abiertos: los visitantes ven el contenido de todos los ítems cuando se carga la página.
- Haz clic en la palanca Permitir varios ítems abiertos:
- Activada: los visitantes pueden tener tantos ítems abiertos como deseen en el acordeón.
- Desactivada: los visitantes solo pueden abrir un ítem a la vez.
- (Opcional) Aplica un efecto de transición que aparece cuando los visitantes hacen clic en un ítem para abrirlo.
Nota:
La opción de permitir que se abran varios ítems en el acordeón no está disponible si eliges Todos los ítems abiertos como estado predeterminado.
Diseñar el acordeón
Puedes diseñar cada parte del acordeón para que coincida con el resto de la página. Personaliza los títulos de los ítems, los contenedores que muestran el contenido de cada ítem o todo el espacio de un ítem (título y contenedor incluidos).
Para diseñar el acordeón:
- Selecciona el elemento de acordeón.
- Haz clic en el icono Abrir Inspector profesional
en la parte superior derecha del Editor.
- En el menú desplegable, elige lo que deseas diseñar:
- Títulos: estos son los títulos de los ítems. Puedes diseñar los títulos para que se vean diferentes cuando los visitantes pasen el cursor sobre ellos.
- Contenedores: estos son los contenedores que muestran el contenido de cada ítem.
- Ítems de acordeón: esto controla todo el espacio de un ítem de acordeón (título y contenedor incluidos).
- Usa las opciones disponibles para elegir diferentes fondos, fuentes, esquinas, bordes y más.
Ajustar el estilo del acordeón
Ajusta el estilo del elemento de acordeón según tus necesidades. Puedes elegir la alineación, el relleno y la posición de los títulos de los ítems, así como el icono que aparece junto a cada título.
Consejo:
Puedes aplicar una cuadrícula CSS a cada ítem individual para crear un diseño de píxeles perfecto.
Para ajustar el estilo del elemento de acordeón:
- Selecciona el elemento de acordeón.
- Haz clic en el icono Estilo
. - Ajusta el estilo del elemento de acordeón:
- Elige un icono: selecciona el icono que aparece junto a los títulos de los ítems: Flecha o Más.
- Posición del icono: decide si el icono aparece a la izquierda o a la derecha de los títulos.
- Relleno del título: arrastra el control deslizante para agregar un relleno horizontal y vertical alrededor de los títulos de los ítems.
¿Te ha sido útil?
|