Adding audio effects to an animated menu in Webflow | Howler.js - Live Stream - 11/09/2021

hey what's up everyone john here with web dev for you here to help you build awesome websites without code in webflow so if you're new to these live streams i do these live streams every monday through thursday from 12 pm to 1 pm central and we go over everything webflow how to build entire websites in webflow we go over uh various design systems and webflow and styling systems we also go over how to build interactions and animations in webflow and if you need help with a personal project i provide support via the youtube super chat feature right here in the chat so that's why it's called a super chat because i kind of focus on the idea that you can get help with your whoops uh webflow projects via super chat uh hey dale how's it going uh nice so we're gonna continue from yesterday's uh build so if you saw yesterday's build we built out this menu here where we click and it comes in we have these menu items so one thing i added is i added sound effects to the menu items so if we hover we have a little sound effect that plays so today i want to show you how to add sound effects to your website you do want to keep sound effects minimal because i know plenty of websites that go a little bit overboard with you know a lot of music and things like that so you just kind of want to be careful when using this feature uh you you can make it a bit subtle um you know and not too loud so that if the user does have their speaker like really loud it doesn't become obtrusive when the sound effect plays hey rasheed hello hi tazewere uh nice so so yeah we're just gonna add sound effects uh we're also so this menu was inspired by this website here lion moran interiors i'll go ahead and go ahead and paste it in chat it's just a really interesting menu so the menu was inspired off this and along with the sound effects we're going to create this menu button here so it's kind of an animated menu button but we can do that in webflow and that should be a lot of fun as well so we'll go ahead and start with the sound effects um so to add sound effects it's pretty straightforward the only difficult part of adding sound effects is you need your own hosting to upload the audio file i did look up if there's other ways to upload the audio file like to google drive or dropbox or something like that and nothing quite seemed to work maybe i wasn't doing it correctly but and i can do a quick search here upload because in webflow you can't upload audio files you can only upload specific assets like images pdfs and things like that and gifs but there might be a forum post on how to upload audio files but i don't think there is um there's a reddit post here yeah soundcloud dropbox did not work uh upload care somebody mentioned upload care and amazon s3 bucket so i might look more into that but i use my own hosting because i do have a hosting service so i just uploaded the audio files to that hosting service and i was able to access it so this will become a bit more clear as i go through this tutorial but let's just jump right into it let's go to howler.js that's the script i'm using for audio so it's howler.js it's an audio library for the modern web hollerj hollerjs makes working with audio and javascript easy and reliable across all platforms um so i'm just gonna remove this code for now this is the code we're gonna be using and we'll start from scratch so i can explain everything as we go along new file let me just paste this code in here okay so all right so i have the code here okay so the first thing we're going to do if we if we want to use howler.js is we need to access the script right so as i mentioned in previous streams you don't want to paste an entire script in the in the head section of the code or in the body section because webflow only allows for ten thousand characters in each section and some most scripts are more than ten thousand characters or a lot of them are so what you want to do is grab the script from a cdn so you just need one line or one url yeah basically one line of code to access that script so i like using js deliver for my scripts it's a cdn for open source scripts and you can just type in howler.js it's the first one that comes up go ahead and click it then you want to make sure that this first howler.min.js is toggled on you can click on show and configure all links select html output so you want html output and auto optimization on and then we can copy this script code here so script source and then the the url or the uh the script then i'll go back into webflow let's go into the custom code and before the body tag will paste that script in there and that's it so now we have access to the script we can use it in our project so now let's go to howler.js i'll go to the docs and to initiate uh howler.js it's fairly straightforward it tells you all the different options here so we want to initiate uh that the howler.js we want to apply it to a variable so variable sound equals new how then the source which is the mp3 file and then there they have a few different other parameters like loop volume um yeah i think that's it oh autoplay loop volume and you can trigger it with different functions so i'll just go ahead and copy this first one the real basic one varial sound variable sound equals new how and then the source so we'll go into webflow i'll paste or i'll open up a script tag paste that code in there and then i'll close the script tag so here where it says variable sound and then the source this is where i need to upload my audio file to my hosting uh service and yeah there might be like if there's a cdn you can probably access the audio file from the cdn and maybe i'll cover that tomorrow if i have time i'll try to research it to see if we can do it but it was very simple for me to upload it to my hosting so i just did that and basically i just used a domain that i'm not really using and a folder and just added the audio to that folder so i'm not going to go ahead and read out the url name if you want to look at it it's fine images and we have the audio file so i'll use i uploaded a few different ones let's use space alarm so dot mp3 so the audio file needs to end in mp3 in mp3 for it to work correctly so you just want to make sure that the source has an mp3 file here again because you can't upload audio files to webflow if it was images it would be another story you could upload the image to webflow and then get the image url but it's a little bit different with audio okay so this is where i'm going to copy and paste this script oh i'm also going to change the volume so this is a great feature of howler.js you can type in volume and then the default volume is 0.5 so let's say i wanted it to be a fifth of or almost half i'll say or let's say have 0.25 um for the volume and that'll um turn the volume down and then uh what i want to do now now that we have this function here we initiated howell i'm gonna add this code so let me just copy it here and um yeah i think that's it so basically what i'm doing here i'm accessing the menu item wrapper so for the menu it's that the text is in a menu item wrapper that's the class name i gave it then on mouse enter or hover we create the function where we stop the sound make sure that it stopped initially and then we play it so we the reason we stop it yeah so it starts it starts from the beginning so stop and then play otherwise if if we didn't have the stop initially the audio the audio will play from where it last left off i believe so we want to stop it and then play it and then on mouse leave i have sound off but you can also do sound stop and on mouse lead the sound will stop but if you do like off or just remove this entirely this mouse leave then the audio would just play regardless so we actually don't need this code if we didn't want to stop the sound but i'll leave it there just for a second actually let's remove it because we don't actually need it right now so i'm going to remove this piece of code and yeah so that's all we need so i'll save and then i'll publish so again this project will be cloneable by the time you know we finish embellishing it and doing a bunch of stuff to it so now i'll preview open i hover all right so this that's kind of an eerie sound uh but i kind of like it because i want to go in a weird alien eerie type of vibe for the site because some of the the font is kind of like alien in a way like the a and the r and it's just a really unique font so not my favorite sound i might change it but let's just roll with that but as you can see we added a sound effect it's a little bit loud so let me go back into the code and let me change the volume to like .15 all right and let's try something else let's let me paste back that code that i initially removed and let's do sound stop so when on mouse leave it'll stop the sound and i just want to showcase this but it won't sound good because the sound will get cut off so like if i preview it kind of works i mean it kind of depends what you're going for right like do you want to stop the sound when the user mouses off the the menu item all right so that's pretty straightforward just quick you know you can add audio effects to a site very easily you just need to make sure you have a hosting service to upload the audio in my case i had hosting so i just uploaded it there and then just a few parameters the source the volume then we created this function so we said when we hover over the specific element yeah mouse enter we're going to stop the sound and then we'll play it and that's how we get a hover audio effect and that's using howler.js okay so that's basically it we can move on to the next thing which is the menu button so i'll go ahead and hide this menu wrapper for now and let's focus on this menu button open so we want to create this effect when we click the hamburger menu items come together and then they rotate really fast and create an x so let's do that let's first make this menu button let's remove the background color and let's give it a border of black right now let's make it really big so we can see this as i'm building it so i'll make it 200 by 200 so we have this big circle and i'll set the display setting to flex center center i'll add a div and we'll call this menu menu button line we'll set the width to 70 percent 70 might be too big maybe 50 percent um i enjoy the addition of a wee bit of code functionality never thought i'd say that yeah for sure i know we're supposed to be like no code but code can be cool sometimes for things that webflow doesn't offer natively we can definitely do a lot with code so let's say make this line 2 pixels and we'll set the background color to black for now and let's set the border radius to like 30 so we have rounded edges to this line okay so i'll copy and paste this line or actually i'll set the line to a position of absolute yeah absolute okay and then i'll copy and paste this line three times one two or two times so we have three lines then for the second line i'll say menu button line two and i'll move it up let's say yeah let's say 80 oh maybe i could use a percentage two percent no that's too much one percent no so i'll use pixels so we'll move it up um 20 or 80. move it up 80. and then this bottom line we'll say 3 and we'll move this down 80. okay so there's our menu button and let me just take a look at the site for reference just to see uh they have a bit more space there i wanna yeah so let's do a hundred you know what i'm not going to use um this let me use margin instead no never mind okay so two we'll use the auto positioning all right so let's do 70 and 70. uh 8080 was good okay 80 and 80. all right so there's our menu button um now what we want to do is create an interaction so when we click on the menu button open let's go to interactions and on mouse click so we're opening the menu let's see can i have two interactions on no okay so let's see yeah okay so menu open so we'll bring the bottom and the top line together so we'll move it down 80 pixels so i'll say i'll select this top line we'll say move and we'll move it down uh this might be a little bit difficult with the menu but let's try it move it down 80 pixels and let's see we'll start it up here okay yeah oh no we'll move it to zero or 40 what yeah that's getting a little bit move down okay i have an idea okay let's delete this and rather than moving rather than using the absolute positioning we're gonna do it in the interaction so select the menu open button go back to mouse click and then we'll grab the second line we'll move it let's say negative 80 on the y-axis and i'll set it as the initial state see that's too too far so we're going to move it negative what 20 yeah negative 20 okay set it as the initial state we'll do selected element then we'll select this menu button line we'll move it down 20 and we'll set it as the initial state and we'll just do selected element okay so now this is how our menu button looks that's great and now i will select the top line we'll say menu button move move it to zero on the y we'll say ease for the easing duration of let's say point three and then we'll grab the bottom line we'll move it to zero and we'll start these together duration of 0.3 and the easing of ease okay so if i play that you see that the the lines come together and that's perfect and then i'll save okay and now we want to rotate the those two lines so i'll grab the top line and i will rotate it let's do 360 plus 145 or uh here i'll just do it real quick 360 maths is always fun no 180 obviously oh no but we need to do it needs to end up on a 45 degree angle so 360 plus 45. so 405 so we're going to rotate on the z we're going to rotate it 405 degrees and we're gonna do bounce past okay so that's not bad so let's try bounce bounce i said that weird or let's try easing out elastic let's try that um swing from two i'm just trying to get that yeah it's not bad let's do bounce past that's not bad either maybe one second uh i think elastic is is the one uh let's try yeah should i bounce all right we'll do bounce pass for now uh isaiah writes thank you question what tutorials on your channel that you do that cover the basics i appreciate your delivery and your approach would like to see more content with you for sure isaiah um yeah i don't know if i cover basics that often to be honest well yeah in my layout builds so if you look at my past previous live streams i do a lot of layout builds and that covers a lot of the basics of web flow um if you're starting out with webflow i always recommend the webflow crash course uh the 101 crash course because it just covers like you know getting started with webflow um but yeah if you watch my live streams every day um you'll start to pick up things uh you can also ask me questions like basic questions throughout the live stream and i'll be happy to answer them yeah uh kavita wrote um i understand css the more i use webflow than when i was learning coding yeah for sure definitely get that um okay so we rotated it 45 degrees the other line so we'll select the third line we'll say rotate we'll start it with this one and we'll rotate it would it be negative 405 i don't think so oh yeah that's kind of cool the timing is off here so this is one second so this would need to be one second as well bounce past that's interesting all right um so it moves yeah and then we're going to select this middle line and we're going to set the opacity to zero percent and selected element and just start it like this so we yeah perfect uh it's kind of an interesting uh open button but we'll roll with it we're not gonna get too picky here okay so we have the menu button um we'll just reverse it on the close so we're only going to have one menu button for the open and close now let's get a little bit more creative let's go to unsplash because i want to make this kind of an eerie looking site i'm just going to do abstract dark see what comes up um let's see and i'll just spend a few seconds here trying to find something interesting this is kind of cool we'll roll with this uh let's see what's this that's cool um kind of like this and abstract alien [Music] something oh that's cool that's a cool picture i like that um well a lot of cool cool pictures daft punk dope all right so we have a few to work with here let me just minimize these or resize them make sure they're not too big and which one do i want to use yeah let's use this one preview tools adjust size what's the size of this um i'll say 1500 yeah let's roll with that okay so let's go into webflow i'm going to go ahead and position this button in the upper right so position or actually let's create oh it is in a section great so position absolute and top right okay and we're going to make it smaller definitely but uh let's see here so i want to add a div block in here we'll say position absolute and full and we'll say content that content wrapper okay and then we'll we'll use grid for this we'll say grid let's make it one column or one row and we'll have a left and right side okay so on the left side i'll add the image so div block and i'll say content dash image and then i will drag and drop that image we'll try a few different images but we'll start with this one oh joey thank you uh eric yeah i gave it some thought um i guess i haven't fully decided on the discord but i'm starting to lean towards yeah on that uh so echo wrote joey i appreciate it the the super chat echoed wrote hey john it seems that learning webflow in a way is kind of cheating taking a shorter route rather than if i were to learn html css js the proper way what's your take on this um i i don't agree with that necessarily echoed um because i i personally know css html and and a bit of javascript uh and that only helps if you get into webflow because webflow it's not like it's like a really cookie cutter way of building a site you still need to know some web design and development concepts but the code that webflow outputs is very clean and it's pretty one-to-one as if a developer would where to build it yeah there might be a little bit extra javascript to make it work correctly but not anything that's really out there as far as the size of the javascript file so you're still using web design and development concepts you're still using things like flexbox css styling and all that all those concepts so i don't feel like it's really a shortcut i will say that if you do have some experience with coding prior to getting into webflow that does help a lot i'm not i'm not gonna lie that does help with wrapping your mind around these web development concepts it's not a prerequisite to using webflow but it does help in no way do i think it's a shortcut because that's why i love webflow because i feel that it's so closely related and so tied in to actual web development that it doesn't to me it doesn't feel like a shortcut shortcut at all to me it just feels like a faster way to build a site and and and you get to do it visually rather than having to type everything with code um so yeah that's just my take uh yeah and many many have found that i've seen quite a few posts that after they started using webflow they understood code even more so it is it is a nice gateway to learning even more code and you can add custom code to webflow too so it's pretty unlimited i just find it like a faster way to build and someone who doesn't want to take the time to like learn html css and javascript or even a designer who like works in figma and doesn't want to take the time to learn all that code they can jump into web flow learn a few web design and development concepts and start building their site you know right away uh so that yeah that's just my take uh echoed kavita yes indeed it's almost a paradox right yeah yeah yeah exactly i definitely agree with that manolo like it's like a paradox for sure which makes workflow so cool yeah for sure yeah definitely eric yep uh cool so i could harp on that for quite a while so i'll just leave it at that but but yeah that's my take on it um so let's add the image i'm gonna add it as a background um yeah choose image and we'll just add it like this we'll say cover i'll position it to the left yeah that image is a bit weird i don't know if i like it um so we'll add another uh let's try that again close my tab all right we'll add another div block and we'll call this content uh heading or something like that content text i guess and here we'll add the heading and for the content text let's set it to flex uh center and we'll for the type we'll use um the major mono display that we used for the menu items and we'll just adjust the the text here so i'll say what was i had a heading that i wanted to use for today it's kind of tacky i think but wait web design building sites that are not from here it's tacky i know um if you have a better name let me know something that goes with that far out theme um let's do two for the line height building sites building websites that are not from here and make it a bit larger i'm gonna change this image i don't like it it's a little bit too much color or something let's try a different one yeah let's do this one edge of size uh 1920. okay i'll add this image in here boop there we go okay let's replace it and i'll make actually i'll make this text white no the text weight and we'll make this background black and for the grid we'll remove or the section will make it black we do want a gap in there okay so the section we'll set it to actually is that going to work huh let's work with the colors a bit i'm going to change a few colors on everything so we'll start black initially and then we'll go to white so we're gonna switch it up a little bit um yeah i'll read all the chats in a second uh so we're totally gonna switch up the design of this site this should be fun so let me bring back the menu wrapper and we'll just take a look set it to display flex or display block it should be in front so let me set the z index to 9.99 okay we have the menu wrapper great um so i'm going to change the bars of the menu wrapper i'm going to change the bars to where the bar is at here we go to white and i'm going to change the letters to black alright so let's see how that looks and i have to bring the menu open button to the front so this should have a much higher z index all right so the audio is not working here but that's cool all right so yeah so let's see here um let's work on the design a bit but we'll get there it's looking a little bit off but uh yeah so we have the button here let's make it a lot smaller so 50 by 50 and let's see if it's still okay so we have to adjust the positioning right okay so let's try yeah 50 by 50 is good and then we'll just move it a little bit like this we'll say 30 pixels from the top and 30 pixels from the right maybe 40. and for the grid i'm going to add more more uh column spacing so let's do 40. all right that's cool so we go into the interaction menu open um the line so we're just gonna move it maybe negative eight negative eight yeah that should work negative eight and eight because we made it smaller yeah perfect so we have our menu button um cool so now we need to go into um yeah on second click we'll start an animation we'll say menu close we'll open it and this is where i have to kind of re-add some animations so the second line we're going to rotate it let's see uh menu item wrapper yeah we're going to rotate it back to zero and i think i used one second and an easing of ease and we'll do selected element so this might not work correctly i'm just kind of winging it a little bit here rotate back to zero ease and one second and we'll do selected element and then we'll move it back to uh no uh the second line that's the third line we'll grab the second line right here okay let me delete this second line move it back to negative eight and then the third line will move it back to eight okay and let me go into the open and just see what i did so move move point three point three and the rotate was one okay so point three and this should be ease i never like using a linear for any of my animations okay so save so the rotate is 1 and the movement is 0.3 and ease and then the first line will say opacity so i'm just reversing everything i did we'll see opacity 100 ease and a duration of 0.3 and we'll do selected element all right so let's see what we got there okay definitely not what i wanted uh we have to move it first yeah and then rotate it so move it no we need to rotate it first uh let's see yeah when you line rotate rotate to oh i need to rotate it on the z not the y and then move move okay all right so the timing is a little bit off but we're getting there okay so let me just do this and duration we'll just say zero okay so let me go to the menu open so the menu button let's see hide show move move menu bar menu item wrapper menu bar moves okay so yeah this would all need to start together um hmm let's see yeah it's getting a bit in depth now so rotate okay rotate yeah we'll need to start all of these together okay so that's going to be intense well not really okay so we the animation starts it rotates and at the same time so these these will start together the rotation and the movement but the rotate will be delayed by one second and will hide and show the menu let's see so i click so this should actually go here wait let me do that i want to select this one so i want to select these these should go under here that's great and this should be start here and this should be zero point one and point two all right let's try it yeah that's good and then uh the rotation shouldn't have such a long delay so the rotation should be the movement is 0.3 so the rotation should have a delay of 0.3 perfect oh that was dope yeah i think that's it i even like how it closes that's a really nice movement um yeah i'm gonna leave it like that because kind of like interesting it doesn't rotate right away but i'm okay with that like at the end and i'm gonna change that sound effect it's kind of obnoxious so we'll do a nice lighter sound effect and i'm gonna read some chats in a second um and one more time let's try a different image i know we can find a cool one um yeah let's do this purple one let's see what's this image here oh that's weird i don't know what that is but all right let's just try yeah we'll do this one uh just make it a little bit smaller um something like that all right cool nice so we have the menu button turns into an x and we close it looks awesome so what i'm going to do we have a close button in the menu wrapper which don't think we need anymore so i'm just gonna hide it for now yeah we don't need it um great all right so let me get to some chats so uh kavita wrote i know right i'm a visual learner yep cool talking about webflow helping with css and and yeah uh webflow does make it easy to articulate ideas for sure richard wrote i come from a design background and found webflow has helped me understand structures on the web and that all designs are web friendly and that all designs aren't worth friendly gotcha so echo wrote thanks for answering but is it possible to apply css architecture techniques to webflow bem and atomic design are the kinds of apps that are being built on webflow don't require this uh so yeah like the bem so i'm kind of guessing or assuming that you're you're um talking more about class naming and things like that uh and and yeah that can be applied to webflow like you can choose what to name your classes um and there are many different design systems that talk about that like i just went over the client first system and they use a similar approach to the bem model as far as class naming convention i'm not sure what you mean by atomic design maybe you mean like web apps or you know sites that can do more um you know i think what that's the goal of webflow webflow's goal is to be able to achieve a lot more like to build web apps and web flow where you can integrate all these interesting things but it's not quite there yet so a lot of times we you know it's recommended to use things like zapier or [Music] parabola to integrate third-party applications into webflow via the api so webflow does have an api like if you go to the webflow api and you just take a look they do have an api that allows you to hook into other applications and you can hook in the cms to other applications and it's pretty unlimited what you can do with it um so manuel ro yeah that's kind of what i mentioned those are basically about css name conventions right i'm not sure if so then yes you are still completely free about how to use css and workflow and how to name classes etc uh then echoed wrote uh yeah conventions to keep apps scalable and components reusable across front end but once you export code it won't have conventions applied that you may want that you may want your new arc app to have yeah the class naming stays relevant so i i can showcase for example like on this site if i were to export the code we can take a look at the code and just see you know um the different class naming so you can see like all the class names i applied are here and if you use like capital case letters it men like webflow automatically converts it to lowercase and puts dashes instead of spaces but you can see all the code here the css it's all in there the javascript is all in there and it includes the assets as well so if i were to export it and download the zip file i can show this project so i have the folder here let me open it and so i have the folder we have the the index html you know everything works fine that's the new audio i added and let's go back into the finder it has a javascript the the css excuse me so i can open up the css with a code editor and it's all in here so pretty much like if a developer were to hand code the site this is what it would look like that's why i love webflow because the coded output is very clean like to me this is like a a developer where to create this with you know by coding so if you want to use this code and implement it into your own apps you know rather than using webflow in-house or natively you can export the code and use the code on your project there's webflow css as well which is more like default styling you know the headers and all the styles you need for the site are here so that's all good and then the the javascript as well so you can export the code and hook in other javascript and all that good stuff so it's all here it is minified so i think there might be a way to unminify it um or you could use like an unminifier um yeah but yeah you can do all that like export code and you know do do whatever you'd like with it pretty much or hook in other things but i personally like working with webflow natively because [Music] i just find it really useful like all the hosting natively you know if i need a third party application i just use custom code if i really need to you know need to hook in a third-party system i can use the api as well so if you type in zapier and webflow you know there's a nice article on it let's go back in here let's see zapier integration yep so uh yeah it's webflow.com integration zapier and it kind of showcases showcases what you can do with zapier and webflow i know many users who use zapier some use parabola there's another one out there parabola um oh no it is parabola no parabola there's one more can't think of it right now somebody probably knows it from the top of their head here um parabola zapier and integromat is that it no it's not integromat is it yeah integ integra mat yeah yep integromat so zapier parabola and integromat are different services you can use to integrate other technology into your website to create kind of a similar web app so yeah i would just maybe talk to your developer and see if it's something that's plausible with webflow you know and uh see if it's achievable what you're trying to uh trying to accomplish uh but yeah i think that's pretty much it uh jetboost yeah i think jetboost as well um jetboost yeah there's an article on integrating jetboost for like search i think jetboost is more search related but yeah so cool we had fun with this build we added audio we created the menu button and nice alright so yeah this project will be cloneable um not super like a fan of this layout here in this site but it's just a quick build so we were more focusing on the menu and the sound effects all right yeah so that is it for today's live stream uh as far as the build i might fix the menu here let me do it now actually so it closes a bit quicker uh menu close so we want to start everything together so rotate and then yeah we'll start that together except the movement this time will be delayed by one second and the opacity that's fine yeah the opacity comes into 100 this should also be after one second i think and then these menu bars should be so zero okay start here so delays zero point one and point two let's try that all right close perfect yes that's exactly what i wanted to do um awesome yeah it will be cloneable um i'll go ahead and uh publish it so you guys can check it out on your end and i'll post the link here but it will be cloneable you'll get to see my site structure the class naming and all that good stuff um yeah i don't know if that's a good heading i'd probably say building websites that are out of this world or i don't know something weird and the arrow would have been a nice touch we didn't get to that today but we got the sound effects we used howler.js and yeah so yeah fun fun build cool you can integrate calendly in webflow it's actually pretty straightforward i believe and webflow has a video on it so calendly webflow i think mcguire did a video uh yeah there's a video right here on how to add a calendar to your webflow site so i'll post it i'll post it in the chat kavita yeah for sure happy to help echoed um yeah i've been recommending i mean i recommend webflow to everyone i know some projects might um need more like web app features so what i've also seen users do is that they just link out to a different service like if they can't integrate it directly using webflow they just you know post a link that links out to another service i know my wife she's she works with webflow and she does just basically the marketing pages for the the business and then they use other third-party services but they link out to those services um but yeah but ideally you you probably would want all the services and functionality in the site so i i definitely get that yeah so howler.js very cool script by goldfire yeah and you can do a lot more with it but it's just a cool way to add audio to a website nice so we have seven minutes left um let me see if there's any if joey joe had any questions or just being really generous yeah just being generous thank you joey joe appreciate the super chat uh pablo wrote quick question john have you ever used robot.txt i know it is on the project settings but it is it just using the url robot txt um yeah so robots.txt it's usually in the project settings under seo and you can add a custom site map yeah so you need a site plan to add a robots.txt file um so yeah i've never quite used it myself i know users use it to block search engines from accessing specific pages like um you know you type in using robots.txt file uh yeah robots.txt yeah a file that gives web robots instructions on which page you want them to crawl or ignore on your site this can be useful for preventing duplicate content from being indexed in search engines but not a good way to hide information so yeah i've dealt with robots.txt quite a few times especially in support um but yeah i just see it as a way to to block pages so like you type in block pages using robots.txt it comes up with the code that you need to use um yeah so it's like disallow i've seen that a couple times and hold on let me go into safari um and yeah so like use disallow and stuff like that to prevent pages from being accessed by the search engines uh hopefully that answered the question pablo uh so joey joe wrote can you make a tutorial about how to build real estate agency website i would be thankful um yeah joey joe can you send me an example of a site that you have in mind just send it to webdev4you.com send it to my contact form and i can take a look and then we can start building something like that um a really a real estate agency website is a bit more it depends because real estate agencies they have that system i don't know exactly what it's called it's like an ms something like that allows you to like link into uh actual listings in your city or area so there's like a sophisticated system that real estate agents real estate agents want integrated into their site unless the real estate agent knows exactly what properties they want to display on their site then they could just build it in the cms right like build a collection of properties and then create a collection list or add a collection list to a page and showcase the properties that way and get more descriptive of each property on each collection template page so i don't know what that system is called that real estate agents use real estate agent system crm i think yeah crm system um no that's not it no that's customer relation management um real estate agent property management software yeah it's something like that like they use a specific software or feature to showcase properties so i'm not sure which one that is but you probably also like a lot of these different sites also embed mls thank you that's it that's it um real estate agent mls system [Music] mls yep yeah so i've seen a few real estate agents integrate that multiple yeah that's exactly it uh dale yep but it depends you know like i can kind of showcase how to build the layout of a real estate website um and let's see if there's a webflow real estate template i don't know if there is there is yeah so let's look at one this one looks nice homely you can preview in the designer and kind of get a feel for how they built it um yeah like this is this is exactly what i would do you know you create they have a cms with properties exactly what i just mentioned the properties here the property features property categories agents and all that good stuff so you know you go in you can add multiple images and so if like we were to preview this site and we go into a listing we go into it there's more images they can open the light box there's tabs or let's see i guess it's just a just a menu the real estate agent properties all that good stuff so i can cover this in more detail if you want um pablo or was it pablo that asked or jojo um yeah and there's a search looks really nice looks great and yeah it's just a nice way to to showcase different properties yeah i can showcase that uh tomorrow but we'll cover that uh tomorrow for sure um the layout would take time to build but i'll just do something real quick it won't be super fancy or designed but we'll go through creating the collections the property collections and we'll take a look to see what type of collection fields we would need for a property probably like price location maybe a rich text or we could probably do it all with text fields where we can describe the property in more detail so let's go in here and let's actually take a look at this template and let's see what they added for the property so yeah property address overview yeah overview address city images price number of bedrooms number of bathrooms so yeah all that kind of makes sense uh size of the block that's cool property features property category and property agents yeah that's a great way to create a property listing and they're referencing these um these features and they've styled okay so that's empty okay so i got i got yeah that's okay this temple was probably built earlier but i got kind of told um it's fine uh that collection temple pages all had to be designed um but i can see this one isn't designed so they kind of got away with this one but must have been earlier because the templates they change sometimes the structure and the guides so anyway that's going off on a tangent there uh yeah hopefully my template comes out soon i have a new template coming out that i'm super excited about um and i'm gonna be really happy to share that so yeah [Music] yeah for sure manuel um yeah you can just go into the templates and look at how they built it like there's no secrets really to to you know how to build a really good site you can just look at a template be like oh they did it this way maybe i can grab some ideas from that um yeah excuse me yeah or if you want to buy a template to get started quickly you can do that and all that good stuff so i like that i do these live streams because i've already had maybe yeah there was one person who bought one of my templates and they needed help and i was able to help them right on the live stream so just a quick quick and easy way for me to provide support as well i do like to provide support for my templates and anything i release like that so awesome i think that's it no more talking from me we built this menu coolio cool cool and let me refresh that did i publish because it should close right away now no it doesn't so i must have not published anywho uh this will be cloneable thanks everyone for watching joey joe we'll cover that tomorrow um yeah thanks everyone who joined uh yeah joey joe dale uh johnson i think i pronounced that correctly pablo cavita um echoed thanks thanks for joining great questions uh hopefully you'll find webflow helpful uh richard eric manuel isaiah awesome tazowair rasheed thank you thank you thanks for joining and we will see you tomorrow thank you peace [Music]

Channel: WebDev For You

Views: 232

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design, adding audio in webflow, audio effects in webflow, howler.js, howler.js in webflow, animated menu in webflow, interactions in webflow, website menu with sound effects

Id: XKkoIZjgin4

Length: 64min 15sec (3855 seconds)

Published: Tue Nov 09 2021