How can I create a full width div as a symbol in Webflow to easily use on multiple pages with different background images? Thank you!
TL;DR
- Create a full-width Div, convert it into a Symbol (Component), and insert a child Div for background control.
- Use either Content Overrides on the child Div or Combo Classes per page to customize background images without altering the base Symbol.
To create a full-width reusable symbol (Component) in Webflow that allows different background images per page, you'll need to use a Symbol with customizable instances and apply background images via Combo Classes or overrides.
1. Create the Full-Width Div Structure
- Add a new Section or Div Block to your Webflow page.
- Set its Display to Block or Flex and Width to 100%.
- Give it a class name like “Full-Width Header”.
- In the Style panel, set Height (e.g., 400px) to define vertical space.
- Set Width: 100vw and remove any Max Width settings to ensure true full width.
2. Make it a Symbol (Component)
- With the Div selected, Click the “Create Component” (⌘⇧A or Ctrl+Shift+A) option.
- Name your component (e.g., Global Full-Width Wrapper).
3. Enable Custom Overrides or Use Combo Classes
To allow background image changes per page, you have two reliable options:
Option A: Enable Overrides
- After turning it into a component, add a child Div inside the Symbol—this will hold the background image.
- Click the child Div and go to the right panel, then click the gear icon and Enable it as a “Content Override”.
- On each page instance of the Symbol, select the override area and apply different background images via Style panel.
Option B: Use Combo Classes
- Don’t set the background in the base class (e.g., “Full-Width Header”).
- On each page, add a Combo Class (e.g., “Header–Home” or “Header–About”).
- Apply background styles (e.g., Background Image or Gradient) to the Combo Class.
- This allows you to modify background designs without editing the base Symbol.
4. Set Background Image Styling
- Inside the selected Div or child Div, go to the Background section of the Style panel.
- Set Background Image and adjust Size (e.g., Cover), Position (e.g., Center), and Repeat (e.g., No-Repeat) as needed.
- Add a semi-transparent overlay if you’ll place text on top.
Summary
To reuse a full-width div with different background images in Webflow, create a Symbol (Component) and either use content overrides on a child Div or apply unique Combo Classes per page. Both approaches let you maintain consistency while customizing visuals.