Diseñar la estructura visual de una app sin código empieza con algo básico: dividir la pantalla en zonas funcionales. En Bubble, crear un menú lateral y un área de dashboard se logra anidando contenedores con distintos layouts, y aquí te muestro cómo replicar la interfaz tipo Todoist paso a paso.

Por qué usar contenedores anidados en Bubble

La lógica de Bubble se apoya en una idea simple: un contenedor puede contener otros elementos, y esos elementos pueden ser, a su vez, contenedores. Esa anidación es lo que permite romper la estructura vertical de la página y colocar elementos lado a lado.

Cuando defines la página como column, todo lo que arrastres se apila de arriba hacia abajo. Pero si necesitas que el menú quede a la izquierda y la bandeja de entrada a la derecha, tienes que crear un grupo intermedio con layout row que aloje ambos.

¿Qué es un container layout en Bubble? Es la propiedad que define cómo se acomodan los elementos dentro de un grupo. Row los pone en fila horizontal, column los apila en vertical y fixed permite posiciones libres.

Cómo configurar el grupo Dashboard que contiene todo

El primer paso es crear el contenedor padre. Arrastra un grupo justo debajo de la cabecera y cámbiale el color desde Apariencia para identificarlo fácilmente. Si te pierdes, el árbol de elementos siempre te muestra la jerarquía completa [02:05].

Este grupo, al que llamarás Grupo Dashboard, necesita tres ajustes clave:

• Cambiar su container layout a row, para que aloje el menú a la izquierda y la bandeja a la derecha.
• Eliminar el ancho fijo, de modo que ocupe todo el ancho de la pantalla.
• Definir una altura mínima de 600 píxeles como punto de partida, valor que puedes ajustar después [03:00].

Con eso ya tienes el lienzo donde irán los dos bloques principales.

Cómo definir el menú lateral con ancho fijo y altura completa

Ahora arrastra el segundo grupo, el que llamarás Grupo Menú Lateral, dentro del Grupo Dashboard. Bubble lo posicionará automáticamente según el layout row del contenedor padre.

Cómo saber el ancho exacto del menú lateral

Para que el menú se vea idéntico al de Todoist, necesitas conocer su ancho real. Haz clic derecho sobre el menú en la página de referencia, selecciona Inspect y revisa el panel inferior: el ancho es de 305 píxeles [04:30]. Ese mismo valor lo aplicas en la propiedad de ancho del grupo en Bubble.

Cómo lograr que el menú ocupe toda la altura

Desactiva el ancho fijo, no, mejor dicho: desactiva la altura fija y cambia el container layout del menú a column, porque sus elementos internos van apilados uno debajo de otro. Después indica que la altura sea la de la página, igual que hiciste con la cabecera.

¿Por qué uso column y no row en el menú lateral? Porque los ítems del menú (proyectos, etiquetas, filtros) se muestran en lista vertical. Column apila, row alinea horizontal.

Cómo replicar el color exacto del menú con un color picker

Para que el color coincida con el de Todoist, usa una extensión de navegador como ColorZilla en Chrome. Te posicionas sobre el menú original, la extensión detecta el código (en este caso #FAFAFA) y con un clic lo copias [06:10].

En Bubble, selecciona el Grupo Menú Lateral, ve a Apariencia, elimina el estilo por defecto y elige Flat Color. Pega el código copiado y el menú adopta el tono exacto.

Un detalle estético: al Grupo Dashboard quítale el color de fondo asignándole default group. Así solo se ve el color del menú lateral, lo que facilita la visualización mientras sigues construyendo.

Cómo crear la bandeja de entrada como segundo bloque

Falta la zona derecha, donde aparecerán las tareas. Arrastra un nuevo grupo dentro del Grupo Dashboard y nómbralo Bandeja de entrada.

La configuración es directa:

• Container layout: column, porque las tareas se listan una debajo de otra.
• Desmarca el ancho fijo para que ocupe automáticamente el espacio sobrante a la derecha del menú.
• Asigna la misma altura que el menú lateral para mantener la coherencia visual.

Con esos ajustes, Bubble extiende la bandeja en todo el ancho disponible y la estructura básica queda lista. Tienes una página dividida en cabecera, menú lateral fijo de 305 píxeles y un área principal flexible para las tareas.

¿Te animas a probarlo y compartir cómo te quedó? En la siguiente entrega trabajaremos los pequeños elementos de la cabecera.