Elements and Page Structure

This content was generated with the assistance of AI and should be verified against the official Webflow documentation before being relied on in production.

This sub-section’s Webflow bibliography lists the reference material consulted while preparing these pages.

This page was written against the Webflow Designer as it was on 2026-10-28. Webflow has no version numbers, so the element list, the Add panel layout and the default class names can change between two visits; the dates in the text say when something appeared or changed, and https://webflow.com/updates is where changes are announced. Every element described here is available on every plan, including the free Starter plan in a Starter Workspace. A few items depend on the plan and say so where they appear: the number of static pages, password protection of pages and folders (a Site plan is required), Collection lists and template pages (a plan with the CMS, which is Premium or higher in the May 2026 plan structure, or a Starter site within its small item limit) and form submission storage.

A Webflow page is a tree of elements. Each element in the Designer becomes one HTML element in the published page, usually with a class that Webflow or the designer chose, and every setting in the Settings panel becomes an attribute. Understanding that mapping is what separates a site that is easy to maintain, accessible and good for search from one that merely looks right. This page is the catalogue of the building blocks and the rules for assembling them: the page skeleton, the layout elements, the semantic tag setting, text and media, navigation and interactive widgets, forms and embeds, CMS elements, the utility pages, and the pages and folders that contain all of it. The look of the elements is covered in the Style panel page, the way classes are applied in the classes page, and the layout systems in the flexbox and grid page.

The running example is the Fernbrook Gardens site, a fictitious botanical garden. This page builds the structure of its Home page and of a Plant detail page: a header with a navigation bar, a hero, a list of plants, an events tabbed block, a newsletter form and a footer, all with the right semantic tags.

Who uses elements

  • The designer assembles pages from elements and chooses the tags, classes and structure.

  • The content editor and the marketer never add structure, but they edit the text, images and links of elements in Edit mode, so the structure the designer builds decides what they can change.

  • The SEO specialist depends on the heading hierarchy, the landmark tags and the page settings described below.

  • The accessibility auditor depends on the same tags and on the labels of interactive elements.

  • The developer reads the generated HTML to attach scripts and styles, and the generated classes (the ones starting with w-) are the contract that custom code can rely on.

The element tree and the HTML it produces

Webflow keeps the page as a tree. The Navigator panel shows that tree, and the published page is the same tree serialised as HTML. The root is always the Body, and everything else is inside it. The following diagram shows the structure of the Fernbrook Home page and the tag each branch is published with. It is a schematic and does not reproduce a screenshot.

flowchart TB BODY["Body"] HEADER["header: Navbar and logo"] MAIN["main"] FOOTER["footer: address, links, copyright"] HERO["section: hero with h1 and a button"] PLANTS["section: Collection list of plants"] EVENTS["section: Tabs with the events of the week"] NEWS["section: Form with email field"] BODY --> HEADER BODY --> MAIN BODY --> FOOTER MAIN --> HERO MAIN --> PLANTS MAIN --> EVENTS MAIN --> NEWS HERO --> C1["div container"] PLANTS --> C2["div container"] EVENTS --> C3["div container"] NEWS --> C4["div container"] C1 --> H1["h1 and p and a"] C2 --> LIST["div w-dyn-list"] C3 --> TABS["div w-tabs"] C4 --> FORM["div w-form"]

Three rules follow from this tree. First, the order of the Navigator is the order of the page for assistive technologies and search engines, so the visual order that CSS creates should not contradict it. Second, every element has exactly one parent, and the Designer refuses a drop that would break the rules of an element (a Collection Item cannot be dropped outside a Collection list, for example). Third, the label the Navigator shows is a design-time name; only the tag, the classes, the ID and the attributes are published.

The page skeleton: Body and the published document

The Body is the root of every page and it cannot be deleted. The Style selectors panel shows it as Body (All Pages): styling it writes the rule for the body tag, which applies to every page of the site, and this is where the default font family, text colour, line height and background are normally set so that all other elements inherit them. Setting these on the Body instead of on each element is the first habit of a maintainable site.

A published Fernbrook page has the following skeleton. The values in the <html> tag are identifiers that Webflow writes, and the other lines show what the page settings and the site settings contribute. The CDN host and the identifiers are placeholders in this example.

<!DOCTYPE html>
<html data-wf-page="PAGE_ID_PLACEHOLDER" data-wf-site="SITE_ID_PLACEHOLDER" lang="en">
<head>
  <meta charset="utf-8">
  <title>Fernbrook Gardens | Open every day of the year</title>
  <meta content="A botanical garden with 4,000 plant species." name="description">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="https://cdn.prod.website-files.com/SITE_ID_PLACEHOLDER/css/fernbrook.webflow.css" rel="stylesheet" type="text/css">
</head>
<body class="body">
  <!-- header, main and footer go here -->
  <script src="https://cdn.prod.website-files.com/SITE_ID_PLACEHOLDER/js/webflow.js" type="text/javascript"></script>
</body>
</html>

Source: Webflow Flowkit: Page Structure

The stylesheet link and the webflow.js script are written by the platform. What the stylesheet contains (the Webflow base rules, the w- component classes and the rules of the site) is explained in HTML and CSS in Webflow, and the position of the head and footer custom code in the document is explained in Custom code in the head, footer and embeds. The lang attribute comes from the site language setting and is overridden per locale on localized sites. A page without the right lang is announced with the wrong pronunciation by screen readers, so check it in the site settings before launch.

The generic rules of HTML document structure are in HTML structure and the element reference is in the HTML elements appendix; this page covers only how Webflow exposes them.

The Add panel

Elements are added from the Add panel (the plus icon at the top of the left bar, shortcut A on the keyboard), which groups them in categories. The category names and the order have changed more than once since the 2023 redesign, so look an element up by name with the search box of the panel or with Quick find. The groups in 2026 are:

Group Elements

Layout

Section, Container, Div Block, Quick Stack, Grid, V Flex, H Flex, Columns (legacy) and Navbar

Basic

Heading, Paragraph, Text Link, Text Block, Link Block, Button, List, List Item, Image, Rich Text, Blockquote and Figure

Typography

pre-styled text elements that can be dropped on a page

Media

Video, YouTube, Vimeo, Background Video, Lottie animation and Spline or Rive scenes

Forms

Form block, Form field, Text field, Text area, Select, Checkbox, Radio, File upload, Submit button, Search form and Captcha-related blocks

Advanced

Tabs, Slider, Lightbox, Dropdown, Code Embed, Custom Element, Map embed, Facebook-style social embeds, Date and Time pickers and the HTML Embed

CMS

Collection list (once a Collection exists), Dynamic list, Dynamic Item and the Collection fields

Components

the components defined in the site and the libraries installed on it

Columns is the pre-flexbox grid of the Designer and it is kept only so that old sites continue to work; new work uses Quick Stack, Flex or Grid. The exact membership of each group is approximate, because Webflow reorders the panel; the elements themselves are what matters.

Source: Webflow Help Center: Navbar

Layout elements

The layout elements hold other elements and carry the structure. Choosing the right one is the most frequent decision when building a page.

Section

A Section is the full-width horizontal band of a page. A page is a vertical stack of sections: a hero, a list, a call to action. A section gets a class, normally section, with the vertical padding of the site, and it holds a Container. Pages built with the Webflow Way and with the Client-First style (presented in the class naming page) follow exactly this stack.

The Section is published as a section element or as a div, depending on the tag setting described later. Do not rely on the default: the semantic tag of a section is a decision to make explicitly. A Section cannot contain another Section; nest a Div Block with the Section tag when a section inside a section is semantically right.

Container

The Container centres content and limits its width. Webflow’s own Container (the element that comes from webflow.css, with the classes w-layout-blockcontainer and w-container) has a maximum width of 940 px on Desktop, a width reduced on the smaller breakpoints and centred auto margins. Sites usually give it a class of their own (container) so that the maximum width, the padding and the variants (is-small, is-full-width) are set in one place. The class names that start with w- belong to Webflow and must not be renamed or restyled directly; a class of the designer’s own on top of them is the right way to change the look.

Div Block

The Div Block is the generic container, published as a div by default. It has no behaviour of its own: it is a box that can be styled with any display mode, which makes it the most used element on any site. The temptation is to use it for everything, and the consequence is a page with no landmarks and no meaningful structure. Use a Div Block when no semantic element fits (a wrapper for layout, a card, a column), and change its tag when one does.

A Div Block set to flex or grid, with or without a class, is also what the V Flex and H Flex elements create: they are Div Blocks with display: flex and a direction already applied (w-layout-vflex and w-layout-hflex). Quick Stack and Grid are the same idea with a preset: a Grid element is a div with display: grid and the class w-layout-grid; Quick Stack is a grid or flex preset that collapses on small breakpoints. The CSS they write and how to choose among them is in the flexbox and grid page.

<section class="section">
  <div class="w-layout-blockcontainer container w-container">
    <div class="w-layout-vflex hero_stack">
      <h1 class="hero_title">Open every day of the year</h1>
      <p class="hero_lead">Walk among 4,000 plant species, from alpine rock gardens to a tropical glasshouse.</p>
      <a href="/visit" class="button w-button">Plan your visit</a>
    </div>
  </div>
</section>

Source: Webflow Flowkit: Page Structure

The Fernbrook hero is the page’s first section. The exact classes that Webflow adds around the designer’s own (w-layout-vflex, w-container, w-button) depend on the element and on the version of webflow.css that the platform serves, so treat them as stable markers for scripts but not as classes to style.

The semantic tag setting

Many layout elements carry a tag setting in the Settings panel. It changes the HTML tag that is published, without changing anything about the look, because styles are attached to classes and not to tags. It is the main tool to make a Webflow page semantic.

The official Designer API documentation lists which tags each element accepts, and the Designer follows the same table.

Element Tags accepted

Div Block, Section, V Flex, H Flex, Container, Rich Text, Navbar container, Tab content and slots

div, header, footer, nav, main, section, article, aside, address, figure

Heading

h1 to h6

List

ul, ol

Source: Designer API: Set HTML tag

The tags map to the HTML landmarks and sectioning elements that screen readers expose for navigation. A recommended assignment for the Fernbrook Home page follows.

Part of the page Tag Why

Site header with the logo and the navbar

header

Landmark banner when it is a direct child of the body

Primary navigation

nav

Landmark navigation; add aria-label when there is more than one

Main content wrapper

main

Landmark main; exactly one per page, the target of a skip link

A thematic band of content

section

A region when it has an accessible name (a heading and aria-labelledby)

A self-contained entry (a plant card, a journal post body)

article

A unit that makes sense on its own and could be syndicated

A side note or a related-items list

aside

Landmark complementary

Postal address of the garden

address

Contact information for the page or the article

Illustration with a caption

figure

Pairs with figcaption

Site footer

footer

Landmark contentinfo when it is a direct child of the body

Applying the tags

The default Section is published as a div or as a section depending on the Designer version and the element, which is why the tag has to be checked on each element. The procedure is the same every time.

  1. Select the element on the canvas or in the Navigator.

  2. Open the Settings panel.

  3. Open the Tag dropdown at the top of the element settings and choose the tag.

  4. Check the result in the breadcrumb at the bottom of the canvas, which shows the tag of the selection.

There is no main element in the Add panel, so the main landmark is a Div Block (or a Section) whose tag is set to main. The usual structure puts all page content between the header and the footer in a single main that the designer creates once per page. A component can contain the main wrapper only if it is used once per page.

<body class="body">
  <header class="site-header">
    <nav class="navbar w-nav" role="navigation" aria-label="Primary">…</nav>
  </header>
  <main class="main">
    <section class="section hero">…</section>
    <section class="section" aria-labelledby="plants-title">
      <h2 id="plants-title">Plants of the season</h2>
    </section>
  </main>
  <footer class="footer">
    <address class="footer_address">12 Fern Lane, Brookside</address>
  </footer>
</body>

Source: Designer API: Set Div Block element tag

Anything in that example that is placed in the Designer as an element can be created programmatically with the Designer API (see Designer Extensions and the Designer API). The same setTag call that the documentation describes is what the Settings panel performs.

// Designer Extension: set the tag of the selected Div Block to "main"
const element = await webflow.getSelectedElement();
if (element && element.type === "DivBlock") {
  await element.setTag("main");
  await webflow.notify({ type: "Success", message: "Tag set to main" });
}

Source: Designer API: Set HTML tag

The element type name and the exact call shape are those of the typings package @webflow/designer-extension-typings 2.2.2; check the reference before relying on a name.

Text elements

Heading

A Heading is published as h1 to h6 with the Tag setting. The heading level expresses the outline of the page, not the size: size is set with a class. Use one h1 per page (the page title, which for a CMS template page is the item name bound from the Collection), then h2 for the sections and h3 below them. The Audit panel reports skipped levels and missing headings, and the check is worth running before every publish. A common mistake is to choose the level to get the right size, which hides the structure from assistive technologies and from search engines. Choose the level for the structure, and set the size on the class.

Paragraph, Text Block and Block quote

The Paragraph is a p. The Text Block is a div with text that is used for short labels, captions and numbers that are not paragraphs. A Block quote is a blockquote. Double-clicking any of them edits the text in place, and the text can be partly formatted (bold, italic, link, superscript, subscript) with the toolbar, which writes inline strong, em, a, sup and sub elements inside the paragraph. Line breaks are written with Shift+Enter, which inserts a br. The text can also be bound to a CMS field on a template page or inside a Collection list.

Rich Text

The Rich Text element is a block of long-form content with a toolbar, designed for CMS Rich Text fields but usable on any page. It is published as a div with the class w-richtext that contains the paragraphs, headings, lists, images, quotes and embeds the editor writes. The element’s own tag setting accepts the container tags listed earlier.

The key idea is that the elements inside a Rich Text are not styled one by one. Their style comes from rules that the designer writes on the class of the Rich Text element, with nested selectors such as the Style selectors panel’s All H2 Headings and All Paragraphs inside a Rich Text. A Fernbrook journal post is styled once, and every post inherits it.

<div class="journal_body w-richtext">
  <h2>Pruning roses in autumn</h2>
  <p>Prune after the first frost, cutting above an outward-facing bud.</p>
  <figure class="w-richtext-figure-type-image w-richtext-align-fullwidth">
    <div><img src="https://cdn.prod.website-files.com/placeholder/roses.avif" alt="Pruned rose canes" loading="lazy"></div>
    <figcaption>After pruning</figcaption>
  </figure>
  <ul role="list"><li>Cut dead wood</li><li>Open the centre</li></ul>
</div>

Source: Webflow University: Designer courses

A Rich Text can contain Webflow components as of the 2024 update when the component is allowed in rich text, and it is the one place where an editor can add embedded media without opening the Designer structure.

List and List Item

The List element is published as ul or ol according to the Tag setting, and each List Item is an li. The Designer adds a role="list" attribute to unstyled lists. This is a deliberate accessibility workaround: Safari with VoiceOver removes the list semantics from a list whose list-style is none, and the role puts them back. Keep the attribute when you remove the bullets.

Lists are the right element for a group of related items: a navigation, the opening hours, the steps of a visit. A set of div elements that look like a list is not a list for a screen reader.

<ul role="list" class="hours_list">
  <li class="hours_item">Monday to Friday: 9:00 to 18:00</li>
  <li class="hours_item">Saturday and Sunday: 9:00 to 20:00</li>
</ul>

Source: Webflow University: Designer courses

Links and buttons

Three elements create links, and they differ in what they can contain.

Element Published as Use for

Text Link

a with text only

A link inside or next to text

Link Block

a with the class w-inline-block that contains other elements

A card or an image that is entirely a link

Button

a with the class w-button

A call to action

All of them share the link settings of the Settings panel: Link to a page, a Collection page, an external URL, an email, a phone number, a section on the same page or a file; Open in new tab (which adds target="_blank" and the rel attribute noopener); and the label used as the accessible name. A Button is an a, not a button element, so it is announced as a link; a real button is used for actions that do not navigate and is produced with a Custom Element of that tag, or by the Submit button of a Form.

The Link Block deserves care. A card that wraps a heading, an image and a paragraph in a link produces a link whose accessible name is the concatenation of all the text inside it. Prefer a short heading inside the link and a single link per card.

<a href="/plants/lavender" class="plant-card w-inline-block">
  <img src="https://cdn.prod.website-files.com/placeholder/lavender.avif" alt="" loading="lazy" class="plant-card_image">
  <h3 class="plant-card_name">Lavender</h3>
</a>

<a href="/visit" class="button w-button" aria-label="Plan your visit to Fernbrook Gardens">Plan your visit</a>

Source: Webflow University: Designer courses

In the card above the image has an empty alt because the heading already names the link; an image that is the only content of a link needs a meaningful alt instead.

Links that jump to a section of the same page use the ID of the target element (the ID field of the Settings panel). The ID must be unique on the page, and a link with the Section option offers the IDs found on the current page.

Media elements

Image

The Image element is an img whose source is an asset of the site. The Settings panel sets the asset, the alt text and the loading mode. Since the 2025 default change the loading mode is lazy for new images; an image above the fold (the hero) should be set to eager so that it is not delayed. Webflow generates the srcset and sizes attributes from the uploaded asset so that the browser downloads a size appropriate for the viewport.

<img src="https://cdn.prod.website-files.com/placeholder/glasshouse-p-800.avif"
     srcset="https://cdn.prod.website-files.com/placeholder/glasshouse-p-500.avif 500w,
             https://cdn.prod.website-files.com/placeholder/glasshouse-p-800.avif 800w,
             https://cdn.prod.website-files.com/placeholder/glasshouse.avif 1600w"
     sizes="(max-width: 767px) 100vw, 800px"
     alt="The tropical glasshouse at dusk" loading="eager" class="hero_image">

Source: Webflow University: Designer courses

The alt text is mandatory for content images and empty for decorative ones. File formats, the AVIF and WebP conversion and the size limits are covered in Images and assets, and the performance consequences in Performance optimization.

Video, background video and embedded media

The Video element embeds a YouTube or Vimeo video by URL and produces a responsive iframe inside a wrapper (w-video). The Background Video element plays a muted, looping video behind other elements and is published as a div with the class w-background-video containing a video element. Background videos are decoration; they should be short, muted, small and have a poster, and they should be paused for visitors who prefer reduced motion. Lottie, Spline and Rive are described in Lottie, Spline, Rive and video.

Navigation and widgets

The following elements are Webflow components built from several child elements, with behaviour supplied by webflow.js. They come with classes that start with w-. Their children can be restyled and rearranged, but removing a required child breaks the widget, and the Designer often prevents it.

Navbar

The Navbar is the navigation bar of the site: a brand link (w-nav-brand), a menu (w-nav-menu) with links (w-nav-link) and a menu button (w-nav-button) that shows on the breakpoint where the menu collapses, by default Tablet and below. The collapse breakpoint is a setting of the element (Menu breakpoint). The menu button toggles the menu on and off and the Navbar writes data- attributes for the behaviour.

<div data-animation="default" data-collapse="medium" data-duration="400" role="banner" class="navbar w-nav">
  <div class="container w-container">
    <a href="/" class="brand w-nav-brand" aria-label="Fernbrook Gardens home">
      <img src="https://cdn.prod.website-files.com/placeholder/logo.svg" alt="" width="140" class="brand_logo">
    </a>
    <nav role="navigation" class="nav-menu w-nav-menu">
      <a href="/visit" class="nav-link w-nav-link">Visit</a>
      <a href="/plants" class="nav-link w-nav-link">Plants</a>
      <a href="/events" class="nav-link w-nav-link">Events</a>
    </nav>
    <div class="menu-button w-nav-button" role="button" tabindex="0" aria-label="menu" aria-controls="w-nav-overlay-0" aria-haspopup="menu" aria-expanded="false">
      <div class="w-icon-nav-menu"></div>
    </div>
  </div>
</div>

Source: Webflow University: Navbar

Some points about the Navbar. The role="banner" on the outer element is what the Navbar writes; setting the element’s own tag to header (and keeping the Navbar inside it) is the cleaner combination for landmarks, and the nav menu inside is the nav. A page with two navigations (a header and a footer menu) should give each an aria-label. The current page link receives the class w--current automatically, which is the hook for the active style; a link to the Home page matches only the Home page. The page’s fixed header is built by giving the Navbar a fixed or sticky position (see Positioning and overflow), and a skip link as the first focusable element of the body lets keyboard users jump to the main landmark. The Navbar is a good candidate to become a component, because it repeats on every page; see Components, props, slots and variants.

Dropdown

A Dropdown is a toggle (w-dropdown-toggle) and a list (w-dropdown-list) of links (w-dropdown-link). It opens on click, or on hover when the setting is enabled, and closes on a click outside. It can be placed in a Navbar menu or anywhere else on the page. Hover-only dropdowns do not work on touch devices and are awkward with a keyboard; the Dropdown element handles keyboard opening and Escape, but a menu with many links is better served by a separate page.

Tabs

Tabs are a menu of tab links (w-tab-link) in w-tab-menu, and a content area (w-tab-content) with one pane (w-tab-pane) per tab. The link and the pane are matched by the order and by the generated data-w-tab attribute, and the active tab carries the class w--current (link) and w--tab-active (pane). The element writes the ARIA attributes for tabs (role="tablist", role="tab", role="tabpanel", aria-selected).

<div data-current="Tab 1" data-easing="ease" data-duration-in="300" data-duration-out="100" class="events_tabs w-tabs">
  <div class="w-tab-menu" role="tablist">
    <a data-w-tab="Tab 1" class="tab-link w-inline-block w-tab-link w--current" id="w-tabs-0-data-w-tab-0" href="#w-tabs-0-data-w-pane-0" role="tab" aria-controls="w-tabs-0-data-w-pane-0" aria-selected="true">
      <div>Saturday</div>
    </a>
    <a data-w-tab="Tab 2" class="tab-link w-inline-block w-tab-link" id="w-tabs-0-data-w-tab-1" href="#w-tabs-0-data-w-pane-1" role="tab" aria-controls="w-tabs-0-data-w-pane-1" aria-selected="false" tabindex="-1">
      <div>Sunday</div>
    </a>
  </div>
  <div class="w-tab-content">
    <div data-w-tab="Tab 1" class="w-tab-pane w--tab-active" id="w-tabs-0-data-w-pane-0" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-0">…</div>
    <div data-w-tab="Tab 2" class="w-tab-pane" id="w-tabs-0-data-w-pane-1" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-1">…</div>
  </div>
</div>

Source: Webflow University: Designer courses

The exact identifiers and attributes are generated and can change; the structure is what is stable. Content inside inactive panes is in the HTML but hidden, so it is still read by search engines, which makes tabs acceptable for content that you want indexed, unlike content loaded on demand.

Slider

The Slider (w-slider) has a mask (w-slider-mask) that holds the slides (w-slide), two arrows (w-slider-arrow-left and w-slider-arrow-right) and the navigation dots (w-slider-nav, w-slider-dot). Settings cover autoplay, the delay, looping, the animation and the visibility of the arrows and dots. The Slider announces itself with role="region" and an aria-label, and each slide with a position label.

Autoplay and animated movement are the accessibility risks of sliders: moving content that the visitor cannot pause fails the accessibility guideline on moving content. Disable autoplay, or provide a pause control, and prefer showing the cards in a grid when all of them matter. A slider is the wrong container for the content that most visitors must read.

Lightbox

The Lightbox (w-lightbox) is a link that opens an image or a video in a modal overlay with navigation between the items of the same group. It is published with a hidden script block in JSON that lists the items. It supports a caption, a group name and keyboard navigation, and it is also available as a Lightbox option on an Image or Video in the Settings panel. The thumbnail needs a meaningful alt text, because it is the only content that is available before the overlay opens.

Forms

The Form block is a div with the class w-form that contains a form element with the fields, and two message blocks, the success message (w-form-done) and the error message (w-form-fail), which are hidden until submission. The fields are the Form fields (a label and an input), Text area, Select, Checkbox, Radio and File upload; the Submit button is an input of type submit with the class w-button.

<div class="newsletter w-form">
  <form id="wf-form-Newsletter" name="wf-form-Newsletter" method="get" class="newsletter_form" data-name="Newsletter" aria-label="Newsletter">
    <label for="Email" class="field-label">Email address</label>
    <input class="text-field w-input" maxlength="256" name="Email" data-name="Email" placeholder="you@example.com" type="email" id="Email" required="">
    <input type="submit" data-wait="Please wait..." class="button w-button" value="Subscribe">
  </form>
  <div class="w-form-done" tabindex="-1" role="region" aria-label="Newsletter success">
    <div>Thank you! You are on the list.</div>
  </div>
  <div class="w-form-fail" tabindex="-1" role="region" aria-label="Newsletter failure">
    <div>Something went wrong while submitting the form.</div>
  </div>
</div>

Source: Webflow University: Designer courses

Every field needs a visible label associated with it by for and id; a placeholder is not a label. Submissions, notifications, spam protection and the limits per plan are in Forms. The success and failure blocks are ordinary elements that can be restyled or replaced by a redirect URL in the form settings.

Embeds and custom elements

Code Embed

The Code Embed is a block (w-embed) that publishes the HTML, CSS or JavaScript written in its editor. It is the escape hatch for markup that no element produces: a third-party widget, a JSON-LD script, an inline SVG, a style rule that the Style panel cannot write. The limit is 50,000 characters per embed. It can include CMS fields in a template through the Add field button, which is how a dynamic embed is built (see Conditional visibility and dynamic embeds). Scripts in embeds run in Preview and on the published site, not on the canvas.

<div class="map-embed w-embed w-iframe">
  <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-0.13%2C51.49%2C-0.09%2C51.51"
          title="Map of Fernbrook Gardens" loading="lazy" width="100%" height="320" style="border:0"></iframe>
</div>

Source: Webflow University: Designer courses

An iframe always needs a title. Third-party scripts and embeds also load code from other hosts, which is a privacy and performance matter dealt with in Third-party libraries and scripts.

Custom Element

A Custom Element writes any tag the designer types, for example figure, details, summary, dialog, button or a Web Component name. It accepts custom attributes in the Settings panel and can have children. It fills the gaps of the Add panel without an embed, so the content stays editable in the Designer and in Edit mode. Attributes are covered in Custom attributes and JavaScript.

CMS elements

A Collection list is the element that repeats a design for each item of a Collection. It is a div with the class w-dyn-list that contains a div of the class w-dyn-items, which contains one div of the class w-dyn-item per item, and an empty-state block (w-dyn-empty) that shows when the list has no items. Inside the Collection item the designer places ordinary elements (a Link Block, an Image, a Heading) and binds them to fields with the purple dynamic indicator. The way a list is filtered, sorted, limited and nested is covered in Collection lists, and the pages that show a single item in Collection template pages.

<div class="plants w-dyn-list">
  <div role="list" class="plants_grid w-dyn-items">
    <div role="listitem" class="w-dyn-item">
      <a href="/plants/lavender" class="plant-card w-inline-block">
        <img src="https://cdn.prod.website-files.com/placeholder/lavender.avif" alt="" loading="lazy" class="plant-card_image">
        <h3 class="plant-card_name">Lavender</h3>
      </a>
    </div>
    <div role="listitem" class="w-dyn-item">…</div>
  </div>
  <div class="w-dyn-empty"><div>No plants match this filter.</div></div>
</div>

Source: Webflow University: Designer courses

The list is rendered on the server when the page is published, so the items are present in the HTML for search engines. A page may hold a limited number of lists and items per list (100 items per list; the exact page limits are given in CMS limits and scaling). Because the list is static HTML after publishing, changes to the CMS need a publish to show up.

Utility pages

Besides the pages that the designer creates, every site has three utility pages that Webflow provides as customisable templates: the 404 page, the password page and the search results page. They are listed in the Pages panel under Utility pages, they are designed with the same elements as any other page, and they are published with the site.

Page When it is shown What to design

404 (Page not found)

The visitor asks for a URL that does not exist on the site

A message, a search link and links to the main pages; the page is served with the HTTP status 404

Password (/401)

The visitor asks for a page, a folder, a Collection or a whole site that is password protected

The form that asks for the password, with the brand and an explanation of who can enter

Search results (/search)

The visitor submits a Search form; the results are shown at /search with the query in the URL

The layout of the results, the empty state and the highlight of the term

Source: Webflow University: Utility pages

The 404 page should help a visitor recover: the site header, a short explanation, a link to the Home page and to the most visited sections. It should not be a copy of the Home page, and it should not redirect to it, because a redirect hides the broken link from the visitor and from search engines. It is also the page shown when a Collection item is deleted or unpublished, and when a URL is mistyped, so its text should not assume a specific cause. Webflow can also exclude the 404 page from indexing, which it does automatically.

The password page is the template shown when a password protection is active. Page-level and folder-level protection needs a Site plan; protecting the whole site is a site setting. The page contains a password form that Webflow manages; its design (colours, copy, brand) is the designer’s. Visitors who open the password page directly have nowhere to return to, so the usual route is to be redirected to it from the protected page. Password protection is explained in Password protection and site search, together with the Search element and the search results page.

Password protection is a convenience for sharing a draft, not a security boundary for sensitive data: the content is not encrypted, and anything on a page that a visitor can open is delivered to their browser.

Source: Webflow Help Center: Password protect your site or web pages

Pages and folders

The Pages panel lists the static pages of the site and organises them in folders. A page has a name, which is shown in the panel and used as the default title, and a slug, which is the last segment of its URL. A folder has a slug as well, and the URL of a page inside a folder is the folder slug followed by the page slug. The Home page has an empty slug and is served at the root.

Structure in the Pages panel URL on the published site Remarks

Home

/

Cannot be moved into a folder

Visit

/visit

A static page at the root

Folder about, page team

/about/team

A folder is only a URL segment unless it has an index page

Folder plants (Collection)

/plants/lavender

Collection template pages are folders created for a Collection; each item is a page

Utility pages

/404, /401, /search

See the previous section

The Pages panel supports creating, duplicating, renaming, moving by drag and drop, deleting, and setting a page as the Home page. Moving a published page changes its URL, so a redirect from the old URL to the new one has to be added when the page had been published and could have inbound links (see Redirects and site migration). The number of static pages is limited by the Site plan, and the Basic and Premium tiers hold 300 static pages each; the limits and the tiers are in Plans, Workspaces, Seats and Roles.

Page settings

Clicking the gear of a page in the Pages panel opens its settings. They are grouped as follows.

  • General: the name, the slug, the page title and the meta description, the Open Graph image, title and description, and the option to hide the page from the sitemap or from the site search. The title and description have default patterns that can use CMS fields on template pages.

  • Publishing: whether the page is indexed, a password for the page, and the publishing status on sites that use scheduled publishing or branching.

  • Custom code: code in the head and before the end of the body that applies only to this page.

  • Localization: the locales in which the page exists and the translated slugs on sites with Localize.

The title and description are the most important fields for search results and are described, with the sitemap and canonical settings, in SEO and AEO. The head custom code of a page is applied after the site’s head code, and it is the place for a page-specific JSON-LD script or a canonical link.

<!-- Page settings: Custom code, Inside <head> tag of the Visit page -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Park",
  "name": "Fernbrook Gardens",
  "openingHours": "Mo-Su 09:00-18:00",
  "url": "https://www.fernbrook.example/visit"
}
</script>

Source: Data API: Pages

The same properties are available from the Data API (see Data API: sites, pages and components), which is how a migration script reads and writes page titles and slugs in bulk. The @type above is an example value; use the type that fits the real business.

The Fernbrook plant page: putting it together

A template page for the Plants Collection combines everything above. The steps are listed in the order a designer would follow.

  1. In the Pages panel, open the Plants Template page. Its Navigator contains the Body only.

  2. Add a Div Block, set its tag to header, and drop the SiteHeader component in it.

  3. Add a Div Block with the tag main. Inside it add a Section (class section) with a Container.

  4. Inside the Container add a Heading, set to h1, and bind its text to the Name field of the Collection.

  5. Add an Image bound to the Photo field with the alt text taken from the Photo alt field, and set its loading to eager.

  6. Add a Rich Text bound to the Care notes field.

  7. Add a second Section with an h2 named "Related plants" and a Collection list filtered by the same Zone, with Link Blocks as cards.

  8. Add a Div Block with the tag footer and drop the SiteFooter component in it.

  9. Run the Audit panel, preview, and publish.

The resulting page has one h1, three landmarks, a heading outline of h1, h2 and h3, and no element used only for its look.

<body class="body">
  <header class="site-header">…</header>
  <main class="main">
    <section class="section">
      <div class="w-layout-blockcontainer container w-container">
        <h1 class="plant_title">Lavender</h1>
        <img src="https://cdn.prod.website-files.com/placeholder/lavender.avif" alt="Lavender in flower" loading="eager" class="plant_photo">
        <div class="plant_care w-richtext"><p>Full sun and well-drained soil.</p></div>
      </div>
    </section>
    <section class="section" aria-labelledby="related">
      <div class="w-layout-blockcontainer container w-container">
        <h2 id="related">Related plants</h2>
        <div class="w-dyn-list">…</div>
      </div>
    </section>
  </main>
  <footer class="footer">…</footer>
</body>

Source: Webflow Flowkit: Page Structure

Common mistakes and pitfalls

  • Div soup. Building every part from Div Blocks leaves a page without landmarks. Set the tags of the header, main, navigation, sections and footer, and check the breadcrumb at the bottom of the canvas.

  • Choosing the heading level for its size. The level is the outline; the size comes from the class. Run the Audit panel for skipped levels, and keep one h1 per page.

  • More than one main, or none. A page needs exactly one main. A component that contains a main can be used only once per page.

  • Restyling the w- classes. They belong to Webflow and may change. Add a class of your own to the element and style that.

  • Removing required children of a widget. Deleting the menu button of a Navbar or a pane of Tabs breaks the widget. Restyle and hide instead, or recreate the widget.

  • A Button used where a button is needed. A Button element navigates; an action that does not navigate needs a real button, created with a Custom Element or with the form Submit button.

  • Decorative images with alt text, content images without it. Empty alt for decoration, a description for content, and per-locale alt text on localized sites.

  • Hover-only menus and autoplay sliders. They exclude touch and keyboard users and people who cannot stop movement.

  • Duplicate IDs. An ID must be unique in a page; a copy-pasted element with an ID produces two. Prefer classes for styling and IDs only for anchors and ARIA relations.

  • Moving a published page without a redirect. The old URL becomes a 404. Add a 301 redirect.

  • A 404 page that redirects to Home. It hides broken links; keep the page and make it useful.

  • Treating password protection as security. It hides a page from casual visitors only.

Security and privacy notes

Anything in an element, an embed, an attribute or a page’s custom code is public once the page is published. Keep API tokens, signing keys and private data out of embeds and attributes. Embeds and iframes from other hosts load their code in the visitor’s browser and can set cookies, so they need to be listed in the privacy policy and, where the law requires it, gated by consent. Form elements send visitor data to Webflow’s form handling, which is described in the forms page. The target="_blank" links should carry rel="noopener", which Webflow adds when the option is chosen.

Corrections to older tutorials

Ali Rushdan Tariq’s Webflow by Example (Packt, 2021) introduces the elements in its fourth chapter, and the concepts it teaches are still valid: the difference between block and inline elements, building a page as a stack of sections, and using containers to centre content. Several details are outdated. The Add panel it describes was a wide drawer with different category names; the layout group has since gained Quick Stack, Grid, V Flex and H Flex, and Columns is legacy. The Designer of 2021 spoke of a "project" where Webflow now says "site". Semantic tags are offered more widely than the book suggests, and the Heading, List, Div Block and Section tags are all settable in the Settings panel. The utility pages and the password protection of pages and folders follow the plans of 2026, not the 2021 plan names. The collected list of corrections is in Where older books and tutorials are outdated.

What to read next

References