Cómo mover las cajas de categorías a la parte superior

Inspirado en el nuevo diseño de Meta, estuve experimentando para lograr algo similar a la vista de las cajas de subcategorías en el tema con marca de Meta.

Llegué a esto:


Puedo confirmar que el desplegable de etiquetas está realmente alineado :sweat_smile:

¿Cómo puedo lograr esto? ¿Es posible mediante CSS o JavaScript? Puedo desplegar mi propio componente de tema y quiero aprender sobre ello.

La barra de navegación superior debe estar cerca de los temas, no de las subcategorías, por lo que para mí este cambio se trata de la experiencia de usuario (UX) y no solo de un pequeño ajuste visual.

Esto probablemente no sea algo que se pueda hacer con CSS, pero depende por completo de cómo implementaste esta página de inicio en primer lugar. ¿Usaste algún componente específico para rediseñar la página de inicio?

No es la página de inicio, sino la página de categorías. Estoy aprendiendo y por ahora no he aprendido a generar una página de inicio adecuada. Es una de mis tareas pendientes :slight_smile:

Quizás sea posible utilizando JavaScript. Me sorprendió mucho ver todo lo que se puede hacer con los componentes del tema, y, sin tener conocimientos técnicos, imagino que podría haber una posibilidad en ese sentido.

La página de inicio de Meta está construida con el modificador de tema custom_homepage + la nueva API de Bloques, por lo que esa sería la forma recomendada de recrearla.

Si solo se usa CSS, si logras aplicar una cuadrícula (grid) o flexbox al contenedor principal, podrías reordenar los elementos, pero eso sería solo un cambio cosmético y probablemente terminaría siendo un desastre.

¡Gracias de nuevo! Después de volver a esto, creo que no se trata del nuevo diseño de la página de inicio, sino del comportamiento central, que entiendo que podría replantearse en general.

Las subcategorías se ven mucho mejor en la parte superior de la barra de navegación. Para algunos, podría ser algo puramente estético, pero veo que las cajas de subcategorías interfieren con la experiencia de usuario diaria.

¿Qué opinan al respecto? Mis trucos de CSS no pueden resolverlo, y entiendo que no es posible de esta manera.