Creating a pricing table in Webflow with Grid - Live Stream - 10/11/2021

hello and welcome to today's live stream today is october 11th 2021 it is a monday for anyone who's new here i do these live streams every monday through thursday from 12 pm to 1 pm central time and we go over everything webflow how to build layouts in webflow how to build interactions and animations in webflow and i also provide support via super chat so if you're stuck with something on your website you know feel free to drop a super chat and i'll be up i'll be happy to help with your site uh review your site or provide any insight uh about a personal project um any uh general questions about webflow i'll be happy to answer as well so yeah hope everyone had a great weekend i had a nice restful weekend spent some time with the dog and some friends so it was a good weekend and yeah so i see we have everyone here we have uh tazoware we have manuel we have dale hello hello i hope i hope everyone had a a great weekend and yeah so uh this is what we will be building today i'll go ahead and jump right in um so yeah with these live streams i'm just gonna jump in a bit more quickly so that anyone watching afterwards can just get uh the gist of what i'm kind of teaching in today's today's video so today we're going to be creating a pricing table and just a simple build it is responsive i can grab it here so well that part we'd have to set him in with so we'll work on that as well but as we can see when we get to tablet we have a nice design and yeah that looks good so yeah this is what we will be building today so the agenda today's october 11th welcome to everything workflow uh so from 12 to 12 30 we're gonna build a pricing table in webflow um from 12 30 to 12 40. i'm going to field any questions about the recent build and from 12 40 to 1 pm we're gonna have a general webflow discussion and i'll be taking uh any super chat requests hey excellence hello yep so uh it is yeah it has a nice kind of scale in interaction uh we can see here we're going to work on this because this is something that could be improved i'm not sure i quite like that it gets so squished around this kind of uh width here so we'll work on that we'll get that looking a little bit better but yeah this is just a scale in animation so yeah it should should be good and if you were building an e-commerce site this you could you could link these purchase buttons to a product or at some point if webflow does come out with subscriptions you could link out to that as well because this is kind of a subscription pricing table hey dylan hey yamcar oh we're getting the regulars this is great cool so let's go ahead and jump right in and start building the font i'm using for this is space mono and yeah so we'll start with a blank project as usual and for anyone who's seen these live streams you know the whole spiel uh we'll start with a section uh command k is quick find in webflow so if i hold down command k on my keyboard it brings up the quick find and i like to start off my website with a section so when building a website it goes you know you add a section then you add a container to the section and then you add your elements to the container and a container helps everything stay nice and centered within larger screens and it's just a web design best practice so we have the section the section always fills the entire viewport and i'll give this the class name section yeah for class naming my class naming convention i don't have a specific like uh very detailed way to name things i just use a capital letter for the class names but there are many different methods to name classes but you know webflow in the code actually makes everything lowercase and adds dashes anyways don't want to go on to that tangent but we have a section i'll set the min height to 100 vh just so we start with the full viewport and i'll add a div block and i'll set this to the container or we can we can add the container element as well so we can add webflow has a container element and i'll call this container and i'll set the max width to 1440 for larger screens and nice so we have the section and we have the container we can look at the navigator panel we can see we start with the body then we have the section and then we have the container so now we can install the font because i want to use the font space mono which is this and again i use a website called typewolf and he goes over the best google fonts so it's typewolf.com google fonts and i did like the space mono uh font here and just wanted to try something different for the font to see how it looked so we'll go ahead into the project settings in webflow and we'll go to fonts and we'll add a the space mono font it is a google font which is right here and i'll install all the versions of it if you had a custom font you could upload a custom font here as well you you just need to upload the ttf otf and eot and nwoff versions of the font all right cool so we have the font space mono and let's go ahead and start adding elements so within the container and for those of you who have seen my live stream i don't necessarily like setting display settings to the container because i like reusing the same container across different pages so i don't want the container to have you know specific settings that might be different on another page so within containers i like to add a wrapper so i'll add a div block and i'm going to call this pricing table wrapper all right and that div block fills the entire container and then to the pricing table wrapper so let's look at the navigator we have the section container and then we have the pricing table wrapper so yeah all my class names are capital case and i think i've just gotten used to this method because i'm a template developer and this this is what's required when building a template just having all the class names have be a capital case so yeah we have the pricing table wrapper and i'm going to give this a flex setting of flex and vertical and align center and justify top so what this is going to do is anytime i place an element it's going to be vertically centered within the pricing table wrapper so i'll go ahead and add a heading and we'll make it an h1 and this heading is going to say find the plan that's right for you and i also should have mentioned the inspiration for this site is this wireframe here so if you've been to my previous classes you'll know that i'm using this wireframe it's called um c wire and i got this from envato element uh you can check it out in the description area below i am an affiliate with envato elements so i do get a commission but embody elements has tons of resources and i found this great wireframe template it is a figma file and so it gives us plenty of content to recreate in webflow so today i decided to recreate this wireframe and that's what we see here and i added my own styling and made it look a bit nicer okay so the text is find the plan that's right for you so let's go into the project and i'll just type that in find the plan enter that's right for you and then we're going to style this heading so i'm going to give it the i'm going to select the global tag so usually i like to start start off with a style guide if i don't then i just need to make sure that anytime i'm adding a new heading that i'm styling the global tag and not adding a custom class initially that way anytime i add an i add a new heading it'll have that styling i gotta place it three and botto i got place it through envato uh i gotta place it through envato i'm not sure what you mean killa that's a cool name killa goin um no you don't you don't need to uh the wireframe it's just something i'm referencing but if you didn't want other assets like photography and illustrations you can go to envato elements and they have tons of resources uh webflow you can start a free account and you get two projects for free and then if you want hosting you need a hosting plan and if you want more than two projects in your dashboard you need an account plan uh cool so yeah let me go ahead and continue building so we have the heading and i'll go ahead and style it so i'm going to say space mono for the heading and i'm going to make it bold and what did i use for the font size here said 48 yep so 48 for the font size and then for the line height i like using the unitless and somebody actually gave me a tip uh recently on my youtube comment you can just add a dash so you can say dash one 1.3 oh no 1.3 and then the dash 1.3 dash yeah so i basically picked the wrong subscription oh um okay yeah oh shoot i'm not sure like what subscription did you mean to to pick up uh cool yeah yeah i'm not sure what that means but i'll keep going um so now we have the heading um and let me remove this class yeah i want to style the all h1 headings make the font size 48 uh space mono and a line height of 1.3 dash did you mean to purchase a a webflow subscription all right cool so we have the h1 heading all set oh envato element all right cool i think it's both envato like this uh killa envato elements there we go oh you might you must have maybe typed it in wrong not place it by envato okay i think i get it yeah maybe there's a similar subscription that sounds like envato yeah alright cool i'll i'll keep keep it moving here um so we have the heading and then um for this i am going to add a custom class because i'm going to center this heading uh cool gotcha um so i'll give this heading i'll call it pricing table heading and i will center this so now we have the heading that looks good and i'll go ahead and add a paragraph element and i'll style the all paragraphs and for this i'll set the font to 16 and 1.7 so we'll set it to space mono as well normal 16 and 1.7 dash for the line height and i'll just copy this text here and paste it in here and we have the text and for this text yeah i gave it a specific let me see here all paragraphs yeah it looks good so for this text i also added a custom style so pricing table paragraph so anytime i add very detailed styles i do like to give a class name to the element that way if i decide to use the the font styling of the paragraph on another page it might not have this specific detailed styling that i'm applying to this specific page oh gotcha okay yeah maybe maybe reach out to envato and see if they can help you with that so you can get the right subscription all right cool so yeah i don't know i don't know if it's an issue or anything killer but that's interesting yeah i want to make sure you get the right uh subscription all right cool so we have the pricing table paragraph and for the width i'm going to set the width to 72 characters so it's ch and that uh just truncates the text so it doesn't go beyond characters wide and then i'll center this and boom so we have that text and the other reason i gave this a custom class is because now i can add custom margin so i'm going to add like 40 pixels of margin from the bottom uh to the section let's add like 60 pixels of padding so there's some space at the top at the top and 60 from the bottom as well and nice so the site's starting starting to look good and i'll add a div block we'll add the cards now and i'll call this pricing table cards wrapper i'll set the width to actually let me see here yeah i'll set the width to 100 and i'll set the display setting to grid and one column so i'll delete the second row and we'll add four columns so we have four columns for each card and and that looks good all right so then in each card or in each uh grid cell i'm going to add a div block and i'm going to call this pricing table card that looks good and now we can start adding all the elements okay so killer wrote i had the same issue with webflow saturday i bought a site plan instead of an account plan with 10 project limit lo got it fixed thanks helpful yeah for sure the pricing can be a little bit confusing sometimes but yeah just reach out to support if that ever happens and i'm glad it got worked out um so yeah yeah it happens for sure cool so um so yeah i'll add these elements so we'll start with the circle at the top you'll obviously want to kind of fill you know add something to that circle but for the circle i'll add a div block and actually before i do that for the pricing table card let's give it a flex setting of vertical align center and justify top so everything we add is vertically positioned so i'll add a div block i'll call this pricing table circle and i'll set the width and height to 100 by 100 and i'll give it the border radius of 50 percent and for the colors i'm using this color palette here from coolers dot co and we'll use um for this i'm just going to grab the colors from here actually but that was the color palette that i used which was this one here and we'll just add that as a background so we have that circle so without adding 50 radius it's just a square but when we add 50 percent to a square we get a circle when you found out grids yeah for sure i don't know if you saw the video when uh when i started using grids i was pretty blown away grid is amazing so we have the circle and then we have this here i'm going to call this an h3 heading so i'll add a heading and we'll say h3 and then i'll style the h3 heading so all h3 headings for the global tag then i'll say space mono and for the text it's 24 and 30. yep that looks good and let me change the line height actually so i'm going to say 1.3 dash and unitless is just it works well for responsiveness because when you get down to different devices the the unit list is like a percentage almost and it helps to retain the the nice line height across uh different devices okay so we have that um now let's add the list here so we have this this list of items so for this i'm going to add a div block and i'm going to call this pricing table list wrapper yep let me set the flex setting to this to stretch actually no i don't want to do that no yeah center so for this pricing table i'm going to set the width to 100 then i'll add a div block in here and the price uh yeah so let's review the uh structure real quick i know i'm moving kind of fast so we have the section we have the container inside of the container we have a pricing table wrapper with a flex setting of vertical align center and justify top and then we have the heading so we see everything is aligned centered we have the pricing table heading the pricing table paragraph and then we have the pricing table cards wrapper and we applied a a display setting of grid to it with four columns and then in the first grid cell we have a pricing table card set to vertical align center and justify start we added the circle at the top we added this heading and now we're adding the price price pricing table list wrapper okay all right so in this list wrapper we're going to add another div block and this is going to be called pricing table list item okay and to this we're going to set the flex setting to flex horizontal align center and justify start and then i have a little icon so we see we have these kind of check marks and i actually got these check marks from the sigma file so i just exported these uh these svg check marks and then in illustrator i changed the color so it was a fairly simple process because i didn't want that blue color so let me just grab that the logo if i can find it here we go all right here it is so i'm just going to drop this into the assets panel right in here and there we have that check mark so i can go ahead and click hold and drag it into that div block and i want this to be let's see what size i set it to 20 by 20 okay so we'll set this check mark we'll set it to 20 by 20. okay uh so i had an issue how to add particle logo with interaction to home page then disperse element command on button tab uh yeah that sounds like some javascript would be required for that killer cool so we have the check mark there so i'm going to call this pricing table check mark okay and then in the price table list item i'm going to add a text block and i'm going to give it the class name pricing table list text and we'll give it the font uh space mono we'll set the size to 16 a line height of 1.3 dash okay and then i'll just type in this text so we have personal access okay and i'll give some margin to the right of this check mark of 20 nice and then i'll just copy and paste this list item multiple times and i'll give some margin about 20 from the bottom in the top and we'll go through so we have personal access self learning system limited overview up to two areas of interest two areas of interest and obviously you could write whatever you'd like here for your pricing table okay so yeah that was over done with that then we have this text here at the bottom so for this i'm just going to add a text block and i'm going to call this pricing table price and let's see what i did here for it it is 58 and 1.3 so for this it is space mono bold and 58 and 1.3 dash for unitless and here i'll say free that looks good and then we have a button so i'll go ahead in the pricing table card add a button and we'll call this pricing table button and we'll give this a border radius of eight and we'll we'll say purchase here for the text we'll set the text to space mono and 14 looks good we'll give it some letter spacing of about three and yeah that looks good alright so now i'm going to add some margin to everything so for the pricing table card actually i'm going to add some padding from the bottom in the top let's say 60 and actually to the pricing table card i'm going to add a border radius of 30 and a border and the color i'm going to say one eight one eight one eight so we have that border to the card and i'm gonna add about 60 pixels of padding and about 20 from the left and the right so everything's not you know touching the borders of the card and then for the circle so let me see here yeah that looks good for the heading we'll add maybe 20 pixels here and for the list wrapper we'll say 20 and here we'll say 20 as well maybe 40 here that looks good i'm liking that to this heading let's add 40 pixels and yeah let me just make sure so we have yeah no yeah 40 40 yeah everything's 40 actually so this should be 40 as well cool and yeah that looks good all right so that's our pricing table and let me say free here for this and looks good so now right click duplicate so we can duplicate this pricing table to the different the different grid cells so here i'll just say beginner say advanced and i'll say pro all right and yeah and then we'll change the price here so 99 249 and 399. okay nice so i'll just change the color here so again i'm grabbing these colors from cooler i think i used this color here for the background so to the section i'll just go to the background and paste we have that color so to the card let's give it the background of white and let's add some margin to the bottom of this of about 40. yeah it looks pretty good maybe 60. a little bit more space and let's add a bit of a shadow to the card so we'll select the pricing table card we'll click the plus and let me grab let's use uh this pink color and we'll add a shadow there we go and let's set the distance to 10 and the blur to 10. i'm gonna pick a darker pink here maybe this one that looks good all right um i'm liking that and yeah that's pretty much it i think are we yeah let me change the color of this purchase button to this orange and that's it so let's publish and see how it looks so yeah that was a quick one we did finish uh right at 12 30. um so it isn't responsive and yeah let's let's do a few things so to the section i'm going to add about 5 vw of padding i usually like adding 10 but for this example i'm gonna do five just so it doesn't touch the edges as we're resizing the the screen that's not bad actually i'm not too mad at that but maybe i can set a min width so let me see something here if i set it to that no we don't want to do that min width of 100 now how about min width of 80 percent yeah we'd have to set the min with well let's see 768 pixels that's not too bad i mean yeah we could use flex instead of grid let me just see how that looks so let me set it to to flex justify space between and if i do this that's not great but i can wrap it and yeah i guess there's not a great way to do that so let me undo what i just did and just leave it at grid i think grid works the best here and i'm going to add some uh more gap space between the columns so maybe 24. yeah that looks good yeah we can leave it at grid and then on tablet we can set the change the grid setting so edit grid and just make it one column so we'll just delete all columns but one that looks good let's set the width of the card to or we can set the width of the pricing card wrapper to 80 percent maybe 70 70 percent and for the grid we'll add about 60 pixels between the rows so i'll say 60 and bam so that looks good and yeah and then we'll go to mobile landscape i'll remove this set it to auto yeah grid is dope grid is dope um so yeah this looks good here on mobile landscape and then mobile portrait let's set the width to 100 and bam that looks good we'll set the text here smaller maybe 32 and that looks great and nice so for this text let's make it 48 yeah 48 ch and i'm liking that and maybe for this pricing table list wrapper let's try centering the elements so i'll say flex vertical and center no we don't like that no never mind that yeah that looks good i like it um let me see here yeah i feel like i want to add more more padding on tablet something like that it's looking good all right let's add that quick interaction to each pricing table card so i'll select any one of them go to interactions click the plus i'll say on mouse hover we're going to start an animation i'll click the plus and i'll say pricing table hover in we'll add in a an action we'll say scale and i'll scale it to 1.08 i don't want it to scale too much the scaling is pretty dramatic here if i were to say 1.1 it gets really large so i just want to say 1.08 and an easing of ease click save on hover out we'll start an animation i'll duplicate this and i'll rename it to pricing table hover out and i'll scale it back to one okay and save and then i want to affect every element that has the class pricing table card and when i hover we have that nice animation and that's it so cool any questions about this build i know i moved pretty quick um but just trying to get the build done within half an hour and i do like this font space mono it actually looks good with these colors it's a nice font but yeah webflow is super powerful look at that we have a responsive site liking it very nice let me see here yeah for [Music] oops let's set it to 80 on um mobile landscape here let's see what 100 would look like i see yeah 100 isn't bad actually 100 so if i remove this actually nope yeah 100 and then here this is 100 nice and let me set this to 70 a little bit bigger thank you dylan appreciate it yeah trying to level up my design game as well so i think the more live streams i do the better my design game might get it's all practice really this button doesn't have great contrast but the color palette didn't have too many dark colors the darkest ones or the highest contrast were or the more set the most saturated colors were the this pink one and this orange one here very nice cool so yeah that was the build um feel free to ask any questions if you're watching this afterwards feel free to post in the comment section below i'll be happy to answer any questions if you have any questions right now on the live stream feel free to ask again i do these live streams every monday through thursday from 12 p.m to 1 p.m central time okay so let's just recap what i did because i know i kind of went pretty fast so yeah we added the section to the body we added a container we added the heading or the wrapper pricing table wrapper the heading the paragraph then the cards wrapper we just had to build one card because then we duplicated duplicated it and then just changed some of the text so within each card we had a circle we had a heading an h3 heading and let me rename this to pricing card heading and did i yeah cool i styled the h3 global tag then we have the pricing table list wrapper and we have a list item inside of each inside of the wrapper and we have that check mark and some text and that looks good then we have the pricing table price right here and the pricing table button we styled the card a bit we added a border radius of 30. we added a one pixel width border with a kind of a black color and we added kind of this shadow here the angle was 135 the distance was 10 the blur was 10 and we picked this color color here all the colors were picked from coolers dot co and they just provide some really nice color palettes for web design or anything in general illustrations web design and all that good stuff cool so yeah that was fun it is raining over here um in wisconsin and yeah so if there's no questions let's look at the agenda so we built the pricing table any questions if there's no questions we can move on to general discussion and super chats excuse me i actually like the shadow let me see if it's the same one i used in the initial one i think in this one i used uh fec five yeah let me use this shadow here i like this one more yeah pops pops a bit more and then i use the same background color i think i did ffe5 yep cool excuse me thanks manuel appreciate it can i put in a super chat yeah for sure dylan feel free to remove this here and actually no pricing table wrapper you know that's good i see okay i'm just trying out a different kind of build here yeah i like that better 70 percent 80 for this i think i did 100 here not 80 for this cool that looks good all right so dylan has a question i'm going to try to move slower through my builds i kind of blew through that one kind of flew through that one okay let's preview this yeah so wheat yeah this is an interesting font space mono it kind of cuts off some of the numbers it's very cool yeah so far my favorites have been sign and space mono so dylan writes is there a way to build this however instead of being a menu to use a custom cart remember dylan links don't work in the chat so if you want to send it to my site contact and i can take a look through email so this this project will be cloneable there will be a link in the description area below so after the stream i make these projects cloneable and you can find them in my profile i'm going to switch this to say clonables rather than interactions and you can see all the templates we build in the live streams you can clone them from here you can also see some interactions that i've built i've built over 150 so you can kind of clone those as well if you want to check out my templates you can do that also there should be a new template coming soon but i just have a few right now i'm looking to kind of build up this template portfolio so dylan nothing came through so he says is there a way to build this however instead of being a menu to use as a custom cart instead of being a menu to use as a custom cart um not sure what you mean by that dylan uh to build as a custom cart the only car element webflow has i can go ahead and add it is oh we have to enable e-commerce i think oh just sent it okay so let's see it's just taking a second yeah i'm definitely going to look up how to enable links it might be good that links aren't enabled because you know spam could come through and it could get a little bit hectic all right so i'm taking a look here all right so dylan is referencing this interaction that i built so he asks um is there a way to build this however instead of being a menu to use as a custom cart okay so that is a good question that's a great question let me think about this for a second maybe so let's enable e-commerce on the site and i'm going to add a cart element let me place it at the top and for this car element let me open it from the right so sidebar right yeah dylan um this might not be so easy to use as a custom cart yeah so webflow currently doesn't let you really style the cart other than having the cart on the right the left or as a modal so here as a modal if we click the cart it opens like this if we do from the left it opens from the left if we do from the right opens from the right um yeah uh yeah you probably could do it with custom code but this would get this would start to become a very long live stream and you can also do it from the top yeah from the top to the bottom and align it to the left you can have it something like that um that's a good question let me see something let me put this in the section um if that's a bit complicated i have another question said instead that's easier yeah let's go with the easier question first dylan this one i think would require custom code and we'd probably have to target the commerce cart wrapper what's a node where's the class what class would we use yeah look it's if it's not even a class here unless yeah uh where's the class yeah um hmm yeah i don't know i'd probably google that uh dylan i know i've gotten that question before actually in support when i was doing support and that would require some in-depth custom coding i feel you'd have to know which element to target and if you did know what element to target you could potentially place the cart inside of a div block so [Music] let's see where where is it yeah so you could clone let me clone this um or let me open it in webflow so you could potentially try to place the cart inside of this menu wrapper if you could do that through custom code and then the effect would work because this is just a lot animation that i timed with this right sidebar so that when you click the slotty animation plays and and the bar opens up yeah not sure how helpful that was but okay so dylan wright basically a custom cursor a circle that inverts color on hover of a button for example okay not that much easier but hopefully it might be for you okay uh so oh tommy if you check the site in developer mode what are the classes oh exactly what i was thinking oh yeah for sure yeah tommy you could probably might have some better luck finding what to target there so dylan writes basically a custom cursor a circle that inverts color on hover of a button for example yeah there is i know there's some css that now does like that color and version but i'll show you how to do that in webflow um let me just create a new page and start adding elements here i'm just going to create a section and yeah section section two well center center everything and yeah let's add a button let's make the button 300 by 200 just by 100. um i don't know why i'm styling it button uh yeah okay so we have our button okay wait a custom cursor with custom interaction on click john how would you do that um so basically a custom cursor circle that inverse color on hover of a button for example so yeah so we go to the body um so yeah we'd say none for the cursor of the body so when we preview there's no cursor which you wouldn't want to do obviously but i think this would require some custom code so a custom cursor there is a bit of css you can just custom cursor for website um oh look here override the default cursor for elements i think that's just going to go to the uh yeah no we know how to do that that's oh wait here we go a guide to custom cursors and workflow um yeah okay yeah so i do have an interaction where i did this actually um so for example okay yeah so i did this before actually uh so we're just going to create um let me hide this button for a second we're just going to create an element so add a div block and we'll call this circle and we'll make it i don't know 50 by 50. give it a border radius of 50 percent give it a width of three and let's get some colors from cooler let's do this red or help with this blue okay so we have that and then center center then i'm going to add a dot in here i'm going to set this to 10 by 10 50 percent and no 50 and the fill that blue color okay so we have that element so now we select the circle go to interactions click the plus and then you would say on no you would you would select a section hmm let me read this here so you would yeah okay i got it great custom wrapper first wrapper div contain top coat width and height okay okay all right so i'm just going to try to replicate what they what they say here so um [Music] let me put it in the body here so it's right up there so circle i'll say position absolute so we have that circle there go to interaction and let's see here page trigger okay here we go yeah so we have the circle let's go to the page trigger uh thanks uh tommy yep i should take a look at the chat here mouse movement viewport so play mouse animation we'll start an animation and we'll say mouse move in viewport at the beginning we'll start it at zero percent and then when we move to the right we'll say 100 vw or 50 vw right okay this should actually be negative wait a second yeah negative 50 vw and on the y we'll say negative 50 vh so we're using viewport units viewport height and 50vh okay so what we need to do uh is set the circle so apply uh shoot how do i center this so zero no okay so let me try placing this in the section and set it to relative okay yeah that worked but i'm curious if we scroll okay all right so yeah we want to give this a high z index oh i see um let me bring back the button so let me give this a high z index of a thousand or as you mentioned there and so the button so we have the button yes this does need to be absolute absolute and auto yeah there we go okay so for this button there we go yeah it seems to work let me see oh right um let me link out this button here so let's just do google or webdav.com this is the tricky part when you when you when you're using the custom cursor over elements um it's not clickable because it's a it's a div block so let's see what webflow has for this yeah they don't seem to have a good oh making the default cursor disappear okay oh yeah i did that oh make sure cursor elements don't interfere with interactive objects create an html embed element somewhere on the page and put the following code inside oh let's try that cursor wrapper that's it do we have to give it that class no let's try adding that piece of custom code see if that helps no okay i missed something since your cursor elements are located in a fixed wrapper fill the whole screen you need to make sure that lost over and click through the rest of elements of the beach adding hover states for links okay create and select a new link from drop down choose all links scroll to the bottom choose none from the list of cursors this will prevent the default cursor to appear okay yeah i would read through through this dylan um because that's that's let's see how do we remove it so cursor wrapper interactive objects hmm i'm wondering if i need to change this to i call this circle so let me just say circle yep that was it okay that's pretty awesome and i can also okay so i see what they're saying so for this button go to the cursor and just say none okay yeah and then we click perfect that's very cool i might use that effect more and if we wanted to get even more creative we could do something like select the uh the mouse movement viewport yeah let's set the smoothing to a little a little bit higher to make it really nice and i could select the let me call this circle enter go to the interaction and we'll move the circle enter so we'll say 48 negative 48 vw start it here and then we'll move it 48 vw just want to try something here maybe 49 negative 49 vw oh that's trippy not exactly what we're going for so could i use like decimals 49.9 and then move circle enter negative 49.9 the h okay that's 50 oops uh yeah just messing with this real quick circle circle inner circle yeah i was just experimenting there but yeah that's basically how you do it dylan hopefully that helped you definitely want to set the z index higher i'm not sure why images would still be like below it it's kind of a trippy cursor i kind of like it for some reason then you get to the center it's like two circles whoa you could do some real cool things with that reminds me of like a video game or something where things are like moving kind of in a weird way and then you get to the center and it's like bing you have a cool sound effect like you've arrived at the center it's like that circle's trying to find the center there trying to align with the larger circle alright that was fun hopefully that answered your question dylan but basically there's a great article i'll post it here in webflow in the chat that talk talks about how to do it so yeah basically it's a mouse move and viewport so first you want to create your elements so the one thing that i am kind of curious about let me add two sections so we have some scroll and let me delete the circle from here and let me publish i just want to make sure that the even if we scroll yeah so that's that was my concern so i think this has to be fixed this circle has to be fixed they probably said that in here yeah fixed position fixed yep and they also gave you the class name cursor wrapper yeah so it needs a position fixed and you're good to go yeah and they gave it this cursor wrapper which why i got a little confused here because i gave my my cursor the class name circle and they have a lot of nice custom code to make sure that it works on mobile well yeah you just want to add this this piece of code so that your links are clickable all right cool so i think that's it for this live stream hopefully that was helpful dylan um i learned something new for sure i might be adding custom cursors more often so thanks for bringing that up and yeah just to recap this is what we built today just a nice pricing table if you had an ecommerce site you could link out to different products this would be a collection list if you did have an e-commerce site you could create this in a collection list okay so that is it for the live stream thanks for bearing with me at the beginning i know i was going very fast so just getting used to like how i want to share this information in a way that's easily digestible for me i just try to condense all the information within 30 minutes so i think that's why i tend to move a bit quicker so so yeah thanks everyone for joining thanks manuel thanks dylan thanks tommy thanks tazer warrior for joining excellent yao amkar killa thank you for all being here and yeah i will see you tomorrow and we'll have fun building in webflow again tomorrow have a great rest of your day thank you peace

Channel: WebDev For You

Views: 504

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design, webflow grid, website grid, webflow pricing table, website pricing table, grid in webflow

Id: k9XV-fxNv6U

Length: 67min 0sec (4020 seconds)

Published: Mon Oct 11 2021