Bubble’s new Responsive Engine is now in Beta!
Bubble's Responsive Engine, the framework for how responsive web pages are built and rendered, has been re-designed from the ground up to provide a faster and more powerful way to build responsive layouts in Bubble.
Upgrading your Page
The new Responsive Engine [beta] is currently set at the page level. To opt-in, navigate to the desired page (new or existing) and click the “Upgrade responsive engine” button in the Responsive sub tab in the Design Tab. You now have access to the new responsive controls on this page!
Upgrade to new responsive button
Pages and reusable elements not yet upgraded will carry a blue upgrade icon in the page menu. 1. Property Editor
The Property Editor has been updated to accommodate the new responsive controls. Most notably, a layout tab has been added to house the new responsive controls. The Property Editor is now the same across the UI Builder tab and Responsive tab, making it easier to continue building regardless of the tab you are in.
2. Appearance
Controls related to the overall appearance of an element. This includes the data type, data source, styles, and transitions settings.
3. Layout
Controls related to the overall layout of an element on the page. This includes the width, height, container layout type, page visibility, and margins.
4. Conditionals
Conditionals allow you to control how page elements behave and appear under certain circumstances. This tab remains unchanged from before.
Container Layouts
The new Responsive Engine introduces 4 new container layout types that are available to any container element, including the page. These are Fixed, Align to Parent, Row, and Column.
The responsive behavior of a page and its elements is now defined by the container layout type you choose. The container and its child elements will have different controls depending on the layout selected. Each container layout type has distinct behavior, so be sure to play around and choose the one that works best for your design.
By manipulating the parent container and child element controls, as well as mixing and matching container layout types, you can now build almost any responsive layout imaginable!
Comentarios