How To Change A WordPress Theme Without Breaking Your Website

Hello, people, my name is Ferdy. And in this video, I will show you how you can safely change the theme of your WordPress site that is already complete. So you have an up and running website, you want to change the theme. How can you do that without destroying your website? That is what I will show you in this tutorial. So I had a client today - or a friend who said: "Hey, I made his website with a certain theme I did not know. And I'm getting stuck." So I tried to fix things. And I was like: "O

kay, it's not working. What I can do. I can install a new theme, and when you change a few things, and then your website will work smoothly." And that's what we did. And that's what I'm showing you in this tutorial. But what I want to say to you is that changing a theme in your website is not a magic touch, there is no plugin that says: "Okay, this is your website, choose a different theme, click on the button and copy and paste it and everything will be the same." Because every theme has its ow

n style. What the theme does, decides how your header looks, decides how your footer looks, decides the overall style of your website. And if you have a blog post, it will define the style of your blog post. And if you have the Webshop at the will also define the style. So that's what it does. So if you make your website Elementor, for instance, when you change themes, all the content you made with Elementor will stay the same. So that's a good thing. So what I will show you is how you can do th

is yourself. We're gonna do it safely. We're gonna use backups and all that stuff. But it's not a thing that you do in just three minutes. It takes some time. But in the end, I believe you can be happy with the end result. And I never had a longer intro than this one. So let's get started, I will show you how you can change the theme of your website. And I will use the black sea theme because I think that's the best free theme within WordPress. And let's get started. By the way, if you liked thi

s video, feel free to like it. If you have a question, leave a comment. And if you want to learn more about WordPress, feel free to subscribe to our YouTube channel. So let's get started. So today, I helped a friend with her website. And I saw the website and I was like okay, so many things can be done better. But the theme is because this is weird. This is weird. This is us more width. And this area just looks weird. I would add some more spacing heading over here. So I was like, Okay, I will h

elp you. But the question she had was, how can I add things to the webshop. So I went to the shop, I installed WooCommerce for I change the image just for privacy reasons. And if I click on it, what happens? What happens? Nothing. You can see you can go to a different product. But you see nothing. I was like, You know what, if you want this website to work, let's use a different theme. So what I will show you in this video is how you can change your theme. Well saving the content of your website

. Well, it's really important to understand this, because every theme has its own specialties, its own settings. So over here, I can have that logo of the website in the center. Not everything can do that. So what a theme does, it decides how the header looks or decides how the footer looks. And besides how the shop is displayed, right now you see is really small, I really don't like that. And the great thing about this website is that it uses Elementor. So if I would change the theme, everythin

g that's created with Elementor, this path from here on until here below is my word Elementor. So debt will stay the same. So if I go to a different page, this will stay the same. If your current website is made with a different page builder, or maybe with HTML, CSS, and JavaScript, you need to rebuild it. There's no copy and paste way using a new page builder. So if you use a blog, theme, and Elementor, you need to recreate all the pages using that and I have tutorials about that. So if you wan

t to learn more on how to work with Elementor, you can go to YouTube and search for Elementor 30. And you'll be on your way but there are no shortcuts. I just want to say that there are no shortcuts. Learn how to make a website again, and at the end be really happy with the result. Yes. So how can we change this? Well, the first thing, of course, is to create a backup so I go to Plugins Add New, let me make the website a little bit bigger. And I searched for all-in-one WP migration. This plugin

is free as long as your website is lower than 300 megabytes. This website is bigger because of all the unnecessary plugins he uses. I hope you don't take offense if you see this, if you're the owner of the website is seeing this. So now installed only one WP migration I need to create a backup I go to all in one WP migration I click on Export. I want to export this website completely to a foul. So it's preparing right now. So if I would mess up big time, I can pull back a backup and then save th

ere those 700 megabytes is a really big website Not necessary. That's not necessary, she probably did something that she did not have to do. So what you can do you right here, I have this website fiverr.com, you could create a website called fiverr.com forward slash new. So if you would use the NameHero, for instance, I will show you how it is done. I go to the cPanel and I go to word breasts, and I want to click over here. And then I want to install WordPress but not at this in this case on pas

sive income with thirty.com but on passive income with pretty.com forward slash new. So I clicked on install so whatever weapon you use, make sure to install a WordPress website and then over here in the directory, new, fill in all the details and then create a website. And then we can import this one. So I have the website faveur.com. I go to the backend, there's nothing here. So what I will do, I will go to plugins add new Search for all-in-one WP migration. I click on install now. And normall

y a website is not bigger than 300 megabytes. This one is so I need to use a paid version. You can get it somewhere on the internet, I hope your website is lower than the on the megabytes. I click on Upload plug-in choose file. And I think somewhere on my computer I have it it was $69 at the time, and I'm limited. Over here. I'm using it already for a lot of years. I really liked it too. It's really easy, straightforward. I activate the plugin. And now instead of exporting, I go to all one WP mi

gration import. And if you see 8 megabytes or something lower and you're hosting at name hero, what you can do, you can go to the cPanel and search for PHP. And you go to select PHP version, then go to the Options step, scroll down, change this to one gigabyte, also here, one gigabyte, and then Search for mod mod security and turn it off. Then import the theme. And then turn it on again. And go back to PHP. Select PHP version options and bring this back to let's say 256 and five on the 12. Perfe

ct. I dragged this fell over here. So we're not gonna work on our alive website. But we're gonna work on this website. So if I mess up, the live website is not messed up. And then at the end, I can import it over here when I'm finished with his website. Proceed. So now I have an exact copy of this website. So I also need to log in with those login details. Okay, finish that I need to go to Settings Permalinks. And then it log in again. What was it, admin, admin dash cover. And if this was at is

from a client and over here, she logged in, what you can do, you can log out over here, you can click on the eye, so you can see the password and copy it over here. Face it, log in. There you go. Now I need to save it to post name twice. And now I have the exact same website over here, as I have. Over here. See, only here I'm not logged in here I am. So what's next, let me take a look at the back end. I go to things parents themes are what I see. I use a theme counter. I never heard of it. And m

y case it means probably that's not the best theme is just a nice theme. If you don't have a certain style, you see it as you think hey, I want that. But a lot of themes free themes are limited, but there are a few free themes that are amazing like Astra blocks, or cadence. Well, in this case, I will use a new theme. I'll add a new one. And it's called Block see? And keep in mind that every theme has their limitations and this theme Man, you can do so much better with the free version. So what I

want to do, I want to recreate the website, but with this theme because there's more functionalities. That's why I want to use it. I click on Activate. So the contents should be the same on my website. And I want to instal the Black Sea companion, that's a companion of the theme, you need to instal that in order to make everything work, right. So that's what I will do. Okay, I skipped this part. And now look at this. By default, this is how our website looks. So before it was like this, now it

looks like this, but the content is still the same. So it is really important for me, there is no more footer, because this theme has no settings yet for the footer for the header. If I go to the shop, you see it looks different, then over here, that's what I prefer. And over here, I can have more customization options, because that's what the Biloxi theme does. So let's start with the header. And let's make it look exactly like this one, or you want to make it look different. There's also a pos

sibility, I would go to the customizer to the header. And then over here, look at this, I can drag the logo over here to the Centre for instance. I click over here, I select a logo. And I have the same images as used before. And we see this one is really big. The closer the smaller one, I select it. And that goes is really small, I uncheck the site title and make this one 200 The height. So that comes closer. Over here is the menu. So I go to the menu, click on it. And I select the boven stir me

nu that's Dutch, it's a Dutch website, I tried to make a few things English. And now I will drag this one below in the centre. Because there are three areas, look at this, I removed the search area, I don't need it. But if you want to, you can use it. So there are nine areas in the header where you can use the soap. So far, so good. Over here, I see that the colours are not the same. So I click on the menu, I go to design, and I can change the colours. And also here I can change that font to rea

l way. instance, I make it a little bit smaller 500 Yes, it's already uppercase. That's why I decided over here. And I can make it a bit bigger. 14. Okay, well, what she said, what you don't like is that all this space over here, she cannot get rid of it. So over here we can. So I click on logo, and I go to design and at the margin, I just go to negative, I can uncheck this so I can make it negative where I want make Pixel Perfect. So over here 00 And at the bottom. If you say step keyword, you

go to the right and if shift up, you go back so let's this handy. Alright, nothing button like that. I like it a lot. Okay, over here. I want to make this float. So obvious, not the case. So what I can do, I can go back, I can go back, I can go to the header, and then to Heather's global header. That's the whole header. And then I want to make it sticky. Whatever out make sticky only the main row, which is this one. Actually, this one, only the bottom row I don't like it. So I drag everything up

a little bit. And then I use the main row. Okay, there's a small glitch. And over here at the main row, I can click here on the settings of the main row. I can change the height so I want to make it a little bit smaller. Let's say 70 I polish it. I close it. So so far so good. Too much basil. He cannot get rid of it. Now here. She can. Yes, we can. Okay colours. What I do is how I do things. I have this tool over here the colour pick eyedropper in Google Chrome. I hover over here, I grab this c

olour Command C Ctrl. C, I go to my store, go to the customizer, and I go to colours. And I use the global colour palette or I choose a different one. And then I grabbed the main colour, which is this green one. Well, at this website, I also see that all that colour. So I can do two things I can log in and find out where this colour comes from, or I make it a little bit bit bigger. Hover over it, she's come on for so you can do things. Make an image on a Mac, I go to my desktop, open this in Pho

toshop, zoom in holding Alt scroll, hit I just I love you subscribers. Just kidding. If you want to, you can subscribe for more on WordPress related tutorials. I have this colour over here. I copy it. And where am I and I can paste over here as a second colour. Now it's a global colour. So if I choose a global colour, and I change this colour as well, we change everywhere in the colour settings where I want to change it. So, so far, so good. If I hover over it, it looks like that over here when

I hover over it and to go out of this customizer screen. Yes, so I've more freedom with the Biloxi theme. And so far, the content of our website is quite the same. So what I would do now okay, I would go to the customise settings, then I go to general layout and change the width, especially over here, you see that I want to change it to 1024. So the website is a little bit smaller. Okay, publish it, close it, then I go to the settings of Elementor. So I click on edit with Elementor. I see this p

age because they installed Elementor on this website. And they use Elementor to adjust this website, this page. So that's why you see Elementor, click over here, go to the user preferences, I prefer to make a dark turn is on sorry, that's not what I intended to do. I go to the site settings. Sorry, I go to layout. Also here I say 1024. So they align perfectly, because over here, this is the width of the website of the theme. This is the width of Elementor I don't like it. So this is not a an ele

mental tutorial, but I'm so I can show you how to fix all this stuff. But I don't want to take too much. Time to do that right now. I would definitely not use padding over here rather over here. Wow. Yeah. So I would say 5050 if the if the. Or in percentage, but um Okay, I will leave it with this. Because I don't want to focus too much on the content, I just want to show you how you can make the website look like a different one when you use a different theme. If you want to know more about Elem

entor search for don't search for YouTube, go to YouTube and then search for Elementor 30. And then you can find a lot of tutorials complete elemental tutorial, I will make a new one in the beginning of 2022 in 4k and better than the even the last one because I want to become better in everything I do. Okay, so far, so good. And now I can change everything, adjust everything over here. Make a box for instance, and then it will align better and then I don't even have to use margins over here I'm

showing too much at the same time probably. Okay, let me make this 50 Make this then I'll check this sorry, I'm just having fun. So this looks better in my opinion, then this and then also this area over here. It's just looks weird and then is wider than this. Also, I would always use more padding because it's just too close to the edge or margin. Even though I make tonnes of websites sometimes I'm still confused about margin and padding. padding is outside margin, okay. There are tutorials abou

t that. Okay, So far, so good, what you need to do, you need to go to all the pages, see how things are looking. So this looks really small. How does it look? Over here looks a little bit big. So um, I can do edit this with Elementor. Go to this section, go to boxed. And I can do two things I can. Let's see if I'm also here at 125 shifts command for select this, and then I see it's around 750. So I can do I can make the width 750 pixels. It looks wider. So let's make it six hundreds update and s

ee if everything still fits this is my brother is my sister in law, they have this shop, and I was helping her with the website. They have a shop in the house where I live. Maybe totally not interesting for you. But hey, I'm just talking a little bit having fun. I make this wider, because that's what I prefer. So this page is perfect. I only don't like this area. So I go over here. I click on theme over, I click on the customizer, then let me see I go to pages. And I remove the page title on eve

ry page. So it's gone. This is not lorem ipsum. It's Dutch said Dutch language. And we go to volunteers. Volunteers and there's a link but you don't see the colour. How can I fix that, go to the customizer, go to colours and then two links, change it to this one. And now you see it's over here and when you hover over it I wanted to be green. Awesome. Close it. And what I also see the backgrounds over here is not the wide. I wanted to be wide so I go back to the customizer. And then I go to colou

rs. And then the lowest one I think yeah, side background, make it colour eight which is white, publish. Close it edit with Elementor. So it's not a quick fix, but it's a good fix. Good things sometimes can take time. So I'm happy that I'm doing this or that I did this for this lady today that I'm helping helping her I'm really happy with the results so happy that I decided to make it thorough about it. Again, the old website let's take a look at this page when I hover over here I don't see diff

erent colour. I go back to the customizer and I go click over here or I hover click OK and then I go to design. So the initial colour is this one when I hover over it I want it to be this colour and when it's active. I also want it to be this colour. Do you see how easy it is to change all this stuff? If you want to make this dark here at the blotchy thing you can do that man I like it I like it. Really nice thing I'm still using the free version sometimes I'm checking if I'm still recording Oka

y, what else there's so much to do. Over here you see this drop down you need to click on it but what I prefer is when you hover over it you see it so this okay but the colours are weird. So I go through the customizer again, again to the menu and then over here is the top level so this level but right now scroll down the drop down options. Let me see the drop down options. Okay, when I hover over it, it appears or I can click on it and then I need to click on it and then I see it just as this w

ebsite but I think it's better to hover over it okay this all looks fine. And then we go to the design area and I want to change the colour actually to the same one. So, let me go I mean sorry, let me go to design. Copy this colour, which is from this area. We go through the sub area. basic colour when I hover over it the same colour again this one and then the backgrounds Right. Like that, then change this to railway. I've got this fine I guess. capitals. Yeah, perfect. So assortiment assortime

nt assortiment. What I should do over here, I should make it small. And over here donate clothes, clothes, I will also keep it small. And that's it, then we go to the shop. Right now it's displayed really ugly, I want to go to the product is gone. So let's go to the contact page really quick. Okay, let's take a look at the new website perfect what I can do Elementor really quick. Over here, increase the top padding to 40. Go to layout and make it 600. Okay, okay, let's take a look at the shop. T

hat was the main The biggest reason to change this. Okay, now it looks like this, that looks better already, in my opinion. So I go to the customizer, because this is just too small, it doesn't not look right. I can decide to live this out. That's what I want to do. So I go to the products archive your WooCommerce and remove the base title. And then I can decide how many rows do I want? How many number of rows. So if I can have 16 products on one page right now, or 20, or 12, depending on how ma

ny rows card options I can. I can change the way the images look. Custom, there's so much we can do over here, we can show star ratings seal batch, if there's a sale, you can show two categories over here at the record button over here, and then go to design and change the colours. So the title colour is fine, I want to go to the button text. And then this one, I'm going to hover over it or green. So then I click on publish. And when I click here, I see nothing. And when I click here I see how i

t looks. I can hover over it as it's png. So it's a it's a weird, I should use JPEG. But I can also go to different images. I think this is too big. As you see I have a big screen. But still, it's so big. So what I can do, I can go back, go back, I can go to the single product. And I can change the style to something smaller. Like this, the title, the price, it's in stock add to the cart related products, I can see other images, I can hover over them, or I can click on it, I cannot click on it.

Just it's a box even better. Now that's up to you. So then we publish it go to a page, edit to the cards and look like this. I like it I can select if I want to pick it up in a slice or let it be delivered. I go to the checkouts which was all not possible. And look how beautiful this looks. And if I don't want to fill in my company name, second street address I can go to the customizer, go to WooCommerce general or maybe maybe in the checkout page Yes. Company hidden the rest line to hidden phon

e required. In that way you can clean it up even more. But I'm really happy with what we've done. One more thing, of course, really important the footer. So I go to the footer over here. Also here we have nine areas or eight where where we can display things. So this text over here can be displayed. Or I can do I can use social areas. So the first one, the second one and the third one. Over here is the copyright I can say copyright career year and then I removed this area you can place whatever

you want to do you're great at what they created by you and then below I don't see that much yet only this area but what I want to do close this I want to play this information so I go to the backend then I go to Appearance Widgets and this area is renewed sometimes it's a little bit unlike the other way of displaying when I get it it looks more like Gutenberg they want to make things look the same but I need to go to footer widget area one there's the image probably okay, so I can grab this ove

r here bring it in area three. Then I go to footer widget one I search for a paragraph and then I can't copy this copy paste it back go to footer widget area to search for a paragraph copy this face it update ladies and gentlemen Our website is in a new theme and better theme our web server is working and this is our new website and his background is wide so I can go to the customizer footer middle row design background white and then the lowest one yeah that can be a little bit greyish if you w

ant that slightly polish so we have exactly the same as this website but a different thing. But we have a working workshop and we have less space over here we made it look a little bit better less space because and then there are so many things I would be different because right now if you see this this the first thing people see but they don't see a lot they see glitter gold glitter, I will show stuff if you're selling stuff I would show stuff and I will also make a tutorial about that on what

to display on the homepage because this people come here and they okay, what is this about and then they can leave you have a high bounce rates, right. But if you show a lot of beautiful stuff that they sell, then people know oh that's looks nice and then they can scroll through your website. So this is how you can change your theme and keep the content in touch. There is no magic touch you need to put a lot of work and as you have seen, but in the end you will have great as a result. So now if

your website is ready, we go to the back end to all in one WP migration click on Export Export to fell then preparing then over here. My current website is life I will login I do the same I go to online labour migration. But now I go to Import I need to get the limited area plugin. Limited or ghosts installed. Now how are we doing over here 725 megabytes because I have a few images. Activate the unlimited extension. Okay. Then one import and then I drag this one which is already finished and it

will overwrite our website. So our website stays life. Proceed. It will overwrite the current website it says maybe I should tell you that before I said proceed, but you have a backup. So that's great finish go to the website. And now this is the new website with the new pages the new theme and the shop is also working. I don't like it. So really quick. Really quick, really quick. Go to the customizer and I would advise just play around with this amazing theme. Because I know right now, I should

go to the product archive. And then I should go I don't know actually where should I go guard options Yes or maybe the other way around. So, custom and are not 16 by nine but nine by 16 Okay but then quality is a little bit low better 440s Wow world will be So, interesting having 440s in the row in real life and that ladies and gentlemen is how the cookie crumbles one more thing one more thing I have a webshop I have a webshop Of course, I should have an icon over here I go to the customizer th

en I go to now I go to the header and then I search for the cart I drag it over here to the centre at the right and then it will appear over here. I can also change the style if I want to go to Design yeah over here, background should be white the font should be this colour better. So that is how it is done out. And that's how you can change your theme without destroying your website. So that's it. I hope you learned a tonne of stuff. Good luck with your website. If you have any questions. Let m

e know in the comments. Feel free to like this video that will help me out a lot. And please subscribe for more upcoming WordPress related tutorials. Right on your YouTube, but then get a notification if you click on the notification bell next to the subscribe button. And you will support me in another way and that's what I'm after I'm after support. Over two subscribers. This one definitely this will make me happy more subscribers. bigger audience and then Bigger, bigger reach more rich, rich r

eachable Richardson. Richards. Yeah, okay, bye bye. Yes, okay, now, stop the video. I don't want to stop this. You need to stop it. Now you need to stop go off. Okay, bye it's not working anymore. My remotes not working. But this one is so I will pull out all the lights and see how boring my room actually is without all those lights that's it and also to everyone. So I hope you can appreciate it. Ciao