Create An E-Commerce Website Using Webflow

awesome awesome well first off before we get started i just want to say a huge huge thank you for the invitation just thank you so much for the time and being able to present webflow to us today uh just really excited about what we're getting to learn and just would love to before jumping into it kind of learn what's all of our backgrounds and so it looks like there might be i mean maybe six or seven of us want to learn about the backgrounds and web design and the from each of us and then what we would ultimately love to create and what's the thing we'd love to learn about webflow today and so uh to start it off i might pick on somebody would anyone want to start us off what what's your current background in web design and development i might pick on somebody if someone's open to it sydney would you like to share [Music] i get the question anyone like to possibly share their their current web design and development background maybe laura oh i didn't get the question perfect thank you thank you and feel free to in our zoom chat feel free to message me and so i'll write the question down here in the zoom chat what's your current background in web design and development current background in web design and development i would love to love to learn about each of us here what's your current background in web design and development okay so for web design i don't know if bootstrap counts uh i've used bootstrap to create some sort of website and uh foreign development i've actually used i don't use for the way but used for mobile uh so i've used a real native uh basically javascript language oh yeah awesome oh so that's good to know any anyone else would like to share i karen is knew she knows knows js and does automation that's really cool awesome awesome we have someone saying intermediate which is really cool oh this is going to be great so i'm excited we're going to learn a lot today very new nice done wordpress before though nice awesome and that's the same direction that i came from i initially started doing wordpress and if anyone's wondering where i'm reading this from i'm reading this from our chat so feel free to enter anything there in our chat so i also started kind of in wordpress hand coding some simple landing pages but then went to wordpress to have a content management system that i could manage and pass off to clients so i i'm very much the same done some wordpress as well before doing webflow all right the next question is what would you ultimately love to create like what is the ultimate direction like you're in this thing you're learning all the things what is it that you would ultimately love to create now i asked this question in the chat for us so we can all see it i would love to hear from any of us what would you ultimately love to create on the web the membership site it could be the next facebook it could be the next twitter it can be your own whatever your creation what would you ultimately love to create i'd love to hear from at least one of us nice a flexible marketplace i love it i love it a flexible marketplace that's pretty cool well awesome well thank you so much for the chat and opening up and sharing uh so i'm going ahead and jump into our our presentation today and going to start sharing the screen here clicking on sharing screen desktop share screen drag this make it full screen and if you're interested in wondering i can share this in the chat as well with us this is what i'm using uh as my uh is my schedule so as you can see here once i share this in the chat you can kind of keep tabs on what i'm going to be sharing so i'm going to share this link in the chat and you can go here and just see so right now we just went over general introductions and the next thing i'm going to do is share a little bit about myself and my my background and how i got here web flow then we're going to jump into creating in webflow and starting with a free account then we're going to introduce the webflow university then we're management system and adding forms and then like uh we shared here someone's talking about being able to use integration we're going to talk about using integration and adding economy here so we can all hear thank you great great call perfect perfect nice can everyone hear me now awesome so just a little bit about myself and feel free i got chad open if you have any questions during this feel free to ask so hello hello if you might already notice i'm i'm a huge smiley person i love being positive and just digging in and learning so let's dig into it quickly just some short story time so this person here going to meet really quick here awesome this person here to the right of our screen this person is all smiles newly married recently hired as a front-end developer and just discovered the immense powers that were flow gives him to bring ideas to life this was my little cubicle working at merits and i started as a front-end developer there but my journey before that was learning webb's design by hand coding and then going into different courses and on youtube youtube was a great place for me to learn and then continuing on until being able to have an opportunity to work as a front-end developer next here at this new job at merits he gets to create micro sites but they aren't engaging the sites are built well but there's no interactivity so these websites that we've created there were sites that allow people to sign up for programs and different types of events these this was an event program website and as micah continues to learn webflow and to use it he better understands the box model and javascript by using the interactions that was then back then it was called ix1 and i think this was 2014 or so and he was doing this and exporting the code and he was creating these landing pages for microsites that he presents to the team now this was all new to everyone there merits and so this just as any of us might know going to a new platform took some conversations it took some um wondering what this might mean for us as a team and so after seeing some of the powerful opportunities with webflow being able to create interactions and create interactions uh he was then able to really tell better stories online now as mike is given this opportunity to use this new knowledge and confidence at a new full-time job so after merits i was then hired as the lone web designer and front-end developer at this job and initially started out creating wireframes as you can see here on a pad that's where the idea started and then i brought it to life using webflow so i would go through this process of redesigning and you can see this is all the iterations that myself and the team went through all these little tiny rectangles those are all different designs that i worked on and we ultimately brought this to life using workflow so this was what we brought to life myself and another developer now that's powerful but how can more folks get this power and confidence just like i did you may be asking can i use webflow is webflow for me or who am i and i'm so glad you asked that question because i think webflow is absolutely for us because it allows us to quickly build websites and e-commerce sites and have these platforms like cms and marketplaces and design and develop in a visual way but how do we do this how do we collaborate what we're going to do is create our own free account so definitely thank you for listening and before i jump in further are there any questions feel free to write them in the chat oh so i'm awesome awesome so first thing i want to share is actually having a web flow project having a webflow account and being able to create on the web visually and to do this if i go to webflow.com probably going to need to log out myself i'm gonna sign out here what workflow allows us to do oh yes you can absolutely get a recording of this afterwards definitely definitely so you can at webflow.com create a an account for free and this account allows you to create websites visually and there's limitations with the free account but this allows you to visually design online and you can i want to introduce after i log in here in my authenticator login in it perfect so in your webflow account you have the opportunity to create a number of projects but the free one allows you to have two unhosted uh projects and you can learn more about the free limitations but just wanted to show you how your dashboard might look and the ultimate thing is webflow university so if i go to university.welflow.com i'm going to share this in our chat here for everyone this is the starting ground for myself this is where i've learned a lot of the things for what i do in webflow is the university so you can see some featured courses here this is the most recent trending course and this is what we're going to ultimately talk about today and these are some new lessons such as the getting started elements you can browse all of these and learning these things allows us to really be able to understand how webflow can help us from the sections to any of the layouts this course and these lessons greatly help us but what we're going to talk about today is this new 2021 portfolio course and so as a new account is a free account you can jump in and start using this course right away so as you can see here this is the course it has 21 lessons and this is what i'm ultimately going to guide us through as far as we can today in the next hour of how to use this course and how to build in webflow so feel free to sign up for your free account there are some limitations in regards to and i'll share more about those limitations i will sign up for a free account and allow you to quickly get started alrighty so the first thing that we're going to talk about is creating a hero section and this is in web design development that's that big thing that you might see at the top of a website let's see if we go to apple.com a hero section for them this would be their large hero section for the new iphone 12 and then as you scroll down there's more content but what we're going to first create is something like this this hero section so back into our course what's great about this course is we have cloneable items and so what webflow allows us to do is if i click on this clone this project button it takes us to the showcase and on the showcase there are multiple projects that people can use to just see what webflow does or clone projects and the clone project lets you take that project into your own account and do with it whatever you want so i'll show us how we can do that so here on our page here this portfolio course home page i can click on the clone project you can name this i like that name micah's dynamite project clicking clone project and what this is going to do is create a direct duplication of this project and now i have where this website was started from for this section of the of the project so as you can see here they've built out some of the things already i'm going to remove this so we can walk through how they built it but they built out some of these things and that's the awesome power of clone projects and to pack up just a little bit here if i go back to showcase i want to really show us the power of conan because what the showcase has helped with help me do is when you're on the showcase so this is your dashboard your dashboard tag our tab where you can go to all your projects that you build and if you click on showcase this is where you can see different projects that have been shared for other people to look at so this button here lets us see all sites this one in particular lets us see the sites that are cloneable cloneable sites mean that you can actually take this into your own account so for instance if i view this project here and i'm like wow that interaction is pretty cool this whole project's pretty cool i might want to clone this project and maybe use that interaction or i can just view the project details and open this in webflow just to kind of preview what this uh person did to create this so previewing the site as you can see here i'm in the read only mode i'm just previewing what they created so i can see that they used some a grid here they did some other things and i can just see in any changes that i make here so if i say micah here this is not going to be saved because this is a read only so if i refresh this because it was a read only and just a preview it's going to go back to the way that they had it residences and so that's what's awesome about the showcase is that i can preview projects and i can also clone projects so back in to the project that we just cloned here this is the start of our 2021 portfolio course and so again there's 21 lessons here takes us and guides us through creating a home page project pages contact pages but what we're going to focus on is creating this home page so i'm here on the canvas and i'm going to remove some of this stuff so i just selected this section pressing the delete key so now my body here this this area is completely blank i'm just going to give us some of the lay of the land this might kind of look like um this kind of looks like kind of photoshop kind of has a photoshop look a figma look and i'm chatting and talking but i want to make sure can everyone see my screen i don't want to make sure if you can give me a thumbs up in the chat or yes in the chat just want to make sure everyone can see my screen awesome awesome i can see it perfect so this is a completely blank canvas and to give us a layer of the land on the left side we have things like the add panel and we have this thing called symbols we'll chat more about symbols we have the navigator this navigator shows us all the things that we create in place on our canvas on this particular page and we have the pages panel that shows all the pages that we've created and we have the cms collections and we'll chat more about that also the e-commerce tab and we'll get there as well because that's showing the power of adding e-commerce then we have our assets panel this this is where all the images and assets and pdfs text files these are uploaded here and lastly we have our settings panel so we can see our search settings and our backup settings so that's the left side here in the middle this big middle area this is our canvas and this is where we can add and drag any elements onto the canvas and so if i click on this add panel here drag in this button the awesome thing and the thing that might kind of throw us off you might think if i drop this button element here in the center it's going to stay in the center but as you can see it jumps all the way up here to the top left and that's because what this canvas is is a direct emulation of html and css properties so if i look in my navigator this button is very similar if you've coded before of like writing html elements such as paragraph elements uh you can put divs and sections here so it follows the same process and over here into the right this is our style panel and this this panel allows me for instance if i select this element this style panel allows me to if i change this width from auto to 100 it follows along the lines of css so it went 100 of the parent element so this the stuff that we create here is more powerful than a photoshop more powerful than a figma if you know about figma or sketch because this is directly coding on the page and we can see this if i go down here to my bottom left click on css preview i can see this is the code that i would write for this button it would be button curly brackets with 100 and so that's what i would normally write if i was writing this code out awesome i'm going to remove that and i'm going to clean up my styles here going a little quickly but before continuing i want to check the chat to see if there are any questions that we might have about what we just covered awesome awesome none yet none yet okay perfect and i also want to ask it sounds like some of us are moving around and some of us might be at the house and at our homes and in front of our computers i want to ask feel free to give a thumbs up if you're able to have access and create your own free account because i would love to walk through this process with someone here on the chat but if none of us are able to i'd be happy to just share as well but if you are feel free to give me a thumbs up and i love to pace it along with somebody so that we can learn together awesome setting up in a minute can you reshare the link i can absolutely reshare the link so i'm going to workflow.com and i'm going to show what this would look like if you create a new account and so i'm sharing in the chat the webflow url webflow.com if you're creating a new account you click here on this get started and you can continue with an email here or sign in with google so i'll act as if i'm signing or creating with a new email and i'm trying to think of an email that i haven't used let's see i think this one i have not used before and creating a new password please don't check out my password oh that one didn't work see here that one should invalid password let's get this rolling now i might have to make a fake one test i can get my password rolling oh i might this might be an account i've already created that might be why it's giving me issues ah yes yes yes so let me restart this i think i've already created account for this get started perfect and i think i haven't created an account for this one so i'll do that info at micahrion.com is awesome create a new account so this is a brand new project nice so as this loads my new account feel free to do the same and what you're going to see is it's going to take you into your dashboard once this completes here awesome i'm going to sign in my name web designer client freelancer never built and we're going to do an e-commerce store and then it drops me right into a blank project here so this project here has some tutorials that we can walk through and you can see some of these and it shows you some of the guidelines that we can see and it takes us through this process of showing the add panel dragging in the containers and we can also see all the elements that can be added into it and so it just helps guides us through this new process so i'm adding in different elements like headings and heading there i double click into this i can change it test test what else is it as and i can add in paragraphs all this is available in our new project i'm going to stop this and head back into the outside when you're done so now that i've finished doing this just wanted to hop back in to what our dashboard looks like so stop this tutorial i'm going to delete this project here so with a blank blank project this is what what it would look like and if i go into learn to the portfolio course if i start this course i can then see under the hero section course here this is where i can clone this project so it's going to take me to this project here i can clone it first need to verify my email so once i verify my email i can then clone this project awesome so back into our project here awesome got folks rolling awesome alrighty so i know we only have about an hour of time uh so i want to kind of take the time to make sure that we understand what we're building here on the web so what this canvas uses is the box model so what the box model is is it's designing on the web with the idea that what everything that we create follows along with styles that you can add to boxes and you can nest these boxes as well so if i go into my ad panel again what we're going to try and create is this hero section so i'm gonna kind of scroll scrub through this video so we can see what we're creating here so what we're ultimately going to create if we didn't see it previously is this hero section back into our project first thing i want to show and talk about is if i click on the navigator again this is like the tree of what everything is uh nested inside we have at the very top the body tag and this body tag is kind of what holds everything inside of it and what we can do with this body tag if i click in the selector field over here in the top right is find the body all pages tag and what this body all pages tag does is it allows us to have changes that we make on this tag be reflected on every page so anything that i change here will be reflected on every page so for instance if i scroll down my style panel and change my background from this dark color to maybe this red or let's see maybe i want kind of this bluish background if i go in to my pages panel create a new page and call it new page when i open it it's going to have that same background because it's using the same body tag at the very top each page starts off with a body tag and that's how the web is created every page starts off with a body tag and again if i click in the selector field click on body all pages this is where i can change those things like the background color and my text color here there's no text on the page yet but this is where it would be let's go back to like this dark gray again and go back to our home page alrighty so what we want to create again is that hero section so first thing we want to do is go into our ad panel find our section and the section is a container it's a div box that we can put stuff inside and this section is automatically 100 it fills the body tag here and what i want to go ahead and do is let's give this section a class name so this is something that you can learn in webflow university is so right now i hopped over into webflow university i'm going to search classes and you can learn more about classes and how they're used and if you're in a developer designer in the on the web you might have a probably have a good handle on those as well but what ultimately what classes allow us to do is it allows us to create styles on an element and then reuse those styles on other elements so for instance back in our project if i name this give it a class name of let's give it a class name of section any styles that i complete on this section on this section class will be able to be reused in other elements that have the same section class name so if i drag and add padding which is adding space on the inside of this element if i let's say add 50 pixels here and holding down option i can then i can also do the padding on the other side you can see that this numbers are matching holding down option so i have let's add 60 pixels of padding and you can't necessarily really see what that looks like so what i'm going to do is let's throw in a container here so this container is a an element so in our ad panel i just added in a container into my section i'm going to go back so we can see it clearly so i'm going to grab this just drag it into our section and a container is an element that has a max width and as you can see it's right in the center it has a max width with margin auto on either side so it centers it if i click back on our section let's see how these this padding works so as you can see adding padding is what adds space on the inside of this element and adding margin adds space to the outside of this element and so that's what margin and padding is is adding space padding is adding space to the inside margin is adding space to the outside so now we have this container in the center here and what we want to do is just add some text inside of this so i'm going to go into my ad panel go to my text element drag this text block here and we can say welcome so that's my text box so again with my section selected we can see how this padding is moving things around let's take this back to 60 and because this text block so if we look in our tree here so we have our section which has a container inside of that which has a text block inside of that we can see that our container is holding that element right here towards the center and we can change the max width right now this has a default max width we can change that max width here in the size of our container element so in our style panel with our container selected over here in our style panel let's change this max width to 2 1200 pixels so as you can see that container is now larger and but it still stays towards the center alrighty the next thing we want to do for our hero section is let's add this heading here and i want to make sure that i added inside of our container right beneath our text block and let's see here um designing i want to say designing and developing to make lasting changes for us all and i like this it's pretty good and i want to let's see change the width of this and so to do that i'm going to go over here into my width and maybe 600 pixels might be good i can maybe change this a little bit more so i'm clicking option here let's see i like this here for us i think 480 is perfect 480 designing and developing to make lasting changes for us all and i can also type this in if i want 50 pixels or 500 pixels awesome so now we kind of got the general layout and again if we want to see the code that we're writing writing if i'm for instance have my section selected going over into the this question mark here if i can click on it boop there we go css preview get my section selected i can see right here this is the code that we've read padding top padding bottom and if i select my heading i can see the width that i've added with that's 500 pixels and if i select my container i can see the max width that i've written and all this is code that we would have written by hand but we did it all visually using this style panel and that's what's the power of workflows that we're actually coding but doing it visually alrighty so back into our design so i'm looking at this here the next thing we want to do is add in this image this hero image oh before i before i do that i do want to show how we can change some of the fonts that we that we have on our project so with my in my navigator with my body tag selected clicking on the selector going to the body all pages tag and what i want to do is just show how we can change the fonts so in this font drop-down we have a number of things that we can change it to uh impact which is not the best looking uh bitter which looks better but what we're going to stick with is just enter we're going to stick with enter here you can also change the font size for all paragraph text here as well so if i want to save make all my paragraph text 16 pixels i can do that here you might have saw the welcome change if i want it to be really tiny five pixels ah it's too hard to see let me make that back to 14. and i can also change the color of all of my text here again this is in the body all pages tag awesome now for my heading i do want to change this and let's change this to dm serif display and we're going to use the normal font and i want to change this from 500 this to maybe 600 to get it all on one line awesome so we've visually developed this text here at the top now let's add in that image so in our ad panel let's go to our media section to image and what i want to do i want this image to be full width but if i place it into my container click choose image let's find our hero image here if i can find it is it in here there it is this is our hero image this is currently being constrained because if i look into my navigator it's inside that container and that container had a max width i don't want it to be constrained so what i'm going to do is just take it outside of the container and have it sit in this section so now it goes all the way across full width and i i want to make sure that it does i can say 100 percent i can type here 100 make sure that it's full width clicking preview so this is getting pretty close to what we want i'm going to add some margin here just to kind of move so again margin is the space that we add to the outside of an element padding is a space that we add to the inside and i want just some margins so i'm going to reset this change this margin to let's say 50 just ah 50's too much say 40 40 maybe seems about okay but this at the top is too much zero pixels there at the top and so yeah this is our landing page so far and so what i could do here is using my staging domain if i go to publish each project has a staging domain that we can publish to so again the difference between a figma or photoshop is that when we publish we're actually publishing our code to the web so if i go and visit this this is an actual website and i'm going to share it in the chat here so if you go to this website it will load wherever you are at your home on your phone wherever you are and it will load for you there as you can see it's with what we've done it's fairly responsive that container keeps everything centered because it has a max width but then it stops once we get here and that image responds well because we have it set to responsive or we have it set to a width of a hundred percent so it'll be 100 of that section there so that is the biggest difference is that we are actually coding this and if we just want to preview this preview is slightly different we didn't we won't be publishing and just lets us preview this while we're still in the designer awesome so i know i've covered a lot but wanted to open up if there are any questions any questions anyone wanted to ask before we continued on uh with and the next thing that we are going to chat about is so we chatted about class names container we're going to chat about the cms content management system but before we do that i want to open up for any questions so that the chat is open got some pop-up pop-up trying it out is that an issue great question pop-up so is it is it the tutorial pop-up that's stopping you got some pop-up trying it on firefox is that an issue so if you are having a pop-up issue what i would suggest more like a warning oh great question uh let's see here and i love if you have would you be able to share your screens and i'd love to check it out if you do if you can share your screen i love to learn and see together oh awesome moved it out already perfect perfect okay awesome [Music] i duplicated it um great question thank you timmy so the question was i duplicated a heading tag and i can't change the font style independently so if this is the power of class name so let's let's do this here so the question was i duplicated a heading tag so what i'm doing here is command c to copy and then command v to paste and as you can see each of these i'm clicking on them separately but each of these has the same heading class name here so if i make a change to this one it's going to make a change to that one as well it's an easier way of seeing it if i make a color change here you can see all the classes with that heading tag makes the same change now if i want them to work independently this is where we can do two different things and this is how you can think like like an architect like you're building something amazing so class names allows you to reuse this style now say for instance you want this one to have the same base class like it you wanted to have the same margin on the bottom the same width but you want this one to be slightly different just a little slightly different you can add a combo class and so say for instance i want to change this to whatever combo class you want to name i'm just going to call this bright color so i'm adding a combo class to it so now if i select this top one we can see it doesn't have the combo class because we're only working with this element so this element has the combo class oops move that down didn't want to do that so this element has the combo class now if i change under typography the color for this one it only changes for this one with a combo class now what's cool about combo classes is that if this element this heading this element that has a heading class i can absolutely add that combo class so i clicked on the selector field and we can see there's an existing combo class that we just created called bright color so you can see now that it's using the same combo class for the change color and if i remove that combo class so i clicked into the selected field removed it delete it uses the initial heading one but now back to this is the one with the heading one this is one with the combo class any changes that i make here that don't affect that combo class like the color so if i change the font size to 50 both of them will change the font size to 50 because they're both using the base heading class but if i change this one to 60 only that one will get larger because it's using a more specific combo class more specific combo class so that's that's how you can duplicate that's how you can use classes and that's how you can use combo classes it's extremely powerful so i'm gonna back out of this stuff here great question thank you for asking so again this follows along the same lines i'm gonna add that stuff back in this follows along the same line so if we preview this of coding so with our css preview we can see here this combo class and that's how you would write this out so heading that's that this base class and the combo class is heading bright color and we can see here we change the color and the font size for it so that's exactly what we would do when we code this great question awesome oh my so we have about 40 minutes and i i want to make sure that we get to the power stuff some of the things is i hope and i know at least it did for me it blew my mind hopefully it blows your mind or at least get you thinking about what you can do what we're going to talk about is i'm going to quickly go over adding navigation just to show us how we can do it but the ultimate thing in the time that we have available to us is using by speed up here so all this content the learnings that we're learning here is available in this portfolio course feel free to follow along in this course but we're going to learn how to use the collections to use dynamic content dynamic content is if you've built on wordpress it's like creating a blog post so if you know if you want to have blog posts on your blog page but you also want to have it on the bottom of your featured page but you also want that dynamic content on the home page as well that's what dynamic content allows you to do it allows you to enter data into a data management system a content management system and then you can place it wherever you like on your website so that's the power that i want to show us as well as the ultimate power of e-commerce which is very similar to collections but first i'm going to quickly go through this so this is uh um being recorded but i'm going to quickly show us how we can add a navigation so in our ad panel there is actually a navigation element that we can drag in here if i go into my components down here i can see there's a navbar and i can go ahead and drag this i want this right at the top of my body here so this nav bar comes with some uh pre-pre-made stuff it comes with some pre-made stuff oh hey hey achiever thanks for joining us um nice thank you yeah so it comes with some pre-made things and one thing that didn't chat about but is super powerful for web design visually is up here at the top we have these break points and break points are so if i come here to the edge of my canvas and drag this down this is i'm just kind of scrubbing through the desktop breakpoint so it goes from as wide as our desktop is all the way down to 992 pixels so that's how we can design for the desktop breakpoint and the way this works in webflow is that breakpoints desktop styles apply apply to all breakpoints unless they're edited at larger or smaller breakpoints so any changes that i make here at the top will be reflected in the tablet view it will also be reflected in the mobile view and also the mobile portrait view so any changes that make here on the desktop will reflect all the way down but changes that i make on the mobile landscape will only be here for the mobile landscape so as you can see here when we get here to kind of this smaller mobile landscape kind of the as you can see at the very bottom it shows us what the 480 pixels might relate to the lg g5 or the galaxy note 5. this is their break point here if i want to change in between this breakpoint say i want to change this heading size it's like that's a little too large it's hard for people to read especially when we get to these smaller break points it cuts off to make what i can do is change this width to auto so now instead of it being like we had here where we just wanted it to be 60 px 600 pixels when i get to my tablet view it goes to auto so now this auto allows it to be full width and it wraps the text around but this is only again for the mobile breakpoint for this for this particular one so even when i go to tablet tablet uses the 600 if i go to the mobile landscape it changes to auto now if i go to mobile portrait what we can guess is that it also because it's a smaller break point it's going to use the same auto so as you can see if we click on this this value comes from the heading mobile landscape view and that's what this is saying here so that's what's really great about this is that we're able to visually design so previously if we had to code this see here i think this might show here in that uh preview so if i have this highlighted css preview heading so it shows that this is on that small breakpoint but typically what we had to do is we'd have to create uh media queries and that was again if you coded before that is something that you would have to manage but you're able to do it here visually alright so we talked about breakpoints if you want to learn more you can go to webflow university type in breakpoints and learn more about breakpoints here so this is a lesson about breakpoints and how they they work for us adding larger breakpoints scaling the canvas you can learn everything you need here all right back into our project let's add a logo so i'm going into my assets i want to add a logo right there into a brand see here so my assets i'm gonna drag this svg into here and it's kind of large so what i'm going to do is give this a class name of logo and i want to reduce the width to let's say pixels awesome now it's butting up all the way up there to the top let's take a look at these nav links so these nav links have some pre-made uh class or excuse me pre-made default padding on it they're using 20 by 20. so let's do the same here 20 perfect so now it kind of matches our nav links here and i also want to change this nav bar came with the default gray background let's give this nav bar a class name i want to use this tab bar later and i'm actually going to make this transparent so it matches so what i did is i just drag this opacity down to zero or i can type in zero here now now i can't see my text text link so let's go into our nav link let's give each one of these a class name so i'm typing nav link and let's change this to like a white color and the reason why these didn't change is they're not yet using that class name so i'm gonna click on this type in the selector click on the selector find my existing class of nav link and then it changes selector nav link changes now anyone again using that class name we'll use the same styles that we add into the style panel so that's how we quickly created a navigation in this nav bar that you pulled from the ad panel as you can see here it has some pre-made components such as this drop down menu so you can use this drop down menu to show on different break points right now it automatically shows on tablet and you can learn more about this as you dig into the navbar here alrighty so we are we have about 30 minutes left and what i really want to show is using data in our website oh but one thing this looks really weird i just noticed this this container is different than this container so that container that we created we we did some changes here we made that max width to 1200 let's go into our navigator select so this is our tree here if i select my nav bar you can see it doesn't yet use that container class name so let's start typing in container i can see the existing class and select that and now it has the same width and to make it actually equal to that i'm going to remove [Music] the padding on that right side there and i'll keep the padding on that one just make it exactly flush with that alrighty so now we're going to chat about using dynamic content so over into the left side here under cms we can create a collection cms collection this is where we create dynamic content so clicking this here to create a new collection what we're going to create is a portfolio collection or and this is like a project collection of different projects that we might build so first thing i'm going to do is just name this portfolio or i can name it projects projects might be better and what this is going to create it's going to create a collection url very similar to like blog forward slash san francisco if you write a blog post about san francisco each collection item will have this the start of their collection url now the dynamic content that we want to create is i should have wrote this down i didn't but let's think here so each project is going to have a name that's the basic info it's going to have a slug that's the name that we give our project and we also want to have our project have a hero image or image at the very top that of our page that we can also maybe use on other pages so i'm going to you go to custom fields here and i can either add add new field here or add field here and this is where we have some options here some field type options and so we were talking about creating a hero image or image that we can use that highlights our project so we can use this image field clicking on that now i can name it each one needs a label so i'll name this hero image your main main image might be better name main image save so that's our first dynamic field type and what else do i want to have here i also want to have add my field type well i want each one to i want to be able to tell when i actually created this so i can use this date time for created created on date if i can spell correctly create a date and what else do i want to add here uh i want to also add a rich text field so this rich text field is extremely powerful it is what you would use in a number of blog posts it's like the rich text field that you add in text images i can add in links this rich text field allows me to add uh the description that i would love to use for my project so i'm gonna use this rich text field and name it description because it's it's gonna let me do that there and the last thing is i was just thinking now there might be so i'm in the add new field type there might be times that i want to only show featured projects on the homepage so you know sometimes i don't uh on my blog page i want all the excuse me on my projects page i want all my projects to be shown on my projects page but on my home page i might only want to feature certain projects i don't want all my projects on my home page i only want a few of them and and they're going to be maybe three that i like maybe three out of five i want on my project space so to do that i can select this switch here and this switch is like a yes no if you're an end developer or true or false meaning like if the switch is toggled on that's yes if it's off it's no and so we can use this to filter out uh items in our collection now i'll show us more that here in a bit so let's add this switch and we'll name it featured because that's what it's going to kind of it's going to be our featured switch awesome so i've i've done enough here i've created the foundation of my dynamic content this is these are all the fields so let's create this collection and to speed this up so we don't have to watch me add in all this content i'm going to use uh the sample content here um so i'm going to add in five items so these five items are just dummy content again for us i would say that we would make and add this our own but you can see this dummy content it's just content that is automatically adding the name doesn't make sense the image is random the date is random and this description as we can see here for in our rich text is random as well and as you can see some of these have the featured on and some of them have it off and i want to make sure that at least three have it on so right now only one does let's make sure this one does i'm gonna save that and let's make sure this one does i'm gonna save that now you don't have to necessarily create dummy content if you excuse me we're going to go back into our cms if you want to create your dynamic uh content from scratch what you can do is click here on this new button here and this lets us create a new project so all those field types that i created i can enter in my information here that i want such as the best project i've ever made that might be the name of this project and i can drag in my image here and as i can see this is the slug for that i can change my slug if i want to my creation date when this project was created uh say for instance i'm a scientist and i created this in the future so february 2020 february 25 2022 i don't know maybe i went to the future and i can use this description and my featured but i'm not going to create that so discard the changes awesome so that's how we create cms collection now we have 20 minutes before i go on any questions i know i might have covered a lot put any questions right here at this point before we put this content onto our page i'm gonna drag up our chat here just in case any any questions and again thank you all so much for sticking with me i know we're covering a lot but i'm really excited about what we're learning feel free feel free to ask any questions awesome awesome thank you thank you so again if you do have any questions feel free to add them in the chat now the dynamic content so we've got our page here and so what we want to do let's go ahead we've already learned a bit about adding in our sections let's add in another section here beneath that one so i can actually use my um navigator dragging this section here let's add it actually i want to add it beneath this one let's use that section class name i'm going going a little bit quicker because we kind of know this and going into let's drag in a container into that new section down here and let's give that container the same container class name and let's also let's use the same text so i'm going to copy this command c going into this container command b selecting my heading command c and then right underneath command b and let's change this to these are the featured projects awesome so if we look into our navigator we can see this is what we just created section container text block above it and the heading beneath that now what we want to do now is add in this dynamic content so if we go into our add panel here scrolling down just a bit under cms there's this thing called collection list and what a collection list is it allows you to connect your dynamic content the stuff that we created in our cms connected to this list so it's going to if i grab this drag this in here right underneath my heading we have this thing here that looks very odd in purple but what we can do is select the source we can select the source of this dynamic list and as we can see from our cms collections i have the option to connect it to my projects so with that connected we can see here this is kind of a rough setup of our projects and there's nothing in there because there's no content yet in there it's just a collection list and it's pulling from our dynamic content now to have our dynamic content shown here what we can do is use elements in our add panel and then connect those elements to our content to our dynamic content so what i want to build is something probably very simple uh but you can build cards here you can do a bunch of things but i'm going to build something very simple i'm going to have i'm thinking out loud here i'm going to show us the power of grid very quickly and i'm going to have the name of my of my project and i want what else do we have in our collection list we have the name main image i want to have the creation date underneath the name of my project and on the right side of all of that i want to have the image okay so to make that setup what i can do is use a diff block here i can use a div block i'm going to drag this div block right into my collection item here so that div block i drag it into my collection item over here in my navigator you can see it's in my collection item and that div block is in each of my items so it's being reflected in each item so any change or anything that i make to one is going to be shown in everything in my collection list so let's name this project grid so i'm going to make this into a grid so we can name this project grid under layouts we have this option to add to use grid css grid and if you're not yet familiar with grid it's a tool it's a it's like flexbox it's like uh any other other css properties that allows us to create grids on the web so if i click on this i get some default stuff here so i have pretty close to what i want but i don't want this bottom line here so we have two columns that's these two things that's perfect but i don't want this bottom row so i'm going to delete this bottom row so we currently have our grid and it's looking good but now what i want to do is add in the name that's what i wanted i wanted the date on the left side and on the right side i want the image so name and date on the left and on right side i want the image yeah name date and actually i want a link i want a button link on the left and the image on the right that's what i will do so for the name let's add in a text block i'm going to place it right here and you might be thinking that's odd all of these have the same text block but that's because they're all using the same thing and we have yet to connect it to our dynamic content so if i click on this click on any of these text blocks over into our element settings i can then use the items these are in our items i can then use the dynamic content by clicking this get text from projects so if i click that i get this drop down field and i can get the name here so now each one now has its own name let's drag in another text block place it right underneath actually what i want to do is if i go back here so the way grid works is i want to place my text block into a div block i'm going to drag this div block in here place my text block into the div lock nice and i also want to drag in another div block drag this text block into this div perfect and let's place another div block here into my navigator dip block below that and that's where we'll add our image so we have our our name here let's give our project title a class name let's change the height excuse me the size here so it's large enough and let's add in another text block here so the way i nested this is i put it inside a div block here and what i want to grab is get the text and go into and find the create date that's for my dynamic content so as you can see each one has its own created date and with this selected over into my grid child settings i want to maybe center this and also center a line awesome now with my div block selected let's change its name to project name let's add some padding here just add a bit of padding here so now we have our objects here connected dynamically let's make this date smaller can change this date to make this 12 pixels and we can even reduce the opacity to kind of make this a nice design and right below that let's also add in our button so there's a button element here and can add it to any one of these if i add it beneath [Music] if i can get this to go in correctly drag in my button there we go i'll be easier in the navigator to place it right beneath my date there we go so you might have seen it was trying to figure out grid are you placing the outside replacing the inside and if i was having issues like that i would just say put it right into my project name here which makes it easier and this link i want this to go in my link settings so as you can see i have link settings here i want this to go to the current project so the current project is going to be the template page for this project and we can learn more about collection lists and collection items over in university so if i type in collection list i can see and learn more about how to use collection lists in university here but so right now we have that set up i'm going to style this a little bit give it uh i do like that color but i don't like the button color so let's change this button color here awesome and inside of here let's drag in an image element because this is what we're going to use for our main image so we drag that into our collection list again it's in our collection list place it into this div block here and let's get image from so with my image selected get image from main image so as we can see it's using the main image for each of these projects each one has a different one i'm going to add a little bit of margin in between each of these here perfect so that's how you can use dynamic content and you don't necessarily need to use grid you can use flexbox so as you can see if i clicked on flexbox it changes my layout if i use a inline block it also changes my layout and changes it for all of them but any any layout that you want to create you can use the styles here and use nesting to create the type of layout that you want go back here to my grid awesome alright so we have 10 minutes 10 minutes and what i want to show now is e-commerce because that's kind of what we came here for and so what e-commerce is is it is using very similar the same stuff as the collection so in e-commerce we have a setup guide and i'll just breeze through the setup guide but the setup guide allows you to add your business address which you will need uh for your taxes and tax calculations uh your currency that you want to use so if you use if i add in my business name and business address saying francisco ca and i think if i remember correctly i think actually i'm going to use missouri because i do know that one perfect st louis missouri type this in perfect and i entered in my language continue i can then set up the other things for my business like my payment processor we can connect to stripe or paypal checkout we can enable checkout once we enable and add an e-commerce site plan so any e-commerce will need an e-commerce site but outside of that what i want to show is how we can add in our e-commerce products so our products is very similar to our collection so going into our products you can do the exact same thing clicking on this cog here it's setting up the field types that you want and it comes with some very base ones and you can choose different types so if it's a physical type or a digital type it'll change things here for us or if it's a service it'll change things for us but let's say we have a physical product that we want to sell and with that i can then enter save this collection add some dummy content in here so i have dummy content this looks to be a gorgeous fresh computer added a new media they gave it a price of 85 for it and added the shipping and weight and things of that nature for us and save that but what we can do is very similar to this is we can add in our e-commerce i can find it here to do awesome we can add in our double checking here if i'm doing this correctly perfect so i'm going to create another section here right beneath this dragging this in very quickly into our navigator as the last section and i'm going to use quick find very quickly to add in a container give it a class name or container give our section a class name section and we've already done this before but what we want to do is just like we did for this collection list up here drag in another collection and what we want to do is connect this the source to our products so instead of connecting it to our projects we connect this to our products and this will take us to our products landing page and we haven't been able to chat about these template pages and i know we have five minutes what i want to share is what these template pages are so template pages are the base page for any of your dynamic content so if i go into this project's template page it's going to be blank we've yet to add anything here and we have five minutes so i'm going to quickly create what maybe our template page for our projects could look like so i'm going to select this nav bar and to make this quick i want to make this a symbol and symbols are awesome and very powerful and and if i go into university you can learn more about symbols and what symbols allow us to do is to make reusable components that reflect themselves on each page that they use so if you have a symbol of a navbar or of a card you can use that symbol that component on other pages so let's make this nav bar with this nav bar selected so i have it selected let's go over to our symbols panel here clicking that and i want to create a new symbol and i want to name this navigation that's what i have selected so this thing turned green and it's now a symbol and i also want to let's quickly make this section here also a symbol hero section and i don't have a footer but if i did have a footer i would make that a symbol as well but what i'm going to do is go to my projects page so that we can see how these links go to a project page because if i go now and use these links it's going to go to that project page but as you can see it's blank here so let's go to our projects page out of the preview and let's add in those symbols so i'm going to go to the symbols elements here the symbols panel i'm going to drag in my navigation it's pretty cool so now this symbol that i created is reflected on on all pages so if i make a change here if i click into my symbol and i change this to projects if i want to change this link to project when i go back to my home page where that symbol also lives it's also going to have that name there as well because it also is using the same symbol back to my projects template so this again is a template page i'm going to add in that hero section so now each template so i'm going to go through each of these each of them are using the same stuff here which is okay but kind of weird so what we want to do is below all of this let's add in another section going into the navigator let's add in a container going into my navigator and beneath this i want to have that heading that i had and so i'm gonna drag in my heading tag this will be my name i can connect this since i'm on a template page i can connect this to the dynamic content for this template page so i can connect this to my name so now each page if i go here in the top left each page will reflect that content that i've connected to my dynamic content and we also had a rich text element if i can find it very quickly on russian i'll put this beneath there and i'm going to connect this to my description so now if i go between each one each one will have its own description so to bring this home i know we have eight minutes to bring this home if i click on these buttons that i've linked to my template pages my current project so this one is see this one here if i click on it i can see it has the content for this here hey nice to meet you look i'll call doctor [Music] awesome awesome so i know we've reached the the end here uh one one last thing for our developers here if you're interested and you upgraded your account you can actually export this content everything except dynamic pages and dynamic content you can export pages as clean html and css code so as you can see here it's making this and i can prepare zip and export this and say i want to create this landing page and pass it off to a developer who wants to add it as a wordpress template or make it into some app that uses html and css i can use this zip file and i'll download this here and i can pass this content over to a developer and they can use this code this code here the html the css they can use that wherever they like so i know i'm over time here but just wanted to say again thank you so so very much for the time and so honored about wanting to open the floor for any questions i know we went through a lot but we just wanted to share any questions that we might have and i also wanted to note we can continue building this out using the portfolio course but i want to open up for any questions i'll mute myself so i can open up yeah so thank you so much uh micah for the wonderful presentation so if you have any questions you can just pop off mute and ask your question if you have any question at all hi good evening good evening good evening yeah i was wondering how if i'm creating a template with wordpress or i'm working with sites with broadband how do i bring in the css and html code exported by what or webflow how do i bring that one into my wordpress website great question great question so there's actually a plug-in called uh pages so if you use the pages webflow and i'll share this in the chat pages allows you to drag with flow pages there it is it's a wordpress plugin this plugin allows you to create in webflow and then pull those pages in to a wordpress installation so i'm going to share this in the chat john for us and um i don't think i'm sharing my screen so let me share my screen because i'm talking about it but not sharing my screen so let me share my screen again awesome so this is what i was talking about but no one could see this is the plugin called workflow pages and this allows you to design visually in web flow and then push those into wordpress there's also a web flow to wordpress template created by udesley udesley is an amazing company that is teamed up and what you can do is with webflow you can do a workflow to wordpress create awesome wordpress themes with webflow and so i'm going to share both of these links for us for and this is an amazing opportunity to share this in the chat here this is the udesly one and also going to share this one as well great question john any other questions thank you mika yeah sorry i also wanted to ask what are the differences between the free um version of workflow and the paid version great question great question let me double check that i am unmuted i am awesome sharing my screen again so the free version allows a lot of things but it mainly lets us kind of view and test out webflow but you can also within a free account uh use client billing to connect and have someone else pay for your hosting cycling but to kind of instead of talking about it let's go to plans webflow and we can talk and see the pricing here so going to account plans as we can see here the free starter account allows for two unhosted projects uh you can add client billing but i was talking about client billing lets you connect so say for instance you have amazon amazon's your client and they say john we want you to create this site but we don't want you to pay for the hosting of it we'll pay for the hosting what you can do is set up and enable client billing and they can pay for the site plan instead of you having to pay for the site plan so what that allows you to do is connect a site plan to your project without having to pay for it yourself you also have free staging now the upgraded account plans allows you to do account specific things such as exporting code like we were talking about if you want to export code to use it in an android app or something of that nature this is what the lite account plan allows us to do you can also do project transfers so someone else uh someone else here who might have a webflow project wants to transfer a project to you you can do that with the light account plan and the pro account plan allows us to do site password protection so you can do password protection of a site so then someone will have to use a password to log in that's the account plans these are account specific things that we want to do now this there's a separate between account plan and a site plan site plans are for individual projects like this thing that we created here this is an individual project if i go into my project settings i can then select a site plan under hosting site plans allow us to do a few things cms site plan allows us to add a custom domain and have these options for our iron site 000 cms items form submissions a plethora of other things excuse me so up into our site plans we can see here and i'll share this link for the pricing page the different site plans that you can use for each individual project so these are all the different things i won't go into detail here to open up the for more questions but these are the individual uh pricing for the site plan so there's account plans and there's site plans i'm gonna share this in the chat great question john thanks with all that said you can with your free account still create using the portfolio is your course guide you can use and create and not connect it to a site plan and just use the staging domain like if you wanted to just use the staging domain that we shared which has dot webflow.io you can do that and not connect a custom domain site plans allow you to connect a custom domain like this project here that i've created called create something it's connected to a custom domain so then when i go to this createsomething.ltd it's going to open this webflow project and it's connected to a custom domain that i i have here has some 3d stuff here but yeah so that's what site plan allows you to do but you can absolutely use the staging domain if you want to any other questions um as an accidental question if you want to actually you can just pop off mute or you can drop your question in the chat okay says he has no uh well i think if there are no more questions uh we should be bringing this to an end uh thank you so much micah for jumping on the call and uh taking us through this uh building of this website your comments website it was nice watching and it was nice following along as well uh just for me to uh bring it up again uh we are currently doing uh something called solution challenge so you build solution uh and then uh you get some sort of gift from google uh the only the only criteria is you have to use one of google's products so uh if you have if you are interested in reading translation challenge you can reach out to any of the admins on the group chat on the whatsapp group chat uh and you can also reach out to me personally i'll be dropping my mobile number here you can reach out to me personally as well as reach out to anyone on the anyone on the on the whatsapp book chat so yeah thank you so much michael thank you so much webflow for making this possible for us and yeah we bring it to a to an end now have a wonderful day everyone thank you so much

Channel: DSC UI

Views: 763

Keywords:

Id: 3nfW6XzQAUA

Length: 91min 25sec (5485 seconds)

Published: Thu Mar 04 2021