Editor X: usar cajas multiestado
5 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
Las cajas multiestado te permiten mostrar contenido distinto para diferentes situaciones en el mismo cuadro contenedor, mostrando un estado a la vez. Elige la cantidad de estados que debe tener tu caja, diséñalos por completo y dales ID que luego usarás en tu código.
Tu código define cuándo se debe mostrar cada estado. Puedes crear condiciones para que cada estado aparezca automáticamente o permitir que los visitantes naveguen por su cuenta.
Antes de comenzar:
- Como esta función requiere algo de código, asegúrate de activar el Modo desarrollador de Velo by Wix (enlace en inglés).
- Las cajas multiestado están actualmente en modo beta en el Editor X. Esto significa que todavía estamos trabajando para agregar nuevas funciones y realizar mejoras generales en esta función.
Paso 1 | Agregar una caja multiestado
El primer paso es agregar una caja multiestado a tu sitio directamente desde el panel Agregar. Arrastra la caja a la ubicación deseada en tu página.
Muéstrame cómo
en la parte superior del Editor X.
Usa cajas multiestado dentro de los repetidores:
Una vez que agregas una caja multiestado a un elemento repetidor, se agrega automáticamente a el resto de los artículos con el mismo diseño exacto. Esto es útil para listas con elementos repetidos, como preguntas frecuentes o galerías de productos.
Paso 2 | Agregar y diseñar los estados
Una vez que hayas agregado la caja, diseña los estados que muestra. Puedes personalizar estos estados como quieras: úsalos para insignias pequeñas como la disponibilidad de productos (por ejemplo, "Nuevo", "Agotado") o crea un diseño completamente diferente para cada estado.
Haz clic a continuación para aprender a hacer lo siguiente:
Seleccionar y diseñar un estado
Agregar un estado
.Cambiar el nombre de un estado
Eliminar un estado
Reordenar estados
hacia arriba o hacia abajo para cambiar el orden de los estados.
Consejo de diseño:
Los estados pueden tener diferentes propiedades de altura, lo que te permite revelar información adicional, por ejemplo. Sin embargo, el ancho de tus estados siempre permanece igual.
Paso 3 | Agregar código en modo de desarrollador
El último paso para hacer que la caja multiestado sea funcional es agregar el código que controla cuándo aparece cada estado.
Con las funciones y eventos disponibles en la API de Velo para cajas multiestado, puedes definir e implementar reglas para mostrar y navegar por tus estados.
Importante:
Al agregar el código correspondiente, asegúrate de haber escrito los ID de estado correctamente, con exactamente la misma ortografía y mayúsculas.
Siguiente paso:
Más información sobre trabajar con la caja y el código multiestado (contenido en inglés).
¿Te ha sido útil?
|