Can a Bubble page layout (e.g., text, buttons) be saved to a database like rich text?

Greetings, community! I’m migrating to Bubble from Wordpress and am attempting to use Bubble as a CMS that blends a Udemy-like learning experience with text-based content like a Wordpress site.

I will be attaching videos to lessons via URLs, which works well for a single-page app approach, but I sometimes want to show text with Bubble buttons interspersed. Is there any way I can save a page containing rich text/bubble content to the database and dynamically display it, or does it HAVE to be stored on a separate page?

To describe this in another way, I’m wanting to find a way to surface what equates to a Bubble page on a single-page app screen so I don’t have to switch screens.

In a platform like Wordpress, you define the “layout” for your page that inputs the equivalent of reusable elements that form the “framework” for your page, and you then write/save your content inside of that.

Yes, of course, that what I do and what others do.

You just have to set a data type like “layout contents” containing text field for your elements, then in the design of each layout elements you specify the contents as "layout contents’ s " and that’s it.

You can do the same with the css rules for each elements…

Thanks for the reply, @Christophe_HK . Do you have an image you could share?

I’m wanting to basically save all of the relevant elements (button, text, image, chart) in the order shown on a page to the database sort of like I’d do with a reusable, but I want to be able to reference the content dynamically.

I haven’t images to share as my bubble app UI is built using codepen.io and “pasted” in a html element at the top of an empty bubble page. Then I use the Bubble mechanics to get css and html values from the database and feed the html element.

I mainly used option states to host the html design of my graphical elements (button, jumbotron, navbar and so on).

It’s an huge work to setup but the results are very good, I get the display I do expect for my pages and the performances at loading time are excellent, less than 2 seconds to load 20 Google fonts and more than 30 images.

Overview of the setup here :
http://forum.bubble.io/t/3d-carousel-effect/139697/4?u=christophe_hk

Thanks for the info, @Christophe_HK . I’m curious what you mean by storing the html design in states and option sets? Are you able to elaborate?

In my app, I’m mainly building my user page using a html element.

My users choose the html component they want to add on their page (it’s a king of website builder). For each element they can add, I’ve stored in option states the html code of the component, using html tags, (very simple) example :

<div class="header" >USER_HEADLINE</div>

When the user want to add, for example, the previous element to his page, he selects this html element in a list of elements, than I display a pop-up where the user can set the headline (value of the USER_HEADLINE variable stored in the option). Upon validation, the type of html element and the variables value is stored in a data type, which is a list of html element (for each user).

Then, in the mail html element of the page, I display the list of html elements set by the user, something like :

Current User's html elements :formatted as text :find & replace

The “:formatted as text :find & replace” is there to transform the list of html elements as text, replacing the variables (ex : USER_HEADLINE) with the values stored in the user’s data type.

To sum up, using the html element as a whole page allows you to enhance your app UI as you are free to build your page using your own html code. And Bubble allows you to customize your html code using variables, stored in the DB (globally or for each user).

Powerful!

1 Like

That’s pretty impressive, @Christophe_HK. I’m currently working to build a page builder using native Bubble elements, but I’m thinking I may end up using aspects of this approach. Thanks for the idea and the info.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.