Pushing the Envelope with Webflow Nested Symbols

please don't give up
[Music]
as i'm walking to your place i'm shaking
i am picturing the worst in my
[Music]
cause
hope you believe in us please don't give
up on me
[Music]
[Music]
it's like you almost know what i am
thinking
[Music]
cause i believe in us
cause you're the best
[Music]
cause you're the best
[Music]
[Applause]
[Music]
i
[Music]
[Applause]
[Music]
hello
[Music]
[Music]
[Applause]
[Music]
hey
[Music]
[Applause]
[Music]
bye
ah there we go hey everyone welcome to
another
pixel geek live stream i'm your host
nelson thank you for joining me this
week and
it is saturday again we've all made it
here together welcome
welcome we are the final two streams of
the year
yeah right yeah yeah yeah this is second
to the last
um before i get started i want to say
thank you to everyone who's in the live
chat room right now
uh first one in the door kufi message
retracted oh
i wonder what you said but whatever you
said hello welcome
your new name here new avatar uh
so welcome to the stream muhammad is
back
penny is here yes pablo is here
steven steven love
welcome back i am i am glad you're back
i'm glad you're
doing well i'm glad you're healthy
missed you too um yeah
thank you thank you for being here and
if your uh
georgie k is here as well um
if you're the type that likes to lurk
not talk in the live chat that's totally
fine thank you so much
for your time hopefully we can make it
valuable
for you that's what we try to do at
every stream
and if you're watching recording thank
you thank you for clicking
on the thumbnail and watching
um but yeah thank you thank you so much
as well as
all the uh subscribed community members
starting
there we go starting with the pixel pros
and our pixel geeks uh yasuki
and anto mason yindrick amanda
and the pixel geek ash dalvin christian
brian
stephen is here uh kate martin john
mckenzie
mark luke and our newest member penny
yes so thank you all so much
for your support of this community and
my streams and yeah yeah i mean i can't
thank you all
enough if you haven't noticed yet
if you want to also wear the web
i should have worn one webflow gear
uh my my wife designed the shirt so you
can
it's below this video it's on teespring
click that
and grab yourself a shirt or a pixel
geek mug
yes oh man uh who else is it brian oh
yay
brian is here welcome
all right all right so if you're new to
the stream
again welcome these streams happen every
saturday from 10 a.m to 12 p.m pacific
time
where we talk and geek out all about no
code things mainly webflow
but also you know how does webflow fit
into the ecosystem of
no code all right um so today we're
going to be
going over the new webflow feature
called nested symbols
i haven't had time to use it i still
like to be honest i still don't play
enough
with the symbols and how you can uh how
you can make that
componentize how you can make symbols
componentize and whatnot
but now they've just went into a level
deeper where you can put a symbol inside
of a symbol
and i'm like how does this work
why do i need it why do why is why is
this feature
even exist so we're going to deep deep
dive into that together
because like i'm still confused and
maybe some of you are as well so we'll
go ahead and
jump into this confusion and maybe as we
click on many many buttons which i
encourage everyone to do
we learn something all right um before
we get
into today's topic uh
morning announcements let's see here
where's my notes
where's my notes okay there we go
uh yeah let's so this morning actually
at
8 a.m i recorded a podcast which will be
released next month
uh with the shadow studios the agency
and um yeah those
forgot their names yaya and cheyenne i
hope i'm saying your names right
uh it was fun talking with them and
explaining my background and how
i came into this no code uh revolution
and just like how i think very
philosophically if you've been watching
my streams
you understand i go very deep into
thoughts about space and people and
whatnot well
if you don't know listen to that podcast
when it comes out uh next month but yeah
follow shadow c studio on twitter
uh if uh
colleen if you want to put out the link
in the chat
the buildies the billy so makerpad
is doing a end of the year awards thing
and if you want to nominate
someone you can
so there's a connector award celebrating
community builders that
bring people together the no code base
award
showcasing those who are pushing the
boundaries of building without code
the anywhere reward the open for all
the mighty key mighty keyboard oh
highlighting the bloggers
yes yes get schooled awards showcasing
independent educators
new forms of education the
probability profitability award i'm
yeah i'm trying to find out i'm trying
to find out how to get into that
category and the actually helpful award
celebrating the investors that actually
contribute to building the future rather
than just writing checks and tweeting
yeah so if you want to nominate someone
thebildees.com
and lastly so uh
i think it was a week ago december 30
yeah so a week ago
pablo uh put out a tweet and also
mentioned me
and waldo and saying hey how do i do
this idea
so he already designed it he already
created the collections and added the
data into this project
but he didn't know how to actually make
it come alive he was trying on his own
but i was like
there needs to be custom code and so i
jumped on the opportunity and said
i will help you out and i figured it out
thanks to jquery
and stack overflow and i'm like cool
here you go
and you can clone this uh if you want
for your own
random idea generator so if you press
refresh
or if you click on this which is
basically a refresh anyways
just done by code you get a different
idea and if you like part of the idea
but just want to change one of the ideas
you can just click
and um i'll be doing a
tutorial soon on the code that i made
to make this happen i mean you can get
the code by yourself by cl cloning on
this
but as with everything i do on this
channel i will
explain it i mean you can copy code cool
but
do you know what that code really means
i think that's more important than
actually copying paste in code
all right so that's
it that's it now before i go into
webflow
uh this might or
you know this might be a quick tutorial
this might be a quick
deep dive and because of that
um start linking your projects
if you want me to review your project or
if you have a question
start posting in a live chat right now
do it and then colleen will jot it down
for me and i'll answer it after the
whole deep dive of
nested symbols okay um
let's see here
let's see here okay and again the
questions if they're
if they're something easy that you can
google please google it first
because most of the questions like how
do i use grid
in webflow that's exactly what i would
type into google
you know do stuff like that first if
it's a complex question like hey i'm
trying to do an interaction and it's not
working
that's the stuff i want to dive into
during these streams
all right so complex questions
or um projects that you want me to
look over and review and give you some
feedback okay so
toss them into the live chat right now
um let's see here i have two people
watching
on twitter so the people on twitter hi
i'm not watching that chat but thank you
so much for watching
and uh there is no count on linkedin so
okay cool so i'm just focusing on the
youtube chat
uh if you're not there hop on over to
youtube.com
pixelgeek uh and subscribe
if you want all right let's
go into nested symbols
blank project i don't know what i'm
doing
but i'm guessing symbols is all about
componentizing so let's
use um pre-built layouts to
make a pre-built page okay so we have a
nav
sticky nav uh we're gonna have a basic
hero
and let's go ahead and add a card
section
and let's go ahead and add a
a gallery sure why not no
there so we have a gallery and then
lastly let's go ahead and put it in a
footer
no there cool yay we made our web page
just like that and we're done end stream
no just kidding all right
so uh let's first talk about symbols
what is a symbol a symbol
is a component that you can create you
can customize a whole component like
say this nav bar right
and you want to use it on multiple pages
well what you need to do
is just take that parent element right
click on this little tab
and click on create
symbol that's it now we're going to call
this nav bar
and now if i go to another page for
instance if i
create a new page new page
and drag that symbol in
whatever i do here for example if i take
this and say
something else
and then i go back to my home page
that same component that symbol has also
been changed
so symbols is a great way to reuse the
same
group of elements over and over and over
again
so that's the easy part all right
now let's go one step further
okay let's say this right here this card
we like this style and we wanna actually
these three cards let's take
this whole cards grid container like we
like the style
um so let's reuse it everywhere okay so
this is something i'm going to reuse on
all different pages so i'm going to
right click create symbol
and say cards
okay so now this is a bunch of cards
uh it's not a house but it's a bunch of
cards
uh so i'm gonna back out of that in
instance i'm gonna copy this
and paste it on my other new page and
there we go
oh it's not inside of a container it's
okay that's why it's all huge but
you get what i mean so if i double click
and say this
is primary card
we can just i'm just changing the text
okay
and so if i go back to my home page just
like the navbar
that card has been changed right
so now let's go into
nested symbols wait wait do i want to
get into that for
no no no i don't want to get into that
here's why
it's because for something like
navbar the next evolution that the team
did was
you can make override fields and
it actually took me a while to
understand the concept i'm like why
why would i even need it so you can
make your nav bar you can make any of
your
nav uh you can make any of your symbols
more of a component a customizable
component if you
add an override field so i'm going to
double click
and then for instance this button text
based on the instance
of this i can change it okay so hold on
hold on whoa
i know it's getting kind of confusing
but hear me out
so right here
we have these override fields so i can
click it and create new field
all right but some of you are probably
wondering why
do that complicated step when you can
just double click
and uh change this to something like
sign up
okay that's easier right
well this sign up the the sign up button
the way
that text that'll be on every single
page
what if i want to go to my other page
right here
and for i don't know a b testing
i don't want it to say sign up on the
child page
i want to say like um
sign up for free but i only want to say
sign up for free on this page
not on the home page so if i go back to
home it still
says sign up for free how do i fix that
override field so
if i double click click on this button
i can set an override field okay
and then i click on new field and then
it pops up this
and i'm gonna name it so i'm gonna call
it
um nav button text
or label whatever you want let's call it
label
okay so we have nav button label create
and link boom done so notice how
this changed from a blue outline to a
purple one so purple means override
all right cool
so now if i click outside
of it and then back on this
notice how it has a
button label okay
so if i go back to instance i click on
this
look what it says for text in the
element settings panel
it's that nav button label and it says
sign up for free
okay but i only want this to say sign up
now cool sign up now that's what it says
if i go to my
new page notice how it still says sign
up for free because that's our default
that's the one that we've set in the
beginning
before we actually made it into override
all right so sign up for free what if i
want to change it to
um uh
something like join now for free
right so i've set it to this instance
and it'll only show the text based on
the instance
so on the home page it says sign up now
whereas
that new page it says join for free
um so now you can see how it's becoming
more
componentized right uh
and again let me know if you have
questions in the chat room
and i'll try to explain it even further
all right
but if you're still with me there you go
okay so that's how the override works
with overrides you can also do stuff
like
override the link like for instance if
this button
links over to somewhere you know what if
you want to make
that link customized based on the page
that it's on or based on the instance
okay
you can do that too with link to field
all right so this is just the same thing
as i did with the text all right
now let's go ahead and put this sticky
bar
twice i'm going to copy and paste
all right so now we have two instances
of this on the same page
and just like i've shown you on the new
page
you can change that instance override
right here please join
so there you go so it's based on the
instance
not only the page but also the instance
so i can
place as many as i want of this
component
and change that button label
however i want based on the instance
all right
so now it goes into
symbols within symbols what why
why would you do that all right so
i think it has something to do with
atomic design so again i haven't played
with this so i'm like
and i'll explain atomic design soon so
hold on
so let's get into this and
i'm going to let's add a button
okay i added a button
um okay what if i want to right click
create symbol okay
main button
okay
okay so i had a button put
here put it here okay i think i'm
getting it
i think i'm getting it so i have three
buttons and they're inside of a symbol
okay so
just like any other symbol if i
keep clicking inside to get into it i'm
going to say uh
let's say learn more okay that's what i
expected when you
change one it changed them all let me
set
override field
i'm confused main
okay how come
i can click on this plus sign add
override field
let me hide this but yet i can also do
the same thing here
what is the difference between this and
this
okay look i've already clicked this one
so let's take a journey and click on
this one
why is it yellow i'm guessing it
this field is not linked okay i'm
guessing yellow means caution okay so
text and the name of this is button
label
this is the default text value of the
symbol field okay
so i'm going to say learn more is the
default value
it's not multi-line okay
so i'm there
unlinked
so link to text oh oh
and now it shows up here
okay now it's linked
why is there two different uis
that can do the same thing
hmm okay and this is why this stream is
called learn with me
because this is me learning okay
okay so i'm gonna click out of it double
click
to get into the cards contin cards uh
symbol click once on this
and we're back to okay well so this one
is going to say
primary card button
whereas this one is going to say
secondary
secondary and this is
thirdly tissue how do you spell tissue
hurry
right tissuery anyways
um okay component inside of component
that worked
i'm still trying to find the y i mean
it's there right
um okay
okay okay okay
so if i double click and then if i go
like this isn't it the same
thing like if i take this
and i say this is a
new field
i'm trying here i'm trying here
okay so when i first
watched the webflow tutorial or intro
video to this
um grimmer's whole inception thing
at the end of it i was like okay i'm
guessing it has to do with atomic design
so brad frost atomic design
so this old old book was it november oh
yeah
2016. basically
you start out with atoms molecules
organism template pages
so atoms are these components
right for example if you're making a
search
right search the site is the label
keyword
and then the search button and then
those are the atoms you put them
together to create a molecule and it
looks like this
you put those together with other
molecules and you make organisms so you
have a whole nav bar
and then you create a template with a
bunch of other
organisms and then you get a page and
then it just
grows like from the atom all the way
over to
a whole website so i'm guessing
it's something that we have to it's
something that
we can do now in webflow using
nested symbols so let me try it this way
let's make let's make a new page and
let's make some atoms okay so um
actually let me name this um
components
okay all right so let me just drag in a
section with a container
just so i can have some something to
play inside of okay so we have this
let's recreate this experience right
here
so using symbols all everything i'm
going to do is going to be symbols
everything so maybe it'll make sense
going from this approach
all right so let's let's add a
heading and then we're going to call
this this is our
atoms okay
now let's bring in a label okay so
let's bring in a label so that's going
to be a text block
and this is going to be we're just going
to right click
create symbol this one we're going to
call it
label and with this label we're going
to create an override field
we're going to call it label text
hello i'm trying to figure out symbol
over
symbols and within symbols my first go
at it i
it was confusing you wanna say hi to
chat hi chad
okay okay
yo ro i heard you like symbols yeah so
we put a symbol within your
symbol within a symbol you're so cool
simple anyways
um so i'm using this atomic design
yeah i don't know i don't know all right
so we have the label text
and next thing we need to build is an
input field oh it's a warning here
i know okay so we have that
so let's leave that and let's go ahead
and make
an input field so i'm going to drag in a
form block because that's the only way
to put an input field
maybe delete everything
and uh let's see here i'll take the
whole form block
because you can't you can't just take an
input field so right click
create symbol we'll call this
um input field
cool um there's no really overrides
for this i don't think so i'm just gonna
leave it as is and let's also add a
button
okay i'm gonna right click create symbol
and this is our
button oh it's i think it's making sense
in my head
okay i get it so i'm going to link this
new field and
call it but yeah i should have left it
button text and then the link new field
button link cool all right so we have
our atoms
sweet let me add some space right here
cool so we have our atoms all right
and we're gonna style these let's style
these real quick
uh let's go ahead and make this my
favorite font of the day 18
26 make a bold semi bold
and let's go ahead and the input field
let's go ahead and
style this give us some rounded corners
um make this bigger
there we go something like that
around corners and let's make a max
width of like
550 pixels there we go something like
that
and then this button we're going to
style it too and
let's go ahead and give it some rounded
corners as well
and let's add a hover effect to it just
for fun
make it a little bit darker on on hover
and also add a transition
cool all right so we have r3 atoms
next let's go ahead and
make put them three together
and create a molecule so i'm going
to copy and paste this let's call this
molecules
let me add a border just so i can
see what i'm doing okay so we have
molecules
so these three molecules will come
together
as one when two become
one oh my god did that come from
okay so we're gonna add a div
and we're gonna put them together
in this style where it's one row and
two rows so okay
so i'm gonna put you in here
you're gonna put them all in here okay
and then
put a div so these two can be on the
same row and how to put something in the
same row real fast
we flex it and we center it and we're
good to go
okay it's not perfect but we made a
molecule and now
i'm guessing
we can right click create symbol
okay okay search i'm gonna call it
molecule
okay that works and
and so if i change the base
of this oh oh because i linked it okay
so if i change oh if i change the style
of this
obviously it's going to change because
it's uh the instance is all the same so
i'm like i want to change this to
montserrat make sure it's all caps
uh let's the letter's facing out a
little
and okay okay is this making sense
anyone
i i think it is for me
um so yeah we have that molecule
and so we if we make other atoms
because after this molecule then we can
make organisms
okay so let me take the cards thing
oh okay okay okay
so what if i make a card okay so let me
just make a card
so a card is simply a div
um we'll just go ahead and make a max
width of
like
make the uh because i'm going to use a
grid okay okay okay yeah
i'm just thinking it through it's making
sense
so when steven love says uh
he's waiting for your youtube channel
okay so we have this div and we're gonna
make it a card so let's pretend
that we have an image in our card
and this image is like a hundred percent
what are you doing creepy oh god
like i'm in the mode right now you can
get get get okay
and then oh okay and then we'll put in
some text
but shouldn't we use the label
oh man how far deep can we go with
well anyways
um yeah let's just make this no a card
is a molecule
man because i'm trying to go from the
smallest thing and right now i'm
grouping multiple things so what i want
is an image a text and a
and a and a button that's that's a card
basically what i'm trying to do right
here
i'm trying to do this but like the image
is an atom
this this right here is an atom this is
an atom and the card
button is an atom too so i feel like
already i'm going too far with this whoa
man okay let's this image right here
let's call it card image or
yeah card image whatever and let me
delete this link block or this block
okay so we have a card image
and and this will be an atom
right uh
card atom oh no car image
atom i think this is this is the way to
go
all right so we have a card image atom
and then
um so we have a
label we already have a button so that's
it right
so i can make this a molecule so let's
let's go down here
and um let's go ahead
and div
and i'm going to put my uh
card image in there and then from there
i'm going to take the label
and i'm going to take a button and then
these right here
right click nope nope
right click this great symbol
and say this is a card
right am i doing this right
all right so so we have our
molecules right
help me wait did it
for the card image did i make oh i have
to make this a new field
called card image create a link there we
go so that way if i want to change it
all right um
marine from texas would you have to make
each atom a symbol and then bring all
the atoms together to form molecule of
symbols
yes that's what i'm thinking this nested
cymbals is all about
so that way you can make like a whole
design that's the whole thing that
they're trying to do
design systems i've never made one
and so you're seeing me dip my toe into
design system making right now
um so uh
okay so we're making cards
okay so let's go ahead and make an
organism
so i'm going to copy paste i'm going to
name this
organism organisms
delete that and so let me put
a grid and i want a grid of three
columns
and in the first column i'm going to put
in my card
all right and then in this card i
double click and this one right here
i want to change the image
uh
how do i um okay there
there we go i can change the image um
okay okay i think this is where link to
parent comes into play
okay uh
maybe let's see here um
okay so i'm gonna copy paste it three
times and so there we go we have the
organism
and so can i right click this organism
and say
card organism
whoa i didn't know we can go three
levels deep
that's why we're talking about inception
yo okay
oh
hmm
okay okay okay okay
so i'm here so i have this organism
all right and then if i go in one
i'm like okay for for
this i want to change the text like this
i'm gonna change the text so i'm gonna
go here
and i'm gonna say card
one okay okay it's changing on all of
them
even though this is this is
linked to by its itself okay
so this is where link to parent comes
from okay it's
no card label
so i changed the card label and that's
happening on all three of them
oh it's happening on all of them
okay but not here so this is the main
one
okay so i'm guessing if i
nope not that if i click on this and say
link to parent
oh okay card label
okay so if i go here
no i have to go one one up
oh my god i'm so comfy
oh there it is so i okay i have a card
label
and so i want to say
card one oh okay
okay and if i go here i can say
card to okay
and then cardi b got it
i think
okay so we've made an organism
and then with more organisms you can
create a template we won't go this far
down
um let's review what we've discovered so
far
so atomic design for design system
building
um yeah
atomic design so we have our atoms let
me change this
this style so we know that this has
nothing to do with it this is just a
label for each of our
this label it can also be a component
okay okay okay
okay
yeah let's just let's just play around
component title
component
title or header and then here we can set
a link field and say heading text you
know that's fine
cool cool so i can just take this
delete it and put in component header
just for fun and then here i can say
molecules
cool
nope nope i have to click on the cog
and this one's um oregonisms
okay i think i get it
i think i get it um
here you go so what i've learned is
you can take the smallest thing just a
basic
text block an input field and a button
and you put all those three together and
it becomes a molecule
which is your text block and your
thing and your thing you can take it
even further for even cards and
put put those three together and it
becomes organism
and so when you change the style
of a say the button like say
i want the button to be a different
style i would double click
and just change this
and i click out it happens on all of
them
so there we go so
you have components and you have class
names
wow that's why it's how do i teach
this how do i explain this
are any of you understanding this
because i kind of do i kind of get it
but i want to figure out a way
to explain it even more
so wow we can go
go hashtag deep on this
so we have our grid which is our card
organism and i can copy and paste it
and
i can write or
yeah so we have our organism if i go
even deeper
and then i want to change this
yeah does this make sense
let me go to chat uh let's see here
questions general comments um
eli how is it working with overriding
images uh here let me
let me get an image real quick
um what images can i use hold on
whoa what did i do
[Music]
let's see here uh the
flat
let me just get some flat icons or
whatever
hold on
hmm
i'm getting a pack of unicorn icons
real quick um
put this into desktop
okay let me
just get a bunch of these
hold on oh please
okay there we go okay
cool so i have a bunch of unicorns
from flat icons.com
free svgs and so how will
the card organisms work with images so
if i double click
in this i want to change it
but if i change it here
it changed on all of them so what i need
to do is undo
link to parent wow look how deep it's
going with the names
so card image
okay cool so because it's linked to the
parent i cannot change it
on this level we have to go one level up
so i'm gonna go
to this one
wait okay
okay so i have to back out of this image
or instance
and now if i click on this yeah okay
there we go because i'm on card
i'm not on the image i'm on the card and
go here i can choose the image
and change it there we go and i can go
here
change it
sleepy unicorn if i go here
change it there we go
all right
huh and if i go up it hasn't changed
the atoms and the molecules didn't
change only
inside of the organism so if i double
click
and i want to change the button text i
can't change the button text because i
haven't linked it
all right so i'm going to go to button
double click
click on button text and this one
i'm going to ah the link and the
text need to be linked to the parent
button link oh geez
button text
i spelled it wrong
button text
there we go cool
so now i can go one instance up
click on the cog and now i can now i
have more fields to play with
wow so this is
card one link
okay and then this one same thing
card to link
so my brain is thinking this is
compartmentalizing the the thing so you
have your styles
and your reusing styles and then when it
comes to actual
content within your elements
that's when you use the
uh symbol overrides
all right so you have styles on one side
and you have content on the other
it's kind of like how webflow designer
ui is for the designers they can make
all the design
uh changes happen for the
content editors your content
collaborators that you invite to use
the cms um
well i need the name of this page
components okay
so if i go to editor
and this is what your clients or whoever
is the content editors
uh would see so if i go to components
and it's like okay
cool i want to change this
so i'm guessing
okay they'll be the content of this
element is synced between multiple
elements
that's new
okay so like
okay
okay yeah so i guess it would be this
just their same experience but i guess
as
a designer you'll be able to
take more control of how these atoms
become
pages
um
interesting
chat what do you think what are we
thinking
uh marine from texas so would this be a
good example or no
if not i do not understand it after all
atoms
are the components molecules or elements
organisms or sections templates or
wireframes pages
is website you got it yeah
that's how i'm understanding it if it's
different
let me know i mean design systems is a
way like if you
work with like
vox media they own things like um
the verge on let me go in there let's
say
vox media
uh networks
yeah so vox media they have
all of these sb nation the verge vox
vulture polygon
so all of these right and so how do you
make sure that
all of these networks
like still that you have one
giant basically
pool of design of designed elements how
do you make sure
that when it comes time to change
everything in the future or make small
little
uh iterations to a button
style like that has
massive effects to the design later on
so like how do you
how do you keep it all together and
that's where i think um
design systems come come in and so think
about it as a
atomic design so this is more of a
bigger big client type of thing but i
think you can still use it for smaller
sites you know but this is how i'm i'm
taking it
uh let's go to any questions
uh so here we go um craig
could i create something like this in
webflow okay i'll answer that one later
if it has something
to do not something else i mean
that has nothing to do with this topic
let's see here
[Music]
let's see here
okay wow lots of questions that's a
question okay so let me
take one
okay amina amina
amina did you work on nested symbols
and i miss you too amina actually uh is
part of the webflow team
she's uh a great developer she's
super awesome she helped um with the no
code awards recently
and uh amina i hope you're having a
wonderful weekend
um i hope you you had a wonderful
morning and
um yeah we'll talk soon and in the
webflow
slack uh let's see here
pablo why not just copy and paste and
then duplicate the class for the element
instead of making nested symbols like
what are the pros and cons
that's what i'm trying to figure out i
really feel like nested symbols and
componentizing everything doing this
whole
atomic design is more of a bigger
enterprise type of thing and
uh most recently webflow marketing team
and the team in general pushed out news
about how
they're going more into the enterprise
world so i'm guessing
this feature makes sense to release
right after they talked about enterprise
so
that's what i'm thinking i'm trying to
see how i put this into my workflow
because maybe in the future
um i'll have a big project
where i have to make a design system
with a whole team i mean that would be
amazing
um yeah
so i'm still trying to find out those
pros and cons and again this is my first
time
doing it i don't know how many levels
deep we can go how many
components within component how many
atoms within atoms
like how how far we can go with this
you know like is it possible that we can
go all the way to the pages level where
a whole page can be this one
giant component and oh
is that what it is
you take a whole page and it's a giant
component and then within that you have
these
templates with no
[Music]
ui ah um yeah ui kits
yeah you can make ui kits with this
whole thing
okay
okay okay yeah i'm trying to figure out
pablo
uh sean could this be used to create a
black and white version of a navbar
uh you can make a black and white
version of a navbar um
just with css
i don't yeah you you can't
componentize background colors
you can't like do the symbol overrides
with css
only with content so
um pixelgee steven says you can use it
for smaller as well ch
charlie marie talks about design systems
on her channel i need to watch that
i need to understand design systems
because
to be very honest when i make websites
that
um like a client gives me a figma link
i'm just like okay cool so i'm taking it
like i'm just designing everything as i
go down the page
maybe this workflow of like
instead of making everything from top to
bottom
i look at it deeper and say okay what's
the atoms
then what's the molecules organisms
templates and pages
and maybe that'll make my workflow
faster
i need to learn this i need to learn
this
okay
okay if there's no other questions on
this one i'll get into the regular
questions
okay oh yeah cool we're on hour number
two that's good
okay here we go let me scroll up scroll
up on the questions
um all right stay up late says i want to
export
a webflow project without animations but
the css resets that web
resets that webflow forces you to use
are quite numerous so the exported code
is not as clean as i would expect
expect plans to address so i can't say
anything about any
bug fixes or future releases of webflow
but i want to export a webflow project
without animations but the css
resets that uh
so without animations
so you're not using any webflow
interactions right
and you're not
are you using any css transforms or even
a css hover
on any of your elements
you know um usually the code is super
clean
but that all depends on how you
structure your class naming
and your your html elements
before you export so i'm not sure
how to answer that i would need to see
an example if you can like show
if you can post your preview link
that would be good maybe i could i can
help answer
from there all right moving on to
craig's question could i create
something like this
apartments.com with webflow
uh is that the one with like jeff
goldblum the commercial with jeff
goldblum
oops what did i just copy paste oh wait
no
um apartments.com
all right
all right so what can you make
uh can you make this uh
yeah can you make the back end of this
with no code tools i mean you can make
the design
of course but everything you need to do
to make this happen
not with webflow by itself you would
probably need to put
in like zapier member space member stack
and
uh air table and all these other things
to make this come alive to make this
happen
uh it's yeah it'll take a while
um and if you want to go as far as
apartments.com
you may have to you know you you may
have to even
hire developers so use webflow to be
your design
tool or your design system maker and
export everything out and place that in
your own environment
and have these awesome web developers
make
the magic happen yeah
so the answer is maybe
all right olay hansen
pablo has answered have been chat oh
olay you left the stream but if you're
gonna watch the recording
your question is regarding a breathing
halftone
js effect i would like to apply an
image what do i need to do to get it
working already tried and failed
um
let's see here breathing half tone
[Music]
oh
[Music]
that's the sound i hear in my head when
i'm playing with this
all right um
this is cool
whoa
[Music]
whoa neato stevo
okay
okay
cool um
what would you need to do to get this
working on webflow
uh
maybe this is for a tutorial later i
mean it seems like
simple symbols relative a simple code
that you can add into webflow i'm
guessing you
um what's this yes
i'm guessing this is the magic that
makes it happen
yeah i'll probably make a tutorial for
this we'll see
cool it's probably doable in webflow
uh i'd like to get it
[Music]
pablo says i think you can do it in web
flow but waffle doesn't support the
canvas tag
you would have to add it to an embed
element yep that's what i think so too
all right massoud on desktop i want to
show the bigger picture
of the thumbnail on hover but in tablet
and mobile i want to show the big
picture
over uh yeah
over the thumbnail which click the
bigger picture will change
um i'm not sure
what what it means hold on
okay where's this going hold on i'm
trying to get the link
okay
all right so we're here so
[Music]
when you click on this it shows up here
i'm guessing
so you click on this okay and okay if
you hover on it
it shows up on here on top
this one is okay i see what you're
trying to do so if you hover and it
shows up here
on the side and then
on smaller ones you would need to make
it
make it there um i think
your first journey into this
uh i would have to find it on my own
website hold on or sorry a youtube
channel i've done something like this
where it's like zoom hold on
yep found it
so a zoom effect oh jesus look at that
mug
all right um i'll post it in chat uh
there's this
video where's chat yeah there's this
video
where um you're able to
zoom in on an ecommerce product
on hover so maybe that is something
towards what you're trying to do
so you would have like a an image the
full image
as display none right but on hover of
this one thumbnail
you display show you display block
on that one bigger image so you're just
using
webflow interactions to make that happen
all right um this is a portfolio website
and pictures are coming from multi-image
from a
collection yeah you can still make it
happen you can still make it happen
using i'm guessing position absolute
um yeah it is possible
and i can make a tutorial of that too
that seems like an interesting one can i
do it right now
probably i'm trying to think of the
steps
but let me go on to another questions
and i'll come back to this
if i can
any other questions
up late says downloading the source that
zip comes with a big webflow.css with a
lot of resets and presets
oh okay it's the webflow framework
so in the webflow.css it
has a lot of css
for components that webflow has created
like the container
lightbox slider nav bar uh
drop down menu google map and all these
other things
um and so it's in there the css
to make those things happen are in there
as well as your
own custom css which is saved as a
different uh file name so if that's what
you're talking about yeah
webflow does come with a lot of resets
and presets because it's doing
it's using its own framework it's just
like if you were to start
from bootstrap um foundation
uh a framework like that
uh it comes with its own baseline css
so yeah
[Music]
okay so
is there any so no sites to review
there's
some questions from muhammad
are pages locked in a template
i want to use one and delete no they're
uh no they're not it's just that if
you're on a starter plan
in webflow which is a free one you can
create up to
two pages from blank from a blank state
but what i tell people is if you want
more than two
find a free template out in webflow.com
templates find a free one that has more
than two pages
and then use that as your starting point
and then and then delete all the
elements on the page
on each of the pages delete all the
elements and then there you go you have
like
five or ten static pages to play with
if you delete a page you won't get that
page back
unless you pay for an upgraded account
plan
all right so if you're just learning
webflow now find a project that has more
than
two pages for free and then
clone that and that'll be your starting
place and you can delete all the
elements all the data and whatever
and then you can start playing around
just don't delete any of the pages
because you can't get them back
um
mohammed why do you have so many
questions you're very curious
uh bruno simmon
simon simmons has an amazing website i
think you should check it out
yep i've seen that website before can i
build
bruno simon's website inside of webflow
the answer is
a definite no
because this beautiful art piece
is using so many different things
i mean even look at this look at the
there's a car up here
right and then when you play around with
the car
is it moving to yeah see the car moves
too in the title bar
like what and you're you're playing
around with the car with
your arrow keys
yeah so can you do this in webflow of
course not
this takes a lot of i mean will we get
there
with no code tools to be able to do
something like this without code
one day one day people
didn't think that it's possible to to
to make a car drive on its own and now
it's becoming just like
there's so many companies waymo zooks
and uh
waymo zooks tesla making it happen
so is it possible now no
making something like this without code
in the future maybe
it would be nice so yeah can you make
this no
not right now
okay um
cool i think i got through all the
questions so i'm gonna take that
challenge
then from
masood all right
okay let me check chat right now
um
there you go hey nelson from ranjan
nelson colleen coming back after six
months
whoa six months welcome back ranjan
where you been
hope you're doing well
okay all right let's do a zoom effect
oops wrong one
there we go let's do a zoom effect let's
try this um
let's go to a new page so let's delete
these
okay let's put in um a section a
container
like i do all the time throw this down
here
okay so we want to make something
where if i hover over thumbnails on this
side something happens on this side
so let's use a grid to have two columns
one row okay
and remember remember kids
don't ever use this this is old
we don't need it unless your client
is on ie11 you don't need this
stop using it use grid and you'll be
happy all right
so let's do this uh
i'm thinking i'm thinking i'm thinking
okay
um let's
put a grid within a grid
okay so i'm going to put four
thumbnails inside of here
yeah okay yeah let's put the four
thumbnails inside of here so i'm gonna
put a grid within a grid
and this grid we're going to delete one
of the rows
now we have four but i want to push that
over to the right side so we can
set this to manual and so why is this
percentages
so we're gonna say this column starts at
two and ends at two
so that way now it's on this side
okay wait why is it
okay moving on
all right so in this grid let's go ahead
and
put four images so one
two three four images
and then this first one let's change it
to
ah sad unicorn
winky unicorn mask
and mischievous unicorn all right
so if i click on one of these fellas
they're not click we can do a hover
either or
uh when we hover over one of these a
bigger version should show up on this
side okay so i'm gonna play with
position absolute
so uh
let's see here let me
put in another div block
right here and this div
block yeah yeah this div block will
hold these four okay so since i have a
div block here
i don't need to make this manual i can
make this auto
yeah because this one's gonna hold the
bigger version of this so
copy and paste and now we have the
bigger version
but i need these bigger versions to be
stacked up on top of each other because
if i just go like this
i want them on top so i'm going to use
position absolute
right so let's delete the second one
and this one is going to be uh
uni one okay actually no
no not uni one uh
unicorn uh big
okay that's my base class name
and i'm gonna set this position absolute
all right and right now position
absolute is targeting to body
i don't want that because i want it to
do
top left but because i do top left and
it's
relative to body it's going to go all
the way over here
so i want that to be relative to this
div block so i'm what i'm going to do is
take this div block
and call it unicorn wrapper
and set that one to position relative
uh if you don't understand position
absolute and relative and all the other
positions
uh watch my video i have a whole video
talking about it
so uh calling if you can link that
please all right so unicorn wrapper
and so now this one is going to be
we're going to say one because it's the
first one and let me go
copy and paste the other ones one two
three four
so they're stacking on top of each other
so this unicorn big
i'm going to replace the image hold on
unicorn replace
and this is the second one see how
they're stacked up on top of each other
this one the third one
the fourth one
okay and for the class names
i want to make sure i'm changing them
because in the webflow interactions i'm
going to target
uh the exact one based on the class name
on the combo class so now this one's
three
this one is four
there we go and yeah
so what i can do is on page load
we're going to actually we can do that
right now
for the parents class name
unicorn big we're going to display none
okay so all of them are gone because
they're all using that
parent class name of unicorn big the
only thing that's different about them
is that combo class
of one two three or four so now
how now that we're our stage is set okay
we've made the css happen now how do we
make it interactive how do we make it
where
i hover over sad unicorn and then sad
unicorn shows up here we go
let's go to interactions so we have this
image
selected because that's the one that's
going to have the trigger
so let's go to interactions at the top
right
press plus and mouse
hover okay and so on mouse hover we're
going to start an animation
i'm going to start a new animation call
it
unicorn
hover one
okay so unicorn hover one
and then i'm going to do a hide show
and i'm going to right click
change the target
and click on the first one okay
so what that did was change what's going
to be affected
if any element has this exact combo
class
do the hide show thing so right now hide
show has a
caution symbol and that means i didn't
set
the actual hide show so i have to scroll
down to the bottom right
and then here's my hide-and-show so i'm
going to set it to block
and there is sad kitty save
and then on hover out start animation
duplicate that one and do a hover
out and then for unicorn big
change it back to display none
and then it's gone so we test it
and there we go and you can do opacity
instead of display
uh none and uh display none and block
for a more gradual effect but this is
the basic
of it and so now just rinse and repeat
for all
other ones so right so click on the
second one
mouse hover start animation
and to make it simpler you can just
duplicate
and then right click change target
and go to the second one save
and then duplicate right click
change target second one
save it preview
and it doesn't work congrats what
oh over two the hover out
is that there we go
and just do the same for all three all
four
all right and then if you want that blue
box effect where it has like a
outline or something you would do that
on the css
so for example if i take this and say um
let's add a transparent
actually let's do it like that so
we'll start with
something light and then on
hover of this image we can go dark
like that okay and then if i preview
whoops i have to click out preview
there we go and then i can just use that
same class name
on the other one so the class name is
image so use the class name on this
image image
and there you go
pretty fun so hopefully that helps
uh who asked that question
[Music]
masood hopefully that helps and yes this
also works with collection lists
good luck on your portfolio site
portfolio sites are always hard
[Music]
okay anders your videos are great thank
you i appreciate it i'm glad you're
finding value in them
um and again if you want
more direct help if you want to support
the community
go to pixelgeek.com
and in there i
have mentoring sessions once a month
where we get together and have a private
chat
over google beat google meet and
uh you know we talk about things the
last thing we talked about was um
validation it's a big word
validation you know so we talked about
that
we talked about that in a i like to have
deep conversations
because it's very interesting to me this
whole
this whole world was very interesting to
me
uh steven says they still haven't
removed columns from webflow i guess
it's because some people actually still
use it yeah
i think so too there's i mean
how many people are st there there's
still people using ie11
in older browsers so you know
uh yeah
masood you're awesome you're awesome
you're awesome for being here
and hanging out for the past hour and a
half
muhammad 1am i guess time to go to bed
yeah
um have a great rest uh thank you for
being here
and hopefully we'll see you next week
yes make the web beautiful together
uh
let's see here any other questions
yeah so um
we're thinking about changing up
the the format of these streams because
we want to help grow the community
and we want to make this more of a
tight-knit community
and um that's something i'm trying to
learn
uh about business and colleen knows this
too
you know i'm trying to understand
where's that balance because i want to
help so many people
but at the same time i don't have enough
time to help
many people and so what is the
tight-knit community
i'm more i'm more about
the low quality number of people in
community
than the big amount of people because
like when
like if you watch twitch like there's
twitch is a huge live stream community
okay
and if you think about you think about
like ninja
or something like that and you watch
their
chat their live chat it's just quick and
it's
fast and it's like how does anyone read
and it's full of emojis and
memes and you're like and then there's
this
uh one dj streamer his name is jovian
i love that community because there's
only like around
50 to sometimes 300 people who are
watching him
mix live and i love his mixes the
um and to me it's the way he streams
the way he djs and mixes music is art
that's what it is to me and so the
people on the chat there's hardly any
chat going on
but that's okay because everyone's
basically vibing
off the music and just enjoying
the the small tight-knit community so
that's what i want to do make this
a smaller community but grow it
with as i always say with honesty and
empathy
so if you want to join join um
i don't mind if it's a small number but
that makes it more more fun
um ranjan shifting house nelson and had
to finish few
photo projects and now i'm back all
right cool cool
uh see veronica i haven't seen
let me see lyra veronica veronica i
haven't seen your avatar or name before
so welcome if you're new here welcome
or if you've always been here sorry but
welcome thank you so much for videos i
started using buffalo recently you've
been a huge help for me
you're welcome you're welcome i'm glad
i'm glad the videos are helping you and
um
speaking of which next year sometime in
february
the pixel geek visual develop visual
developer course
is going to happen so i already did a
beta test with
three students they enjoyed it and i
understood where i have to
smooth out some of the things that i've
been working on in the background
but um maximum 20
sorry maximum 15 students for this
course where i'm going to teach you if
you're just getting into no code for the
first time
how to get from zero to the confidence
of understanding the concepts
of web design and web flow uh so
it's a full week 20 hours live
instruction
with me and some teaching assistants
from my team
and then the next three weeks you'll
have access to
a chat board where you can continually
ask questions
and i will help you as well as my
teaching system will help you
that way you can have a full month of
understanding of how to build
visually if that works
an advanced course for
how do you use e-commerce how do you use
interactions
so you're gonna understand the house but
more importantly
you're gonna understand the why and i
think that's why a lot of people
gravitate to my style of tutorials
it's like i like to teach why i like to
teach live
and i like to teach the why in different
concepts kind of like
bill nye how he explains science and
it's
fun i mean i even during the beta run of
the visual dev course i was using my
daughter's
duplo blocks the big lego bricks i was
using that to explain html and css
and how everything connects together
right
so if you want to be a part of that um
stay tuned uh or you can join the email
list uh
pixelgeek dot community slash uh visual
dash
dev dash course so yeah i want to help
everyone get up to speed starting next
year
all right um maureen from texas design
systems will absolutely change your
workflow for sure
yeah it's why elements and layouts work
in webflow if you have a design system
you just drop in pre-design elements and
go
i agree i agree i need to do this more i
need to understand design systems
from an atomic level yeah
right
anything else
anything else
yeah i think we may
end early if there's no other questions
let me go to the live chat
um jennifer i haven't seen your name
before welcome
thank you watching from south africa
your tutorials are terrific
i appreciate that i appreciate that
rid path is back you're late oh
it's okay though watch the recording
and hopefully you'll you'll learn a
thing or two about nested symbols
because it was interesting as it kept
going deeper and deeper
hi we made an organism
nice you want to see
huh 11 35
look it so you start from
an atomic level where you have label
input and button
and then we also made some cards so
you make a i have a card image
right and that's just a
single element so these are single
elements so atomic level
and then we go into molecules and say
we're making a card molecule
so i took i took
that label i took that card image from
the
atoms and then the label and then the
button
right and now putting those together
with other cards becomes an organism
and this is where it went like whoa what
because here
uh this is when you go in deeper you can
go as deep as you want
so look it's like a group element like
if you're looking at it in illustrator
yeah it's groups within groups within
groups if you think about it
in illustrator terms and
that's where you link things to parents
and that's where that whole inception
thing happened we're like oh
so i don't know how far deep this can go
but i'm thinking
for atomic design you can go as far as
like a whole page
is a symbol
nuts nuts so
yeah that's what i learned well all
right bye-bye
yeah thank you
that's jess um
could you mention the cost for the
visual dev course for those that
oh yeah yeah sorry yeah so the cost is
going to be
for um non pixel geek members
it's going to be a thousand five hundred
and
i landed on that number because this
is a live training course with
three extra weeks of support okay so
i'm doing it live that's why
if you're a pixel geek uh member
then it's a thousand four hundred and if
you're a pixel
pro member it's a thousand two hundred
all right
and um i like to be honest
this isn't a course where i promise
right after you're gonna make five
thousand dollars a month
nope i'm not gonna promise you that i'm
gonna promise you
that i will be there to help you
understand the why behind everything
and when you understand the concepts
behind web design and webflow and other
no code tools
you can take that concept thinking
and bring it to any other tool and learn
faster in that way because back when i
was
15 or 16 i learned the concept of html
and because of that i was able to bring
that concept
into microsoft front page then to
dreamweaver and then to sublime
i took the concepts of uh
what i learned about dynamic pages
i actually learned it from my dad
microsoft access and
active server pages like
it broke my mind to finally realize
that variable equals
a thing but then it's you have to read
it backwards kind of like
math where uh
well i have to explain it by using
webflow
so when i saw something like this like
a a thing equals
this plus that um
this confused the heck out of me because
usually
in school you would learn
this plus that equals a thing so you
read left to right
uh so that's how i always learned and
then when i was trying to learn
programming
i was like what
what does that even mean you know so
it's thinking taking the concept of this
and that
is putting things into a box on the left
side and it's like
ah and so i'm using that
concept with jquery
in javascript and then using that
concept
inside of uh webflow like how do
collection lists work how do
multi-reference single reference fields
work
so yeah that's what i'm promising and i
want to help as many people get there in
a way that's
fun interactive and um in my style
so that's the pitch
i'm not much of a business person but
yeah
the pitch i'm using all these words like
i had
a meeting with uh colleen and the other
web uh
other pixel geek team members and i said
the word
pipeline and i was like oh i
said that ugh i guess i'm there now
yeah um
alexis have a great night from france
yay
continue your amazing work thank you
exactly but this is
how languages like mandarin and arabic
work yes
yeah as someone who always reads left to
right it was hard to get my mind to
understand
right to left but then it flipped and so
it just takes a while
yes all right
am i missing anything else
all right so again
check out did you link it
hold on so i'll link it
oops where's my
there it goes so i'm going to link the
visual dev course sign up
uh if you're just interested just to be
on the email list
visual dev of course i think that link
works
hold please yeah there we go
so if you're interested to be on the
emailing list so i can send you more
information when it's hap um
with the syllabus and everything put
your drop your email
there um
but yeah next week is the last
stream of 2020 what we'll be doing
i don't know that's how these streams
usually go
sometime in the middle of the week i'm
like oh maybe we should do this
and then colleen and i are like okay
let's let's figure it out
or in this case colleen came up with the
idea she's like
hey you should go into nested symbols
and i actually said
i don't know i didn't have time to play
around with it
and she was like why don't you do a
learn with me stream i'm like
oh okay so
there we are penny it's like algebra let
x equal y or y equal x yeah
it took me a while for me to understand
that concept
yeah um marine texas
uh are there any more pixel geek team
member slots available
um if you want to help him volunteer
let's talk you know um
yeah i like i i already feel like i have
all the help i need but if there's
something you can help us out with i'd
love to talk
i've never ran a team and this is my
first time and colleen knows that i
am but just like everyone else in this
world
making it up no one knows what they're
doing
and that's the truth right there all
right so if you want to help out uh yeah
let's talk
all right um i guess that's it there's
no other questions we're just
chilling now so again pixelgeek.com
pixelgeek dot community slash visual
dash dev
dash course and uh if you want to join
the community it's pixelgeek.com
let me play my playout music
where's the volume oh there you are
whoa
uh i need to find a better way to do
this
uh
[Music]
the music oh
[Music]
okay there it goes cool explain cool
all right i will see you all next week
for the last stream of 2020
and if you're celebrating any of the
holidays next week
or if you've already been celebrating uh
you know do it with a with gratitude
i mean there's so many things to be
thankful for a lot of things
happened this year and um both sad and
happy but
we'll get through this we will get
through this so thank you all
so so much i appreciate you all
and the stream happened these streams
happen every saturday at 10 a.m to 12
p.m pacific time
if you haven't subscribed yet go ahead
and do so the like button is right there
if you
really really like it don't just click
it just because
click it because you actually mean it um
i will see you all next week and as
always
make the web beautiful together
see ya

‍