Construir la estructura visual de una aplicación web sin código requiere entender cómo los contenedores organizan los elementos en pantalla. En este paso práctico dentro de Bubble, se definen los dos grandes bloques que faltan para completar el diseño: el menú lateral y la bandeja de entrada, replicando fielmente la interfaz de referencia.
¿Cómo posicionar dos grupos lado a lado en Bubble?
Partiendo de la clase anterior, la página ya tiene una cabecera configurada con un layout de tipo column, lo que apila los elementos de arriba hacia abajo. Al arrastrar un nuevo grupo debajo de la cabecera, Bubble lo coloca automáticamente en la zona izquierda [01:00]. Sin embargo, el objetivo es tener dos grupos en paralelo: uno a la izquierda (menú lateral) y otro a la derecha (bandeja de entrada).
Para lograrlo, se aplica un concepto fundamental: un contenedor puede contener otros contenedores. Es decir, se crea un grupo padre que actúa como envolvente y se cambia su container layout a row [02:07]. Esto permite que los elementos hijos se distribuyan en fila, uno al lado del otro, en lugar de apilarse.
- Se elimina el ancho fijo del grupo padre para que ocupe todo el ancho disponible.
- Se establece una altura mínima de 600 píxeles como referencia inicial [02:30].
- Este grupo padre se renombra como grupo dashboard.
Después, el segundo grupo (que será el menú lateral) se arrastra dentro del grupo dashboard. Bubble lo posiciona automáticamente siguiendo el layout de tipo row del contenedor padre [03:07].
¿Cómo definir el ancho fijo del menú lateral?
Observando la referencia visual, el menú lateral mantiene un ancho constante independientemente de si se muestra o se oculta. Para identificar el valor exacto se utiliza la herramienta Inspect del navegador: clic derecho sobre el elemento, seleccionar Inspect, y leer las dimensiones [03:42]. En este caso, el ancho es de 305 píxeles.
Dentro de Bubble, se configura el grupo menú lateral con las siguientes propiedades:
- Ancho fijo de 305 píxeles.
- Container layout de tipo column, porque los elementos internos del menú se posicionan uno debajo de otro [04:22].
- Altura configurada para ocupar todo el espacio disponible desde la cabecera hacia abajo.
¿Cómo replicar el color exacto de un elemento web?
Para mantener la fidelidad visual, se utiliza un color picker como la extensión ColorZilla en Chrome [04:58]. El proceso es sencillo:
- Activar la extensión y posicionar el cursor sobre el menú de referencia.
- El código de color detectado en este caso es #FAFAFA.
- Copiar el valor con un clic.
- En Bubble, seleccionar el grupo, ir a apariencia, eliminar el estilo por defecto y aplicar flat color con el código copiado [05:20].
Para el grupo dashboard, se elimina el color de fondo seleccionando default group y quitando el relleno, lo que facilita la visualización limpia del diseño.
¿Cómo hacer que la bandeja de entrada ocupe el espacio restante?
El último bloque pendiente es la bandeja de entrada, que ocupará toda la zona derecha. Se arrastra un nuevo grupo dentro del grupo dashboard y se configura [06:02]:
- Layout de tipo column, ya que sus elementos también se apilan verticalmente.
- Se desmarca el ancho fijo, lo que permite que el grupo se extienda automáticamente por todo el espacio horizontal disponible [06:20].
- La altura se iguala a la del menú lateral.
Esta técnica de desmarcar el ancho fijo es clave: cuando un elemento hijo dentro de un contenedor row no tiene ancho definido, Bubble le asigna automáticamente todo el espacio sobrante después de los elementos con dimensiones fijas.
Con estos pasos, la estructura básica de la aplicación queda completa: una cabecera en la parte superior, un menú lateral de ancho fijo a la izquierda y una bandeja de entrada flexible a la derecha. El siguiente paso será poblar la cabecera con sus elementos internos.
¿Ya lograste replicar esta estructura? Comparte tus avances y dudas en los comentarios.
