Hi,
I consider myself still a newbie to WeWeb and while I am relatively good at figuring out logic and workflows, my understanding of the layout and positioning of components still leaves a lot to be desired.
I have used AI to generate layouts for me and generally rename the components to reflect the name of the section. The problem comes when I am trying the to figure out what some of the components actually are at a later date. The icons for quite a lot of them are very similar -
and the Source Component under setting shows Flexbox for a lot of them.
How can one easily decipher what component is being used in this situation?
Also, is there an updated tutorial/video anywhere which speaks to all the layout components and how best to use them especially for responsive pages?
Thanks as always,
Steve
Hey Steve, great question! 
The structure of a webpage in WeWeb (or most visual builders) really follows principles from classic web design systems. The most fundamental building block is the Div, which, in modern layouts, often acts as a Flexbox container. This “box” is used to group and position elements, and most components (text, images, buttons, etc.) are nested inside a Div. That’s why you’ll see “flexbox” in the source: it refers to how those Divs position their children.
Some quick tips for managing layout and naming Divs/components:
- Name for clarity: Use names that describe their function or content: e.g.,
Header, Footer, MainSection, Sidebar, CTABox.
- Hierarchy helps: If you have nested Divs, try names like
Header-Nav, MainSection-FeatureCards to reflect structure.
- Consistency wins: Stick to a naming pattern (CamelCase or dashes) so revisiting your work is easier.
- Update often: If a component’s purpose shifts, rename! Keeping names updated will save headaches later.
- Avoid generic names: Don’t stick to
Box1, Div23, etc., you’ll forget what they do.
Most layouts are a tree of boxes (Divs), so almost every element is nested for control and responsiveness. Once you get comfortable naming and nesting Divs, identifying components later gets much easier!
