Webflow Ecommerce Basics

[Music] you know that i'm the queen overthinking it's like we're done before we even started so if this is [Music] in us please don't give up the best [Music] as i'm walking to your place [Music] i [Music] i hope you believe in us please don't give up on me and at least give me a try [Music] [Music] it's like you almost know what i am [Music] thinking cause i believe in us [Music] cause you're the best thing [Music] so [Music] [Applause] hi [Music] [Applause] [Music] [Music] [Music] [Applause] [Music] hey everyone all right welcome to saturday uh if we haven't met yet i'm the pixel geek aka nelson or the other way around well whatever um glad you're here and welcome to the stream if you're again if you're new here these streams happen every saturday at 10 a.m to 12 p.m pacific time uh today we had a one hour later start because uh i had a private session with the pixel geek and pixel pro members but um i apologize i did not announce that enough to those who signed up so next month i will do a better job of doing that but i did take the time to talk with colleen and sarah two of the pixel geek uh volunteers and we have we're doing a lot of planning to build the future of this community and to to make it more human and more fun and and more of a community all right so uh let's start out by saying hi to everyone in the live chat uh who's here who's here first one in the door timothy hello welcome ripple effect welcome uh richard smith is here abnormal gamer i'm not sure if i've met you yet but hello welcome ollie's back and bca is back corey moon is here v is here from malaysia yeah where are y'all from uh yeah welcome welcome glad you're here so today we're gonna be learning about just the very very basics of webflow e-commerce and if you have any questions about that please get them in in the live chat now and colleen will note it down and i will answer them when i'm done giving you a little tour of the basics of webflow e-commerce alright and before we get into that uh morning announcements so yes pixel geek awards we've been i've been tweeting out the videos and uploading video interviews of the semifinalists hearing their stories is super super awesome and again the reason why i'm doing the no code awards is to uh lift the stories the stories of the humans behind the projects what i feel that's missing in the awards space when it comes to a website or graphic designer any type of uh no code awards it's missing the humans it's missing all those decisions all those failures or all those um points where you're confused on how do i build this how do i make this launch where do i need help those stories is more important than the project itself and that's why i've been posting up interview after interview and i have a couple more that i need to upload right after this stream but listen to their stories and some of them may connect with you and help you help you get inspired to take that next step in your project and to finally launch it and if you do launch uh no code project next year please submit that to the next no code awards because we want to make that bigger and um and better but yeah we're almost to the finals uh i do have our guest judges recording their thoughts on some of the finalists but yeah so lots of announcements next week speaking of next week we're doing another stream saturday at 10 a.m but it's going to be different i'm not going to be teaching anything since it's halloween and i know that um not the whole world celebrates halloween but uh we'll be just having a community party you know um and i'll be announcing this more on an email but we'll be playing among us so if it's this cool murder mystery game uh go ahead and google it if you haven't uh played it or seen it yet but i want to play with you the community on this game now i've never played it i've just saw some clips i saw um uh i saw aoe uh anyway aoc play it uh alexa alexandra ocasio-cortez she's a politician here united states and she played it with her community and i thought it was awesome i was like okay i want to do this too so i'm not going to be teaching anything i'm just going to be having fun with you all so we're going to live stream that game i'll have 10 people in a zoom call and we'll stream that to youtube and linkedin and twitter as well so if you want to get in on this download zoom download the game we can all play cross platform meaning if you have a pc an android or an iphone we can all play together and just have fun next week all right so i want to do that let's let's have some fun uh hello from columbia welcome ma mauricio welcome alright so that's happening next week what else yeah we're going to have a sign up board on the on the community chat board so you can sign up if you want to play if you don't want to play it's totally fine you can just watch in the live stream and speaking of what me colleen sarah and rock have been working on in the background is a while ago i did a a week-long live course for kids from the age of 8 to 16 and was teaching them really quickly how to use webflow and i told that to some of the people in the stream the the day after i i did that and i felt so inspired and empowered because all these children were learning and some of you in the live chat were like that would be cool if there was an adult version like we want that and i was like okay that's cool maybe we should can i get any volunteers to help me figure this out and that's when the ball started to roll but now the ball is like going really really fast to the point where yes we are doing our own live course a whole week 20 hours uh and we're starting it on a sunday as just a orientation and then monday through friday is in uh is the actual course so four hours a day you're going to be learning the very basics of webflow in the way that i teach live and then on saturday on the next saturday stream it'll be a show and tell from the students showing off what they've built in the goal if for the live course is to build your own portfolio site from not knowing how to do things in webflow so i'll be teaching as much as i can and so uh next month we'll have like some sort of like beta beta week because we need to test this out first like it's a nice idea and we have all the plans but if we don't test it first it may fall flat so if you want to be part of this stay tuned to the community chat board because we're going to be sending out some surveys we're going to be asking if you want to be part of this beta project so we're going to be looking for five students who want to learn along for a whole week 20 hours of learning webflow from me and uh sarah no socks who's in the chat room right now she's gonna be helping assist me in this so yeah you guys asked for it and we've been working on it in the background for a long time since i don't know was it august or even before that i mean yeah it was a long time but we've been making this happen so it's coming yes super excited about that um here we go anything else anything else i miss in live chat no okay cool so hopefully you're excited about that one me rock colleen and sarah are super excited to make this happen and let's go for it so let me share my screen and move on boom cool so webflow ecommerce pretty cool thing that you can sell things without having to write a single line of code now there's other products out there like shopify woocommerce big commerce and and stuff like that that let you sell stuff make you let you create a website that can sell things without having to code but if you use the power and understand the power of webflow already then building webflow ecommerce store makes total sense but i'm going to get you through the very very basics of this and take your questions if you have any about it so if you're a marketer graphic designer someone who doesn't want to start from a blank page totally understand use a free template from webflow to start out with okay and what's good about using a free website template is that if you're on a free webflow account you're limited to two static pages 50 cms items um and and that's it okay so you can only make up to two websites but each website only has two static pages and 50 dynamic uh 50 cms items however if you start from a template then you unlock more than that while still on the free starter account plan so i would suggest doing something like this like i'll go to chomp right here it's free click it and you'll you'll see what you get you get a beautiful design already and what you can do is just change all the colors out change the imagery the text whatever you want start from here and click on use for free when that happens you'll get this screen and click on create project okay you can name your project whatever name it whatever and then it'll create the site and boom you're ready to start building and again if you're on a starter plan you only get two pages but this one already has one two three four five six seven so you already have seven pages to work with and e-commerce and you're still on the free plan this if you're still evaluating webflow this is the best way to go because you can mess around with as many things as you can before getting into a paywall all right and what i mean by paywall is before you have to actually have to upgrade your account plan or your site plan right so let's pretend that um this is what i want this is the layout i want and so if you want to change any colors for instance this color right here this is not part of your brand color you can just click on it go down to color right here click on that and if you don't notice this has a triangle all right so what triangle means is it's a global swatch and when you change this color it changes everywhere else on the website that's using that same swatch and so you need to click on the edit button edit swatch and then change this color let's change it to purple and so notice how this element this element this one this one and this one they all change including this one all of them change to a different color because they're all connected to that one global swatch that's what that triangle means so that triangle is just a little itty bitty triangle but it has so much impact across the whole template all right so that's what global swatches does so let's make it purple right there and then i'm going to click save and there we go already i've changed so much even that top bar that announcement bar i've changed that as well with just a couple of seconds all right so that's how you start styling stuff in a template all right if you need change a image just double click the image and then replace that's all you got to do okay and for logos like this you would need to double click inside of a symbol double click the image again and just replace that logo okay all right now we scroll down if like you see like graphics in the background you can just click on the section and notice in the styles panel right here we have background shape content now if i click on the eyeball to hide it watch what happens that background goes away all right so you can delete you can remove or hide that background or you can just click on it and change the image to something else okay and even with the free starter plan you can start uploading your own images your own background images you can upload as much uh assets as you want into webflow the starter account plan is free and there is no limitation to how many assets you upload so go at it yeah all right so that's those basic things now let's just go straight into more of uh e-commerce stuff like this now if i click on this notice how this tab right here is purple but if i click on it's like something like this like this text this is blue see that tab it's blue so why is that what is the difference so blue means it's static meaning it's not connected to a database it's not connected to a webflow co collection so so when i change that that has no effect on what's coming from the collections or the or for e-commerce coming from the products okay so if i if i click on this notice we have the white and then the purple so white or blue so you can see here it's blue here it's blue and white that means it's static but if i click on this it's purple and the tab is purple here as well that means this information is coming from the webflow ecommerce or webflow collections settings all right so if i click on this and i'm like i want to change the name of burger dreams i can't but if i double click on browser menu yes i can change that so if i want to change a product all of this content right here is being pulled from the webflow e-commerce tab okay so if i click on the shopping cart and go to products this is where all my stuff is so burger dreams is right here that's a massive burger i've never had burger with a fried egg is it good i i've seen it before but i'm like like my stomach just feels ugh just by looking at it anyways if i want to change the name of that i can do so right here and say uh uh burger time i don't know that's a video game name but like burger time and then save it now watch what happens if i go back to the web page there we go it's been changed here so it might seem like it's a roundabout way to change text but it makes sense because you're actually updating a database aka webflow collection okay so uh yeah so you can uh edit the time the time the the price the description and whatnot that's where all of these items come from so if you want to start changing your your products inside of this free template you can do so by clicking on e-commerce products and go to town you can even select them all so hold on let me zoom in so you can select and then click on this to select them all and delete them you can delete all the the uh pre-created products or you can just go through each one and start editing each one to what you need okay so this is all for basic physical products one of the new things that webflow has created is this feature right here where you can tell webflow what kind of product it is is it a physical one is it digital is it a service or is it just something else okay so all the templates right now because it's a new feature that came after the templates were created all of them are set to advanced but you can set it to physical all right it's up to you whatever you want to do cool so yeah that's a little bit about products inside of webflow and how to quickly get going with a template and before i go to the next part about designing stuff like your add to cart your your checkout pages let me go to the questions let me make sure i'm keeping up a question from the stream timothy are there any subscription alternatives to member stack you can re recommend i'm a fan of course but the catch is i need to receive subscriptions before i can afford member stack [Music] if you want to member gate if you want to paywall something on your website i only know of member stack that works well with webflow oh and there's another one called member space but if you if you don't need a member gate stuff you can use a another platform like patreon buy me a coffee.com uh gumroad there's a bunch that can do subscriptions so there's that junior this functionality ecommerce already works for brazil uh does good question stripe brazil uh pricing fee if stripe works in brazil then yes um yeah you would have to see if let's see here marketplaces global if strike so the reason why i'm looking at this is because oh it's still in preview so i don't think it'll it'll work okay so webflow e-commerce is built on top of stripe and so when you start collecting uh revenue when you start collecting orders it's actually sending a signal to stripe so that's stripe.com and if stripe doesn't work in your country then you have to wait on it yeah so that's one of the limitations of webflow so currently works in all of these countries right now but if it says preview it means that uh webflow doesn't work on that yet but once stripe announces that hey it's full it's ready to go then it'll work all right so it only works here so sorry brazil all right and so when you're starting up uh webflow e-commerce it's gonna ask you to set up these things like um add a payment provider so if i click on this okay i have to do some other stuff so when you set up your payment provider it's going to ask you to connect to your stripe account all right so let's see here is stripe the only option for payment from nikki stripe is not the only option for payment so what you can do is let me go to the order checkout so yeah we'll move forward so you notice there's this button right here so you can do apple pay but you can also do uh google pay with here all right enable web payments so if i click on there we go so you can you can have people pay by credit card and that goes through stripe or you can have people pay through paypal or google pay or apple pay and they all there you go yeah so you just need to connect those things and you'll be good to go yeah good questions good questions all right so those are questions so far all right so how do we start customizing stuff like this shopping cart so again webflow makes it easy relatively so if i double click my cart i get to this element settings panel and if i open the cart this is just like opening some sort of um some sort of modal right but this is a special model that lets you add uh products that people have added to their cart and so you can style this however you want all right like taking a text block and start making it bigger with the font like something like that and then pushing let's push the line height oops push the line height to like 26 push it down and so if you're not familiar with webflow collections this is the same thing this is the same exact workflow you have a bunch of your collection list items and when you move one thing you're you're moving them all okay so let me put um item name for the class name and there we go you know we can even make this bigger if we want let's see here i have the width of 60 so let's make that 110 and there we go we've customized it let's give it rounded corners cool let's add some sort of like box shadow to make it come out of the page a little bit more okay and so yeah customize it however you want and remember that purple color that's following us around again it's that swatch it's that swatch that's uh following us around everywhere see that background color is brand and so i've changed that once and it changed it everywhere so if you don't like the cart to be on the right you can have different types you can have a drop down on the left or even a centered modal all right so centered modal it'll look like that on the left on the right or a drop down so yeah and if you want to take it even further which is more advanced you can add webflow interactions to all of this but it's up to you okay so let's go ahead and close that cart and there we go so that's editing the cart now let's go ahead and edit the now let's go ahead and edit this right here i'm gonna click on the cart button and yeah what if what if we want this like say want it bigger or wider and let's center no we can't how do we make that shopping cart bigger oh it's an image cart icon how do i make it bigger i can't no huh well you can mess around with that add some random more rounded corners to make it look more like a button you can even change this cart icon by replacing it with another image if you want again it's it's your world it's your call what if i change this like orange okay i can do that yeah i'll just leave it white for now i wonder why i can't change the size and even if you want let's see here cart button what if i want to add a piece of text so i'm adding text inside of there oh okay there we go and i can just say cart and push that to the side yeah see how simple that is i just put a piece of text inside of the cart button and that's and made it say cart and that's it okay all right so that's editing your cart all right and now since we're on the checkout page again i showed you how to change the the web payment of this page either either either apple pay or pay with browser you have that but there's also uh a part for um checking out for paypal okay so yeah this is oh let me go back to order page wait oh okay okay cool so we're on the checkout page and webflow already gives you all of the form fields that you need all the basic form fields that you need to start selling your stuff including this sticky sidebar one of the things um i like to see as a consumer is to see my items right see so these order items stuff i'm about to buy right above the the price so what i can do is i can take this order items and put it above the order detail the order detail being this sidebar so i'm gonna drag order items above order detail and there we go i see this right here oop okay i i want both of these i want both of these to stick so let's see here what can i do okay so this order detail has sticky so i'm going to delete that wrap both of these in a div just just like this wrap both of them in a div and make this sticky so that way they both stick to the top and again try doing this without code try it i mean actually try doing this with code okay let me move it down a bit something like this and there we go so both of them stick with me so as i'm as i'm moving down this page i want to continually be reminded of what i'm about to buy which is a burger and two drinks pretty good all right and you can customize the look and feel of each of these and say you want even more information from your customer before they pay so there are there are ways to get three additional form fields which is right here in the add panel i can just drag this in to right under web payments i can drag that in and there we go i can get more information and these are just suggestions it doesn't have to be a telephone number i've used this for like um you know i've used this for other things like this checkbox right here could be for something else this notes right here could be something else this is it's up to you webflow gives you three more fields if you need more than three for additional information no you can't do that that's the limitation and yeah you can't do that but you get three okay all right um so that's how to customize this what's next um the order confirmation and the order confirmation is it looks just like the other page is just confirming you know after they pay here's all information cool and lastly you want to send that customer an email so you would go to settings email and you would set up the look and feel of your email now you can't completely customize the layout of this but you can do some things like the background color the accent color you can change the text of some of these things so you can change the email you can change the email subject line you can change the greeting message for people who are downloading um digital a digital product you can customize that yeah there's a lot of things to play with inside of webflow ecommerce so this is this stream is just the very very bare minimum basics of if you are just getting started where do you start get a free template on a starter free account do not buy anything until you feel comfortable editing all this stuff and once you've got your text your images your products all of that inside of webflow the way you like it then upgrade the site plan to the e-commerce to the e-commerce site plan and that way you'll gain even more functionality more uh options to do more with your site and you can also launch it live on your custom domain name okay so i know that was a very very quick but yeah if you have any questions let's take them now um be right back i need to get a drink of water so get your questions in the live stream chat so see you in about 30 seconds let me play some music real quick [Music] okay cool here back [Music] hello [Music] oh okay it was kind of it's kind of dying there but we're good all right let me get the questions so nikki i've already answered that one is the stripe the only option for payment uh no paypal stripe apple pay google pay bca give some information on shipment uh yeah yes yes yes um hold on hold on [Music] i have to set up um like webflow asks you for address so i had to set that up real quick shipment okay so inside of the webflow settings panel so your settings e-commerce you have this shipping right here so you can set your shipping zone okay so it's set to united states for now but you can click on edit countries and you can set it for whichever country all right and you can do different shipping methods like what if i want to do a flat rate percentage base price base quantity based weights base like you can add as many you can add as many as you want and rate amount so let's say oh enter a number greater than zero okay how about five dollars flat rate or i can set it as free yeah save cool and then i can add a new method saying if you if you buy 50 50 items or more so if you buy like 50 items or more oh wait max quantity 50 no minimum quantity 50. then it's free shipping you know and then there you go so you can add as many different types of shipping methods as you want and you can also do it based on per country okay so yeah pretty cool stuff and you can set up your taxes uh so if you have uh that or taxes um it is set up here uh yes and notifications like you can have notifications sent to people or additional email recipients if you're like someone bought something yay i want to send an email to myself my boss and my colleagues and uh maybe the shipping director or something like that the logistics director something like that um so you can send them all an email automatically once an order is received all right um yeah cool all right um oh new feature yeah variants cool uh digital downloads yeah yeah uh let's see here do we have variants inside of this oh please where's the okay option sets uh okay okay so inside of webflow ecommerce you also have options okay or what we call variants and what these are good for is things like clothes shoes or anything that has a variant so for example like a shirt that's a product but what are the variants sizes small medium large extra large extra extra large extra medium so i can do that like let's pretend this is a shirt even though this is for a drink fig and lime um okay we can we'll pretend it's a shirt so we'll just say like give that a category name of size or size there we go and then we have to set our options so we have like small medium extra medium and large okay so we have those and every time i add one webflow is adding a variant of each one and with each variant you can change the the image of the variant you can change the price you can change so much of it okay and i'm gonna save that and then there you go so let me go to the drink fig and lime page okay let me look for fig and there we go and so you if you noticed uh this has the options or the variance so there's size but if i go to something else that variant is gone okay because this one doesn't have it so webflow adds that drop down menu pretty cool super simple i didn't have to code a thing however a lot of people in the community were like that's cool and all but like i want to make some sort of like button i don't want to drop down can i do something that's not a drop down and the answer for a long time was no but we'll get to it well they got to it so here's how to play around with that so uh if you look here and i clicked on the element settings there is no way to style this okay there is no way to not use a drop down menu so what you need to do is take this element add to cart and delete it and then add another add to cart again and now we have a lot of options okay so what we did was we had to delete the old code because again this pro this uh this template was created before the the new feature was added so we had to delete that old code and put in a new one so now that we're in the new one watch what happens if i click on the options list right here and then go to the option settings remember we only had pre-select default variant well now we have variant selector now we can say a select field or buttons and there we go all right so watch again let me go back let me undo everything okay so this is the old add to cart and if i click on options list it only says pre-select default variant to enable the new version you have to delete the old add to cart and add the new one and then if i click on this select field sorry if i click on option list right here i get pre-select variant and i can select buttons and there you go so that's the difference okay and with this button i can just take this and say uh let's let's make a pill okay let's make a pill type of thing just for fun all right so excuse me let me call this variant button so when i click set that as a variable button all of these have that same class name okay so as you can see i set it once it sets it for all of them cool now let's play around with the first one so i'm going to click on the down arrow here and say for the first item okay so notice how it says first item up here for the first item let's make the rounded corners just for the top left and bottom left we'll say that one is 15. okay and then for this one right here let's go to last item and set this to 15. okay and then with all of these let's see here there we go for all of these variant buttons let's remove that margin right so they're right next to each other okay do negative one and if i preview there we go and i can also play around with the hover effects as well so yeah this way you have more control over the style i mean it doesn't have to be doesn't have to be like a button button you can make it a circle like imagine if you had colors right um yeah let's make colors actually rather than just saying it let me just make it right now so say we have that option set and let's do colors let's just say black and then white okay done save and there we go we have black and white but can i make this a different get back okay so i need to make a background color so if you made a background color field you can connect it to but i don't have one yet but you you see what i mean let me do a hover effect with these real quick uh we'll do purple and white with a preview and there we go cool cool all right so that's one of the bigger new features for webley ecommerce that was updated all right what else do we got um how can i make the cms more organized especially if i have this from judy how can i make inside the cms more organized especially if i have more than 100 items uh yeah that's a vague question um when you're organizing your cms use multiple collections okay so in in the pixel geek community website i have like for example i have a collection named categories and then i have a collection name of tags and then i have a collection name of tutorials so tutorials has a single reference field to categories and also a multi-reference field to tags and that way i can organize them in a way that okay here's the ones that are listed under these categories here's the ones listed under these tags and so using multiple collections will help you organize your cms more but if you want to add your uh read only link to the chat room and remove the dot com from the url put that in the live chat room and i'll take a look at it right now all right timothy what's the best method for collecting subscription payments to clarify i'm looking for detailed information how to set up and connect all the prices for a subscription based product and web flow um subscription based products are coming to webflow i think um i know that the community has been asking for it but that's one of the things that i bet you they're working on it because the community has been very loud about it like hey we need subscription based stuff so it's coming but if you need it now there's other ways to do it like gum road there's foxy cart uh member stack member space uh buy me a coffee is good too so yeah ripple effect have you heard of udesley yes i have they're awesome people where you can convert your webflow website into shopif into a shopify template that way you can build something amazing in webflow and have more ways for payments shopify yes so let me throw their website up on the stream okay waiting waiting okay there we go um cool so if you want to use webflow to design and build your website but you want to port your design over to another platform well it's hard to do it manually but you desley the team at udesley has found a way to make it easier with what they call an adapter so they take your exported webflow files and they somehow magically code it for the platform that you want to use instead of webflow so you can port over your webflow exported code into shopify wordpress go ghost or net netlift netlife i've never tr i've never used that i've never said that word and now i'm saying it for the first time netlify is that right yeah but yeah so their adapter app is where you just drag in your zip file and then you desi magically makes it happen for the other uh platform so if you want to try that out you desley.com oh here here yeah here's an example see you take your wordpress and then you drag in your zip file press convert and then boom of course it's not going to happen that fast but yeah so you can try that out okay uh ladies ladislav hey do you want to review my webflows site yes i do if you have any links oh it's already 12 o'clock all right so let's go to 12 15 and um yeah show me your links and oh wow thank you so much for your support the the the super chat you rock please i want to see your site thank you so much and while um yeah and while i'm waiting for your link i want to say thank you to everyone who's watching again but uh next week no tutorial just fun among us it's a video game that i think is gonna be fun for everyone in the community uh i'm a bad liar so i'm probably gonna lose so yeah we'll try it i'll probably be giggling when i'm like i'm not the imposter and yeah so let's try it out um so next week see you there also yeah stay tuned for the uh survey that i'll be sending out because i'm looking for five students who want to take this live from complete webflow beginner to webflow intermediate like you understand all the fundamentals of web design and web flow in one week so that's coming really soon next month um yeah lot of slav go ahead and put your link yeah but i hope you guys enjoyed this stream i hope you learned a little bit about webflow e-commerce waiting for vladislav's link let's see here anything else i'm missing okay uh there's one question from the chat board saying i have a collection of 180 products with 50 custom fields webflow does not allow full custom fields csv import for products is it possible to do this with custom code thanks in advance uh yeah so when you're importing a csv of data into a webflow collection or webflow products collection it's kind of limited because you can upload basic text strings you know like a date a title name of a product um a paragraph of text stuff like that yeah that's simple but um and images too but um if you're trying to import things into like a a single reference or a multi-reference field that is not possible inside of webflow so it gets a little bit tougher because if you have like 180 products you can upload some of that content but then you'll have to go back one by one and make sure that that everything's set up correctly and that's just how it is right now but i i bet the team is working on that you know um yeah and and i think i talked about this in a previous stream and i want to make a quick tutorial about it too soon is like if you're uploading a video link inside of a video field through csv or through zapier or something like that yeah that is possible however it's only halfway it doesn't send the signal to embedly which is a third-party um embedding tool that webflow uses in the background it doesn't activate that on import so you have to find workarounds so yeah uploading isn't yet there but they're trying they're trying okay um where else can i share a preview link gladyslav um you can tweet it at me yeah send it to my twitter account at the pixelgeek let me go to my twitter account right now [Music] um okay nothing nothing waiting waiting waiting where can i okay oh yeah if or if you want to put a link into that google doc that colleen has linked you know we'll make it easier next time for posting links still trying this out because um and the reason why we and the reason reason why we don't um let people post links like i don't allow people to post just any link except for the mods is that a long long time ago uh back in 2015 16 or something that was doing the official webflow live streams someone posted a um a very loud link where you click on it a scary face would show up and you should have a loud sound their weight i guess that person was trying to wait for a reaction from me i just took off my headphones i'm like no and they didn't get a reaction from me and i was like that's that's pretty mean so i just learned my lesson from that point uh can only preview not type hello type here all right [Music] cool still wait there we go all right i have the link i have the link from lattice live oops and i didn't get to copy it because now it's gone there it goes copy let me throw it up here it's not it's not going to my other computer copy let me just dm it to myself oh my god this is so bad send message i sent myself a dm just to throw the link over to my mac we'll get it quality content right here come on come on cool we made it everyone all right ladislav what is the question let me go back um okay hey do you want to review my webflow site okay let's review okay so whenever i review a site i'll be as honest as possible and i always say design is subjective and all i'm doing is trying to help you out i do not mean any hard feelings i just want you to get to a higher level because i know you're capable of it all right so here we go i'm gonna preview it and this is your home page okay so you have a bunch of pages okay so the first thing i see here is too much i see way too much my eyes does not know where to look at first okay so whenever someone's looking at a website they look in an f formation they look in a formation so i'm gonna start at the top left and go to the right so the first thing i'm seeing is this big logo okay and then i scan i'm like okay cool and then when i get down to here my eye sees all of these things so i'm looking at so many different colors i'm looking at so many different styles different uh different texts it's very very jarring when someone comes here it's like i i don't know what i'm really looking at what where should i be looking at so you need to simplify okay you need to simplify one thing i would strongly suggest is taking this div block and simply going to the filters and let's set the saturation to zero so i set the filter of saturation to zero so all of the content within all the child elements within this is now grayed out or black and white and i can set that opacity to like something like this right and i would do the same thing here let's remove this and say div block 76 and there we go and immediately immediately it's not as loud because yes i know that this company works with a lot of different uh companies just to show proof that hey we're we're a real business we're a big deal just ask any of these people that we worked with yes that's cool and all however it's too much in your face it's it seems it seems too much okay the other thing is um what i always like about companies is the ones that tell a story first that's just me but i really feel that that can go a long way for any company so deco services delivering water process solution since 1938 to me i'm like cool cool you know who else has been delivering water since a long time ago clouds in nature and the earth's rotation in science what makes them different than their compo uh uh opponents the their competitors all right if you're going to build a website if this is for your own company or for for a company a client company that you're working with never start with the goal wait yeah start with their story what made them different than their clients why are they getting into this game what are they doing that's different than their competitors why can't i say that word what makes them different that's what should be first on this page all right because the earth has been delivering water since forever i don't know how many millions of years all right so what's my what makes them different what makes them yeah okay and also humans this is just a basic flyer that you get into them in the mail show a human on here that makes it a little bit different even more important if you can get a photo of a client of your client's client a customer or something on here that would be good that's like a real testimonial or a video of your clients doing their thing building these water things right so your hero row has a lot of opportunity to build on top of this to share the story of this company before even scrolling down this is so important why is the is important is because you have six seconds to impress someone before they leave so again and i've said this in previous streams uh you have three seconds to load up the site and if it doesn't load fast enough people are gone you have the other three seconds to tell people where am i what is it about where do i go for more information and all of that all three of those questions it's hard to understand immediately because there's too many colors and there's not a clear story of what's going on all right uh let and that's before i even scroll down see how all of this above the fold is screaming at me but yet when i scroll down visually it's cleaner there's more space and i can understand more because less is happening so this part is good but everything above it is just like [Music] okay and um so who we are combining the tradition [Music] see your best okay combining the best from tradition experience and modern management exclusively from so there's something in here again how many other competitors do this exact same thing what makes them different even with this who we are it's like okay that's cool what customers have said all right we need images photos of humans not just a logo unless this is uh still a work in progress we change these profile images to actual images of photo or photos of people all right cool cool so yeah if your client was like i want all of this above the fold cool calm down let's clean it up and let's help you get to your goal of making sure people call you or buy your service by telling who you really are because right now this is just like any ad in any tv ad that you see in the weekends where it's like buy now buy now buy now buy now and it's like ah stop it whereas you look at like nike ads or apple ads and they're like here's a story oh and by the way at the very end of the ad this is this is the product that helped propel this story that you just watched that's more important than buy now okay um and that's just on your home page let me go to one more page and then we'll end the stream okay so this again clean this is nice and clean we have people there we go why don't we put these people on the front page like let's let's yeah okay okay let's see here about us combining okay so you use the same content from the home page what makes them different that's what i always say what makes you different everyone is different tap into that okay but uh keep going content you may have heard this before content is king and it's king no matter what medium it is you listen to a a song the content of it is more powerful than the beats than the the you know the the way the notes are arranged in a song is more important you know um yeah yeah in movies the the story has to be good or else you're just making another michael bay film um the story of the company is more important than the actual service itself because that'll lead easily into the services that they do and it'll show that they are different than the competitors all right there's yeah i'm just beating a dead horse now but like you get it you get it a lot of stuff sure i see more in about the content of the website the homepage video is in progress but i agree more page products where i have a lot of cms items and filter uh i'm guessing it's here cool yeah um yeah there's a a lot i can keep talking about but we're out of time but just keep i would say before even thinking about the design honestly i would step away from the design don't even look at the design all right look at the content first organize that content and then make a wireframe or look at a webflow template that can fit that content and then go with the design the design is the last last last part it's like if you're making a movie if you're making a film you're not gonna just start rolling the camera and thinking that the uh why am i doing this that's old school you're not gonna just film a movie and think okay the content is gonna come out from the actors okay ready and action no the actor's gonna be like what's my line what's my motivation what do i have to feel what do i have to convey to the audience what do i have to convey to my fellow actor who i'm speaking to no the pre-planning the pre-production of it all is eighty percent of the film the last twenty percent is the logistics and production part okay well ten percent and the other ten percent production with the graphics and effects and the thanos and whatnot but yeah you know what i mean content first step away from this design the content will drive you to it all right cool all right so again next week i will see you for the halloween party stream we're going to be just playing video games uh playing among us and see where that takes us uh the stream could fail and that's fine i mean this is an experiment why why not or the stream could be fun but sign up if you want to play it's a maximum i think 10 players per game but we'll have people jump on a zoom call and then i'll stream that zoom call to youtube linkedin and uh twitter and also stream the game on there but uh yeah it'll be fun and yeah stay tuned for the survey for the live course 20 hours monday through friday oh it's gonna be fun okay i'm done i gotta eat lunch but thank you all so so much let me get the music back in this where is it where my music there we go yeah thank you all so much for your support of the streams watching them watching recording if you're watching recording you got to this point thank you so much for watching um thank you so much for your subscriptions your likes your tweets your comments and being a part of the pixel geek dot community website i appreciate you all and we're gonna make this community so so fun we we're just in month two of it and we have big ideas and i'm glad you're here for the ride i will see you next week saturday at 10 a.m for the among us halloween stream and that's it that's it yeah thank you and as always make the web beautiful together see ya [Music] you

Channel: pixelgeek

Views: 7,462

Keywords: content management system, design, graphic design, jquery, responsive web design, tutorial, web design, web design tutorial, web development, webflow, webflow tutorial, pixel geek, pixelgeek

Id: 8ngj6EZ1giU

Length: 81min 50sec (4910 seconds)

Published: Sat Oct 24 2020