# How to identify layout components?

**URL:** <https://community.weweb.io/t/how-to-identify-layout-components/20399>\
**Category:** Ask us anything\
**Created:** [November 18, 2025, 1:56pm UTC](https://community.weweb.io/t/how-to-identify-layout-components/20399 "2025-11-18T13:56:55Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![SynopsisLabs](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@SynopsisLabs](https://community.weweb.io/u/SynopsisLabs)\
**Post date:** [November 18, 2025, 1:56pm UTC](https://community.weweb.io/t/how-to-identify-layout-components/20399/1 "2025-11-18T13:56:55Z")

</div>

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 -

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/933450e85dad228481ad694ee17b5576b9702c2e.png)  
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

---

<div class="post-metadata">

**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\
**Post date:** [November 18, 2025, 7:23pm UTC](https://community.weweb.io/t/how-to-identify-layout-components/20399/2 "2025-11-18T19:23:57Z")

</div>

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!

 ![Responsive-web-design-for-multiple-devices](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/fb82a6a336ec36e6c9c0e077f6377f4bdede8fc4.jpeg)