Creating a background scroll interaction in Webflow

[Music] [Music] waiting for there we go we are live all right here we go everyone welcome to another web flow workshop I am your host Nelson thank you for joining me this week like I always like to start off before I get into any topic I want to say thank you to everyone in the live chat room who's in here today I know Webb flame was first he was two hours early jeez man Laurent Reilly um Ironwood Laurent uh Alex no weed Anna hello Nita nav Graham uh Lance yeah okay cool so thank you guys for being early birds and welcome to another week this is the first week of no yeah second week of February so yeah we're just going through it and today's topic is going to be creating a background scroll interaction in web flow and I'm going to show you guys how easy it is to do it from scratch now uh in an earlier workshop what I did was um I interviewed one half of HECO the creative agency that one a side of the day award for making this site inside of web flow but uh the thing that you know caught me off-guard was this scrolling effect and I you know kind of reverse engineer it try to figure out how to do it on my own and I was able to learn it and understand and I want to share this knowledge with you guys but let's look at this site so what's happening is as I'm scrolling through each through each section of the page watch what happens to the background it changes okay and um this is really nice because usually on websites you see a row and then you see a hard line that changes to a different color background on the next row and then another hard line but with this kind of interaction and there is no hard lines it's just a fluid natural transition you know so you know you're in different sections because the background changes but you don't get a hard line okay so I've seen some sites that are going away from a hard line making me a raggedy edge or something like a paper rip or something like that or curved or even an angled edge to signify that you're on a different section of this page well with this one you can signify you're on a different section by changing your background on a scroll another site that's done this and I was informed by one of my colleagues here at web flow that this site also did it as well it's super duper WTF and yeah let me put the link in the chat room SuperDuper so this again was built in web flow and they have a different background but instead of using solid colors they're using a gradient so I'm going to a different section and change this gradient different section and they have 3d transforms there and so yeah so that's all it is it's it may seem without even you know jumping into web flow may seem like oh my god that's complicated and it um yes a web plane you can buy a WTF domain name so yeah um now we thank you alright so here's my version of it inside of web flow and I made something super simple with five seconds okay so there's that's section one there's section two it changes background color section three changes again section 4 and section five so yes you can also do it with background images we care mean background videos because background videos are just you know a div with a video background in it so yeah Jake V says every nice yes yes this transition this effect is really nice and it's so subtle and it wasn't until I saw a Heco's site that I'm like I want to learn that so here we go um here we go uh have my interaction so all I did was I have one interaction for each one and I'm going to start from scratch to show you guys how to do this okay so I have one interaction for each one and let's go ahead and start a new page okay let me start a new page okay demo and let me delete these guys right here let me delete all of these okay cool all right now we're from scratch now if you're watching a recording of this video of this a stream this is where you want to start okay we know it's you know veneer would you like to save your site without interactions yes okay here we go blank slate so first thing I'm going to do is going to lay out my page okay so let's bring in a section I'm going to bring this section in and recall you call everything demo something so demo row one okay um actually yeah demo row one and this one is going to be let's give it a height of 100 VH and make it flex and set everything to centered horizontally and vertically for the child and let's just put in some text in there I'm going to put in a heading we're just going to call this Row one okay now we can go and drag in another section up put it in the body not another section there we go we're just going to call this demo row two and we're going to give this a height of say 600 pixels and we're going to do the same thing flex it out and put some text here and say Row two actually we don't even have to call it two or three we can just call it demo row that way I can just copy and paste okay so here we go row two three four five so all I did was copied the demo row paste it inside of the navigator so now row two double click here row three four and lastly five okay so now we've set this up and now we need to put our backgrounds okay um Scott where's your footer at okay if I I this shirt hmm yeah all right so Row 5 right here okay so next we want to make a diff block we're going to put a div block at the very bottom okay and this we're going to call it demo VG's for backgrounds okay and because we want this to be a background that's fixed to the back we're going to do a position fixed okay and set that to full and just to make sure that we're not overlaying in overlaying any of the of the rows that we already put we're going to make sure that the z-index is negative one okay so yes you can go to negatives on the z-index and if you unfamiliar with z-index it's kind of like layering in a graphic design program you know you have different layers but this one makes sure that this one is on the most bottom layer that you cannot touch it and so you see this warning right here it says elements with negative Z index values can only be selected in the Navigator tab so in order to edit this next time like if I click on this I can't click on demo BG's I have to actually go to navigator click on demo BG's and now I'm on it okay so now we're here let's go ahead and drag in another block as a child in that one okay come on get in there there we go alright so this one we're going to call it BG one actually a demo BG one so I don't overwrite any classes all right and this one is going to have a height of 100 VH so remember you can type in VH inside of this box VH means viewport height and now this background let's give it a color of we're going to start with orange awesome and yeah that's it yeah that's all I want okay so let's go ahead and do the same thing and drag in a block here demo BG to what this is going to be light blue okay oh yeah height 100 VH there we go all right is there something else I didn't do I may have to go backwards because okay I have to set the mom let me refer back sorry guys just want to double check my Styles okay so what I did was position fixed so I position fixed all the backgrounds as well okay so let me go back to demo okay so demo BG one we take out this height and say position fixed full there we go and then when I go to demo BG two I do the same thing instead of putting a height I can just do a fixed and then full there we go now it's working now let's go ahead and put another one bring your div block here demo BG three this is going to be fixed full and then a darker blue and then demo BG four fixed then this one's going to be purple and then lastly we're going to do our video so instead of bringing a div block I'm going to do is bring in a background video actually let me delete this and I'm just going to copy from the home since I already uploaded the video so it's right here copying this and putting it here there we go okay okay cool so we have five things see here okay so I did negative four okay so I'm doing my layers now so this is negative 4 on the z-index and this one should be negative 3 so I'm layering them ok this one is negative 2 this one should be negative 1 okay so this is what I did so just to recap okay I put a demo BG's or a background um fixed full and z-index one the children I want them to layer under each other and how I did that was I created a child div set the position to fix full and the first one I don't need it z-index because that's already 0 okay and then I just said whatever background I want it can be a gradient it can be a solid color you do what you want okay or even an image ok that's it's all up to you demo BG - I did the same exact thing instead but instead the z-index is now negative one and the next one will be negative 2 negative 3 and the negative 4 however far down your page it needs as far as how many backgrounds you need ok so after that now the part that makes it all happen is the scrolling interaction ok so first thing I want to do is a ha night I just needed all my interactions so hopefully I still remember so first thing I want to do is this guy right here stays there and then this guy right here ok I think I got this I think I got this let's try this so for demo Row 1 I'm going to create its own interaction so demo Row 1 and the trigger is going to be a scroll and I'm going to affect a different element and it's demo BG 1 and when I scroll into view let's say by 25% I want it to I want to put a opacity 100% and when I scroll out of view it should be opacity zero and the offset is 25% and if I did that right I can immediately see my work ah yep there goes ok cool that easy and just rinse and repeat so I'm going to go to the second row right here and in in what I can do is I can duplicate this and sorry row two so I all have to do is just change the class name demo BG to done and done let's see if this works mm-hmm oh I didn't work ok I'm missing something because it's supposed to fade out oh I didn't select it though there we go so I didn't apply my interaction to that real so there we go so let's try this again throw one row to put it off there you go good a good question web flame what is offset so what web flame is asking is this guy right here what is this offset so you can see by this icon it kind of indicates what it is as I'm scrolling down 25% if this is if the top of the page is zero and the bottom of the page is 100 so when I scroll down 25% of the height of this so if I scroll down to say right here that is when oh yeah that is when I'm going to see something happen and opposite Alexandra has a better answer than I you can choose at which point of the page the action takes place in this case 25% I always make these long explanations you know and I'm glad the the chat is there to help me because I go too far and someone just puts it in one sentence Thank You Alexandra all right so yeah let's see so that one worked that one worked and yeah it's now Monro three let's go ahead and finish this thing up because everything looks fine and so this is what happens when you set up everything in a way that you can rinse and repeat really easily like I don't have to mess around with these anymore I just have to double I have to change the class name and that's all I have to do for the interaction okay so I go here and duplicate it select it change the class name demo bg4 done done and then lastly we're going to demo row 5 instead of you for gonna say bg5 because it's the video 1 select it and we should be done huh [Music] boom that easy now what uh let's copy some of the things that HECO has done okay so what I've noticed if you see there's a slight scale if you watch the pattern in the background watch them scale we know if you've been playing with webflow we know that scaling is really easy to add so let's add scaling to the last one okay so how we'll do this is we can go to a bg5 right here okay and let's go ahead and scale that with transitions and transforms so right here the transforms I can add a transform and scale it to something like do something subtle like 1.3 alright so we have that as its default CSS style and if we go to demo reel 5 and then go to the interaction so not only is the opacity going to become 100 but also the scale is going to go back to 1 okay so scale to origin okay and then when I scroll out of view I want to scale it back to 1.3 okay so let's see if this were okay okay two three four did it work huh okay maybe I don't set it maybe I don't set it um on this one maybe I set it on the other one so so what I'm doing is instead of setting the CSS here I'm going to set it as its initial interaction as its initial appearance and how to do that is I can set a new interaction I'll call it VG 5 and its initial appearance will be let's do it something bigger like 1.5 let's get crazy with it just to make sure we know it's working okay and done and done and I can go to demo reel 5 and instead of scaling to 1.3 let's go to 1.5 okay if this works then I'll further explain what I just did okay let's just double check I've set everything yep I set everything let's go back to row 1 2 3 4 is it happening [Music] huh all right let's see what the chat is saying uh you need a pattern there Nelson otherwise you won't see anything scale too fast in which case do you scale as a default style in which do you scale interaction settings I may be doing something wrong but I know that there's two ways to set a default style there is one doing an interactions um because you only need trend transforms you know he need transforms to set initial appearances or the other way if you nee Oh is the Styles panel right here and as saying scale might not affect background video hmm hmm okay you see here up all right let's see what if I add 200 milliseconds or increase scaling time oh yeah yeah yeah Alex because I'm taking the default timing of 200 milliseconds and so it's all happening at the same time that could be it oh love you chat love you guys this is this is nice um so I can go to demo row five and the let's do the scale to origin so notice how this has a 200 millisecond timer that is the same thing as all the other transitions so let's see if alex is right let's do something crazy like 750 milliseconds all right and then this one will also be 750 so something really really slow let's try this let's try this come on Alex I like Alex's idea okay okay okay what No hmm alex says um you affect the background with interactions and there is nothing but a color on the background so you won't see any change alex says put the video inside of a div as well ah so maybe that's how they did it oh my oh my okay let's try this let's try this put this here live demos always fun can't see bg5 wrapper okay so this one's going to be fixed full- for bg5 is just going to be 100% everything and then position is nothing so it should be bytes so what I'm doing is what alex is asking asking me to do is put the video inside of a wrapper and so this guy is going to be the one that's scaling not this guy so let's remove the interaction from that child and add it to this and plus demo row five shouldn't be pointed at me G five anymore it should be pointed at bg5 wrapper okay I'm feeling good about this one live troubleshooting Alex thank you up oh okay whoa like a vertigo effect from Alfred Hitchcock or something that is cool so yeah it is possible uh you know it just takes tinkering and that's that's the fun thing about web flow you know tinkering great job Alex thank you so much so yeah you can do so much with this effect and um you know when it comes to effects like this you know they can be trendy they can be overused but done in a subtle manner can really help this the site looks super clean and um some people who know me know that I'm not a fan of parallax rolling but if used in the right way and it's really really good but so many people have been using parallax growing too much or the full page scroll were you what they call what they call scroll jacking when you scroll down with the scroll wheel you don't have control over the scrolling of the page and so you go from one you're basically doing a PowerPoint where you're going from one slide down to another slide ah to me that one is you know overused or not really that effective but when I saw this this is the nice middle ground between it's not really parallax and it's not really a full page scroll but yet it still lets you have different sections on a page and differentiate between them but not have such a hard line so everything is very very smooth okay um let's recap what I just did uh there you go let's recap what I did so first thing I did was I set up all my sections okay each section has a certain height and has content inside of it okay and the very last div hat contains all the backgrounds done I'm going to change to and with this background div right here that's the overall background wrapper I made sure that it's fixed to the back and z-index negative one okay and then all of its child elements are going to be fixed to the back as well but the lower you go you want to set that Z index starting from auto to negative 1 to negative 1 negative 3 and so on and so on and so on ok and after you do that you want to set the interactions and again how the interactions go it's very simple you have a scroll trigger that affects its corresponding background element ok so that's what's happening here and you do the transition that you want so what I'm doing is when you scroll into the view of this certain section or row you're setting the opacity to 100% when you scroll out of view by 25% then it goes to 0 okay and that's that's all it is and what we learn thanks to Alex is you can also do background videos that you can you can also do backgrounds that scale okay and that's what we were trying to do this effect right here from hello HECO comm they do a subtle a subtle zooming or a scaling effect with their background okay so that's what we're able to do and how we did that well we learned that we have to as far as background videos go we have to have some sort of wrapper that does the scaling okay oh oh yeah so yeah this is the second half of the of the stream so this is a part when you guys can ask any questions you want about web flow about the web web design industry lets you know chat it up like how we nerds love to do talk about pixels and also if you have any web flow io links if you're working on something side of web flow show it off and let's see what you're working on and also this old site right here when it comes to parallax roll you just want to show you a fire watch I think it was now Amy showed me this before the stream but yeah this one does parallax scrolling beautifully because it tells the story you see a guy on top of a mountain he's looking over a forest and you scroll down and that's how parallax scrolling should be subtle simple only happens once and that's it you know it makes it beautiful because it does look like you're peering over like you're using a drone or something and you're going up on a drone that is cool Firewatch game comm yes all right web flame great escape Delaware here we go are you for the challenge hmm this was different huh yeah this was you redesigned it I I think I've seen this an older version of this right this is interesting okay escape rooms okay this is nice um let's see you can escape Souls like I have I've no comments because it is clean it does the job but um I don't know what it is when I first get here Great Escape when I hear Great Escape and a and the color scheme is bright and inviting to me Great Escape means like I'm gonna go on vacation this is probably going to be some of the best hotel rooms in these um like uncommon places to go to and so I need to escape from the world because it's so bright nope this is a redesign of a current site uh yeah all right but then you go here and it's puzzles now I don't know how to visually portray puzzle rooms because I never been to one so this is where custom photography may come in handy is this one of the rooms this is definitely a stock photo this is definitely stock photo this is definitely a stock photo unless that's actual one of the rooms or something so it works it works layout wise but I think I would play around with the colors and the photography yeah all right and if anyone has seen the second episode of black mirror that's what I'm thinking when I see this these photos creepy all right let's go to one more but Oh shaken not stirred okay so I clicked on this because I thought I was a link so when there is a drop-down menu we you can drag in a drop down menu component and I think a web flame you remove the down arrow I would keep the down arrow the down arrow to me tells me before I even hover or even click on it that there is something there is a sudden sub nav when I either click or hover on this one link okay because there's no down arrow I clicked it and because I clicked it and nothing happens for a split second I'm like huh so leave that down arrow it helps it helps it's a it's a road sign to tell the user before they even do anything hey there's a sub nav ok shaken not stirred okay okay so probably not done yet but um yeah actual photography of the of the place of the product you know actual photography would really really help and I think it's because you're not done yet you're in the middle of it so yeah alright that's creepy news piece okay good job it's clean oh you put the X to show people that you're not ready that's cool all right all right I'll go into next one Alex what are you working on eighteen hours in the making just the home page and a few interactions all right what are you working on body outline finis Fitness Center all right very modern this right here that's cool let me refresh loader this that's cool that's cool it's a way to tell the user there's more stuff below scroll down without putting a text layer that's a a text element saying scroll down or even an animation of a mouse wheel being scrolled down you're just using a line kind of like a timeline going down that is cool one more time that's cool that's cool all right scroll down okay Alex this is where I think you should try a background scrolling interaction because this is all about being a smooth subtle refreshing you know not such hard lines maybe this interaction that we talked about today can help you know if I could see that happening for this site I see more and more people doing these um boxes that overlap in some way I like them you're different okay nice mmm what if you know I know it's going to take some time to reorganize some of your elements because this whole thing jumps out at me what if this view was just a div that looked like a button but in fact this whole this whole row was a button so I can click anywhere I want in here revving rather than just having to click in here you know just little things you don't little UX things but I'm I'm loving it so far menu nice oh goes away oh that's cool book a session oh that's cool I like that whoa wait a minute wait is this oh it's Kalyn D so Kalyn D um Kalyn D here we go there's a calendar no why is there a cat ah there we go Kalyn D so yeah there's this service that can do appointment stuff and it looks like it looks like that's what Alex used that's cool I really like it good job good job three job bring up all right let's see here rolling up rolling up and this a lot of stuff create escape oh sorry uh sorry Scott I missed your link will go to yours next and yes interactions 2.0 the question ah not yet sorry guys a lot of stuff a lot of stuff that we're still working on in the back end I wish I wish I wish every week every week you know one day I'm going to get on the stream and be like I'm just gonna just say it the first thing I'm gonna say on the stream women when I finally get a date I'm just gonna say it really fast oh my gosh okay anyways cool background looks like a background video was there any loading okay yeah oh I like that little whoop that's cute let's close this there you go well down cool nice okay okay see what I mean um Alex this is what I mean when um I hover over this I was thinking oh I can only click on this or I can only click on this nope I can click on the whole thing yeah so so something like that for your little for your rose um not sure I think you're starting on an infographic where like probably lines are gonna connect somehow or something like that I'm not sure what this means but then again this is not my industry so I'm not sure but this is nice nice and clean look hey yeah oh you're using tool tips that's cool good job hey guys it's Nelson from web for March 21st ahem it's a work in progress yeah great job yeah and you're probably using like tooltip' some sort of plug-in or something great job with that moving up I did body outline here is my project ok Laurent SSF tell me what you think oh cool is that custom ok there was some weird loading try it again if i refresh look at this bottom toolbar I mean horizontal scroll I'm not sure what that is but it's probably a layer that's going too far to the right towards the left is this thing right here yeah so you need an overflow overflow hidden in this section and that will stop the horizontal scrolling because this is what's happening okay so fix that um I would use different colors here like maybe this can be like a softer gray and this could be white and this can be a softer gray because you want this since this is your main focus the color should be different ok looks like custom illustrations oh that's the huge menu button okay it's cute yeah good job I think there's some text here I don't know what that is but yeah watch out for your overflows all right good job so far Lauren Nelson how do you change the active state area for scroll buttons the div that is active is only active up to the 50% point of the VH once the div passes the 50% of VH the active state of the button turns off oh um he changed actors here oh so that's okay let's see here let me see if I understand what you're saying so let's go ahead and act we'll just call it active so we have a blank page we're going to put a nav bar and we're going to put a section and make this section say you can call it active row and each active row will be 800 pixels tall both to hi 600 pixels tall and it's just Center it Center center put some stuff in row 1 2 3 Row 1 Row 2 Row 3 let's delete this okay so 1 2 and 3 and then this guy goes to oh wait Neeta okay sorry so I'm trying to quickly do what he's asking and it has to do with the in page scrolling I think so let's call this Row two so I'm quickly doing in page scrolling function and he's saying the active state only stays for 50% of the height of the of the section so let's see let's make sure we're talking about the same thing okay so watch the home is going to change to blue I need them sorry now if I need to make that sticky you know it's sticky cool there you go um okay so home turned blue and then about turn blue so yeah it's only 50% yeah so you can't change it seems like 50% except for that one that one you go all the way out and then it's gone so I think that's what your what Graham's asking you cannot change the the height of the active area because that's hard-coded into our platform but um that's a good question um is it bothering your site or something or if so let me know put your read-only link and maybe we can um yeah maybe we can uh fix it all right I'm going to go our next question or site uh Marius inde hers okay I probably said that wrong I I don't know this language okay Oh watch out you have a horizontal scrollbar okay the horizontal scrollbar is because ah it's because this guy right here this this section is being pushed so what you need to do is um you stay here okay yep so what you need to do is you need to add a jQuery code that sets the body element to have an overflow of hidden and then when you press this close icon it removes the overflow hidden and changes it to overflow:auto okay but those are one of the things you can ask on the other web flow forms and then someone will post that code for you it's really simple go simple but so far this is really nice watch out when stretching images you can tell this is stretched like it's it's been elongated watch out for that lows um if you're using flexbox I think you're probably using flexbox make sure that this isn't affected by the Flex box you want to set it to its original size rather than making it elongated here we go angel wad that's cool probably something you're supposed to put something here yeah same thing here watch out for um you got to keep those images in ratio nice yeah very clean I love this sites you guys are showing me today great job it's very very clean oh that's cool it takes you to it and then it brings this guy in all right that's cool too it weights a couple seconds and for it to close and then it Scrolls down to it not sure how you did that I want to learn all right oh let's see here zebra yes zebras here 20 hours for this Jason let's go what are you doing oh okay here we go this is different this is cool I like how this line follows the text that's cool using a lot of triangles everything is italicized that's cool and it fits with the brand because the brand is it looks like a credit card that's like moving forward it's fast it's digital this is nice man oh man you're using a 3d transforms or something oh that's so cool all right custom with custom icons nice wondering why does that okay it's probably just me all right ah yeah I got nothing to say about this one oh ah what can I say this is really nice wood man and it only took you 20 hours I'm impressed great job what okay okay this one right here not sure if something's supposed to be in there or maybe just make these flexbox so it goes stretch and you don't need this red bar because this red bar to me it looks like a call to action like there needs to be a button here or something like that without any text inside of it and there's so much room because you already have the same pattern going on I feel like something's supposed to happen here um man okay okay all right all right uh these three are images all right so this one I really think you should take a little bit more time you've already gone this far go finish it off all this these images they're not seo-friendly recreate these okay you already have the pattern and you're already good to go recreate these as regular divs with actual live text you're almost there okay you want these to be picked up by search engines okay just turn now oh that's a big form I like it great job Jason Jason you rock all right we're gonna do two more links Jordan what are you working on oh uh watch out for your horizontal scrolling not sure why it's happening but watch out uh yeah like I said everyone's doing something different than just a hard straight line really good does the scroll Oh doesn't scroll down interesting so here learn more and a down arrow I thought this would make me scroll down because I have a down arrow that's telling me there's more below the page if this is taking me to a different page I wouldn't say learn more I would say view our process and the arrow would be pointing to the right not down okay because when I click on this learn more I want to learn more about the company when I click on this I'm learning more about your process I didn't know I was going to go there so you've got only road signs for your users for the people are going to come to your site leave them road signs learn about our process or view our something like that learn more is a very basic default turn and it just imagine seeing a road sign that says keep going and then you're driving and you're like keep go what does that mean keep keep going keep going where no no just keep going alright so careful with your call to actions capabilities ok so I would reuse this in some way because now you have a hard line here ok alright your icons are too thin maybe make the lines thicker for these ok it's really really thin ok so you're almost there and I'm not sure if you want them to be stacked in different heights but you can totally use flexbox for this um watch out for your spacing you have a lot of spacing here and then it gets a smaller spacing and then very small spacing and then hardly any spacing and then a lot of spacing so be more consistent with your spacing ok see how this is contact us and pointing to the right that means ok I know that I'm going to click on this and I'm going to go to the contact us page ok whereas this one it doesn't tell me where I'm going so I go your process okay we have interactions here cool I'm not sure what the dots mean oh ok ok the four DS oh wow all right you did some work on this one oh good job okay so okay see how you're doing the backgrounds fading in and out or the whole actually the whole section is fading in and out and dropping down okay uh this is where what we learned this morning and the first half of this where it can really help you know the subtle of the background transitions all right all right Jordan great job hope that helps all right last one sorry guys if I unless I can go through this one fast but I want to give everyone the right amount of time okay okay so the first thing a lot of things happening here um I hope I'm saying this name I Darrin and heron there is is the D silent okay I'm sorry but yeah I'm happy that you have an in context background image okay I understand what you do now I'm happy that your photos there that's a good headshot what could be better is there's a lot of text on this right here there's a lot of things that you're trying to tell the user in such a small amount of space you tell me your name but then it becomes a a wall of text and then you're trying to tell the user to get in touch by making that button move all the time all the time which is distracting me from trying to read all the text you put into this hero realm so I would suggest don't make the button move if people want to get in touch with you they will but how do you make them get in touch with you not with an animation that's continuously moving you tell them by telling your story and people know if people who have been watching the stream already knows that telling you I always say tell your story first so maybe um let's see here are you pitching a client we're gonna do Oh - gooo wait just message me the bagging new content will be a regularly ok um that doesn't really say anything about you okay about me okay so this you're going to replace that okay um I've started with companies I what I'm looking for is your story what yeah nowadays everything I feel like it's working this time into learning skills uh so you can say something along the lines of your traditional your traditional graphic design skills translates seamlessly into the digital age and you love learning new skills all the time or something that so something to the sense of I like to learn and apply my learning to help you the person my potential clients I want to help you by using my traditional and modern skills to help you reach your own goals okay so that's what you're trying to you're helping the clients reach their goals and I think some sort of message like that would be very powerful in here and all of this I think could be removed okay and also this could be removed because you already talked about it in about me so just say who you are why you in the why you're in this industry and how you can help clients reach their goals and if they are riveted enough by your story and your portfolio it will get in touch with you okay so there's that more skills okay cool I think I have time for one more now we'd now we eat here we go the wise goblin says is webflow front end its front end and you can still create a back-end CMS with it check out web flow comm / CMS for more information about that oh yeah so this is my last one no weed oh wow it looks like a book okay it's a book and it's telling me to scroll down so here we go got engaged oh I thought you got engaged okay that's cool I like how you're doing that Zee thing the zigzag nice and see what I mean Alex I mean Darren uh he doesn't have a bouncing button he the the form is at the bottom so if I really like this person's work I'm going to contact that person see like okay let's have a meeting um yeah okay yeah it's super clean I don't know I mean you know me I like photos so I know who I'm about to talk to but everyone's portfolio is up to them it not for me to say what you're supposed to do and when you're not supposed to do these are just suggestions so now we'd love your logo I love this here oh it's different it's really eye-catching and it says scroll down without saying scroll down so that's cool all right um that's the last one thank you guys so much I'm gonna try to get a special guest next week and um yeah you thank you Alex for helping me move that uh that scaling effect I'm going to post this um background a site on my public page and also I'll put a link on the forum post for this stream it's going to be on the forums let's do our usual sign offs okay if you have any account billing or technical issues with web flow let me know and the rest of the customer support team over at support at wet flow comm if you have any design or custom code issues the very helpful and global community over at forum that web flow comm is willing to help you out they are taking their free time and wanting to help genuinely help the the web design community and the web flow community grow and if you get an answer or you learn something please pass that forward and help someone else uh social media it's twitter.com slash web web flow app or facebook.com slash web flow you can hit me up on Twitter add to the pixel geek this stream happens every Tuesday at 10 a.m. Pacific and also if you're new to web flow every Wednesday at 10 a.m. I'm doing a crowdcast intro to web flow webinar so if you're new please join me there I go through a lot of things about webflow for beginners to help you get acquainted with the platform so join me look for it on crowdcast or find it on my Twitter we'll post it on the forums too anything else I think that's about it thank you guys great websites great work and as always and you're already doing it make the web beautiful see you next week

Channel: Webflow

Views: 32,969

Keywords: web design, webflow, Workshop, tutorial, q&a

Id: tcA1oMy9S7w

Length: 63min 16sec (3796 seconds)

Published: Tue Feb 07 2017