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.
GIF que muestra un ejemplo del elemento de acordeón en un sitio del Editor X
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:

  1. Haz clic en Agregar elementos  en la parte superior del Editor X.
  2. Haz clic en Estilo.
  3. Haz clic en Acordeón.
  4. Arrastra a tu página un acordeón que te guste. 
  5. Edita el contenido de cada ítem del acordeón:
    1. Haz clic en el elemento de acordeón dentro del Editor.
    2. Haz clic en Administrar ítems.
    3. Haz clic en el ítem que deseas editar. Esto abre el ítem para que puedas ver lo que muestra actualmente.
    4. Agrega al ítem los elementos y la información correspondientes.
Captura de pantalla del panel Agregar elementos, donde puedes agregar un nuevo elemento de acordeón

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:

  1. Haz clic en el elemento de acordeón dentro del Editor.
  2. Haz clic en Administrar ítems.
  3. Pasa el cursor sobre el ítem y haz clic en el icono Más acciones .
  4. 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.
Captura de pantalla del panel Administrar acordeón, donde puedes agregar, renombrar, duplicar, eliminar y reordenar ítems

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:

  1. Haz clic en el elemento de acordeón dentro del Editor.
  2. Haz clic en el icono Ajustes .
  3. 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. 
  4. 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.
  5. (Opcional) Agrega un efecto de transición que aparece cuando los visitantes hacen clic en un ítem para abrirlo.
Captura de pantalla del panel de Ajustes del acordeón, donde puedes establecer cómo se abre y se cierra

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:

  1. Haz clic en el elemento de acordeón dentro del Editor.
  2. Haz clic en el icono Inspector profesional  en la parte superior del Editor X.
  3. Haz clic en la pestaña Diseño .
  4. 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).
  5. Usa las opciones disponibles para elegir diferentes fondos, fuentes, esquinas, bordes y más.
Captura de pantalla de la pestaña Diseño en el Inspector profesional, donde puedes diseñar el elemento de acordeón

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:

  1. Haz clic en el elemento de acordeón dentro del Editor.
  2. Haz clic en el icono Estilo .
  3. 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. 
Captura de pantalla del panel Estilo del acordeón en el Editor X
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?

|