Build and maintain layouts smarter with symbol content overrides

Now you can override images, text, videos, and links in a single instance of a symbol — making it easier to create and maintain recurring layouts.

Barrett Johnson
March 20, 2020
Announcements

Webflow’s symbols are great when you have a recurring layout whose content is exactly the same across each instance — for example, a nav bar, a footer, or a sign up form — but what if you have a recurring layout that has unique content in each instance?

With today’s release, now you’re in luck. Because now you can change images, text, videos, and links in a single instance of a symbol without affecting others — making it easier to create and maintain recurring layouts across your site that have unique content.

Why this is cool: an example in action

In this example, each of these testimonial cards will be a unique instance of the master “card” symbol, each with unique content overrides.
In this example, each of these testimonial cards will be a unique instance of the main “card” symbol, each with unique content overrides.

Say you have a section on your homepage with some social proof testimonial cards that have the same structure, but each has its own unique content. This is easy enough to set up with classes in Webflow today, plugging in unique content for each card and managing the layout with reusable styles — but what if you want to completely restructure the layout of those cards down the line?

Before today, you’d have to rearrange the content in each card individually, or simply start from scratch and go through the build process for those cards all over again.

But now, with today’s release, you can turn these recurring cards into a symbol, each with its own content, and as you restructure the layout of that symbol, each instance will preserve its unique content. Let’s look at this in action below:

How this works: a step-by-step look

Ok sure, but how does this work in action? Here’s how:

Step 1: Define a symbol

Right click > convert to symbol.
Right click > convert to symbol.

Create the layout you’d like to reuse across your site and convert it to a symbol. In this example, we’ve created the first card and we’ll right click to make it a symbol.

Step 2: Define override fields

Create override fields for elements you’d like to override in a symbol instance.
Create override fields for elements you’d like to override in a symbol instance.

Within the symbol settings panel, define the content elements (text, images, videos, and links) that you’d like to make overridable as “override fields.” (If you’d like an element to have the same exact content in every instance, you should not create a field for it.)

Step 3: Override content fields per instance

Edit the for each override field from the symbol’s settings.

Copy and paste that symbol as needed, and in the symbol settings panel, set unique content overrides for each symbol field.

Step 4: Restructure layout, watch the magic unfold

Restructure the main symbol and see those changes cascade to each symbol instance —  without changing the unique content in each.

Double-click on any symbol instance to edit the main symbol. Restructure layout and see every other instance update accordingly, while retaining its unique content overrides.

Step 5: Rejoice, cry tears of happiness

Webflow: aiming to make your life more like this since 2013.

Your symbol’s structure changed across your entire site with a simple edit of the main layout.

How you can use content overrides for symbols

With this improvement, symbols can now take on a brand new role in your projects, acting as more of a reusable layout pattern, not simply a single-purpose block of content. Let’s take a look at how content overrides can help you build faster and smarter below.

Create layout and components library for your site

Now that symbols can have unique content in each instance, you can use them to create a library of recurring layouts and content patterns across your site, which you and your teammates can then use as the building blocks for new pages.

Some common layout patterns you might want to create as symbols with overrides include:

  • Contact forms. Give each contact form its own headline and call to action based on the context surrounding it.
  • Hero sections. Create a standard pattern for hero sections across your website’s core pages.
  • Testimonial blocks. Design and manage the layout of recurring customer quote sections from a single place.
  • … and anything else that repeats across your site!
Use symbols to create a library of your recurring layout patterns. (Pro tip: hit Shift + A to open the add panel directly to your symbols library.)
Use symbols to create a library of your recurring layout patterns. (Pro tip: hit Shift + A to open the add panel directly to your symbols library.)

The major benefit of this approach is that as you’re using these symbols to build pages, you’ll know you can always edit and restructure them from a single place, rather than having to edit a bunch of things across a bunch of disparate pages.

Empower teammates to build pages with symbols

Taking this one step further, once you’ve built out a library of common layouts and patterns, you can empower your teammates to build pages with symbols and override the content in each instance to add content to your site without worrying about styles, classes, or any of the more technical elements of building in Webflow. 

Empower teammates to build pages with symbols without worrying about styles or classes.

As the builder of the site, you can control what fields they can override and which fields need to stay the same across each instance, which helps you enforce standards and keep things uniform across the site.

Create layout and components library for jumpstarting client projects

If you’re using Webflow for client work and find yourself recreating the same layouts time and again when you start a new project, you can use these new and improved symbols to create a brand-neutral library of layouts that can jumpstart the build for each site.

What’s coming next

This update to symbols is just the first step in a larger plan to evolve symbols (and Webflow in general) toward a future where you’ll have much finer control over creating and managing design systems.

While we can’t reveal all the things we’re working on, here’s a look at some exciting developments on the horizon:

  • Nested symbols. Put symbols inside of symbols for hyper-detailed layout control and management.
  • Style overrides and variants. Define which element styles (e.g. background color) can be overridden on instances, and create multiple variants (e.g. a dark and a light version).
  • Renaming symbols to components. To reflect the dramatic expansion of what “symbols” will be able to do, we’ll be renaming “symbols” to “components” in a future release.
  • Much, much more. Suffice to say we’ve got big plans for improving design system creation and reusability at Webflow, and we’ll be sharing more in the coming months.

How will you use symbol content overrides on your projects? Let us know in the comments.

Barrett Johnson

Product marketing @webflow. Design, history, and music enthusiast.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.