Puede cambiar ajustes de estilo predeterminados para cada widget en Experience Builder con el fin de personalizar propiedades como tamaño, posición, fondo, borde y sombra del cuadro. Las opciones varían en función de las restricciones impuestas por el tipo de página que agregue o por su contenedor principal, tales como una fila o columna, que controlan automáticamente el tamaño y 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. 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.
Ajustes de estilo comunes a todos los widgets incluyen lo siguiente:
- Mantener dentro del contenedor principal: evite que un widget anidado se arrastre fuera de los límites de su widget principal.
- 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. Bloquee los ajustes para sincronizar el radio de las cuatro esquinas.
- 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 alrededor del lienzo para moverlo o redimensionarlo, lo ajustes Posición y Tamaño del panel Estilo se actualizan de forma correspondiente.
Puede establecer los siguientes ajustes de Posición:
- Izquierda: especifique la distancia que se desplaza el borde izquierdo de un widget hacia la derecha del borde izquierdo de su contenedor principal.
- Superior: especifique la distancia que se desplaza el borde superior del widget por debajo del borde superior de su contenedor principal.
- Derecha: especifique la distancia que se desplaza el borde derecho de un widget hacia la izquierda del borde derecho de su contenedor principal.
- Inferior: especifique la distancia que se desplaza el borde inferior de un widget por encima de la parte inferior de su contenedor principal.
Los valores de la propiedad de la posición no tienen efecto simultáneamente. Son una combinación de dos ajustes:
- Izquierda y Superior o Inferior
- Derecha y Superior o Inferior
Cambie de Automático a Personalizado para elegir el valor que hay que definir manualmente. Cuando un valor de posición se establece en Automático, esa propiedad se establece automáticamente.
Nota:
Si establece valores personalizados para el valor Superior e Inferior, se utiliza el valor Superior. Si establece valores personalizados para Izquierda y Derecha, el valor Izquierda se utiliza cuando el idioma del navegador es de izquierda a derecha (como por ejemplo inglés o chino) y el valor Derecha se utiliza cuando el idioma del navegador es de derecha a izquierda (como por ejemplo hebreo o árabe).
También puede cambiar la unidad de cada propiedad de la posición:
- px: el valor absoluto en píxeles
- %: el porcentaje del ancho (izquierda, derecha) y altura (superior, inferior) del contenedor
Los ajustes de Tamaño son una combinación del ancho y altura del contenedor. Puede establecer valores específicos para Ancho y Altura o puede elegir Automático para hacer que se ajusten automáticamente.
Para realizar un control adicional, cambie la opción Modo de altura:
- Fijo: establezca el ancho y altura de forma separada. Esta es la opción predeterminada.
- Relación de aspecto: establezca solo el valor del ancho y la relación de aspecto entre el ancho y altura.
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 elije 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 elije 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.
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. Si cambia el ajuste de altura a Automático, esta se ajusta automáticamente.
Existen tres tipos de ajustes de Altura:
- Ajustar a contenedor: utilice la altura total de su contenedor principal. Esta es la opción predeterminada.
- Fijo: establezca una altura personalizada en píxeles.
- Relación de aspecto: calcule automáticamente la altura en función del ancho y la relación de aspecto entre el ancho y altura.
Si elige Fijo o Relación de aspecto, 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.