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 varían en función de las restricciones impuestas por el tipo de página a la que las agregue o su contenedor principal (como una fila o una columna), que controla automáticamente el tamaño y la posición.
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.
Nota:
Puede cargar los siguientes formatos de imagen: PNG, GIF, JPG, JPEG y BMP.
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.
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.
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 el ancho está configurado como Extender o 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.
Nota:
Una excepción del ajuste Tamaño incluye colocar un widget dentro de un widget de columna o fila. Por ejemplo, si coloca un widget de imagen en un widget de columna, solo hay dos modos de imagen Ancho (Extender y Personalizado), y ambos pueden definir el tamaño para mantener la relación de aspecto si Altura está definido como Personalizado.
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. Por ejemplo, si Ancho está definido como Personalizado o Automático, puede cambiar 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 al lado izquierdo y derecho, mientras que el ancho se define automáticamente por la longitud restante del ancho del contenedor. La altura es similar, pero corresponde a 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 colocar 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.
Ejemplos
La siguiente lista describe algunas combinaciones recomendadas de ajustes de tamaño y posición:
- Para un ancho personalizado, establezca un valor personalizado de Izquierda o Derecha y elija Automático para el otro valor.
- Para una altura personalizada, establezca un valor personalizado de Superior o Inferior y elija Automático para el otro valor.
- Si elige Automático para el ancho, establezca un valor personalizado de Izquierda y Derecha o establezca solo un valor personalizado para Izquierda o Derecha y deje que el ancho se adapte al contenido del widget.
- Si elige Automático para la altura, establezca un valor personalizado de Superior e Inferior o establezca solo un valor personalizado para Superior o Inferior y deje que la altura se adapte al contenido del widget.
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.
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: utilice la altura completa de su contenedor principal. Esta es la opción predeterminada.
- Automático: el valor de la altura lo define automáticamente el contenido del widget.
- Personalizado: puede especificar el valor de altura en px o %. Si activa Mantener relación de aspecto, puede arrastrar para cambiar el tamaño del widget sin perder la relación de aspecto.
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.
El ajuste Rotación le permite rotar el widget en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj al asignarle un número positivo o negativo.
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:
- 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.
- 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.
- 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.
- 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.
Configuración de la animación
- Haga clic en la vista en miniatura de la animación o en el botón Cambiar para abrir el panel de efectos.
- Haga clic en la vista en miniatura del efecto para seleccionar y obtener una vista previa del efecto único.
- Haga clic en el botón Vista previa para obtener una vista previa de los efectos generales o combinados.
- Algunos efectos pueden tener opciones de configuración adicionales:
- Efecto: ofrece opciones de microefectos continuos y naturales.
- Dirección: define la dirección de movimiento de efectos como vuelo de entrada o flotación de entrada.