https://www.youtube.com/watch?v=O1fbgFXvm1c

core-structure.jpg

page_wrap

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Contains all page content

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" />

Used for copying content to another page

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Has no styling except the style below page_code_custom embed

</aside>

.page_wrap { overflow: clip; }

Overflow clip prevents horizontal scrolling much like overflow hidden but without breaking position sticky or position fixed children.

page_main

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Contains all sections that are unique to this page

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Does not contain the navbar or footer

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Has no styling

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Tagged as “Main” for SEO & Screen Readers

</aside>

page-main.png

Section

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Use the Section Element provided by Webflow • Automatically tagged as “Section” for SEO & Screen Readers • Displays a nice section icon in the navigator

</aside>

Section.png

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Section default styles & padding utilities page_code_utilities embed

</aside>