 What's up everyone? I'm glad to be back. I've been away for a little bit. That's because I was moving homes I got a new house So been setting up everything you might notice a new studio been setting this up while at the same time Wrapping up a big project for a global brand and now I'm so happy to be back where I feel like I belong Which is with all of you my fellow web creators. What's up everyone? I'm Jeffrey at lightbox and in this video I want to revisit an older video I made about where to add CSS on elemental websites because since then well My views have changed a bit and I've even changed a lot of how I add my own CSS I got a new process now So I want to make a revise or revisit it video on adding CSS to Elementor now first off my Inspiration originally came from watching other Elementor tutorials Showing all of you to add your CSS in places. I felt it should not go Specifically in Elementor widgets now inside every Elementor widget there is a space to put CSS But this is a place. I fully believe CSS does not belong and the reason for that is whenever we're adding code to our website It could be CSS JavaScript PHP whatever kind of code it should be clean Organized and centralized and the problem with adding CSS and Elementor widgets. Well, it's none of those It's all over the place it gets spread out Now might not be a big deal when you add it to one widget Then you might add it to a second widget, but you start to add it to widget to widget It becomes a big mess CSS is spread out all over the place and especially if you're using the selector Like I've seen a lot of tutorials show if that makes using inspect elements a headache right there Well, we always want to do is keep all of our CSS in one location Make sure it's clean and make sure it's organized that way if it ever needs to be changed Or if another developer comes in they could access it quickly and I'm gonna share from personal experience Inheriting a website and fix someone up that has CSS spread out through all the widgets It's a super big headache because now we're just clicking clicking clicking trying to locate stuff And that's where my motivation for that video came from now in my older video I showed where I add my CSS and my recommendations and it's an old-school way That would be inside the child theme and that would be in the customizer now the customizer I always put my CSS there whenever I'm developing a site because it doesn't get cached and you could see the results right away Right when you add it in I could see how it looks on the website I don't need to save or do anything like that and then I put it inside the child CSS When it's all finished that way it's all inside one location But after making my video I had a lot of comments and a lot of you were asking me about hey Did you try this plugin called code snippets and at first? I'm like I tried plugins before in the past and I have it was several years ago I tried using plugins to add my CSS and other code and well, they were older ones I found like I didn't really need them so I kind of just dismissed adding plugins But when several of my fellow web creators are reaching out and saying hey check out this plugin It's pretty dope. We like and we enjoy it I gotta give it a try and I gotta say thank you to all of you because you guys talked this old dog a new trick I tried it out and after using code snippets. I ended up getting code snippets pro I got the lifetime license and I have officially made this part of our stack my stack and my teams So now all sites we're building going forward This is going to be how we implement our code and the reason why I made this part of our stack is Because it ticked off all the boxes and made our code and everything clean Organized and centralized and it did it in a more effective way than what I was doing Doing in my old school way with the child theme and customizers So I want to go ahead and give just a really quick look into it and show you how it Transform my old school ways into a more productive and easier to use way I'm going to use my personal website for this example right here Here's our website if I go to my customizer and if I go over to my CSS We're going to see all my CSS here now. I like to keep everything organized and we have a process with it We always start with our globals Then we go into the header then we go into the footer Then we go page by page that way It's easy to locate anybody like myself or another team member needs to go in and make fixes It's organized. It's easy to find and we can see it right here Now I want to show you the code that I have added back here. I Added some custom functions So I'm gonna go to my theme file editor and you can see here This is my child theme right here if we go here to select themes. I got two of them You got the main theme you got the child theme and if you're wondering why even add a child theme and the reason is I Could add CSS here and I could add some custom PHP here And if I were to add this inside the main theme the parent theme when there is a theme update All of that will disappear any custom code that I add in there will be gone from the update So by using the child theme while the code stays right there and the main theme gets its update This kind of just plugs that code into the main theme So right here. I do have some custom snippets for some Functionalities that I added to my site. I have this functionality here, which is Removing the toolbar for anybody who's not an admin that way members and people could visit the website and not see the toolbar up here I got another function right here. This is adding a CSS class based on if somebody's logged in or not I have a small little snippet here and this is to fix the video aspect ratio in Gutenberg So that way the video show up, right? I got another little snippet right here and see each one of these They're all their own functions right here and this is how I always did it But now this is how it's gonna look like by using code snippets It's going to clean it all up first off if I go here This is a testing site by the way This is built on my local host if I go here to customize You're gonna see I don't have anything it's all cleaned up right there. There's no code inside my customizer and Everything still looks the same. So we're all good on that. Let me go ahead and close this And then I'm gonna go to my back in and don't worry about the updates That's only because it's a clone site right here. But if I were to go to appearance first off Let me show you my themes. All I have is one theme now if I go over here to my main site You see I have to have two themes I need to have the main theme right here and the child theme and this is so I could add those custom snippets But now I don't even need a child theme and I like that right there. I like keeping things minimal and clean I love it. All right. So over here. I'll go to code snippets Select on this right here, and I could see all my snippets right here all my code So first off if let me go ahead and show my main site right now And I go to my customizer So here I got all my globals and this is why I create custom classes and things that could be used throughout the site Now right here, I got my globals and I could put them all in one spot and I could just keep up inside here So here's all my custom and also at the same time. It looks like a better cleaner code editor So I got it all right here. Let's go back to all my snippets and right here I could put my header and footer CSS I could break it up by page or I could combine it together However, I want to do it but what this has done is it makes it a whole lot easier for example For posts for doing single posts always write a lot of CSS whenever Customizing a blog post because he can't really do that with elements where So in order to make my blog posts, they always have a lot of CSS a lot of customizations And now if somebody needs to edit if I need to edit a team member needs to edit or if the client leaves You know clients do leave we do move on from each other at times and they hire another developer down the line How happy are they gonna beats jump in here and find? Hey, the CSS is right here If they need to change anything in the blog and now for the PHP Let's go ahead and open this up for comparison This is the current PHP that I have added in the child theme now with code snippets I have each one of those functions in its own file right here in this own tab. So Say I want to make some changes right here Inside this one I could go in and make whatever changes I need Also, if I want to turn off the function I could just click it and turn it off. How dope is that? It's so much easier. It's organized and Look at the old school way it was tried and true and it worked It worked great for me for many many many years But this right here has changed the way that I'm gonna be adding my code to websites now There's a lot more that could be done on this. There's like exporting the code. There's cloning. There's adding tags There's a lot more even this priority which you could put code on top of the other which one gets top priority We're not going to go too deep into this It's not a full-on tutorial for code snippets and code snippets pro But if you would like to see a tutorial and if I got enough people requesting it Then I'll go ahead and make one So make sure to drop it inside the comments if you want to see more on this now There is a free version, but the free version is a bit limited like back here all we can see are The PHP functions and HTML that could be added Unfortunately, if you want to add JavaScript or CSS it's got to come with the pro version now There are hacks around this and ways to add CSS But if you are looking to build websites and if you're going to continuously build websites This is an investment that I would highly recommend for others It's one that I made myself and it's not too much now It's nothing to sneeze at but there is a lifetime deal on it and on the lifetime deal So you can see this is the one I got right here I got the large one because we do build sites and I've I'm committed. I've already done my research I'm very careful like one thing about me I'm very prudent when it comes to spending or buying any type of plugin I need to make sure it's a good investment But if you want to just give it a try you can always go at the yearly and look at that 30 bucks a year That's not too much for a couple websites Well, I want to give a big thank you to everybody out there that suggested that I take a look at code snippets You guys have shown me the light this has changed how I am going to be adding codes to our websites going forward This is a definite improvement to the old-school ways that I was doing it and that's very important Now this is very important to stay open-minded and to continuously learn Find new ways to be more productive more efficient And if I find a tool that helps me to be more productive and more efficient like code snippets pro did well I'm going to invest in it and I'm going to make that part of my process. So again, thank you I'm so happy to be back doing this now. I love building websites for clients. I love it I have fun with it. I built a great business around it, but this right here. This is what I love the most right now I love connecting with my fellow web creators. So make sure to do all that good YouTube stuff You know like subscribe all that stuff. I know Yoda back there He would greatly appreciate it and I'll be back again soon. All right. Thank you