Secciones
Secciones
Las secciones te ayudan a diseñar tus páginas. Es dentro de una sección donde puedes colocar tus componentes. No es posible colocar componentes directamente en la página, necesitas colocar una sección. Las secciones, a su vez, te permiten segmentar el contenido de tu página.
También puedes crear "Secciones Dinámicas", este tipo de secciones te permiten crear diferentes ventanas con contenido individual, en una misma sección.
¿Cómo agregar una sección a una página en Página en Blanco?
En la Sidebar, selecciona el estatus donde vas a agregar la sección.
Si tu sección va a ser para diseñar tus componentes generales, selecciona “Componentes generales en la sidebar”.
Haz clic en “+ Agregar sección a estatus”.
Coloca tu cursor sobre la página y verás como toma forma de “╋”.
Haz clic, y sin soltar, arrastra tu cursor para crear tu sección. Suelta cuando tu sección alcance el tamaño deseado.
¿Cómo cambiar el color de una sección o página?
En la Sidebar, selecciona la sección 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.
Filas de sección
Las filas determinan el alto de tu sección.
¿Cómo modificar el alto/filas de una sección de Página en blanco?
Selecciona en la barra superior la resolución en la que vas a modificar las filas.
Ubica en la Sidebar izquierda sección, 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 de sección
Las columnas determinan el ancho de tu sección.
¿Cómo modificar el ancho/columnas de una sección de Página en blanco?
Selecciona en la barra superior la resolución en la que vas a modificar las columnas.
Ubica en la Sidebar izquierda la sección a la que vas a modificar el ancho y haz clic en los tres puntos.
Selecciona “Editar”.
En “Número de columnas” captura el nuevo número de columnas para tu sección. El número máximo es 12. El mínimo es 1.
Haz clic en la “x” para cerrar la edición de página y guardar los cambios.
Posición Top y Left de secciones
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.
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.
¿Cómo cambiar la posición de una sección en la página?
Selecciona la sección que quieres posicionar, en la sidebar y haz clic en los tres puntos.
Selecciona “Editar”.
En TOP, escribe el número de filas que hay entre el borde superior de tu página y tu sección. Por ejemplo:
Si tu sección se va a ubicar en la parte superior de tu página, el valor debe ser 0.
Si tu sección va a estar después de otra sección, por ejemplo un Header, que mide 3 filas, el valor debe ser 3.
En LEFT, escribe el número de columnas que hay entre el borde izquierdo de tu página y tu sección. Por ejemplo:
Si tu sección va a comenzar desde el borde izquierdo de tu página, el valor debe ser 0.
Si tu sección va a comenzar desde la mitad de tu página, el valor debe ser 6.
El valor máximo en posición Left es 12.
Haz clic en la “x” para cerrar la edición de página y guardar los cambios.
Configuraciones de sección
Las secciones pueden tener distintas configuraciones que te permiten crear páginas más dinámicas e interactivas, según tus objetivos.
Para ingresar a la configuración de sección, selecciona tu sección en la sidebar → Haz clic en los tres puntos → Selecciona “Editar”.
Las opciones son:
Color de fondo
Animación al mostrar
Animación al ocultar
Duración de la animación
Retraso de la animación
Posición Top
Posición Left
Z Index.
Número de filas
Número de columnas
Tipo de posición
Ajustar verticalmente
Animaciones de sección
Puedes configurar animaciones para tus secciones, para tener mayor dinamismo al mostrar el contenido de tu página. Ingresa a la edición de tu sección y configura las siguientes propiedades:
Animación al mostrar: En esta propiedad determinas cómo se va a mostrar la sección cuando se muestra al usuario final. Despliega la lista y selecciona de dónde va a aparecer tu sección:
Por defecto
Esquina inferior izquierda
Esquina inferior derecha
Esquina superior derecha
Esquina superior derecha
Izquierdo
Abajo
Derecha
Arriba
Animación al ocultar: En esta propiedad determinas cómo se va a mostrar la sección cuando se oculta para el usuario final. Despliega la lista y selecciona hacia dónde se va a ocultar tu sección:
Por defecto
Esquina inferior izquierda
Esquina inferior derecha
Esquina superior derecha
Esquina superior derecha
Izquierdo
Abajo
Derecha
Arriba
Duración de la animación: Escribe en segundos, cuánto van a durar las animaciones que elegiste anteriormente.
Retraso de la animación: Escribe en segundos, cuánto tiempo tiene que esperar la página para mostrar las animaciones.
Ajustar Verticalmente
Esta función te permite alinear tus secciones cuando existen filas vacías entre ellas. En otras palabras, ajusta la posición top para ajustar una sección hasta topar con el borde inferior de la sección que está arriba de ella.
¿Cómo activar la función “Ajustar Verticalmente”?
Ingresa a la edición de la sección que se va a ajustar.
Activa la función “Ajustar Verticalmente”
Con "Ajustar Verticalmente" activada.
Con "Ajustar Verticalmente" desactivada.
Tipos de posición de sección
En la página en blanco, puedes seleccionar distintos tipos de posición para tus secciones. De esta forma puedes tener distintas opciones para crear la usabilidad y diseño de tus páginas web.
Posición Fixed:
La posición "fixed" se utiliza para fijar un elemento en una ubicación específica de la ventana del navegador, independientemente de si se desplaza la página. Este elemento permanecerá en esa posición incluso si se hace scroll (desplazamiento) en la página. Es útil para elementos que deseas que estén siempre visibles, como barras de navegación o botones flotantes.
Ejemplo: Imagina que tienes un botón de "Volver al inicio" en la esquina inferior derecha de tu página. Si le aplicas la posición "fixed", el botón siempre se mantendrá en esa esquina, incluso si el usuario desplaza el contenido hacia abajo.
Posición Sticky:
La posición "sticky" se utiliza para hacer que un elemento se comporte como "fixed" en una posición determinada hasta que se alcance un punto de desplazamiento específico. Esto significa que el elemento se mantendrá en una posición fija en la pantalla hasta que el usuario llegue a cierto punto, y luego seguirá el flujo normal del documento.
Ejemplo: Supongamos que tienes una barra de navegación en la parte superior de tu página que es inicialmente invisible cuando el usuario desplaza hacia abajo, pero cuando el usuario se desplaza lo suficiente para que la barra de navegación esté en la parte superior de la ventana del navegador, la barra de navegación se "pega" (se vuelve sticky) y permanece visible incluso cuando se sigue desplazando hacia abajo.
Posición Absolute:
La posición "absolute" se utiliza para posicionar un elemento de manera precisa en relación con su primer elemento "posicionado" (es decir, uno de sus antepasados que tenga una posición "relative", "fixed" o "absolute"). El elemento se posiciona en un lugar específico de la página, sin afectar a los otros elementos en el flujo normal del documento.
Ejemplo: Supongamos que tienes una sección que contiene una imagen y quieres colocar esa sección en la esquina superior derecha de la página. Si le aplicas la posición "absolute" a la sección y ajustas las propiedades "top" y "right", podrás posicionarlo en esa esquina sin afectar el diseño de los otros elementos.
