Puede cambiar los ajustes de estilo predeterminado de cada widget en Experience Builder para personalizar propiedades como el tamaño, la posición, la animación, el fondo, el borde y la sombra de cuadro. Las opciones de la pestaña Estilo del panel de configuración del widget varían en función de las restricciones impuestas por el tipo de página al que agregue el widget o su contenedor principal (como una fila, columna o cuadrícula), que controlan automáticamente el tamaño y la posición.
En lugar de arrastrar widgets alrededor del lienzo para moverlos y redimensionarlos, puede establecer valores explícitos para su tamaño y posición. Los ajustes Tamaño y posición definen cómo se sitúa el widget en la página por ancho, altura y ubicación.Puede especificar estos valores en píxeles (px) o porcentaje (%). Consulte las secciones siguientes para los ajustes de tamaño y posición aplicables a widgets agregados a una página a tamaño completo o una página de desplazamiento.
Precaución:
Al mover un widget de un contenedor a otro, se restablece su tamaño y posición a los valores predeterminados en función del contenedor de destino. Lo mismo sucede cuando se agrega un widget configurado desde la lista de pendientes.
Sugerencia:
Para ayudarle a alinear y posicionar con precisión widgets, las líneas de alineación y los valores de distancia aparecen al arrastrar un widget en el lienzo o moverlos y cambiar su tamaño manualmente en un diseño fijo (como páginas a pantalla completa, ventanas, barras laterales y listas). Los valores indican la distancia desde el widget al lado de su contenedor y a los widgets cercanos, si la distancia se puede calcular. (Un widget que utiliza el porcentaje para la posición y los píxeles para la configuración de tamaño no se puede calcular). Cuando aparecen líneas de alineación, los widgets correspondientes se alinearán en todas las resoluciones de pantalla en la experiencia publicada.
Entre otros ajustes de estilo comunes a la mayoría de los widgets se incluyen los siguientes:
- Rotación: rote el widget en un ángulo especificado en grados. Un valor positivo rota el widget en el sentido horario; un valor negativo rota el widget en sentido antihorario.
- Mantener dentro del contenedor principal: evite que un widget anidado se arrastre fuera de los límites de su widget principal.
- Animación: defina estilos de animación llamativos utilizando efectos como vuelo de entrada, giro de entrada y fundido de entrada. También puede establecer modos de transición para moverse entre vistas de sección.
- Fondo: establezca el fondo del widget eligiendo un color o imagen de relleno. Puede usar el botón Estilo rápido para seleccionar entre diseños predefinidos que coordinen con el tema de su aplicación. Si elige una imagen, puede colocarla dentro del borde del widget usando Ajustar, Rellenar, Centro, Tesela o Extender. Si elige Ajustar, el widget muestra el color de relleno de fondo alrededor de la imagen.
- Borde: establezca el borde del widget eligiendo su color, estilo (como por ejemplo guiones o puntos) y el ancho en píxeles. Cambie el tamaño del radio (por píxeles o porcentaje) para dar forma a las esquinas del widget. Puede utilizar el mismo radio para todas las esquinas, o puede especificar un tamaño de radio para cada esquina por separado. Puede usar el botón Estilo rápido para seleccionar entre diseños predefinidos que coordinen con el tema de su aplicación.
- Sombra del cuadro: agregue un efecto de sombra alrededor del widget. Puede usar el botón Estilo rápido para seleccionar entre diseños predefinidos o utilizar esta configuración:
- Desplazamiento X: establezca la distancia horizontal de la sombra. Un valor negativo coloca la sombra a la izquierda del widget y un valor positivo la coloca a la derecha.
- Desplazamiento Y: establezca la distancia vertical de la sombra. Un valor negativo coloca la sombra sobre el widget y un valor positivo la coloca debajo.
- Radio de desenfoque: aplique un efecto de desenfoque en la sombra.
- Radio de propagación: ajuste el tamaño de la sombra.
- Color: seleccione un color de sombra.
Nota:
El tema seleccionado afecta a las opciones de color de las opciones de configuración. Haga clic en Más para elegir un color personalizado si desea utilizar un color que no forma parte del tema de la aplicación.
Diseño en una página a pantalla completa
Cuando agrega una página a pantalla completa a su aplicación, organiza los widgets en un diseño de formato libre. Si arrastra el widget por el lienzo para moverlo o cambiar su tamaño, los ajustes Tamaño y posición del panel Estilo se actualizan en consecuencia.
Los ajustes de tamaño son una combinación del ancho y la altura del contenedor. Puede definir los valores de Ancho y Altura de un widget mediante los tres modos siguientes:
- Personalizado: establezca valores específicos.
- Extender: define automáticamente el tamaño en función del tamaño del contenedor del widget.
- Automático: defina automáticamente el tamaño en función del contenido del widget. Utilice este modo para widgets que muestran contenido dinámico. (Este modo puede no estar disponible para widgets anidados en un contenedor de diseño, como una columna que controla automáticamente el ancho de forma predeterminada. Por ejemplo, un widget Imagen anidado en un widget Columna solo tiene los modos Extender y Personalizado para el ajuste Ancho).
Nota:
Si el ancho está definido como Extender o Personalizado, puede optar por mantener la relación de aspecto al arrastrar los bordes para cambiar el tamaño del widget.
Sugerencia:
Los ajustes de tamaño y posición no están disponibles para los widgets anidados en un widget Cuadrícula. Para cambiar el tamaño de un widget en una cuadrícula, puede cambiar el tamaño del propio widget Cuadrícula y arrastrar los bordes entre los elementos de la cuadrícula.
La posición de un widget se define por la distancia desde sus bordes (izquierdo, derecho, superior e inferior) a su contenedor. Por ejemplo, puede especificar cuánto se desplazan los bordes izquierdo y superior de un widget respecto de los bordes izquierdo y superior de su contenedor principal. Al agregar un widget, puede introducir un valor en el cuadro de entrada de la posición correspondiente. Para especificar una distancia para el borde opuesto, haga clic en Cambiar a automático (o haga clic en Cambiar a personalizado en el lado opuesto del diagrama).
Los distintos modos de tamaño corresponden a diferentes configuraciones de posición. Por ejemplo, si el Ancho está establecido en Personalizado o Automático, puede definir la posición cambiando el valor de distancia para el borde izquierdo o derecho y el otro valor se establece automáticamente. Si el Ancho está establecido en Extender, puede definir la posición cambiando el valor de distancia para los bordes izquierdo y derecho, y el ancho se establece automáticamente por la longitud restante del ancho del contenedor. El ajuste Altura funciona de manera similar para los bordes superior e inferior, respectivamente.
Sugerencia:
También puede cambiar la posición haciendo clic en los botones de la barra de herramientas en la parte superior del panel Estilo. Por ejemplo, puede colocar el widget en el centro horizontal de su contenedor principal, que establece automáticamente los valores de posición izquierda y derecha (ocultando los cuadros de entrada de distancia en el diagrama).
Ambos ajustes incluyen las siguientes opciones de unidades:
- px: el valor absoluto en píxeles
- %: el porcentaje del ancho y la altura del contenedor
Bloques en una página de desplazamiento
Cuando agregue una página de desplazamiento a su aplicación, su diseño se organiza en bloques. Los bloques usan un diseño de cuadrícula de varias columnas que se utiliza en el widget Fila.
Los bloques tienen los siguientes ajustes de Tamaño y Posición:
- Ancho: establezca un ancho fijo por porcentaje de la página.
- Altura: establezca un valor de altura en píxeles o elija Automático para establecer la altura del bloque automáticamente.
- Desplazamiento X: establezca el desplazamiento horizontal en píxeles.
- Desplazamiento Y: establezca el desplazamiento vertical en píxeles.
Sugerencia:
Haga clic en el botón Fijar de la barra de herramientas de un widget para mantener el widget visible en las páginas de desplazamiento.
Widgets anidados en un bloque
El ancho de widgets que agregaría a un bloque puede variar de 1 a 12 columnas en el diseño de cuadrícula del bloque. Solo puede especificar valores de altura para widgets anidados en un bloque; su ancho se controla con la cuadrícula.
Existen tres tipos de modos de Altura:
- Extender: establezca automáticamente la altura en función de la de su contenedor principal. Esta es la opción predeterminada.
- Automático: defina automáticamente la altura en función del contenido del widget.
- Personalizado: defina un valor de altura concreto en píxeles o porcentaje de la altura del contenedor.
Al elegir Automático o Personalizado, puede elegir una de las siguientes opciones de Alinear:
- Superior: alinee el widget verticalmente con la parte superior del bloque.
- Inferior: alinee el widget verticalmente con la parte inferior del bloque.
- Centro: alinee el widget verticalmente con el centro del bloque.
Animación
Utilice la animación para personalizar cómo aparecen los widgets y las ventanas a medida que los usuarios cargan y navegan por la aplicación. Defina estilos de animación llamativos utilizando efectos como vuelo de entrada, giro de entrada, aumentar y disminuir. También puede establecer modos de transición para moverse entre vistas de sección. Con la configuración de animación proporcionada, puede crear las siguientes experiencias de ejemplo:
- Una ventana realiza un giro de entrada cuando se carga la aplicación.
- Los widgets realizan vuelos de entrada a medida que los usuarios se desplazan hacia abajo por la página.
- Una vista posterior envía la vista anterior a medida que los usuarios navegan por el contenido de un widget Sección.
- Las descripciones realizan un fundido de entrada a medida que los usuarios pasan el cursor por un widget Tarjeta.
Se admiten los siguientes niveles de animación (mostrados de animación de nivel superior a inferior).
Nota:
Las animaciones de nivel inferior invalidan las animaciones de nivel superior. Por ejemplo, si se agrega un widget a un widget Fila, la animación se reproduce para la fila si el ajuste de animación del widget agregado está definido como Ninguno. De lo contrario, se reproduce en su lugar la animación del widget agregado.
- Nivel de página y ventana: compatible con el marco y disponible en la configuración de página y ventana. Este nivel controla la animación de la página o la ventana y todos los widgets que se agregan directamente a una página o ventana (los widgets de primer nivel).
Nota:
Los widgets anidados en widgets de diseño no son widgets de primer nivel. Básese en el contorno para identificar widgets anidados.
- Nivel de contenedor: compatible con el marco y disponible en la pestaña Estilo de los widgets Bloque, Panel fijo, Barra lateral, Fila, Columna, Cuadrícula y Sección. Este nivel controla la animación de aparición del contenedor, así como los widgets que se agregan directamente a él (pero no los widgets anidados en esos widgets agregados). Este nivel también controla la animación de cambio de las vistas en los widgets Sección.
- Nivel de único widget: compatible con el marco y disponible en la pestaña Estilo de un widget. Este nivel controla cómo aparece cada widget.
- Nivel de widget interno: compatible con el widget y disponible en la pestaña Contenido de un widget. Este nivel controla la animación para las interacciones del usuario dentro del widget. Por ejemplo, un widget Marcador reproduce efectos de transición cuando los usuarios cambian a otro marcador y un widget Tarjeta proporciona una animación con el puntero para mostrar más detalles.
Los widgets Sección tienen dos ajustes de animación. El ajuste de animación Entrada controla el efecto de aparición del panel Sección y Transición controla la animación de sus vistas. Los ajustes de la pestaña Vista controlan la transición de los paneles de la vista. Los ajustes de la pestaña Widget controlan cómo aparecen los widgets en la vista. Cuando el contenido de un widget Sección aparece en la página (ya sea cuando se carga la página o cuando se desplaza hasta ella), la animación del widget para la vista actual se reproduce junto con la animación Entrada. Al cambiar entre vistas, la animación del widget se reproduce después de que se reproduzca la animación de la vista.
Configuración de la animación
Para abrir el panel Configuración de animación, haga clic en la vista en miniatura o en el botón Cambiar. Haga clic en la vista en miniatura de una animación, como Flotación de entrada o Acercar, para seleccionarla y obtener una vista previa de la animación en el lienzo. Si lo desea, configure los siguientes ajustes adicionales:
- Efecto: ofrece opciones de microefectos continuos y naturales, como suave, tambaleante y lento.
- Dirección: define la dirección de movimiento (desde arriba, abajo, izquierda o derecha) para los efectos aplicables, como vuelo de entrada y barrido de entrada.
Entre los ajustes de animación para contenedores de diseño (Bloque, Panel fijo, Barra lateral, Fila, Columna y Cuadrícula) se incluye también un ajuste de Widget contenido para especificar la animación de los widgets que se agregan directamente al contenedor. Además de Efecto y Dirección, puede configurar los siguientes ajustes para los widgets contenidos:
- Inicio: defina cuándo se inicia la animación del widget contenido respecto a la animación del widget contenedor. Seleccione Con anterior para reproducir la animación del widget contenido a la vez que la del widget contenedor. Seleccione Después de anterior para reproducir la animación del widget contenido una vez que haya terminado cualquier animación del widget contenedor.
- Reproducir la animación: defina cómo reproducir las animaciones cuando hay varios widgets contenidos.
- Todas a la vez: reproduzca las animaciones de todos los widgets contenidos a la vez.
- Uno a uno: reproduzca las animaciones de todos los widgets contenidos una después de otra.
Puede obtener una vista previa de las animaciones haciendo clic en el botón Vista previa.