Página en blanco
La Página en Blanco de Kosmos es una herramienta que te permite crear páginas web para tus flujos sin necesidad de saber programar, en una experiencia 100% "No-Code". Las páginas creadas en Lienzo en Blanco se utilizan para flujos públicos.
Conceptos clave
Estatus:
En un flujo creado con la página en blanco, cada estatus se puede diseñar de forma individual con colores, imágenes y textos para acompañar a los componentes de ese estatus.
Elementos globales:
Son aquellos elementos que permanecen iguales a lo largo de todo el flujo, como el header y el footer. Los elementos globales son importantes porque, mientras el contenido y las acciones cambian con los estatus, los elementos globales permanecen. De esta manera no tienes que rediseñar toda la página para cada estatus.
Secciones:
Las secciones son una parte específica de tu página que pueden incluir sólo texto e imágenes. Cada sección contiene un tipo de contenido, como "¿Por qué trabajar con nosotros?", "Nuestros beneficios", "Sección de testimonios", "Sección de exposición de productos" o "Secciones de formularios".
Secciones dinámicas:
Son secciones en las que puedes tener diferentes ventanas en una misma sección, cada ventana puede tener su propio tipo de contenido, independiente a las otras.
Filas y columnas:
La página en blanco se divide en filas y columnas, como una cuadrícula, para ayudarte a definir tamaños y dimensiones tanto de las secciones, los componentes y la página en sí misma.
zIndex:
El zIndex es un concepto crucial para el diseño. En zIndex tenemos valores del 0 al 10. Piensa que tu diseño se compone de capas. La capa 0 es el fondo, es lo que se ve hasta atrás. Se van agregando capas que se superponen una tras otra. Es una forma de definir qué elementos son apilados delante de otros en una página web, con valores más altos que representan elementos más cercanos al usuario.
zIndex:
El zIndex es un concepto crucial para el diseño. En zIndex tenemos valores del 0 al 10. Piensa que tu diseño se compone de capas. La capa 0 es el fondo, es lo que se ve hasta atrás. Se van agregando capas que se superponen una tras otra. Es una forma de definir qué elementos son apilados delante de otros en una página web, con valores más altos que representan elementos más cercanos al usuario.
Componentes de diseño:
Además de los componentes para crear tus flujos. Existen varios componentes para construir y diseñar tu página. Estos componentes están diseñados para enriquecer y diseñar el contenido de tu página. Los componentes de diseño son:
También es posible personalizar los componentes con los que interactúa tu usuario final.
Business Logic en Página en blanco:
Existen nodos exclusivos para ejecutar funcionalidades en las páginas web.
¿Cómo crear un flujo público en la Página en blanco?
Haz clic en “+Crear nuevo flujo”.
Asigna un nombre a tu flujo.
En “Canal” elige “Autoservicio”.
Haz clic en “Crear flujo”.
Haz clic en ”+Agregar una nueva página”.
Selecciona “Página en blanco”.
¿Cómo cambiar el color de una página?
En la Sidebar, selecciona la página que quieres editar.
Haz clic en los tres puntos y selecciona “Editar”.
Haz clic en “Color de Fondo”.
Selecciona un color en el panel, o bien, puedes ingresar tu color con el sistema hexadecimal.
Cierra la sidebar de edición para guardar los cambios.
Resoluciones
Las páginas que creas en Kosmos son responsivas, es decir, pueden visualizarse en dispositivos con diferentes tamaños de pantalla. Para visualizar cómo se ve tu Página en diferentes dispositivos, Kosmos tiene la siguientes resoluciones:
XS: Abarca un ancho de 640 px o menos.
SM: Abarca un ancho de 640 px a 757 px.
MD: Abarca un ancho de 768 px a 1023 px.
LG: Abarca un ancho de 1024 px a 1279 px.
XL: Abarca un ancho de 1280 px a 1535 px.
XXL: Abarca un ancho de 1536 o más.
La resolución XS se utiliza en celulares.
Las resoluciones SM y MD se suelen utilizar para tablets.
Las resoluciones LG, XL y XXL se suelen usar en laptops, computadoras de escritorio y pantallas.
Para cambiar de resolución sigue los siguientes pasos:
Dirígete a la barra superior de la página.
Haz clic en la resolución actual para desplegar la lista.
Selecciona la nueva resolución.
Filas y Columnas
En una página del Lienzo en blanco, puedes modificar el tamaño de la página o secciones. Para modificar el tamaño existen las filas y columnas.
Filas
Las filas determinan el alto de la página o de una sección. Cada página que agregas tiene de forma predeterminada 24 filas en todas las resoluciones. Puedes modificar las filas para cambiar el alto de tu página. Ten presente que debes cambiar las filas en cada una de las resoluciones.
¿Cómo modificar el alto/filas de una página?
Selecciona en la barra superior la resolución en la que vas a modificar las filas.
Ubica en la Sidebar izquierda la página a la que vas a modificar las filas y haz clic en los tres puntos.
Selecciona “Editar”.
En “Número de filas” captura el nuevo número de filas.
Haz clic en la “x” para cerrar la edición de página y guardar los cambios.
Columnas
Las columnas determinan el ancho de la página y de una sección. Cada página que agregas tiene de forma predeterminada 12 columnas en todas las resoluciones.
Importante:
No puedes modificar las columnas de una página. Sólo puedes modificar las columnas de las secciones.
Cualquier cambio de columnas que realices para una sección, en cualquiera de las resoluciones sólo puede ser igual o menor a 12.
Alto, Ancho, Top y Left
Además del tamaño de la página, puedes personalizar el tamaño y posición de tus componentes y secciones, con las propiedades alto, ancho, top y left.
La principal diferencia entre componentes y secciones, es que en las secciones, estas propiedades se miden en filas y columnas, mientras que en los componentes, se miden en píxeles.
Alto: Esta propiedad define cuántos píxeles de alto tiene un componente.
Ancho: Esta propiedad define cuántos píxeles de ancho tiene un componente.
Top: Esta propiedad define la posición (de arriba hacia abajo) de una sección en la página. Se define con el número de filas que hay entre el tope superior de la página, y el tope superior de una sección. En componentes, esta propiedad define la posición (de arriba hacia abajo) del componente dentro de una sección. Se define con el número de píxeles que hay entre el tope superior de la sección, y el tope superior del componente.
Left: Esta propiedad define la posición (de izquierda a derecha) de una sección en la página. Se define con el número de columnas que hay entre el borde izquierdo de la página, y el borde izquierdo de una sección. En componentes, esta propiedad define la posición (de izquierda a derecha) del componente dentro de una sección. Se define con el número de píxeles que hay entre el borde izquierdo de la sección, y el borde izquierdo del componente.
¿Cómo cambiar el tamaño de un componente en lienzo en blanco?
Selecciona el componente que quieres editar y haz clic en los tres puntos.
Haz clic en “Editar”.
En “Ancho”, ingresa el valor (en pixeles), para determinar el ancho de tu componente. El valor máximo depende del ancho de la sección en que se encuentra el componente.
En “Alto”, ingresa el valor (en pixeles), para determinar el alto de tu componente. El valor máximo depende del alto de la sección en que se encuentra el componente.
Haz clic en la “x” para cerrar la edición de página y guardar los cambios.
¿Cómo cambiar la posición de un componente en lienzo en blanco?
Selecciona el componente que quieres editar y haz clic en los tres puntos.
Haz clic en “Editar”.
En “Top”, escribe cuántos pixeles hay entre el borde superior de tu página y tu sección.
En “Left”, escribe cuántos pixeles hay entre el borde izquierdo de tu página y tu sección.
Haz clic en la “x” para cerrar la edición de página y guardar los cambios.