8 Awesome Custom Code Hacks for your Webflow Project

hey guys my name is Jose Oquendo I'm a technical based web designer and web flow developer and in this video we're talking about custom code now I know that web flow is leading the quote/unquote no code revolution and I'm a strong supporter of that big believer I use this product every day in my business but the truth is that with a majority of my projects I end up using a little bit of custom code to tweak certain things especially CMS collections or CMS items so this tutorial is really all about that I also threw in a couple of just for fun type of stuff that you can't do natively in web flow and isn't really necessary but like I said just for fun and then I also want to let you know that I'm partly doing this tutorial to promote I just launched a new scalar class called web flow for beginners so this tutorial is going to be for intermediate or advanced users if you're a beginner you're just getting started you know zero this is probably not the video for you but that skill short class might be a helpful thing to take and so I'll have information in the description box and I'll plug it one more time halfway through this tutorial all right with that out of the way let's get started Before we jump into implementing our first piece of custom code I just want to offer you a few resources not if you're like me I know just enough code to totally break a website and so I often need to refer to documentation and so here are four places where you can find that and these are really really helpful when is can I use com now can I use a the question is okay if I'm implementing some custom code is it widely supported on all browsers so for example one of the ones that we're going to be using shortly is a writing mode here I already pulled it up and green represents em a piece of custom code that would be supported wildly across all browsers and red would be not supported so you want to double check to make sure that the solution that you're trying to use is widely supported and if it's not you need to have a fallback or just not use it second one would be MOT so Firefox now Mozilla is a non-profit and it's made by developers for developers as assert a glein but I think because of that their documentation is really good and super easy to understand definitely three schools is another one that is just very like elementary like the the foundations of HTML and CSS so very very helpful and then finally CSS tricks I think the founder is Chris coy gay just really really helpful he's got a very interactive audience who will post comments and helpful things like that he's always updating blog articles and just really really helpful to find how to implement things alright so those are four races resources make sure to link them in the description box for you guys to check out all right so let's jump into our first implementation now a trend that I've seen over the last several years is using vertical text like the one over here on the right hand side now there are times where it's really easy to implement just using a transform and rotating at 90 degrees but there are times where that just doesn't work or it really interferes with the layout and so I found a CSS property that makes this really really easy to do if I jump in too much so less speaking of resources I pull up the CSS property for writing mode in the month Scylla documentation and down here you can see these are the keyword values that we can use with writing mode and then down here we actually have this little handy chart that shows us what it should look like and so this one here is exactly what we need so a vertical RL that needs to be the value that we use with our new CSS property so let's jump into web flow so a couple of notes first is I want to make sure I'm targeting my combo class for this over line and not the over line class itself because I use over line elsewhere on the website and I don't want all of those to be vertical I just want this one so I'm going to copy that to my clipboard alright the next thing I want to do is I'm actually not going to go into the pages and start writing custom code here I'm actually going to go into the Navigator and add embed HTML embed and the reason for that is because let me just scoot that up to the top for a second the reason for that is because by adding the CSS in the embed I'm actually going to be able to see right here in the web flow designer all of that custom code take place so I don't have to polish it and then look at the live website I can see it happened right here in the designer and that's really really helpful now I will say that when I'm ready to launch a project I will often move things out of the HTML embed and put them into like the project sightings custom code it's applied site-wide but while I'm working in the designer it's helpful to see everything take place right there all right so let's open up the editor and the first thing we need to do is add some style tags that's what lets the browser know hey this is CSS so we have an opening and a closing tag and then we're going to add our CSS class alright so there is that's what let the browser know here we're targeting this specific class we need opening and closing brackets and then we're going to use our writing mode CSS property writing mode and then let's go ahead and go to the months of documentation and copy the actual value paste it in and then we need a semicolon to finish it off save and close and now that our text is a vertical we didn't need to use a transform and it looks great next up is blend modes now if we've ever used Photoshop or sketch or something like that you've probably used a blend mode to have one layer interact with another what do I mean well notice that the header has this solid color gray background but if I go to my live site it actually shows the background photo underneath that's because the solid layer is being multiplied on top of that background photo and if I scroll down to the call to action section below it actually has the same like thing applied to it now they actually have two different CSS properties applied to them and they're used in different situations so I want to show you both alright so I'm going to go into web flow and let's actually apply to the call to action section first because it's the easiest I click on section and go to my style tab scroll down to backgrounds I notice that I've got two background layers one is the photo and one is that dark slate solid color background so what I'm going to do is apply a sickness property called back on blend mode to make those two layers interact and have the top layer multiplied on top of the bottom one let's go ahead and copy that combo class click on the embed it's going to zoom us up to the top it will scroll back down so we can see what we're doing and then open up the embed there alright so I'm going to hit enter a couple of times add our CSS class opening and closing brackets and now we're ready to go like I said the property using is called background blend mode okay and then the value we want to do is to multiply okay I think I spelled everything directly all right so now those two layers are interacting the top one is being multiplied on top of the bottom one and now the background is nice and dark and it's easy for us to read this white text okay the next one is if we scroll back up to the header it's actually got a little bit more complicated configuration because you notice that I've got the header element and if I go to the style tab it's got the photo same photo applied to it I think then I've got another background element and finally I've got a header overlay that has a solid color all right so I want that solid color to be multiplied not only on the header but on this background element as well so in other words I'm trying to multiply on top of everything below it so I can't use background blend mode for this specific situation I want to use mix blend mode all right so let's copy this class open up our embed we're gonna go ahead and reference it again with opening and closing brackets and then we want to use mix blend mode instead of background blend mode but we're going to use the same value multiply all right so now that solid color gray background is being multiplied on everything below it and that way we get this other kind of like zoomed out effect that I wanted for my for my header so for the select space of custom code we're going to be working with CMS collections if I hop back up to my live site this section is actually controlled by a CMS we've got this really fun staggered look where as you scroll down the photo kind of changes placement it hops from the left to the right and so forth alright so if I wanted to do that in the designer I would come out here and what I've done it is with subsection I've used flexbox to create that that layout and what I simply do is click on this little icon called reverse and that would reverse the layout for me but the issue is that it's actually applied that to all of the sections and not just this one well but that's how collections work is any change that you make inside of a collection is going to be applied to all of the children there's not a way for me to target any specific child inside of that collection unless I use the custom code alright so this is where the beauty of the pseudo class called end child comes in so if I go to this one right here and click on subsection remember a subsection is the class where I want to apply that reverse function to so I'm going to copy that class come back out to my HTML embed scroll down so that I can see if my work is working correctly and let's go ahead and copy that or paste that class there to my opening and closing brackets and then inside we're going to use Flex direction is the CSS property row reverse so it's this would be the exact same thing as if I clicked that icon as if I could just click Save and close you see that the same thing happened so that icon when web flow spits out the CSS it's using that same CSS property and value alright but that's not what we want right we don't want that change to happen to all of them so whether we do that is with the pseudo class called F child pseudo means actually I don't know exactly what it means but I know that it's kind of like a class that comes after the original right so with sub section I'm going to add a colon and child and then opening and closing parentheses and I want to say even all right so what I'm telling the browser is I want to target subsection but only every other even subsection so now if I click Save and close and I said the change is only being applied to the second one and if I had a fourth one it would only be applied to this one now just think about the magic of this is this is a CMS collection but we're making a change to just this specific subsection that's beautiful but we're not quite done because if you'll notice the way that these are laid out is the white box kind of overlaps behind the photo and here it's moving beyond the browser so we need to fix that all right so with this selected let's go ahead and copy our CSS class hop back into the embed open the code editor add the class width opening and closing brackets and what we need to do is actually I should show you how about how the original is bow so if we look at the original belt we can figure out okay how do we make that change so the way that I had this overlap is I used absolute positioning and then I had it start negative 50% from its parent element its parent class so normally if I had this at 0% the box would be right here but by making it negative 50% it's over a lot being behind this photo so what I need to do with this one is just move that negative 50% over here to the right all right so let me go back to the embed so what I need to do is say alright left needs to be 0% instead of 50 and right needs to be negative 50% well we're gonna run into an issue we'll first wanting to fix that misspelling where that's gonna apply to every single one of these classes and we don't want that to happen either right so all we can do is we can actually just copy this with the pseudo class included paste it in front of that one and kind of like what's that telling the browser is hey I want you to target subsection content wrapper but only if it's the every even child of subsection all right so now if I say then close you notice that it's only being applied to this subsection all right one more thing now if I click on here the way that I'm have set this up is that it's got a margin of 33 percent because remember technically the that white box starts over here so I need to push the content over to the right that this shows up correctly all right so now I just got to move that 33 percent over to the other side so I'm going to copy this class go out to HTML embed scroll down and we're gonna do the same thing where you're gonna add the class we're gonna copy and paste this at our opening and closing brackets and then we just need to change the margin so margin left needs to be zero percent it needs to be margin right 33.33% right so now this has moved into the correct position and we've got that nice staggered look that we were going for all right now that we've modified a item inside of a collection you've probably realized how powerful the pseudo class of length 10 be but it can actually do more so I want show you two more examples before we move on if I scroll down to my FAQ section I've built here I really like how this looks but I kind of want to remove the bottom border from the last child if I go out to my life site I just like how it looks with having and I like this more empty space below alright so but how do I remove something from the last child and I've got answered my own question in the response all right so let's hop back into here and what we're going to do is target the class that has that element applied to it the bottom border so FAQ outer is the class that has that bottom border attached so I need to copy that class open up my HTML embed here go ahead and add that and say I think it's border I'm remembering the CSS property correctly border bottom none if I did that correctly the border should be secure from all of the children now again we only wanted to disappear from the last one so interestingly enough there's kind of like a similar version of nth child called last child so I just add that : last child and hit save now what way did it it's still subtracting the border from all of them and the reason for that is because if you look in the Navigator FAQ outer is the one we're targeting but really there's only one of the FAQ outer inside of the FAQ collection item so in other words this one is the first last and every child inside of FAQ collection item but there's more than one FAQ collection item so really what I need to do is get the last child of FAQ collection item and then target FAQ outer inside of it alright so let me just show you what I mean instead of talking about it if I copy this class and then let's go ahead and close all of this down get to the embed scroll back down open it up so what I want to do is target that FAQ collection item class the last child I can remove that from here and now what we're telling the browser is hey with a last collection item go ahead and add a border bottom up none to the FAQ agar now that I've saved that you'll notice that all right our border is now gone from that last child all right I want to show you one more thing we can do with a similar pseudo class to Ed's child if I scroll down I've got this section here that has this just like wall of text and typically when I have this I like to dress it up in some way so that it doesn't feel so like bland so if I go out to the my life site you notice that I added this little drop cap I drop caps or when the first letter of that piece of copy or wallet text if you will if that first letter just has a special styling attached to it so that kind of dresses it up it reminds us of kind of like elegant traditional newspapers or like old manuscripts just kind of gives it that sense of elegance or professionalism so I really like that so I go back to web flow I want to target this drop cab CSS style what I can do is go to open editor and in my class drop cap open and closing brackets and then I've previously copied all of the CSS style for that so that dropping up just to save us time since really the whole point of this is to target that first letter if I hit save and close you'll notice wait a minute its targeting the entire paragraph and that's because we haven't added our pseudo class yet remember the class we're using is first letter all right so now just that first letter of the paragraph is being targeted and it gives it that nice beautiful vintage look if you're watching this tutorial and you're feeling a little bit overwhelmed about how complex it is I don't blame you I'm specifically speaking to intermediate or advanced folks here and it might be an indicator that my web flow for beginners class on Skillshare might be a better fit I tried to speak to folks who have zero knowledge of HTML or CSS zero knowledge of web flow and what we do is together we build a one Paige portfolio website for a photographer and over about four hours or so I kind of carefully walk you through from the beginning how to do that so that you can get introduced to using web flow and and becoming a developer in general now skill shot is a paid membership model so it's about eight bucks a month or so but if you use the link that I've included in the description box below you actually get two months of Skillshare for free after which you can came to them you can watch my class not having to have paid anything so I encourage you to check it out and now let's get back to the tutorial the next piece of custom code that we're going to cover is object fit now what object fit lets us do is control how an image responds to its style like if it's set to a specific height or width or if its parent element is controlling how its sized we're kind of able to tell the browser here's how I want you to display now w3 one of the resources I mentioned before has a great documentation page on this so I'll show you this is like the original photo this is what it looks like when it's sized to 200 by 400 pixels so quite vertical and here's what it looks like with object fit cover applied so it's kind of like how we can use the cover property with background images but we're applying it to image elements as opposed to background images now with a specific example we're working on this logo grid now when I've worked with clients on logo grid typically it's for like they want to show who their clients are or they want to show like who has left them reviews and they want to be able to upload these so this is actually in a CMS collection so you notice that I've got a collection I've already added here and so remember that one change we make to one logo gets applied to all of them and the issue is that the client is going to be uploading theirs to through the CMS and they're not going to necessarily care about what size or uploading or ratio they're uploading it they're just going to upload whatever logo they have because they don't know how to do anything different so on our end we got to make sure how do i how do i code this or develop this so that these show like they kind of fit together as a family they're their size to purport to each other well object fit makes this super easy so what we're gonna do is I previously figured out kind of what I would want the maximum width and height to be so I know I want the maximum width to be around 65 pixels and the height to be around 52 and the issue is you see that some of these are getting really stretched and looking rough so what we can do is we can copy our CSS class go up to HTML embed scroll back down so we can see what we're doing and then open up the EM bed call our CSS class opening and closing brackets let's curl them so we can see what you're doing and this is where we use the object fit CSS property oops sorry it gets about okay and we're gonna be using the value contained now what contain does is it makes sure that if you've set it to 65 552 I'm gonna resize the image so that it's contained inside of that box and that way the whole logo is gonna show up it's not going to be cut off or look weird so now we've got a nice logo grid that looks like everything is kind of proportional to each other all right now if you noticed earlier in the website we've also got these images and they're set to a specific ratio and this one in particular is a really vertical foot and it's looking super scrunched alright so what we can do is use object fit for this as well so I'm going to target image 100 this particular CSS class click on my embed open the editor and we're gonna add this right below here and we're going to be using the same CSS property object fit but instead of the value contained we're going to use cover just like they did in the documentation for w3 all right so now that I added cover now you see that this image is showing up in the correct ratio and let's agree with this last section we're gonna be working on two more pieces of code a media query is one but first I'm gonna target align clamping what line clamping is if I go back to my live site when a paragraph is not truncated to a custom amount of lines in this case - if I hop back into my designer you know I said the paragraph is actually quite large and if I open up the CMS collection I've inputted this really big paragraph here into the teaser blurb section and it's showing up here now it's great about this is if I was a truncate this the two lines no matter what the client enters into this field it's always going to have a nice uniform seamless look because I'm truncating in that text just two lines the way I'm doing it is using this method here in CSS structure now I told you that I'm always looking at documentation it's really really helpful and he calls it the weird a WebKit flexbox way but he's got this note down here that says that it's actually gotten a lot of browser support and it's not a little bit more mainstream what we're going to do is actually copy this code here and make use of it ourselves so I copied that to my clipboard go back out and I've named this line clamp just to make things nice and easy I'm gonna click on HTML embed scroll back down so that we can see our work open it up and right below what we just added let's add line clamp paste and our custom code and then I want to make sure these line up nicely this personal preference there and then the one thing I want to just draw your attention to is this second line and what this tree represents is how many lines we want to clamp it up and I personally just wanted to all right now it's not quite looking like it should and that's because with line clamp selected we need to make sure that overflow:hidden is selected so what that means is that anything that's showing up outside of this box is going to be hidden from view and now it's showing up exactly as we wanted and it's even adding those two beagle ellipsis at the end to indicate that the text is cut off this is just really really great because like I said the client can enter in as much text as they want but we're gonna have this nice uniform look now the thing I should mention is if if you're using a rich text block for your blog article this method does not work with rich text blocks it's got to be just a regular paragraph field in the CMS but what I always do person with my clients is I've got a rich text box for the blog article then I've got a regular paragraph field for the teaser or blurb and I use the truncating on it last up but definitely not least is media queries now what media queries let us do is create custom break points break points are when we tell the browser anything above this style the website this way anything below it instead style the website this way now the default break points for web flow are up here so desktop is of course the first one if I hit number two I'm at the tablet version of the break points three is landscape portrait and then four is portrait mobile like I said that correctly anyways outside of that without using custom code we don't really have access to breakpoints so let's take for example this blog right now if I come back here to my live site here I'm looking at it at this 27-inch monitor and it looks great that's because it's nice and big but what if I was looking at this on like a 13-inch laptop and those are about 1280 pixels wide or so so if you're looking in the bottom right corner there once I hit that diamond you can see that it says retina MacBook or MacBook Pro earlier 13-inch models that's kind of like a smaller laptop and so what if somebody was looking at this blog read at this size maybe I want this to be a two column layout instead of three columns and the problem is if I made that change here it would be the change for all desktops so I can't create a custom break point of that 1200 80 pixel mark unless like you use a little bit of custom code alright so what we're going to do is we're going to use the documentation for media queries in w3 and here they've got a great example of how this works so what this line basically means is saying hey if the screen is 600 pixels or below I want you to hide or set the display to none to this dip that's kind of very close to what we want so we're going to copy that open up web look go to the HTML embed open that up and we're just going to copy and paste that right in there and then we need to add a closing bracket and then anything inside of this is only going to be applied when the screen is this size now 600 is a bit small remember we won 1280 pixels all right I wanting to figure out what are we going to change alright so with this grid I use flexbox and I styled the blog children to be a Flex basis of 33.33% that means that this flex child is only 1/3 the size of its parent and what I want to do is at that smaller screen size at 1280 pixels I want the basis to change to 50% so that now it's a two column layout and it fills up the screen a little bit more nicely so let's change that to 33.3 to be again copy that class click on our embed and inside of that media query we're gonna add our class opening and closing brackets and we want to use flux basis and instead of 33% we want it to be 15% save enclose I'm going to scroll all the way down now nothing has changed and that's because this current this canvas is browser lack of a better word is wider than 1280 pixels but if I grab that and scroll it in at 1000 to 80 pixels it's going to change to that to column Leia because it's finally hitting our media query so if I hover over that little diamond there but it's still showing up as two columns and once I exceed it it's back to that nice three column layout for larger desktops so that's how to create a custom breakpoint with media query all right that does it for this tutorial I hope that you enjoyed it I know that this was a little bit more of an advanced topic but I know that I've appreciated learning how to particularly customize those CMS collections so I hope this is useful to you by the way I'll make sure to link the preview URL so you can access the designer and see how all of this is built and and that HTML embed I added some comments to make it a little bit easier to understand what does what if you're welcome to log into that check it out and even steal those things for your own projects if you did enjoy the video and you want to see more I encourage you please subscribe hit the notification bow so you get notified of future videos I'm thinking about doing one on schema markup next but if you have any recommendations or things that you'd like to learn about please let me know in the comments and I'll definitely consider it and hopefully I'll see you guys in the next video

Channel: Jose Ocando

Views: 22,856

Keywords: webflow, tutorial, no code, nth-child, object-fit, blend modes, web development, website development, developer, media queries, line clamp

Id: nd4bLjt-UuI

Length: 31min 57sec (1917 seconds)

Published: Sun Sep 22 2019