 In this video, I'll show you how to customize your Elementor Hello theme, so you could change the name and the brand and add your own or your clients. What's up everyone? I'm Jeffrey at Lightbox and today I'm going to show you how to customize your Elementor Hello theme. I'm going to show you two different scenarios. So the first scenario is a brand new site and adding a brand new theme. The second scenario is going to be already using an existing site that has the theme already installed and changing the name and brand on a theme that's active. So let's go ahead and get started. So for this tutorial, we're going to need just a text editor. We're not going to be using an FTP or anything super complicated. You could get a text editor. I would recommend using something like VS Code or something like Sublime Text. These are the ones I personally use and they're free, easy to get started with. We're also going to need to download the Elementor Hello theme and you're going to need to download the Elementor Child theme. I'll have links to all everything inside the description and you might be wondering why we're going to use the Child theme and for using the Hello theme. Since Hello theme is essentially bare bones and I've been asked this question a few times and my reason is quite simple. It's simply because it's best practice to always use a Child theme even if we're using something that's clean and basically bare like Elementor Hello theme. So let's go over to the themes and I'll show you all we have is a default theme installed. We haven't installed Hello or Hello Child theme yet. Let's customize those first though before we install them. So you can see here, I have both my folders that I downloaded, both my themes. We're going to open those up first. And the first step that we're going to do is we need to rename the files on them. So this one right here, we can name the parent folder whatever we want to name our theme. For this tutorial, I'm going to name this one just my theme, just to keep it simple, but you could put your name or you could put your client's name. I'm going to do the same with the Child theme. I'm going to call my my Child theme. Next up, we need to edit the style.css files. And that's the only file we're going to touch. We're only touching this one inside both the parent theme and inside your child theme. Let's open up the text editor. And I like to have two columns open up so I could take a look at both when I edit them. You can just drag the file inside there. So we got the parent theme and let me put my child theme style.css on the right side. All right, so what we see right here in this top part is this is going to be the information that WordPress reads and that how they give the name and all the information of the theme. Like right back here, if you take a look at the theme, you'll see like 2021 and you'll see this information right here. This is all coming from this section up here, which is inside the comments. And we're only going to edit a few of these inside here. Same thing with our child theme, we're going to edit a few in here. Now I'm going to go through this in detail. So that way I just don't show you change this and change this but what we're actually doing so that way you got a bit of a better understanding. So first one, let's start at the top. We're going to start with the theme name. And this is going to be the name of your theme. It's pretty straightforward. So you could put whatever name you want here. I'm going to call mine just my theme. Next up is a theme you are. I'm just going to put our own website right here. I want to brand this as our theme right here, the description. Now this is going to be like the message on there. What I like to do for the description and a suggestion is to put a welcome message in a way for people to contact you because you never know maybe a year or two years down the line. The client might be struggling with their website and it's good to always have that information back there. So I'm going to put a little welcome message there. That way, that way, you know, whoever is using the site, they could find a way to contact us. And then here again, for the author URI, I'm going to put our own website right here and you could put whatever website that you like. But what we're doing right here is we want to brand it as our own. Now we got this other information, the version, the stable tag to test it up to and requires PHP. I like to keep things bare bones and minimum. I'm a bit of a minimalist myself. I like cleanliness and organization. You could actually remove these and that's what I'm going to do right here. This next part, the license GNU. I leave this one right here. I don't touch it. I usually always leave it in there. For the next part, the text domain. Now this is very important right here. We want to make sure that we have this exactly as a name on your file. So the file right here, your parent theme file, mine is called my theme. Whatever name you have right here, whatever it is, you want it to be identical. So we're going to add this exactly as it is. Exactly. No spacing, no capital because it's not in there. However you have this written, just make sure it's identical because if it's not, it might not read and could get errors when you try to upload it. Then right here for the tags, again, you could keep this, you could change it. I'm going to remove this right here just to keep everything clean. All right, and then I'm going to save. Now next up, let's go to the child theme and it's basically the same thing with just a little difference to it. So let's change the theme name right here. I'm calling mine my child theme, the theme your eye, we're going to add our own personal website right here to brand it under us. For the description, I'm going to put the same exact description on there, which is like a welcome message. And if you need help, you know, feel free to contact us anytime with contact information. For the author your eye, I'm going to put us. I mean, it is a completely blank theme and we do a lot of customization. So we're probably going to have a lot of CSS in here by the time the project is done. And then the author URI, I'm going to put our website right here again to build that personal brand on it. And here we go. This is the important part right here or one of the most important parts because this right here, the template, this is going to connect your child theme to your parent thing. If you don't have the right template name in there, WordPress isn't going to see that you have a parent theme. And if you upload it, if you get an error that says could not install the theme, we could not detect a parent theme. It's because usually right here, the name of the template is off. So we want to make sure that the template name is the name of this themes file. So let's go back to the file name right here. And whatever this name is, we want to put it inside the template name, because that's how WordPress sees that these connect that this is the child theme to this particular parent thing. So let's add this as my theme right here. Right here underneath version, you could pull whatever you want. I'm going to remove it just to keep everything clean and minimal. And again, this is another important part right here for your text domain. You want to make sure that this is the same name as the file of your child theme. So our child theme file right here is my child theme. Whatever the name is, you want to put it exactly like it is inside your text domain. And usually when you get errors, usually, if you are getting an error, you're trying this out and you upload it and WordPress comes back with the error and they can't do it. It's usually these two. It's usually something with the text domain or the template. These are the two important ones right here. And then again, for the license GNU, I like to leave these as it is, I'm going to remove the tags to keep everything minimal and clean. And then go ahead and save. Now that's it for the files. We don't have to do anything more. I'm going to close these out. And we just got one more thing to do, which is to change the image. We want to put our own image in there because as you see here, this is the image that we see for like the WordPress theme. And if you just upload it as it is, we're going to see the Elementor Hello Theme image come up on there. We don't want that. We want to have our own image right there. So what we want to do is first look at the dimensions of the image and you can find the image inside both themes. They both have the same name and the screenshot dot PNG. And they both have the same dimensions 1200 by 900. So we want to create our own and make sure it's the same exact dimensions. So here I already got a couple made. I just made something really simple. And you can see my dimensions here are the same. I'm going to go ahead and download these right now and upload them to my files. So I want to make sure it's a PNG file and I got to give it the same exact name. So what's calling both screenshot dot PNG. I'll start off with my main parent theme. I'll go in there. I'll delete the screenshot dot PNG that's already in there. We don't need that. And then I'll put the one that I made my custom one inside there. Then let's do the same thing to my child theme. Again, we're going to call it screenshot dot PNG. And if your images aren't loading when we do this, most of the time I found out when I get the error is usually because I mislabel it or I misspelled it that that usually is the reason why it doesn't work for me sometimes. So let's go ahead and save that. Let's delete this one and add our custom one inside the file. So now our themes are good to go. Let's go ahead and compress them both and upload them and make sure your compressed versions are the same exact name. We got to make this is really important to make sure the names are the same and that they're right. Let's go ahead and add them now. We'll start by adding the parent theme. Don't activate it instead. Let's go back and add our child theme and we'll activate this one. You can see everything installed successfully. You can see now it's there. We have the name of our theme here. We have our brand and our link. If I click on here, it'll go to our website and you'll see our little welcome message right here. And same thing for the parent theme. And if we go to the front end right here, now you got some nerds like myself that like to inspect the source code. I always like to see what themes people are using. You know, you could take that look, you could take a look when you go to the source code. If you go over here, you'll see that inside back here. You have the name of the themes. So if you're building a custom site for your clients, their brand is going to be back there. It's going to have their name and it just gives that nice touch that personalization and it just shows another level. I feel of professionalism with when delivering a web website project. All right. Now what if you've already got a website built or you're already working on one? He already had that theme inside there. Like you're using the theme. It's installed. How do you change the name on that there? How do you rebrand that? And it's actually very simple if we're using hello. Now I have to point out what I'm about to show you. I would only do with hello and not with like a pre-built theme, but hello since it's bare bones, it's pretty easy to do. Now the first step is do a backup. Make sure you do a backup. Before you do anything I'm about to show you, do a backup please because if something goes wrong, you want to make sure you could go right back to where it was. All right. So let me go to the back end right here. Now if you've done any customizations, say if you've gone here into your CSS and the customizer and you've added CSS inside here, or if you have added CSS, let's say back over here in your theme editor, if you add it inside the child theme, if you added CSS in there, copy it and paste it inside your text editor, or if another developer did, check to make sure there's no CSS because what we're going to do is we're going to actually delete the existing themes. Now you can see we have our site right here with the original hello themes right here. And this might seem scary what we're about to do. We're going to delete these and we're just going to delete them. Now, as long as you got your CSS from your customizer for your child theme, if you did add any custom CSS, you're going to be okay with this. I have done this on fully built websites, fully customized websites and have ran into no issues at all. And the reason is everything that I've done with when building a site with Elementor and hello, everything's in Elementor and that does not disappear or delete when you delete the theme. So let's go ahead and first activate another theme. I would have like the WordPress default theme here, and we'll delete these and then install your custom themes. And you're good to go. Now after you've activated your customized hello theme, if you do have any of that CSS, just go ahead and put it back in the customizer or inside your child theme where it was at. And if you have CSS that was in your Elementor, like in the little CSS areas inside the widgets, don't worry about that. It's going to stay inside there. Nothing is going to change. And afterwards, just run some tests or something is off or looks broken. You could always just go through the backup. And that's it. I hope this video helps and I hope that it works for you. If you come across something, please drop it in the comments. If you have a question or something, I always get back to everyone. And I know this one was a little bit lengthy, but I really wanted to make this where we could explain all of it. And it's easy to understand because when I learned about customizing child themes and parent themes, I went through tutorials, but they were kind of fast. And I didn't really understand why I was changing what I was changing. So I hope this video helped out with that. Well, I hope this helps out and I'll be back again soon with more Elementor and web design related content. All right, thank you.