Customize your own site search feature without coding

all right we're here we're back welcome to another web flow workshop I am your host Nelson thank you for joining me this week this week we're going to talk about the new site search feature on web flow now this has been a long time coming a lot of people have been asking for site search when we release the news when we release the web flow CMS feature the next logical step was to add search because people would make blogs inside of web flow CMS but there wouldn't be a way to search through all the hundreds of blogs you put into the web flow CMS well to do the site search we had to fix a lot of things in the back end to make sure that we can pump out more features faster and you saw inner interactions 2.0 come out just recently and then right away site search so yeah this cadence is gonna get better so yeah this is gonna be fun this might be a short stream because of how easy Site Search is so if you haven't tried it out I'm gonna show you it and you should go ahead and try it yourself now it is in beta so we're still adding some things to it okay and when we have the full launch sometime next year yeah it's just gonna be really fun to use all right so let's see here let me go through my notes yeah yeah so today we're gonna go over the basics of adding a site search to your page and how to customize it and also how to customize your site search results page alright so if you're new here to the stream welcome thank you for joining us this stream happens every Tuesday at 10 a.m. Pacific on this YouTube channel youtube.com slash web flow please subscribe to it if you haven't already so you can get those notifications in this stream we usually teach you how to build stuff like rebuild some cool pages like a while ago we did the iPhone 10 or X landing page and we did that with interactions too we also rebuilt the Tesla homepage completely from scratch other things we do on the stream as we show off new and upcoming features like today let's write search also you'll have a chance to ask any questions you have about web flow or web design and if you're already part of the community and the word build something a web flow show it off to the community add your link to the live chat room and we'll look it over all together alright so yeah that's that's about it so I can it might be a short stream of because it's how easy it is so don't blink because it's gonna go fast all right so let's go ahead and create a let's create a page from scratch so let me go to my screen there we go alright so we're in web flow I've already clicked on the create a new project button and so from here I'm just gonna choose a free template alright just to start off with and something that already has a lot of CMS data let's go at this one I'm very familiar with this when I use this one a lot to test things so I'm going to select that one I'm just gonna keep that same name dandy project okay all right waiting for that to go what oh there it goes Hugo says what's web flow has search now yes it does I'm gonna show you how easy it is okay wait for it wait for it all right pretend this is like a help page you know the first thing you need to do when you get to a help or support page is I'm looking for a certain article so let's see let's put this just like our University website you know what do you what we help you alright and let's delete this h2 I'm gonna delete this button and now here we go I'm gonna go to add elements panel on the Left scroll down to the components area and look at that we have search drag this in boom okay search buttons done let's go ahead and go to the search results page oh the search results page already has our results let's go ahead and let's go ahead and customize this now just to customize this it's the same thing as you were to customize a collection list okay a dynamic collection list so let's see here let's make this let's put all of these let's make this a two column thing so I'm gonna put all these elements inside of a div and let's go ahead and put an image right there and we're gonna pull the image from search index and then from here let's make that flex in the top this one right here actually should be it should be along like 25% no I want it to be small alright let's put that in a div and see what happens there we go I want this to be small we say 15% cool and I know it doesn't look right yet but let's see here what if I remove this and the width is a hundred percent on all of them so yeah you can already see that I'm able to customize the search results say 800 pixel I want them all to be uniform how come you're not uniform interesting what's something like that what columns are easier let's see here I don't like using columns but yeah so yeah you can see I'm already like halfway done let's try this put you and column 1 and put you and column 2 know let's delete these to turn off flex on this there you go so yeah we have two columns so that's working out yeah that works better and there you go pretty simple yeah let's make the width yeah there we go Auto there we go all right and that search results so thank you so much for joining me on the stream it was that just kidding just kidding I'm going back into it it's it's that easy now all you got to do is just add in all the other elements from your pages like if this is our home page you know we would just copy over our navigation into our new search results utility page and so there you go this container is okay because this is fixed and so let's go ahead and get a let's get this hero section going oh let's just get this whole div block not bad let's remove that nav mercury said dang it looked away and missed it I told you it's really fun put this at the top there we go so now we have all that but we have our search result so let's remove some stuff okay we don't need this you don't need this we don't need that and there we go we have search results right here and we can just push it down you know what we don't need this anymore to let go and since this is a child page I'll call this search for search engine results page and the height can be smaller let go actually the height could be auto and that way I can push the padding here yeah something like that we don't need that one and there you go I mean it's if it's that easy and so it's all up to you how you want to customize everything you and now with the let me see here's search and put where is it okay yeah the states right here now you can also customize the placeholder so the placeholder text that says search so you can style that as well and you know what protip you should change this to search for a blog you know and it gets even deeper because not only can you customize this but you can also customize where the images are coming from you can customize what you can exclude or include you there's so many things you can play with all right like the search is like what's the snippet so this is a snippet and how many characters you can see I'm already playing with that and you seeing it in real time how many characters before you get the ellipses alright so any questions about this before I go on to more more features so just to review you add a search field to your page customize your search results page and you're done I mean I remember using a Google search Google custom search engine and then I would have to figure out going to the CSS and try to mess around with the Styles just to make this like rounded corners or something you know with the border-radius but now boom I'm already customizing and adding a drop shadow or something and maybe just and you know it's so fun when it's easy okay I'm gonna highlight it until there you go yeah so yeah I mean super simple I'm now I'm just playing now I'm just playing around having fun BAM look at that I put in one line in like five seconds because it's just CSS yeah like I said short stream alright so no questions let's just keep going so not only that but you can go to each page where's the citation okay so if you have like actually let's go to authors I don't want to search authors so I can exclude these from the site search results okay and then we have this new panel this whole thing site search settings where you can customize what you want the site search title to be you know you can pull it from the SEO meta title and you can pull this the search image from the Open Graph or you can use something different all right and so this is the power of web flow that we give you a baseline tool and make it as flexible as possible without making it confusing and if it is confusing we we we write down as much as we can on our documentation on University at web flow calm and also we make videos about it and we do workshops about it so there's so many ways for you to learn and it's just man it's just so powerful the team did a very very good job and and they just blow me away all the time it's just it's so good all right so you can miss wrong background images you can mess around with the results length like ten or ten results or five and just like um just like the forms component where you can see the normal state the success state and the error state so this is the same thing you can see the default state or what happens when there's no results so instead of just having like a default text that says no matching results you can add something fun like like oh did it find what you were looking for try again you know and then add some sort of gif gif or something so until when is this Veda you can start using it on your production sites right now as beta but we're not sure yet about the delivery day week I can't give from dates because I'm not one of the engineers and so that's up to the production managers and our engineers to get that delivery date but yeah it's start playing it playing with it right now all right so much so much to do so much to play with and so you've noticed that we did we've released interactions to insight search and things are just going to get faster a lot of a lot of times people we were the community has expressed that we haven't been updating the wish the community wishlist lately well it's because we've been working so hard on the back and to pave the road for more new features and now that it's coming really fast you're gonna you're gonna see that wish list updated a lot more it's already been updated for inactions - and site search and we're already working on things that have been uploaded in a lot let me go to the wishlist right now and see what's up there and so if you're not familiar with the community wish list go and go their wish list out webflow comm and start uploading stuff so what's next cross-site copy/paste it's in development alright so just just a little bit about this eighteen thousand eight hundred seventy five people have voted this I have a vote of this as well and what it is is what if you can have a master master project on your web flow dashboard right and you have all your styles there you have everything and then you have all these child projects right that you want to pull styles from from the master one so when you change something in the masters like say you change a button style right and you want to push that same button style to all the others child projects right now you can you have to look at your old project and try to copy it in your new one look at your old one and copying your new one all right you can't do that right now but soon you'll be able to just copy that one button from your master project paste it on your child project and there you go and any changes you make of a master will push down to wherever that same element is it's gonna be nuts oh you guys it's in development so yeah like I said we've paved the road the roads done now it's time to have fun so yeah about it tell us what you want and we'll get on it all right how will cross-site copy/paste work with templates well template Stu's asking well templates be protected or reusable yeah that's the question I can't answer right now because they're still developing it I haven't even seen it yet but oh great question to bring to next week's stream just a reminder December 19th yeah I'm just look at my calendar December 19th next Tuesday 10:00 a.m. be here for a last stream of the year why because our biannual Q&A session with our CEO Vlad he will be on the stream live answering your questions so if you have any questions for Vlad about him about the team about webflow the future of web flow the history of web flow ask him live get your questions ready tweeted at us or you know what we did at me posted on Facebook yeah let's start getting questions ready for Vlad to answer so he will answer it live next week Tuesday on this stream at 10 a.m. Pacific all right so Stu tweet that one at me or or post it on the forum something so I don't forget to add it to the list ok but yeah it's gonna be fun it's our last stream of the year so let's do it let's do it yeah don't miss it you go yeah so yeah so if you have any other questions about web flow that I can answer I know I can't answer a lot of stuff for what's being planned because I'm not part of that team of builders of engineers but if there's anything about web flow in general I can help with answer it now other ants right ask it now inside of a live chat room or if you want me to do something small like how do you do XYZ inside a web flow I'll try to do it live right now on the stream to help you out ok so go ahead get your questions in or if you have anything that you're working on in web flow post your web flow dot IO link in the chat room right now yeah and I think I forgot who did this but let me show it off our first link right here 50-point market something that one of the community members in the live chat room right now as you is building wit site search and check this out I like this interaction you click on this and the nav goes away that's really interesting I like that the nav goes away because if you're looking for something as a user experience if you're looking for something you don't need the nav anymore the nav needs to go away so that's a very interesting way to do search and I've never seen that done before so great job so check that out and he is still working on the search results because I did type in test before and it's all the default stuff so yeah I remember some he was trying to he asked any tips not really any tips let's just take the same brand design the same style and put it into the search results page and yeah yeah all right okay a lot of stuff going on to the chat room Spencer says Spencer says that's awesome I think design systems like atomic design oh yes and development become more commonplace that's important for web flow to keep up with that yeah that would be really cool so imagine creating components inside of a master project and and that's like you're your master style guy for all your components and when when Spencer is talking about atomic design if you're not familiar with it it's Brad Frost we look it up real quick so we wrote a book on it let me find it so here's here's a little bit of what he's talking about so atomic design is you start with atoms and then molecules any atoms grow into molecules amount molecules grow into organisms and that goes to templates and then pages alright and for example if we were to create an atom atoms are like this like you have a basic search right and then so this is the label for the search this is the input for the search and this is the button for the search though so these are three different atoms for the search style and when you put those three atoms together they become a molecule okay see how they're all together that becomes a molecule and then right after that when you put that in with other atoms and molecules they become an organism so it's like this all right some examples and then you put all those together becomes a template and then you put all those together and you have a page so imagine if you had a master web flow project that had all these atoms and like you had a page of just atoms and then you had another page of just molecules and then so on and so on and then you can copy that from that web flow master project and paste it into your other child projects boom and so if you ever change it if you ever change it in the master project because the clients like okay I want to rebrand or something like that no problem you don't have to redo everything you just change the styles on the master project and you're done with it yeah yeah so great thought Spencer here Landon have you heard any updates regarding ecommerce integration it's still in our backlog as you saw on our wish list no updates yeah but ask Vlad ask Vlad on next week's stream you know let's see let's hear what he has to say about okay alright next uh no man's sky how do I do fade in animations no man's sky I know the game no man's sky let me look up their website fade in animations not sure what you mean by that I mean it's really easy to do fade ins inside of web flow okay so I'm on no man skies website can you tell me which one you're talking about no not that I mean fade in is a very basic interactions to thing so if you can show me what you're talking about yeah I can't find anything as interesting on this page it's all just static images that's just to him that's a YouTube yeah nothing too crazy on this page yeah Landon give me a more specific thing to look at all right uh vitality G where does web flow pool search terms from anywhere on the website image descriptions just blog post titles and content yeah so great question on that web flow pools from the the title and the blog posts and let me see here okay hold on so I'm right here so if you go here there's a new v button on the left with this ACOG and this this cog it's gonna be used a lot more in the future I mean right now it's just search but what will happen in the future of webflow next year what will be here oh so much fun things so just a little bit about search right now you can you can only unlock the whole functionality in the whole indexing if you add CMS hosting with it so this is good for sites that already have that's already live with the CMS hosting plan on it or business and so yeah and the indexing just to make sure yeah it pulls from yeah it there we go it pulls from your SEO meta title or your Open Graph image and I think this happens on yeah this also it also searches not only your CMS but your static pages too so I clicked on the COG for contact and if I scroll down there's also Site Search settings so contact page you can exclude this if you want or give it a different search title or a different search image so yeah so it pulls from these from from this search title and any content within it okay Auto feel suggestions is working at mine Mac so yes it works wait there's no not sure what you mean by that Cohen Shawn says i Nelson hi came across an interesting website braved the skies how would you create the falling star interaction is this possible in web flow great question let's look at what you're talking about brave the skies Shopify experts okay let's check this out whoa whoa what just happened okay all right um the stuff are you talking about those little pixel stars I see here how would you create the falling star interaction let's go down okay there's nothing else oh yeah that's really easy it's a looping so that one goes there that one goes there no one goes there so these aren't random these are happening on the same lines so should go here okay so that's going at a different timing yep see they're on the same lines but they're different timings so this one's super slow this one's really fast and it happens faster this one is medium so but it takes a long time to get across all right easy here we go Oh Shawn this is for you let's get to it I'm gonna create a new page stars and let's make this body yeah just this one right here we're gonna make this black and um you know what let's go transparent patterns or transparent textures so we can get like stars senior stars yep there's one okay stars what [Music] stars okay I guess this is the only one what does it look like I did kind of look like stars I guess I'll download this okay and let me make that my background let's see hold on real quick where's the okay so I'm gonna upload that pattern okay and let's go ahead and add that back down image didn't get it what you see it there's that dust on my sky I don't see it what do you guys see it or is that Dustin ice cream I don't see it oh well I tried that's weird delete that alright we're just gonna do the dots in interaction interactions - all right so let's go ahead and make a dot I'm gonna bring in a div block and we're gonna call this star and the width and height is just one pixel and then um make this position relative because I need the trailing thing I need like the star trail the the tail of it and then let's make this white background wait and actually you need to start rapper so nevermind this is just gonna be position Auto you may need a star rapper why because this is this star rapper is going to position the star on the page this is what's going to position it because I want it to be like absolute and then push it somewhere like on the top right but like push it down a bit might be hard for you guys to see cuz this one pixel yeah you know I'm gonna make a 5 pixel so it's easier for you guys to can see you guys didn't see it better and you know what let's make it a circle then there you go all right cool star rapper push it to push you to the limit alright so gonna go like here something like that so I can see what I'm doing [Music] and let's see here I'm going to put a star trail so this star right here is going to be positioned relative because this one's going to be position tail and this one's gonna be position absolute because it's pointing into the star I mean the target is in the star say 5 so halfway through and the width is gonna be like something like let's say 50 not 100 cool 100 and the height is gonna be 10 and this is gonna have a gradient so we're gonna have Leonard great linear gradient and there you go it's a 90 this one's gonna start out as white yep I did solid color I tried again right there there you go white to opacity zero there you go like that cool and let's see here [Music] yeah you can see how like the where it ends it's like kind of circle and then gradient cool so that that works all right and so let's take this star rapper I'm clicked on the star rapper and let's just make it move let's just make it move from right to left and so I'm on interactions on selected element [Music] actually don't not on select the element when the page loads because I'm not interacting if I go here I'm not interacting with the the page at all nothing I'm not making those stars move those stars are moving on their own so that's why it's a page load so on the action gonna start an animation let's call this falling falling star so I'm on the star rapper still I'm going to set the move and this initial state what so what does this look like at the beginning when the page first loads I'm gonna make it start off the canvas like right there alright and then I want to move and I want this to take let's make it take five seconds alright just for demonstration purposes and I want it to move let's say a thousand pick slow slow down I want to see where it is where you go come back start what I can't see it oh I went the wrong way let's go negative negative there we go okay so I should go like that and go away cool and then after that this should move this should reset and it should duration of zero seconds and it should reset to this initial state which was 126 I'm going to go here 126 cool so if we go up here and press play whoa we need to fix that performance but if we preview it yeah that easy and now we need to make it loop so we go here and we have a looping button click it and enjoy cool something like that I should make it fade that looks weird let's fix that falling star move and let's just also add a fade so the opacity starts at 100% and then we're gonna add another opacity right here and this goes to zero percent and this one has opacity as well and this goes back to 100% cool so preview whoa what happened wait that's zero move it takes five seconds oh ok so delete that one should be zero and that goes back to 100 okay yeah whoops there goes and then should go away start fading out what something like this oh I need to keep playing with it but you get the deal you get the deal hopefully that helps like I said interactions too can do a lot of stuff all right back on questions back on questions Christmas gifts yes Christmas gifts all the gifts we're trying to give you guys so many tools as fast as we can now so thank you thank you guys again for waiting for us to repave the the road the underlying road that powers web flow and for your patience you're just gonna get a lot more stuff next year J cannon can you show me how to make a hamburger man you turn into an X Y a Waldo are you did that just search for Waldo webflow hamburger menu but yeah what's the closest way to achieve a scroll spy scroll speed effect in webflow carlos is asking fixing content-based at a sec scroll position does that have to be done with custom code not sure sure what you mean by scroll spy scroll spy bootstrap what we example in half more right so this was you're talking about Carlos where your nav shows you where you're at if so that's easily done inside a web flow and I'll show you real quick how to do that [Music] let's go to the home alright so we're gonna call this one featured posts okay so this I'm going to turn off the link so this featured post link goes nowhere right but when I get here when I get to this main section right here I want that featured posts link to become a different color I wanted to highlight you know just like a scroll spy knows okay so here's how you do it this one is called this already has an ID of posts okay so I'm gonna go here alright featured posts and this button right here page section so a section within this same page I'm gonna go to posts right and so let's go ahead and make this navbar fixed so it doesn't move so you can go so you can see what happens the select feature post now I'm gonna scroll down it should change can't wait tell let me change the background color of this navbar real quick no not transparent there you go black okay cool see how this is white and these are still gray let me make it more obvious so it has a pseudo class of current so if I scroll up click out it should not I should not see it okay cool see it's not white right now it's still great but if I scroll down see now that this is in the frame it's in the viewport this turns white because it's now a current it's the current spots all right you can make it more obvious by giving it like a background color just like your scrolls by example and there we go let me scroll up it's gone cool no coding needed hopefully to answer your question a Site Search question from land in our autofill suggestions possible not yet that would be a great thing to have I mean everyone's used to it thanks to Google doing the autocomplete autosuggest and yeah add that to the wishlist maybe that's one of the things engineers are working on or bring that question to Vlad next week yeah tell them you want it vitality gee you already answered that one ok ok well a lot of people talking ok non helicopter can you take a look at my website please yeah go ahead and put put your web flow dot IO link in the live chat room and I'll look at look it over how can this be achieved vitality has the background interaction that you've done on the episode but has it pun but how is it possible to make it backgrounds remain fix on scroll all right let me see what you're talking about looks like a Japan Japanese web site because this dot co dot JP tokyo-based ooh okay loaders nice okay that is hard to do in web load um just a letter by letter animation it's hard to do because you have to do an animation for each one okay let's see here oh okay so okay you're talking about this I got the perfect example for you this is actually really easy oh wait that's a background interaction that you've done yeah I think you're talking about this part huh how would I do this I would need to study this a bit more um yeah it's really nice this part right here that's easy real easy but here I would need a break it down in my head a little bit longer the the background animation is easy to do oh okay so you would take background interactions the one that I showed you guys in previous stream okay and the background switches and when you get to the other section when the background switches you have this circle in the middle chain do a squirrel interaction oh my god yeah I would probably let me do this in another stream I'm gonna show you guys that thank you for showing me this um yeah I want to do this one this one seems really I don't know downplay their artwork their artwork is been fantabulous the the way they made this so clean beautiful but in a future stream next year I'm gonna show you how to do this really easy I already figured it out in my head but I want a whole stream to dedicate to this alright so thank you who suggested this was it Susan no no vitality gee yeah thank you so much I'm gonna do this one this is fine this is nice okay anything else all right finesse sigh oh wait Fitness site Christian let me see what are you working on [Music] okay so this is Christian's all right right off the bat confused right I like the colors you're going for something mysterious um but professional okay red and black is always like like some power colours you know like your heat intensity all right that's what red and black is is about intensity alright first thing is what's the logo what what is this website about obviously it's Fitness a muscular photo and yeah the word workout but does this site have a logo I don't know if this is a business or not is this something that is is this a workout studio that I can sign up for classes at I am confused right now there is no branding to explain what's going on so it looks broken not we're not finished all right yeah and come let's and then a whole big space and then it says workout not sure why you did that but let's keep going okay so it is a fitness club and this button not sure why you have space on the right this looks Oh what happened to the the images are rasterized these could easily be put into PNG x' or something but yeah this one is not ready at all you so if this is Angela yeah yeah yeah there's there's too many things for me to point out it's just everything just looks broken okay and again I'm not saying this to downplay your work everyone has to start somewhere but there's a couple just a couple basic things that you you would need to look into okay Christian so look into branding figure out what branding is branding is is not a logo branding is is not colors branding is a feeling so what is the feeling I get what is the message what is the story behind the the brand what you know what makes this workout studio what makes this fitness studio different from others okay figure that out and then the design will come from that okay so take a step back and figure out the branding of your client okay but keep going come back next week and show us your link all right show us what you've done all right nan helicopter what are you working on and again I encourage you all put yourself out there show us what you're working on because no one gets it right on the first time it's it's it shows that you're working hard at the craft all right let's see here non helicopter that link isn't oh it flowed I know page not found yeah not not helicopter I don't see the page Oliver yeah let's look at your portfolio site non helicopter I'm getting a 404 error so not sure all right Oliver okay this is what I mean my branding all right I get a feeling immediately this is the logo okay I have Oliver right here hi Oliver nice to meet you in your using power colors intensity red and black like it I like how you're not using white it's looking like an off-white brownish like it mmm fun sriracha nice and right here these these little things right here it adds to the brand all right it adds to Oliver because he's quickly telling you what he likes to do you know and so this is not just a portfolio this is a nice to meet you this is a handshake all right so this hero is a handshake nice to meet you now I'm going to scroll down and just like having a four sighing conversation it's like okay so um what do you like what do you do all right can you show me some stuff that you've done all right and so you're he's going he's taking you down his page and giving you his story so that by the time you get down to here you're like you know what I can like this guy let me let me email him right now all right so good job Oliver just scroll down okay um hold on real quick okay yeah you do have a read more about me cool all right nice just so you have a hover here covered okay yeah you have a hover here you have hovers here um what are your that doesn't have a hover I guess your buttons don't have hovers and that's on purpose okay it's your world so if that's what you do that's it's totally cool oh if he is whoever is asking how to make it X there you go ask Oliver send it between cool great job let's look at one of your projects nice cool so this is another thing um when your weight is something broken here should there be an image or something anyways moving down when you're creating portfolio site it shouldn't just be here's what I done here's what I've did in the past here's some of my past projects it should be here's all my past projects and here's a detailed breakdown of what I had to go through because it's not just a project it's a it's a creative journey to get from zero to live and this is what you do and it adds more weight to your projects because it's not just about the finished project it's how you got there that makes a bigger difference and it shows your prospective clients that you're not just a designer you're someone who continually learns and you want to learn with your client all right good job Oliver let's let's go here meet or bring hold on real quick yeah I will see here thanks vitality saying thanks Nelson can't wait to see the Japanese website interactional here's my website I'm currently building the digital collective did you elect if that sounds familiar for some reason let's look at you what you're doing okay yeah I haven't seen your brand before all right um okay I'm kind of confused on the call-out colors because I'm like do I look here first or do I look here first I know people read into F and so they go here and then they go back down they scroll down they scroll down with a hawk thing skim down with their eyes and then they see this one I feel like these two are competing but yeah I'm not sure maybe maybe this should be right here bring this down here and make it a different color you know a darker color because if this is if this is your main call to action that you want people to click on then keep that orange and then four let's begin now it can be right here and it can be like orange but like opacity 50% and then when they hover over it the opacity goes to a hundred percent oh no you have two oranges so maybe white I don't know but let me see if that's fixed oh okay that's fixed what you can also do is what if this is down here and then since that's a fixed navbar as you scroll down then this shows up after you pass the hero room and then when you go back to a hero row you remove that and it's still here you know I mean vitality okay um this should be this should be clickable this icon should be clickable because icons are the road signs of the Internet not just the text it should be this as well okay cool I like this because the gradient that you add to the bottom makes it fade makes the background fade out I like that cool so all your buttons are just text with a hyphen or a M dash in you have no buttons and then down here you have a button out of nowhere so yeah maybe and like everything seems straight not rounded no rounded corners that one doesn't count that's a play button so I feel like this just comes out of nowhere yeah a good job looks seeing watch featured story okay that doesn't work yet all right cool Oh let's go next one yeah let me get two more links and then we're going to be done for the week and then again next week I'm gonna put myself on the screen or click next week bring all your questions to Vlad our last stream of the year 2017 bring your questions ask glad and yeah and we'll all learn together what's in store for 2018 and web flow it's gonna be great all right back on it five senses branding okay okay all right all right all right okay that's cute okay oh okay okay you're still working on okay yeah you're still working on it cool I like the type it's it's different good choice on the under type I love it when people do that when they just oh cool I love when people do that where it's not just a straight line it's what's different so you went with a ripped PNG or SVG something like that love it yeah I did it's nice so this ripped tattered style really fits in with the type that you've chosen you know it's handcrafted just raw you know like it one to help next level say we did there uh your buttons what if your buttons had a background texture kind of like this where it's you know kind of like just a pen like a thick pen you look like that or a thick brush like that and then the label of of the of the button is on top of it oh no try it out might not work might work I don't know oh dude yes that's cool see it it's different it adds to the flavor great job I really like it when pages do that Michael Eriksen yeah get on it nice hovers [Music] Donald's asking some updates about Friday scream yeah so we've just hired a new community manager and I want to introduce her to you guys I'll see if I can get her on a Friday stream still up in the air about this Friday but I will let you guys know on the forums and on Twitter about it to see if she has time she just started so I mean it you don't want to overwhelm her but yeah Oliver is asking cool interaction here Jay cannon play something got web Florida I this was the last one for the stream all right okay nice logo okay can I close it okay so I'm kind of annoyed right now because I don't know how to close this it's very dark you know yeah your ex oh man I had to and really hit close to my screen to see that next come on make it white or at least a lighter gray because that's not fair to the user and usually exes are on the top little right so that's not fair to use it either either I know that people need to make conversions on sites but at the same time you don't want to immediately annoy a new user especially someone who doesn't know your brand so I don't know who say something is and I don't want to join your newsletter because I don't know you are but I want to if I'm landing on your page that means I want to know you I want to be introduced but if you're already calling out hey save 30% now and I don't know how to close it you know that's that's like a dark UX hence you get it dark you it yeah okay so I'm gonna click it here should go away okay it's gonna all right moving on all right a beat store okay so I did not know this is all about beats that you can buy buy buy loops or tracks so you might want to do something here you might want to say something about it here I'm full of them okay I'm done yeah okay this is interesting yeah it's really really dark I know what you're trying to go for you trying to go for something like um nice and techy and everything but it's wrong these labels are really dark lighten them up just a bit graphic owls cool I like that logo um you see here okay what is the purpose of these hovers everything needs a purpose on a page everything about art needs a purpose you can't just do something because all that looks cool it should be done because something okay so these icons really need a hover effect yeah you need more hovers there's no hovers anywhere okay so this has a hover so that's cool but okay let's see here is there supposed to be like a Buy button maybe I'm just looking at this too fast and this is again this is not my industry I'm I'm not in the music production industry so I wouldn't know maybe the demography or demographic would understand this more but to me usually when I see pricing things like this there would be a Buy button immediately so I don't know if you should add one and if you do add it right here and yeah but I like these I like the how these cards play that's cool this needs a hover let's go here ooh okay fix your checkmark boxes and your yeah you're using a serif font might want to fit oh this is an image you this whole pricing chart you can totally make this flex box and also because this is the image yeah because this is the image Google can't pick this up you can't index this so make it real make it real man you can easily do this some flexbox yeah good start though good start good side all right cool cool cool and I think that's about it for today uh yeah it was a short tutorial stream at the beginning but I love answering your questions and seeing what you guys are building it's so inspiring to to see you guys use the web flow designer in ways that we haven't imagined yet and you guys inspire us to do more so thank you thank you so much for being a part of the community and just doing wonderful things let's go through our ending ending stuff yeah so if you have any account billing or technical issues please go to University web flow com you can search there are documents there and if you still have that issue happening go to university now wait for calm slash contact or click the contact button at the top of that page and fill out that form and I and the rest of the support team will help you out as fast as we can if you have any design or custom code issues go to forum dot web slow comm join the community and the community will help you out they love helping and that is why I love this community so much you guys are so helpful for one another because if you get your question answered what people usually do is they pass that favor forward and answer someone else's question so we can all grow together and learn how to become better web designers this stream happens every Tuesday at 10 a.m. Pacific time again next week our last stream of 2017 be here at 10 a.m. right on the dot to answer to ask your question to our CEO Vlad all right we may have a community live stream on our twitch channel twitch.tv slash web flow app you might have it this Friday at 10 a.m. I'll let you guys know in the forums and maybe on Twitter and speaking of Twitter twitter.com slash web flow app follow us there or you can follow me at the pixel geek we're also on instagram at floo app facebook.com slash web flow it's been fun thank you guys so much play around with that site search and I will see you next week and as always make the web beautiful see ya you

Channel: Webflow

Views: 11,323

Keywords: web design, webflow, responsive web design, graphic design, web development, cms, content management system

Id: ki4vPtkv5ks

Length: 70min 31sec (4231 seconds)

Published: Tue Dec 12 2017