Need help with creating a basic design

I’m really struggling to understand page layout in Bubble and the placements of grups…even though I have followed tutorials and read the documentation…I have upgraded to the new responsive engine.

I want to try and recreate this webpage layout in Bubble

https://startbootstrap.com/previews/full-width-pics

Could someone please advise what the settings on the “Layout” tab of the properties inspector should be for the “page” element and also the group I will create for the black navbar at the top…all given the fact that both should 100% in width and not a fixed width…also what would I need to do to ensure that this navbar is docked up at the top and everything proceeds after it?

Also I’m just not sure about is what value should I enter for the page’s height given that it’s height will just expand in accordance with it’s content

Hey @juancarloschandler :wave:

Let’s see if we can help a bit. :blush:

  1. For the page, I normally have it as a column layout so I can put groups down the page.
  2. Make the black navbar at the top to be a floating group and stick it to the top left.
  3. For the top group on the page, make sure to have a top margin of whatever the height of the navbar is.
  4. Page height, I always put in 0 and then, as I drop elements in, it expands.

Hope that helps a bit. :blush:

2 Likes

I’d set the Layout tab for the page to “column”
I’d set the layout for the black nav bar to row (add in your logo, and another “row” group for links to sit inside of) and then set the navbar row to the second-to-last layout option

make sure the nav bar, and main page elements aren’t set to “fixed width” or “fit width to content”, however you’d want to have the row group for the nav links to have a maximum width :slight_smile: let me know if you have further questions :heavy_check_mark:

took so long responding (got distracted) i didn’t even notice you’d replied first lol :rofl:

1 Like

Another thing I always advise bubblers to do is to get a subscription to gpt plus if you can. ChatGPT, especially GPT4 and even 3.5-turbo, can be a great tool to use to help guide you through bubble. Remember, GPT is only knowledgeable up until September of 2021, so if bubble has updated the user interface around the elements or whatever you’re trying to do, you won’t be able to follow the instructions with 100% accuracy. However, they keep things really similar for the most part. But definitely check it out if you aren’t already.

1 Like

Hi, This is quite dead simple.
The layout type should be “Column”. ← this is the main container.

  1. Navbar header, can set it to row,
  2. Image and Detail Header, can set it to column
  3. the rest rows, can set it to column as well

hope this will helps you! If you want to understand the bubble layout work, I’m available to assist you. :slight_smile:

Hi thank you so much for replying @J805 …I really do appreciate it. When you say that the top group should have a margin of whatever the height of the navbar is…the navbar would be top group…is that what you meant? have I understood correctly…give the floating group container the navbar a top margin that’s equal to it’s height?

Also what do I do to ensure the page and navbar are full width? just simply keep the “this element is fixed width” box unchecked?

@taylor1 thank you so much I really appreciate it. Within the navbar do I set up another group inside for the logo…then another for the links to the right? What would or should I do to ensure the logo is at the far left and the links remain in place over on the right?

@hullaustinj thank you very much I really appreciate it. I have actually used the free chat gpt 3 for asking it questions on how to create this layout and it left me really frustrated…it was saying all these things that were totally wrong…like in the properties panel for the group there’s a style tab where you can select full width and many other things…I will pay for chat gpt 4…if it would answer things like this correctly…do you know that it does?

@r14n.z41 thank you so much I really appreciate it…but what would I put to make the page and group full width and how do I get the logo to be on the far left and the links to be on the far right?

Thank you again to all of you who replied to my first post.

Yeah… ChatGTP doesn’t know anything about the current Bubble editor (since the new responsive engine was only released in Beta after ChatGTPs cut-off learning date). So it’s basically useless for things to do with design in Bubble.

1 Like

Thank you @adamhholmes …would you know if chat gpt 4 has up to date knowledge on designing in Bubble though?

Nope… ChatGPT4 has the same cut-off date for it’s training data as ChatGPT3.5, and doesn’t have any more knowledge… it’s just more sophisticated in it’s understanding and responses.

Certainly, if you ask it about Bubble’s current responsive engine, it doesn’t have any knowledge of it being based on flexbox, and can’t give any accurate info about the current editor.

2 Likes

hi, so the logo doesn’t need to be ina group of it’s own (but it could be if you wanted it to), as long as all the links (and any buttons) are in a group seperate from the logo, then that’ll work:

i will just reiterate that the group with links that you want off to the right should be “fit to content”, or have a fixed width for things to work correctly :100:

Great questions. Ai is all about the prompt you put in. So when I ask it questions, I am very specific. I will say, "how do I connect abc API to my bubble.io web app. Please list 10 steps and I will ask questions for each step. Then talk to it step by step like a normal conversation. Just keep it specific and remember it only has data up until September of 2021, so any updates beyond that could change answers. But as a general rule, it’s a good way to work on projects.

Excellent point with the cut off date. Yeah, it’s not great for designs and such bit I do find it helpful for some things. Just double check everything.

@adamholmes thank you very much for replying. That was a great help.

@taylor1 thank you very much. That was a great help from you.

@hullaustinj Thank you very for replying and clarifying that.

Hi @juancarloschandler,

The earlier suggestions of a column group is a good idea. This would also contain additional column groups for each section.

The next step is the menu. Ideally you should create a row component for the menu, and add this to a floating group on the index page. This will allow you to re-use this floating group, across other pages such as a dashboard, about, contact, pricing or product pages.

I hope this helps!