Diseñar una cabecera funcional en Bubble es uno de los pasos clave para construir una aplicación de tareas tipo Todoist sin código. Aprenderás a colocar iconos, ajustar dimensiones, importar imágenes externas y personalizar la barra de búsqueda dentro de un layout row.

¿Cómo se inserta un icono dentro de la cabecera en Bubble?

El punto de partida es la cabecera con layout row que ya tienes creada. Desde el panel izquierdo, asegúrate de tener seleccionada la pestaña Design y abre el desplegable Visual elements, donde encontrarás todos los componentes que Bubble permite usar dentro de los contenedores.

Selecciona Icon, lleva el cursor en forma de estrella hasta la cabecera y dibuja el tamaño aproximado. Bubble lo ajustará automáticamente a la esquina superior izquierda gracias al layout row [1:30].

¿Qué dimensiones debe tener un icono de menú?

Usa el inspector del navegador sobre la aplicación que estás replicando para conocer las medidas exactas. En este caso, el icono de hamburguesa mide 24 por 24 píxeles, una dimensión estándar para iconos de cabecera.

Después de crear el icono, renómbralo como icono menú, ajusta su ancho y alto a 24, céntralo verticalmente y aplícale un margen izquierdo de 50 píxeles para separarlo del borde de la pantalla [2:40].

¿Cómo cambio la apariencia de un icono en Bubble? Ve a la pestaña Appearance del icono y, en la sección Icon, busca por nombre o explora la galería que Bubble ofrece por defecto. Selecciona el que mejor se ajuste a tu diseño.

¿Cómo agrupar el icono de búsqueda y la lupa?

Después del icono de la casa (que repite el mismo proceso con el nombre Home y un margen de 10 píxeles), llega el turno de la barra de búsqueda. Aquí necesitas un contenedor que agrupe la lupa y el espacio de búsqueda.

Arrastra un Group desde Visual elements, colócalo junto al icono de la casa y nómbralo grupo búsqueda. Céntralo verticalmente y déjale 10 píxeles de separación respecto al elemento anterior [4:50].

¿Qué hacer si Bubble no tiene el icono que necesitas?

La galería de iconos de Bubble es amplia, pero limitada. Cuando no encuentres el icono adecuado, como ocurre con la lupa de búsqueda en este ejemplo, puedes descargar imágenes desde IconScout o Iconate y usarlas como recurso visual.

En lugar de insertar un Icon, arrastra el elemento Image dentro del grupo búsqueda. Usa el botón upload para cargar una imagen estática desde tu equipo y ajusta sus dimensiones a 24 por 24 píxeles para mantener la coherencia visual con los otros iconos [6:20].

¿Cómo personalizar el color y los bordes de la barra de búsqueda?

La barra de búsqueda de Todoist tiene un rojo ligeramente más claro que la cabecera. Si herramientas como ColorZilla no logran capturarlo por el efecto hover, puedes ajustarlo manualmente.

Selecciona el grupo búsqueda, ve a Appearance, elige Flat color y mueve el selector hacia un tono más claro respecto al de la cabecera. Bubble actualizará el fondo en tiempo real.

• Selecciona el grupo contenedor antes de aplicar el color.
• Usa Flat color para colores sólidos sin gradientes.
• Ajusta el tono moviendo el selector hacia zonas más claras u oscuras.

Para replicar las esquinas redondeadas, debajo del selector de color encontrarás los estilos de borde. Aplica un roundness de 5 píxeles y la barra adoptará el aspecto característico de Todoist [8:15].

¿Para qué sirve el botón Preview en Bubble? Permite visualizar en tiempo real cómo se verá tu página publicada, sin necesidad de desplegar la aplicación. Está en la esquina superior derecha del editor.

¿Cómo extender el ancho de un grupo en Bubble?

Una vez que la barra de búsqueda tiene color y bordes, ajusta su longitud para que se alinee con el grupo menú lateral. Selecciona el grupo búsqueda y, con las flechas arriba y abajo del teclado, modifica el valor del ancho hasta lograr la alineación deseada.

Presiona Preview nuevamente y verás la cabecera con los tres elementos a la izquierda funcionando como en la aplicación original. Los colores definitivos los ajustarás más adelante usando los estilos globales de Bubble.

¿Qué otros elementos te gustaría replicar de Todoist en tu propia aplicación? Comparte tu progreso en los comentarios.