Webflow Crash Course 2026 — Lesson 5

This instructional video provides a comprehensive guide to bridging the gap between Webflow’s Content Management System (CMS) and advanced user interface design, focusing specifically on Team Member cards and dynamic FAQ sections. The tutorial begins by finalizing the visual design of Team Member cards, demonstrating how to enforce consistent image aspect ratios using CSS properties to create perfect circular avatars regardless of the original image dimensions. It subsequently illustrates the seamless workflow of converting these pixel-perfect designs into reusable Components, highlighting Webflow’s ability to automatically preserve and map existing CMS field connections to new Component properties without manual reconfiguration.

The core technical value of the lesson lies in the rigorous construction of the FAQ section, where the focus shifts to structural integrity and interaction design. The video details the critical distinction between positioning methods for dropdowns, teaching the viewer to switch the dropdown list from absolute to static positioning to ensure the content naturally pushes layout elements downward rather than obscuring them. Furthermore, it advocates for the use of Rich Text fields within the CMS for FAQ answers, allowing for complex formatting—such as bullet points and multiple paragraphs—that standard text fields cannot support.

Finally, the viewer achieves mastery over custom interactions by building a smooth "open and close" animation logic from scratch. The tutorial guides users through the advanced workflow of unlinking component instances to edit interactions, utilizing overflow: hidden to mask content, and animating height to auto for a fluid expansion effect. By the conclusion, the viewer will have constructed a scalable, class-based interaction system where a single animation definition controls every FAQ dropdown on the page, ensuring a polished and professional user experience.

• Enforcing Aspect Ratios for Consistency: To prevent image distortion when creating uniform shapes (like circular avatars) from varied source files, viewers learn to utilize the ratio property to force a square shape and apply object-fit: cover. This ensures images fill the available space while preserving their original proportions.
• Automatic CMS-to-Component Mapping: When converting an element already linked to CMS fields into a Component, Webflow intelligently creates corresponding Component Properties and maintains the data bindings. This feature streamlines the workflow, eliminating the need to manually reconnect data fields after component creation.
• Structural Flow in Dropdowns: The default absolute positioning of Webflow dropdown lists removes them from the document flow, causing overlaps. The tutorial identifies position: static as the crucial fix to ensure the dropdown participates in the page's natural layout, pushing subsequent content down when expanded.
• Strategic Use of Rich Text: For content requiring structure beyond simple strings (such as detailed FAQ answers), the video demonstrates replacing standard text elements with Rich Text elements. This allows the CMS to deliver formatted HTML (headers, lists) directly into the UI components.
• Scalable Class-Based Interactions: Efficient animation management is achieved by applying interaction triggers to the Class rather than the specific Element. This ensures that a single animation build (opening/closing logic) instantly propagates to every instance of the dropdown in the collection list, removing the need for repetitive setup.

• 03:10 – Select the ratio property and set it to square to force the image to have equal width and height.
• 03:51 – Set the fit property to cover to ensure the image preserves its original proportions within the square shape.
• 07:01 – Use the shortcut command or control shift A to turn the selected wrapper into a component named "team member card".
• 11:34 – Select rich text as the field type for the "answer" to support structured content like bullet points and multiple paragraphs.
• 16:15 – Set the font color to custom and type inherit to force the dropdown toggle to adopt the parent element's text color.
• 20:52 – Change the position value of the dropdown list from absolute to static so it pushes content down rather than overlapping it.
• 22:04 – Turn the FAQ dropdown element into a component named "FAQ dropdown" (demonstrating the reverse workflow).
• 23:18 – Link the component's question and answer properties to the corresponding fields in the FAQ CMS collection.
• 24:51 – Right-click the component instance and choose unlink instance to detach it and enable animation editing.
• 25:27 – Set the overflow property of the dropdown list to hidden to prevent content from being visible during the collapse animation.
• 28:53 – Set the height property to auto in the animation actions to allow the dropdown list to expand dynamically based on its content.
• 31:59 – Switch the animation trigger settings from Element to Class to apply the interaction to every FAQ dropdown instance simultaneously.

Webflow Tutorial: Advanced CMS Styling & FAQ Interactions

This guide covers the styling of Team Member cards with dynamic circular images, followed by the construction of a fully accessible, animated FAQ section using Rich Text and Class-based interactions.

Part 1: Styling Team Member Cards

1. Define Container Styling & Flex Layout

• Time: 00:50 - 01:56
• How: Select the item content wrapper. Set Padding to 1.5em, Background Color to #161418, and Border Radius to 14px. Set Display to Flex (Vertical), Align to Center, and Gap to 1em.
• Why: Using em units ensures spacing scales relative to the font size. Flexbox centers the content (image, name, role) horizontally within the card.

2. Create Perfectly Circular CMS Images

• Time: 02:50 - 04:19
• How:‍
  
  • Set the image width (e.g., 5em).
  • Set the Ratio property to Square.
  • Set the Fit property to Cover.
  • Set Border Radius to 50%.

• Why: CMS images often have varying aspect ratios. Forcing a Square ratio ensures dimensions are equal, while Fit: Cover prevents distortion/stretching by filling the space. The 50% radius then turns the perfect square into a perfect circle.

3. Group Text and Icons with Flexbox

• Time: 05:39 - 06:40
• How: Wrap the Name and Role text elements in a Div Block. Set the wrapper to Flex (Vertical) with a 4px gap. Similarly, select the social link wrapper and set it to Flex with a 0.5em gap.
• Why: Default link blocks are inline-block and do not accept the gap property. Converting wrappers to Flex containers allows for precise control over the spacing between text elements and icons.

4. Convert to Component (Automatic Mapping)

• Time: 07:01 - 09:17
• How: Select the card wrapper and press Cmd/Ctrl + Shift + A to create a component. Name it "Team Member Card."
• Why: Because the elements were already linked to CMS fields before component creation, Webflow automatically creates Component Properties (e.g., "Name," "Profile Picture") and maintains the data binding, saving you from manually reconnecting them.

Part 2: Building the FAQ Structure

5. Configure the FAQ CMS Collection

• Time: 10:34 - 11:34
• How: Create an "FAQs" collection. Rename the default name field to "Question." Add a new field of type Rich Text named "Answer."
• Why: Standard text fields cannot support structured content like bullet points, multiple paragraphs, or internal headers. Rich Text is required for robust FAQ answers.

6. Implement the "Inherit" Color Trick

• Time: 15:33 - 16:33
• How: Select the Dropdown Toggle. In the Typography section, change the font color to Custom and type the word inherit.
• Why: Webflow applies a default gray override to dropdown toggles that isn't visible in the UI. Explicitly setting inherit forces the toggle to adopt the white font color from the parent element.

7. Structure the Dropdown List

• Time: 18:34 - 18:57
• How: Inside the Dropdown List, delete the default link blocks. Add a Rich Text element and link it to the "Answer" field from the CMS.
• Why: This injects the formatted HTML answer from the CMS directly into the dropdown functionality.

8. Fix Dropdown Positioning (Crucial Step)

• Time: 20:21 - 20:52
• How: Select the Dropdown List element. Change Position from Absolute (default) to Static.
• Why: Absolute positioning removes the list from the document flow, causing it to float over and obscure the content below it. Static ensures the list participates in the flow, pushing subsequent questions down when expanded.

Part 3: Advanced Component & Interaction Setup

9. Create Component Properties Manually

• Time: 22:04 - 22:40
• How: Turn the FAQ Dropdown into a component before linking CMS data. Inside the component editor, select the Question (H3) and create a Text Property. Select the Answer (Rich Text) and create a Rich Text Property.
• Why: This demonstrates the reverse workflow. Unlike the Team Cards, here we define the schema first, which is useful when building design systems before content is ready.

10. Prepare for Animation (Unlink & Overflow)

• Time: 24:51 - 25:27
• How: Add a component instance to the canvas, right-click, and select Unlink Instance. Select the Dropdown List and set Overflow to Hidden.
• Why: You cannot edit interactions inside a component instance. Overflow: Hidden is required so that when we animate the height to 0px, the inner content is masked and doesn't spill out.

11. Build the "Open" Animation

• Time: 28:53 - 30:08
• How:‍
  
  • Create a new mouse click animation "Dropdown Opens."‍
  • Action: Select the Dropdown List. Set Height to Auto.‍
  • Easing: Out Cubic. Duration: 0.2s.‍
  • Initial State: Duplicate the action, set as Initial State, and set Height to 0px.

• Why: Animating to Auto allows the dropdown to accommodate answers of varying lengths dynamically.

12. Apply Interaction to Class

• Time: 31:31 - 31:59
• How: In the Interaction Trigger settings, switch the target from Element to Class.
• Why: This is the most critical scalability step. It ensures that the single animation logic applies to every FAQ dropdown in the list, rather than just the specific element you are currently editing.

13. Animate the Arrow Rotation

• Time: 33:11 - 34:23
• How: Add a Rotate action to the Arrow Icon.‍
  
  • Initial State: Z-axis 0deg.‍
  • End State: Z-axis 180deg (to point upward).

• Why: This provides visual feedback to the user that the accordion is active/open.

14. Build the "Close" Animation

• Time: 34:51 - 35:35
• How: Duplicate the "Open" animation and rename it "Dropdown Closes." Delete the initial states. Reverse the actions: Set Height to 0px and Rotation to 0deg.
• Why: This ensures a smooth return to the default collapsed state when the user clicks the toggle again.

Set the image's ratio property to square and its fit property to cover to ensure the image fills the space without distortion. Once square, apply a border-radius of 50% to achieve a perfect circle regardless of the original source file's dimensions.

By default, Webflow dropdown lists use position: absolute, which removes them from the document flow and causes them to float over other elements. Change the position value to static so the dropdown participates in the natural layout, pushing subsequent content downward when it expands.

Create a size animation that transitions the height from 0px to auto to dynamically fit the content, and set the element's overflow to hidden to mask the content during the transition. Ensure the interaction trigger is set to Class rather than Element so the animation applies to every dropdown instance instantly.

Yes, you can bind Rich Text elements inside a component to Rich Text fields in your CMS collection. This allows you to display structured content—such as bullet points, multiple paragraphs, and headings—which standard plain text fields cannot support.