Webflow Crash Course 2026 — Lesson 3

This lesson marks a pivotal transition in the course, moving beyond basic layout construction to introduce one of Webflow’s most powerful features: Components. While the immediate task is building the "features section" of the reference website, the primary objective is to demonstrate why standard copy-paste workflows often lead to technical debt and inconsistency. By comparing a manual duplication approach against a component-based workflow, the video illustrates how components act as scalable blueprints, allowing designers to maintain a "single source of truth" for repeated elements like section headers while safely customizing individual instances.

Viewers will achieve technical proficiency in creating and configuring the "Section Heading Wrapper" component, learning to bind specific element settings—such as text, links, and visibility—to component properties. A critical part of this process involves defining properties for HTML tags (e.g., swapping an H1 for an H2), ensuring that reusable designs adhere to proper semantic hierarchy and SEO best practices regardless of where they are placed on the page. This granular control ensures that design updates, such as changing a font size or gap, propagate globally without erasing local content customizations.

Finally, the lesson covers advanced layout techniques required to structure the features list itself. You will learn to leverage Flexbox not just for alignment, but for precise sizing control using the "grow if possible" setting, which forces text and image wrappers to share available space equally without rigid width definitions. The session concludes by preparing the architecture for the next logical steps in web development: introducing Component Variants to handle alternating layouts and setting the stage for Webflow’s Content Management System (CMS).

• Scalability Over Repetition: While copying and pasting elements works for simple pages, it creates "independent" classes that make future design changes risky and tedious. Adopting Components allows you to update a master design once and have those changes reflect instantly across every instance on your site.
• Customization via Properties: Components are not static; by creating specific properties for text, links, and visibility, you can alter the content of a component instance (e.g., hiding a button group or changing a headline) without breaking the underlying design structure.
• Semantic SEO Strategy: Visual reuse should not compromise document structure. You must use Component Properties to dynamically control HTML tags, ensuring that a Section Heading component can serve as an H1 on a landing page but switch to an H2 or H3 in other sections to maintain a proper heading hierarchy.
• Global Tag Styling: To ensure typographic consistency, style the HTML tag directly (e.g., the "All H2 Headings" tag) rather than relying solely on utility classes. This guarantees that all headers inherit the correct margins, font weights, and responsive "clamp" sizing logic automatically.
• Advanced Flexbox Sizing: To create perfectly balanced layouts where two elements (like text and an image) take up equal width, apply the "grow if possible" sizing setting to both flex children. This simulates a "draw" in push-strength, forcing the elements to split the parent container's space evenly.

• 06:05 - Renaming specific classes (e.g., "hero section heading wrapper") to generic names (e.g., "section heading wrapper") to prepare for component creation.
• 06:53 - Clicking the "Create a new component" icon in the components panel to convert the selected wrapper into a reusable blueprint.
• 09:13 - Creating a "Text" property via the element settings panel to bind specific text elements (like labels) to the component.
• 10:48 - Creating a "Heading Tag" property to allow individual component instances to dynamically switch between H1, H2, and H3 tags for SEO hierarchy.
• 11:42 - Creating a "Visibility" property to enable toggling specific elements (like the buttons group) on or off for different instances.
• 14:45 - Adding a new instance of the "Section Heading Wrapper" component to the Features section from the components panel.
• 15:00 - Customizing the new component instance by setting the "Buttons Group Visibility" property to "Hidden".
• 16:18 - Updating the "Heading Tag" property on the Features section instance to switch the header from an H1 to an H2.
• 17:41 - Styling the "All H2 Headings" HTML tag directly (setting margins to zero, font weight to 500) to ensure global consistency.
• 18:20 - Pasting a "Clamp" function into the custom font size property of the H2 tag to achieve fluid responsive typography.
• 20:52 - Configuring the "All H3 Headings" HTML tag styles (margins, line height) to establish the hierarchy for feature items.
• 23:06 - Setting the Flex Child sizing property to "Grow if possible" on both the text and image wrappers to force them to split the available width equally.

Building a Scalable Features Section with Webflow Components

This guide covers the transition from manual class duplication to a component-based workflow, ensuring long-term scalability and semantic SEO structure.

Step 1: Establishing the Section Structure

Timestamp: 01:23 - 02:00

• How: Add a new Section element to the page. Inside it, nest a Container (class: main-container) and a Div Block (class: section_content-wrapper).
• Why: This mirrors the foundational structure established in previous lessons (Section > Main Container > Content Wrapper), ensuring global layout consistency across the site.

Step 2: Preparing Classes for Reusability

Timestamp: 06:05 - 06:33

• How: Select the heading wrapper from your Hero section. Rename specific classes to be generic:
  
  • Change hero section heading wrapper to section heading wrapper.
  • Change hero section heading label to section heading label.
  • Repeat for subheading and buttons wrapper.

• Why: Removing specific context (like "hero") allows these classes to be reused anywhere on the site without creating confusing dependencies or needing to duplicate styles.

Step 3: Creating the Master Component

Timestamp: 06:36 - 07:31

• How: With the section heading wrapper selected, open the Components Panel (left sidebar) and click the "Create New Component" icon. Name it Section Heading Wrapper.
• Why: This converts the element into a master blueprint. Changes made to the structure of this component will now instantly propagate to every instance on the website, solving the maintenance issues of copy-pasting.

Step 4: Defining Text Properties

Timestamp: 09:01 - 10:20

• How: In Component Edit Mode, select the Label text element. In the Settings Panel (right sidebar), click the small purple circle next to the Text field and select "Create Text Property." Name it Label Text. Repeat this process for the Heading and Subheading.
• Why: Binding properties allows you to change the actual text content for each specific instance (e.g., changing the headline) without breaking the link to the master design.

Step 5: Defining the Heading Tag Property (Crucial for SEO)

Timestamp: 10:22 - 11:00

• How: Select the Heading element. In Settings, click the purple circle next to the Tag setting. Create a new property named Heading Tag (default: H1).
• Why: This allows individual instances to dynamically switch semantic tags (e.g., H1, H2, H3). You can now reuse this component in a feature section (as an H2) without negatively impacting SEO hierarchy.

Step 6: Configuring Visibility Properties

Timestamp: 11:20 - 11:53

• How: Select the Buttons Group wrapper. Under Visibility settings, click the purple circle and create a property named Buttons Group Visibility.
• Why: This enables you to toggle entire elements on or off per instance. For the features section, you will hide the buttons while keeping them visible in the hero section.

Step 7: Instantiating and Customizing

Timestamp: 14:27 - 16:20

• How: Go to the new Features Section. Press Shift + A to open the Components panel and click the Section Heading Wrapper to add an instance.

1. Set Buttons Group Visibility to Hidden.
2. Change Heading Tag to H2.

• Why: You are now reusing code. The design is identical to the hero, but the content and semantic structure are customized for this specific context.

Step 8: Styling Global HTML Tags

Timestamp: 16:28 - 18:47

• How: To style the new H2, do not add a class. Instead, select the All H2 Headings tag in the selector.
  
  • Set Margins to 0.
  • Set Font Weight to 500.
  • Set Line Height to 1.
  • Paste the Clamp function (min: 24px, max: 54px) into the custom Font Size field.

• Why: Styling the HTML tag directly ensures that any H2 added to the site (even inside components) inherits these styles automatically, maintaining global typographic consistency.

Step 9: Building the Feature Item Structure

Timestamp: 19:24 - 20:08

• How: Inside the content wrapper, add a wrapper div features section_feature-list. Inside that, add a features-section feature-item. Inside that, add a text-wrapper containing an H3 Heading and a Paragraph.
• Why: Establishes the hierarchy for the list. Using an H3 creates a logical outline: Page Title (H1) > Section Title (H2) > Item Title (H3).

Step 10: Implementing "Grow if Possible" Layout

Timestamp: 22:21 - 23:47

• How:

1. Select the feature-item parent and set Display to Flex.
2. Select the text-wrapper child. Under Flex Child Sizing, set it to Grow if possible.
3. Select the image-wrapper child. Set it to Grow if possible as well.

• Why: When both children are set to "Grow if possible," they push against each other with equal strength, forcing a perfect 50/50 split of the available width regardless of their content size.

Step 11: Final Polish and Spacing

Timestamp: 23:50 - 25:03

• How:‍
  
  • Add 6em gap to the feature item (horizontal space).
  • Add 2em padding to the image wrapper using Shift + Enter to apply to all sides.
  • Duplicate the feature item 3 times.
  • Set the parent list to Flex (Vertical) with a 6em gap.

• Why: Using em units for gaps and padding ensures the spacing scales strictly relative to the font size, keeping the layout responsive and proportional.

Instead of manually copying and pasting elements, convert your section into a Webflow Component to create a scalable design blueprint. This establishes a "single source of truth," allowing you to update styles globally while using properties to customize content for each specific instance without creating independent, disconnected classes.

To maintain proper SEO hierarchy, add a "Heading Tag" property to the heading element within your component's settings. This allows you to dynamically switch the semantic tag (e.g., from H1 to H2) for individual instances, ensuring correct document structure without detaching the instance from the master component.

Select both children within your flex container (such as a text wrapper and an image wrapper) and set their sizing property to "Grow if possible". This configuration forces both elements to expand and share the available space equally, effectively splitting the parent container's width 50/50.

Create a "Visibility" property in the component's settings and bind it to the element you wish to control, such as a button group. This enables you to toggle that element's visibility to "Hidden" on specific instances where it isn't needed, while keeping it visible in the master component and other instances.