Symbols in Webflow can be used by frontend developers to create blocks of reusable HTML in their layouts. This video is for experienced frontend developers investigating Webflow.
Symbols are a great way or reusing blocks of content throughout a site, but did you know they can also be used as building blocks for common layouts using the frontend framework of your choice?
This video is for experienced frontend developers investigating Webflow as a way to accelerate their workflows and integrate a CMS editors love. As an experienced developer, I'll translate and map the interfaces to get you up and running with speed.
In this video I'll cover:
- Creating Symbols in Webflow
- Using Symbols to speed up your workflows for both global headers / footers
- Using Symbols to create reusable frontend development code blocks
- Detaching reusable Symbols
- A few quick keys
- How to create and connect instance variables of text within a Symbol
- How to create and manage CSS color (swatches) variables
Unicorn Road is on a mission to accelerate entrepreneurs and early-stage startups. Based in Chicago, we specialize in designing and developing custom and low-code websites, MVP web apps, and MVP mobile apps. Unicorn Road is a Chicago Webflow Developer & Certified Webflow Professional Expert.
Welcome to episode two of Webflow for Front
Today we're gonna be talking about two things.
One is symbols, how do use symbols and what
symbols are as well as color variables.
We'll have a little color variable thing at
the end there, just to kind of tack it on
since we didn't cover it in the last one.
So the thing I'm referring to is this little,
um, 3D cube here called symbols.
And really what symbols are, is are a way
to effectively take and wrap a bunch of dom
and CSS in a block and reuse it along, um,
So the most common use case, what is this?
It's gonna be a global nav or global footer.
Um, but it, it can be extended a bit further
I'm gonna show you kind of how to do that.
So what I've got in the middle of the page
here is a basic three column layout.
And so it's following the bootstrap container
You know, we've got a combo class for the
row and column and some text in each one of
And so this is the case that if you've got
a layout that's gonna be leveraging three
column layouts, a lot maybe centered text
or not, it's kind of nice to start from, um,
a certain amount of do, they're gonna be reusing
all the time.
Now, it is pretty fast to create this every
We showed with the command E key, you can
nest three divs pretty quickly or use copy
paste and do that, but there's even a faster
way, which is through symbols.
So effectively what we wanna do first is select
what divs or blocks of content we want to
create a symbol from.
So I'm gonna actually, select the parent
here that just is called container.
And what it's gonna do is grab everything
within it, everything nested in it to create
So once I'm, once I've selected, I can create
new symbol and I'm gonna call the three column,
And so what that's gonna do is make this little
instance block of that, and then, uh, if I
go back into symbols now I'll see that this
little block exists and I can drag it on the
page and I can even use command E and start
And sure enough, it's gonna show, show up
So, okay, this is great.
So now I can, I can add three com layouts
wherever it is.
If I've got a really rigid grid and I'm using
three com layouts all the time that are using
a certain class structure, I can do that.
Now, of course, you know, given we've got
the word column and all three of these, and
we're gonna be swapping these out, the easiest
thing to do from there is to right click and
go to unlink instance.
And what that's gonna do is allow you to customize
the content and the containers and everything
that's in there, because everything we change
in one of these linked instances is gonna
So you see how I've bolded that, or I can
nest a div in there and it's gonna change
across the board.
But, um, if I hit unlink, then I can do whatever
I need to do with this one.
Let's say there's, there's gonna be an image
in this column and different text and everything
So I wanted to show that first is that you
can make your Legos, your, your specialized
building blocks for your site very quickly
and almost use this as your, you could almost
I've seen this used as almost like a global
style pattern guideline.
I wouldn't go as far as creating like all
your different custom text headers and all
I, I, we generally have a dedicated page for
that kind of thing.
But if it's components where you've got a
lot of nested elements, I think it think it
makes sense to use this in that manner.
So there's a little bit extra power that can
be added to this, which is if I hit the little,
um, pencil to edit the symbol, there's something
called override fields, which is a pretty
So if I add one here, what I can say is, um,
there's different types.
There could be images or links.
These are like URLs or rich text.
But if I create an override, I can actually
call this, I'm gonna call, uh, column one
text and we can insert some default text in
<laugh>, I'll just do that so you can see
what this looks like.
So then what happens is I can link it to this
particular point in the, um, in the symbol.
So I've selected this bold text, and now I'm
going to, I'm sorry, I've selected this, uh,
text block and now I'm going to select this
little purple plus icon.
And this is going to link it to that, that
So I'll show you what that looks like now.
So all the instances when I click on them
are gonna have now this column one text.
And if I change it here, this is the, the
You'll see that only the first column, even
though these are linked, these are both the
Um, only the text and the first column is
highlighted here, just the second.
And so no matter how many times I add this,
whether I copy and paste or whatever, I can,
I can effectively change this to be what I
And now I can go further if I said, you know,
actually it's the case that we've got multiple,
I might add another one here.
Call it column two text.
And then all I have to do is link this through
the purple symbol.
Um, here we go.
Uh, whoops, I, I kind of, uh, name that different,
but you can see how this kind of works.
And so now I have access to this second link.
So if, if it's a component that isn't being
reused, like a maybe a newsletter form or
something where the background's gonna change
on certain pages or, or certain variables,
uh, you can effectively do that and customize
it, uh, both for editors and yourself.
So again, you, you're getting the best, best
of both words, which is the redundancy in
the blocks as well as, uh, in the CMS for
The second thing I wanted to show you guys
pretty quickly here is working with color
variables in the css.
There is a way to set this, um, through any
place that you're adding color right now.
I've got, um, a background color on my column
so I can, so you guys can see sort of what's
But if I actually select on the color I've
created, um, you'll see that I can effectively
open a palette that allows me to change the,
the alpha channel and the color and things
like that, which is updating globally.
But I can also add, um, actually name and
add this as a variable.
So they call them swatches.
I think that might be the official term, but
it's gonna bring in its best guess of what
we should call this.
We can call it anything brand, uh, brand brand
And if I create that, then I can reuse that
in the system, um, anywhere their color can
So I'll have now access to that, um, in the
Color for fonts or in the color of borders.
So I just wanted to show that from a speed
perspective, you can name color variables
as well, uh, as a way to speed your workflow.
So that's all, all for today.
Symbols are really cool you guys.
Um, for our team, like I said, we, we use
bootstrap a lot.
So sometimes we'll start with a bunch of symbols
for two column or flex grids or, you know,
So we can build really quickly and unlink
And then there are instances where we can,
you know, do a na, a global navr footer where
we're maybe on certain pages changing some
of the language.
Okay, everyone that concludes today's episode.
Uh, make sure to put a comment or a, like
on this one if you, uh, like the contour and
let me know if you'd like to see something
We're gonna continue to walk through the interface
through the lens of front end development
and speed in your workflows.
So, um, that's it for today.
You wanna say, bye-Bye bye.
Okay, Byebye, we'll see you next time.