EN IT
Home About Learn Blog

Webflow Components: Build a Reusable Features Section

Beginner 25:44 webflowcomponentsflexboxreusabilityheading-hierarchy

Build a features section in Webflow while learning components and properties — reusable blocks you configure per instance — plus the Flexbox trick for equal columns.

Watch on YouTube

Key takeaways

  • Components turn a chunk of layout into a reusable blueprint: edit the definition once and every instance updates, so you stop copy-pasting and re-styling the same block.
  • Component properties (text, tag, image, visibility, link) let each instance customize its content or even its heading level without changing the shared structure or design.
  • Editing a component in edit mode changes the definition for all instances; editing an instance's properties changes only that one — knowing the difference is everything.
  • Heading hierarchy (H1 for the page, H2 for a section, H3 for an item) is both an accessibility outline and an SEO best practice, so choose tags by meaning, not by size.
  • Setting 'grow if possible' on every Flexbox child makes them push against each other equally and split the space evenly — the simplest way to get two equal columns.

Video chapters

  1. 00:00 Intro
  2. 01:21 Introduction to Webflow components
  3. 08:24 Webflow component properties
  4. 13:29 How to customize a component instance
  5. 15:05 Component vs. component instance
  6. 15:52 Styling the All H2 Headings tag
  7. 18:54 Laying out the rest of the features section
  8. 22:19 Cleaning up the layout + "grow if possible"
  9. 25:06 Outro

By the end of this lesson you’ll have a clean features section — and, more valuable than the section itself, you’ll understand Webflow components: reusable blocks you build once and configure per use. This is the step that takes you from copy-pasting layouts to building a real design system.

On the surface the features section is easy: a heading group we’ve already built, plus a list of text-and-image rows that alternate sides. So the real question is what a section like this can teach. The answer is components — and by the end you’ll see why they change how you build.

We start deliberately with the naive approach (copy the heading group, rename classes) so the pain is obvious, then graduate to components as the clean solution. Along the way we also meet the H2 tag, heading hierarchy, and a neat Flexbox move for equal columns.

How it works

The problem components solve is duplication. If you copy the hero’s heading group into a new section and rename every class, you now have two independent copies — change the gap or a font size later and you have to remember to update both, everywhere, forever. That’s tedious and risky. One fix is to rename the classes generically (section_heading-label instead of hero-section_heading-label) so the same wrapper is genuinely reusable. The more powerful fix is a component.

A component is a reusable blueprint. Turn the heading group into one, and every place you use it becomes an instance. The crucial distinction: when you enter component edit mode you’re changing the definition, so the change hits every instance; when you select an instance and edit its properties, only that instance changes. Get that mental model straight and components stop being mysterious.

Properties are the parts you deliberately expose for customization. You can create a text property (for the label, heading, or paragraph), a tag property (so one instance is an H1 and another an H2), a visibility property (to hide the buttons in a section that doesn’t need them), a link property, and more. The component keeps one structure and one design; the properties let each instance carry its own content and small variations.

This lesson also nails down heading hierarchy. The features section title should be an H2, so we style the All H2 Headings tag exactly like we did the H1 — and later each feature title becomes an H3. That hierarchy (H1 → H2 → H3) is an outline that assistive technology and search engines both rely on, so you choose the tag by meaning and then style it. Finally, the equal-column layout uses a tidy Flexbox trick: set “grow if possible” on both the text and image wrappers, and because they push outward with equal force, they split the row 50/50.

How to use it

  1. Rebuild the base structure. Add a new section → main-container → section_content-wrapper.
  2. Make the heading group a component. Rename its classes to be generic (section_heading-wrapper, section_heading-label, section_subheading, section_buttons-wrapper), select the wrapper, and create a component named “Section Heading Wrapper”.
  3. Add properties. In component edit mode, create a text property for the label, a text property and a tag property for the heading (default H1), a multi-line text property for the paragraph, a visibility property for the buttons group, and link/text properties for the buttons.
  4. Place and configure an instance. Exit edit mode. In the features section, press Shift + A, add the Section Heading Wrapper, set its heading tag to H2, and hide the buttons group via its visibility property.
  5. Style the H2 tag. On the All H2 Headings tag, set zero top/bottom margins, font-weight: 500, line-height: 1, and a clamp() font size (min 24px, max 54px, difference 30).
  6. Build one feature item. Add features-section_feature-list → features-section_feature-item. Inside the item add a text wrapper (H3 + paragraph — style the All H3 Headings tag with min 18px, max 40px, difference 22) and an image wrapper (with a background, border-radius, and border).
  7. Make it two equal columns. Set the feature item to display: flex, then give both the text wrapper and image wrapper the flex sizing “grow if possible”. Add a gap (around 6em), center items on the cross axis, and set the text wrapper to a vertical flex column.
  8. Repeat. Duplicate the feature item to match the reference, then set the feature list to a vertical flex column with a gap (again 6em).

We deliberately leave the alternating layout and final copy for the next lesson — because they’re the perfect excuse to introduce component variants and, right after, the Webflow CMS.

Resources

Frequently asked questions

What is a component in Webflow?
A component is a reusable block you build once and drop in as many instances. Change the component definition and every instance updates automatically, which keeps a design consistent and much faster to maintain.
How are component properties different from just editing an instance?
Properties are the parts of a component you deliberately expose for customization — text, images, links, a heading tag, or visibility. You set them per instance without touching the shared structure, so instances can differ in content while staying identical in design.
How do I make two Flexbox elements take equal width in Webflow?
Give each child the flex sizing 'grow if possible'. When every child can grow, they push against each other with equal force and end up splitting the available space evenly.
Which heading tag should I use for items inside a section?
Follow the hierarchy: H1 for the page title, H2 for the section title, and H3 for the title of an individual item within that section. Pick the tag by its meaning in the outline, then style it — never the other way around.

← Back to the course