Configuración de estilo

La pestaña Estilo en el panel de configuración de widget incluye opciones para cambiar el icono y etiqueta para distinguir entre widgets cuando configure su experiencia web.

El icono y nombre aparecen en la vista Contorno para la página activa y en listas de opciones cuando conecta widgets.

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 de tamaño y posición definen cómo se sitúa el widget en la página mediante el ancho, altura y ubicación. Puede especificar estos valores en píxeles (px) o en porcentaje (%) para determinar cómo visualizar su contenido. 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.

Entre los ajustes de estilo comunes a la mayoría de los widgets se incluyen los siguientes:

• 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. 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.
• Sombra del cuadro: agregue un efecto de sombra alrededor del widget usando los siguientes ajustes:
  • Desplazamiento X: establezca la distancia horizontal de la sombra. Un valor negativo coloca la sombra en la parte izquierda del widget y un valor positivo la coloca en la parte derecha.
  • Desplazamiento Y: establezca la distancia vertical de la sombra. Un valor negativo coloca la sombra encima del 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.

Diseño en una página a pantalla completa

Cuando agregue una página a pantalla completa a su aplicación, organice 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 altura del contenedor. Puede definir el ancho y la altura de un widget en los tres modos siguientes:

• Personalizado: puede establecer valores específicos para Ancho y Altura con el modo Personalizado predeterminado. Si define tanto el ancho como la altura como Personalizado, puede hacer clic en el icono de bloqueo para mantener la relación de aspecto, que le permite arrastrar para cambiar el tamaño sin perderla.
• Automático: si un valor de tamaño se define como Automático, la propiedad se define automáticamente en función del contenido del widget. Se puede utilizar para widgets que muestran contenido dinámico.
• Extender: defina el tamaño de un widget en función del tamaño de su contenedor.

La Posición de un widget se define por la distancia entre cada lado y su contenedor, que es Izquierda, Derecha, Superior e Inferior. Por ejemplo, Izquierda implica lo lejos que está desplazado el borde izquierdo de un widget respecto del borde izquierdo de su contenedor principal. Cuando agrega un widget, puede especificar la distancia Izquierda y Superior introduciendo un valor en el cuadro de entrada de la dirección y puede cambiar la dirección personalizada haciendo clic en Cambiar a personalizado de la dirección opuesta, o haciendo clic en Cambiar a automático de la personalizada.

Los distintos modos de Tamaño corresponden a diferentes ajustes de Posición. Tome Ancho como ejemplo: si Ancho está definido como Personalizado o Automático, puede cambiar uno de los valores de posición Izquierda o Derecha, para que el otro se defina automáticamente. Si Ancho está definido como Extender, puede establecer su posición personalizando la distancia Izquierda y Derecha, mientras que Ancho se define automáticamente por la longitud restante del ancho del contenedor. Sucede lo mismo para Altura, pero corresponde a las posiciones Superior e Inferior.

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 hacer clic en Centro horizontal para crear el widget en el centro horizontal de su contenedor principal y, en este caso, las indicaciones de posición Izquierda y Derecha están en modo Automático.

También puede cambiar la unidad de longitud de la posición y el tamaño:

• px: el valor absoluto en píxeles
• %: el porcentaje del ancho y la altura del contenedor.

Puede rotar el widget en el sentido de las agujas del reloj proporcionando al ajuste Rotación un número positivo, o en sentido contrario a las agujas del reloj si le asigna un número negativo.

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 fijado 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.

Animación

La animación es compatible con Experience Builder para personalizar cómo aparecen sus widgets. Con los efectos y opciones proporcionados, puede crear las siguientes experiencias:

• Una ventana realiza un giro de entrada mientras carga la aplicación.
• Los widgets realizan vuelos de entrada a medida que se desplaza hacia abajo por la página.
• La vista posterior empuja a la anterior a medida que navega por una sección.
• Las descripciones realizan un fundido de entrada a medida que pasa el cursor por un widget Tarjeta.

Se admiten cuatro niveles de animación:

1. Nivel de página/ventana: compatible con el marco y disponible en los ajustes de página/ventana. Controla todos los widgets de primer nivel que aparecen en animación.

   Nota:

   Los widgets de primer nivel significan widgets que se agregan directamente a la página/ventana; no se incluyen los widgets anidados en widgets de diseño. La relación anidada se puede encontrar en la vista Contorno.

2. Nivel de contenedor: compatible con el marco y disponible en la pestaña Estilo de los widgets Bloque, Panel fijo, Barra lateral, Fila, Columna y Sección. Controla cómo aparece el contenedor, así como la animación que aparece de los widgets que contiene directamente (no se incluyen los widgets anidados). En los widgets Sección, también controla cómo cambian las vistas.
3. Nivel de único widget: compatible con el marco y disponible en la pestaña Estilo de los ajustes del widget. Controla cómo aparece el propio widget.

   Nota:

   Las animaciones de nivel inferior invalidarán las animaciones de nivel superior. Por ejemplo, si se agrega un widget a una fila, la animación definida por filas se reproducirá si, en la configuración del widget, la animación está definida como Ninguna. De lo contrario, se reproducirá la animación en la configuración del widget.

4. Nivel del propio widget: compatible con el propio widget y disponible en la pestaña Contenido de la configuración de un widget. Controla la animación de las interacciones del usuario dentro del widget. Por ejemplo, el widget Marcador reproduce efectos de transición cuando los usuarios cambian de marcador y el widget Tarjeta proporciona una animación con el puntero para mostrar más detalles.

La animación de contenedores de diseño (Bloque, Panel fijo, Barra lateral, Fila, Columna) está compuesta por dos partes. Con la animación de contenedor, puede personalizar cómo aparece el panel de contenedor. Con la animación del widget Contenido, puede personalizar cómo aparecen los widgets agregados directamente al contenedor. Los dos efectos de animación se reproducen al mismo tiempo y la animación final es el efecto de superposición. Puede obtener una vista previa del resultado combinado haciendo clic en el botón Vista previa.

Además de la animación Entrada, que controla el efecto de aparición del panel Sección, los widgets Sección tienen otra configuración de animación denominada animación de Transición, que controla las animaciones de sus vistas. La pestaña Vista controla la transición de los paneles de la vista y la pestaña Widget controlan cómo aparecen los widgets en la vista. Cuando la sección entra en la vista (con la página cargada o desplazada), 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 la animación de la vista.