Essential elements
Start with a blank canvas and learn how to build a full homepage layout using elements from key categories like Structure, Typography, Media, Forms, and Advanced. As you add each element, you’ll explore common use cases and useful settings like links, IDs, and state options.
Video transcript
In this video, we're going to cover some of the most common and essential elements you'll use when building in Webflow. We'll start with structural elements — Sections, Containers, and Div blocks. Then we'll look at text elements — Headings, Paragraphs, and Text blocks. Then media — Images and Videos. Then interactive elements — Links and Buttons. And finally, we'll look at the Navbar and the Symbol.
Let's start with structural elements. The Section is a full-width block — it stretches edge to edge and is great for organizing your page into distinct areas. Inside a Section, you'd usually drop a Container. The Container has a max-width and centers your content, so it doesn't stretch too wide on large screens. Inside a Container, you'd often use a Div block — a generic, flexible box you can use to group and position elements however you need.
Next, text elements. Headings help define the hierarchy of your page — H1 through H6 — and they're also important for SEO. Paragraphs are your body text — they're block elements and stack vertically. And a Text block is basically a paragraph element but named more generically — useful when you want a standalone text element without the default paragraph styles.
For media, Images are pretty self-explanatory — drag them in, assign a source, add alt text. Videos can be embedded from a URL (like YouTube or Vimeo), or you can use a background video element for video that plays behind content.
For interactive elements, Links are inline by default and let you link text or other content to a URL, another page, or a section anchor. Buttons are similar but styled differently by default — and both can be linked to anything a Link can. Neither requires a form to work.
The Navbar is a pre-built component with a logo area, nav links, and a mobile menu button. It handles responsiveness out of the box and is a common starting point for site headers.
And finally, Symbols — now called Components in Webflow — let you create a reusable element. When you update the Component in one place, it updates everywhere it's used. That's a big time-saver for things like headers, footers, and CTAs.
Those are some of the core elements you'll use constantly in Webflow. Once you get comfortable with these, the rest of the element library becomes a lot easier to navigate.
