Editor X: agregar y personalizar un acordeón
6 min de lectura
El Editor X está en proceso de transición hacia Wix Studio, nuestra nueva plataforma para agencias y freelancers.Más información sobre Wix Studio
Usa el elemento de acordeón para mostrar una gran cantidad de contenido en un espacio pequeño. Al permitir que los visitantes expandan y contraigan ítems, ellos pueden encontrar fácilmente la información que necesitan sin tener que desplazarse por una lista larga.
En este artículo, aprende cómo hacer lo siguiente:
Agregar un elemento de acordeón
Selecciona un diseño de acordeón que te guste para empezar. Puedes personalizar cada ítem en tu acordeón para mostrar tu contenido. 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
en la parte superior del Editor X. - Haz clic en Estilo.
- Haz clic en Acordeón.
- Arrastra a tu página un acordeón que te guste.
- Edita el contenido de cada ítem del acordeón:
- Haz clic en el elemento de acordeón dentro del Editor.
- Haz clic en Administrar ítems.
- Haz clic en el ítem que deseas editar. Esto abre el ítem para que puedas ver lo que muestra actualmente.
- Agrega al ítem los elementos y la información correspondientes.
Agregar y administrar ítems del acordeón
Administra los ítems que aparecen en tu elemento de acordeón. Puedes agregar más ítems para tu contenido, darles nuevos títulos y cambiar el orden en el que aparecen.
Para agregar y administrar ítems del acordeón:
- Haz clic en el elemento de acordeón dentro del Editor.
- Haz clic en Administrar ítems.
- Pasa el cursor sobre el ítem 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 acordeón cuando los visitantes cargan la página. Todos los ítems pueden estar abiertos y así poder acceder a la información con facilidad o puedes cerrarlos para un obtener 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:
- Haz clic en el elemento de acordeón dentro del Editor.
- 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 expandir para leer más.
- Primer ítem abierto: los visitantes ven el contenido del ítem superior mientras que los otros ítems están 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) Agrega un efecto de transición que aparece cuando los visitantes hacen clic en un ítem para abrirlo.
Diseñar el acordeón
Puedes diseñar cada parte del acordeón para que coincida con el resto de tu 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 un acordeón:
- Haz clic en el elemento de acordeón dentro del Editor.
- Haz clic en el icono Inspector profesional
en la parte superior del Editor X. - Haz clic en la pestaña Diseño
. - Elige lo que quieres diseñar en el menú desplegable:
- 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: son los contenedores que muestran el contenido de cada ítem.
- Ítems acordeón: esto controla todo el espacio del í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.
Para ajustar el estilo del acordeón:
- Haz clic en el elemento de acordeón dentro del Editor.
- 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 tus títulos.
- Relleno del título: arrastra el control deslizante para agregar relleno horizontal y vertical alrededor de los títulos de los ítems.
Consejo:
Cada ítem incluye una cuadrícula integrada de 1x1 que puedes ajustar en función de tus necesidades. Agrega más filas y columnas para crear tu estilo perfecto en píxeles.
¿Te ha sido útil?
|