Wix Blocks: diseñar paneles personalizados para los botones de la barra de acciones de tu widget
7 min de lectura
Wix Blocks está abierto a todos los usuarios de Wix Studio. Para acceder a Blocks, únete a Wix Studio.
Blocks te permite crear paneles personalizados para las barras de acciones en tu widget y sus elementos. Cuando un creador de sitios selecciona un botón de acción (por ejemplo, el botón de ajustes), se abre un panel personalizado, en lugar del panel predeterminado.
Cuando creas paneles personalizados, les brindas a los creadores de sitios más opciones para trabajar con tu widget, aumentar su usabilidad y ayudarlos a personalizarlo más fácilmente en su sitio.
La creación del panel consta de tres etapas principales:
2. Agregar código a tu panel para que funcione.
Notas
- Conecta el panel: define qué paneles van con cada botón de acción en la pestaña Configuración.
- Pautas de experiencia del usuario: usa nuestras pautas de UX para que tus paneles sean claros y efectivos.
Crear un panel
Hay dos formas de crear un panel.
Crear un panel a través de la pestaña de paneles
O crear un panel a través de la pestaña Configuración
Agregar elementos al panel
Tu panel está compuesto por elementos del panel, como botones, separadores, campos de entrada y más.
Ver una lista de los elementos del panel
Haz clic en + Agregar elemento y selecciona qué elementos deseas agregar al panel. Puedes agregar el mismo elemento tantas veces como necesites. Luego, puedes personalizar el texto y el estilo y establecer valores predeterminados.
Personalizar el panel
Tienes varias opciones de personalización para los elementos del panel. Puedes cambiar el texto de la etiqueta, agregar texto flotante y establecer valores predeterminados. Para ello, usa la barra de acciones conectada a cada elemento.
Opciones de ajustes
Haz clic en un elemento. Selecciona Ajustes o el icono 
para personalizar el panel. Estas son algunas de las opciones:
para personalizar el panel. Estas son algunas de las opciones:Agregar títulos de campo (ver más)
Agregar texto flotante (ver más)
Definir un elemento como "solo lectura" (ver más)
Configurar las opciones del texto inicial (ver más)
Agregar la validación de patrones (ver más)
Elementos de opción múltiple
Si eliges agregar un elemento que tiene opciones múltiples, como casillas de verificación, botones de radio o listas desplegables, puedes configurarlas usando el botón de administrar opciones en la barra de acciones que aparece cuando seleccionas el elemento.
Renombrar opciones (ver más)
Más acciones (ver más)
para establecer valores predeterminados, editar valores y mover o duplicar elementos.
Una vez que hayas diseñado el panel, debes agregar código para que funcione. Luego, puedes agregarlo a un botón de acción y probarlo para ver si funciona. Más información sobre cómo codificar tu panel
Renombrar, duplicar o eliminar el panel
- Pasa el cursor sobre el nombre del panel en la sección Paneles personalizados en la parte inferior izquierda de la pestaña Paneles.
- Haz clic en el icono Más acciones
cuando aparezca. - Selecciona Renombrar, Duplicar o Eliminar.
Conectar el panel a un botón de acción
Después de crear un panel, debes conectarlo a un botón en la barra de acciones de un widget o elemento.
- Haz clic en la pestaña Configuración.
- Selecciona el widget adecuado en el panel Widgets.
- Pasa el cursor sobre el botón al que deseas conectar el panel, en el menú Editar barra de acciones que aparece. Por ejemplo, si se trata de un panel de ajustes, selecciona el botón de ajustes. Si se trata de un panel de diseño, selecciona el botón de diseño. También puedes agregar un nuevo botón, nombrarlo y conectarlo a un panel.
- Haz clic en
Ajustes del botón.
5. Selecciona el panel en la sección Paneles personalizados.
Ahora que has diseñado tu panel, necesitas agregarle código para que funcione. Más información
Ten en cuenta que el diseño y la codificación de los paneles se realizan en la pestaña de Paneles. La elección de qué paneles van con qué botones se realiza en la pestaña de Configuración. Si no conoces la pestaña de Configuración, obtén más información sobre cómo configurar la barra de acciones de tu widget
¿Te ha sido útil?
|