How to Setup & Customize Elementor Hello Child Theme

hey everybody in this video i'm going to go over what a child theme is why you want to use one and then i'm going to show you how to set up and customize the elementor hello child theme for your brand or project so let's get started now what is a child theme a child theme is an overlay to your parent theme that allows you to make customizations without actually modifying the parent theme's core files so this is very important because when wordpress updates a theme the theme directory gets overwritten with the new version so if you um customize the parent theme files as soon as you update the theme the files that you know you made customizations to are going to go away and get replaced with the new version so a child theme solves this because a child theme never gets updated so you put your customizations safely in a child theme and then when the parent theme gets updated and the files get replaced it's okay because your customizations are safely in the child theme imagine you have a picture frame with the photo in it and the photo is the parent theme and the glass over it is the child theme now you could take a permanent marker uh you can draw all over the glass and it's going to modify the appearance of the photo below but you're not actually modifying the photo below right you can even update the photo with a new one as many times as you want and you know the customization the drawing on the glass is still going to be there that's a little bit about you know how it works i suggest using a child theme you know all the time even if you don't think you're going to add any customization you never know and what i find is almost everybody at some point comes across you know some code snippet or you know some customization that they need to make and it's really a little bit easier if you start off you know right off the bat with setting up a child theme that's actually part of my you know workflow whenever i start a website from scratch the child theme is one of the first things i do so let's kind of dive into you know getting it set up a quick note if you have a you know fresh website you're just getting started feel free to install a child theme no worries if you have an established website that's already up and running when you change themes your theme settings go with it in the case of a hello there aren't too many theme settings here you know some themes will have like colors and fonts and a bunch of options here but you know the elementor hello theme is you know kind of bare bones so the only thing that you have to worry about is additional css this is the only thing that will kind of go away when you change themes so just keep that in mind and as always make a backup of your site before doing any work like this just in case so i'm just going to go over to the official elementor github and there's a link to this in the description i'm going to go click code and then download zip all right i'm just going to open up my download folder here and you'll see i have the child theme zip folder i just downloaded now you could actually upload this to wordpress like you would any other theme right now as is you can activate it and be good to go but i'm actually going to open it up and show you how to customize it you know to match your branding or you know for a client so let's go ahead and extract it and then inside we're only going to see a couple files so i'm going to open up the style.css file first and you can open it with any code editor that you would like you know dreamweaver note plus plus i'm using visual studio code now this is the theme header information this is what displays in the back end under appearance themes so for theme name i usually like to just um name it something for the client i'm working on uh you could also put you know your brand name or really whatever name you want to give your theme let's say i was making a real estate site for john doe i would maybe put john doe re theme the theme uri i'm actually just going to delete that in this case you can link that to your website or their website i guess if you want the description uh anything you want i'm just going to put in let's actually spell it out real estate theme all right now the author this is where you could put your name or you know whatever alias you go on on the web this is where you would put your website the template do not touch this this is a required this is just telling the child theme that it belongs to the parent theme hello elementor uh the version i'll just go ahead and change it to the point zero just to show you that you can you can go ahead and leave a text domain license and i'm actually just gonna remove tags because this is not a searchable theme on the repo so we don't really need the tags perfect so i'm going to go ahead and save that and then what i'm going to do is i'm going to open up the screenshot i'm just going to open it up real quick with photoshop and uh you can put anything you want here this is the thumbnail that displays in the back end under appearance themes and what i like to do is i just like to put a screenshot of the actual site it's on so uh let me go here and just drag in this little screenshot i have just as an example i'm not gonna spend a bunch of time on this making it perfect because i'm not gonna make you guys sit and uh wait while i you know tweak this all right i'll just throw in some text just to give you an idea perfect i'm not even going to worry about really centering it or anything like that we'll just leave it like that so i'm going to save it for web and devices export save for web i'm actually just going to save it in the child theme folder that i opened up i'm just going to replace it with what's there perfect all right so so far what we've done just to recap is we've downloaded the elementor hello child theme we've extracted the zip we have replaced the screenshot with whatever we want we've opened up the style.css file and we've modified the theme header information to customize it now what we're going to do is we're going to select all the files here and then we're going to send them into a zip folder so the name of the zip that you give here is going to be publicly viewable if somebody views the page source on the website so this is the actual theme directory that's public so i'm just going to put john doe theme keep in mind this should be all lower case no spaces you know use hyphens etc you know standard web naming rules apply so that's all there is to it now what i'm going to do is i'm going to go back to wordpress just a quick note just a reminder again if you have any css here go ahead and just copy that and then i'm going to go to add new for themes upload theme and then i'm just going to browse and make sure to make sure to upload the zip that you made not the one that you downloaded so john doe theme upload and install perfect so we can see here that it was checking for the parent theme and it found it which is the hello and now let's just go ahead and click activate so you'll see we have our child theme activated installed it has the name that we gave it it has a screenshot that we gave it and if we click it we can see all the information that we added right so we have the name the version the author that links to the site that we put in there and then we have the description and it all looks good so i'm just going to head over to customize real quick and you'll see that the css is no longer here like i mentioned so i'm just going to go ahead and paste in what i copied from the parent theme now what i would actually do is i would actually add your css to the child theme style.css uh we won't really get into that now but just make sure you add it back uh one way or the other so let's take a look that's all there is to it and then if we go to let me just show you the directory real quick and then search for the uh the name that we gave the zip folder we'll see right here on the front and we'll see our theme directory so looks like everything worked i hope this was helpful to you i'm working on a bunch of other training and a whole new training website all free of course so hopefully i'll see in future trainings thank you

Channel: You Can Code It

Views: 12,405

Keywords:

Id: yeGgHH4inXI

Length: 10min 8sec (608 seconds)

Published: Wed Mar 31 2021