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