You can recreate any website in WordPress that you see on the internet. Its very easy! Let me show you with the McDonalds website in this video.
👇🏻👇🏻👇🏻 Start here 👇🏻👇🏻👇🏻
Do you want to support my channel? Leave a like or buy Divi with 10% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
✅ Divi with 10% discount ⇒ https://wpressdoctor.com/getdivi/
✅ Hosting & Domain provider ⇒ https://wpressdoctor.com/hosting/
✅ Best caching plugin ⇒ https://wp.discount/wp-rocket-discount/
I want you to succeed with your website, so lets get started.
⏱️Timestamps⏱️
0:00 Intro
0:27 Get the font
1:15 Create the Frontpage
8:00 Create the Footer
16:14 Create the Header
34:14 Create Burger Page
Thank you for watching! 😀
✅For tips and tricks on getting the most out of WordPress, don’t forget to subscribe: https://wpressdoctor.com/sub
Recreate the McDonald Website in WordPress
📖Transscript📖
In this video we’re going to remake the entire front page of McDonalds. But we’re also going to create this awesome vertical menu and to create all these burgers. Yummy yummy yummy! Just a disclaimer: this video is NOT sponsored by McDonalds and you are not allowed to use logos and images from others people website. We’re going to start right now.
So the front page of McDonalds is actually really easy and simple to recreate. But the fun thing starts when we go to our menu. This is a nice menu we’re going to recreate it, then we go to burgers, we’re also going to recreate this vertical menu and when you click on it you go to the right page.
Now one thing we should know is what kind of font are they using? So I press on the right mouse button, I press ‘Inspect’. This is the place where I can actually see what colors they are using, the size of the fonts, the font itself…. so when I hover my mouse over this you will see an H2. The font size they’re using is 36. Let’s type in “Family” they’re using the font speedee. I’m just going to download Speedee Bold TTF. All right now we can start building. We go to ‘Pages’ ‘Add new’ and let’s call this our homepage. We go create two columns like this. The first module is the image. We are just going to upload all the files of McDonalds. And these are 1pupfreenuck version 4…. Well if you are a big brand you don’t actually have to think about SEO and that kind of stuff. So I can imagine why they have called this. For your website however, make sure to put your keywords inside the name of the file and also in your alt text. Then we’re going to add a text module over here. I go to paste in text over here because I don’t want to mark up from the other website. Press visual again. We’re going to make this into a H2 so when you hover over it press the brush icon. You can change the font. We’re going to change this to Speedee. Then we just press upload. This is not the fault of Divi, it is a WordPress restriction. But we can easily fix this. On your WordPress dashboard you go to ‘Plugins’ ‘Add new’. Then we’re going to add “Easy SVG” press ‘Install now’ and press ‘Activate’. This allows us to upload SVG files but also fonts. After refreshing this page when I press upload. So the font is not exactly 100% the same, but we’ll work with it. Then we need this text just create a new text module over here. Paste it in and we change this font to Roboto which is a Google font, so it’s free. The color of this thing is not even black it is this color. So when using colors in your website don’t forget to make them global if you’re using them a lot of times. This way you can easily recreate them or change them anytime you want later on in your website. Paste it in, and we’re going to use this color for the text. Press ok. And I also want this color over here. Global, this one, press okay. I’m going to just copy this module over here and change it. And change the text to this. Now this text is very small, so we’re going to make them small and we’re gonna make it light. Now also this font really doesn’t look like the McDonalds font like this. It is very different. So let’s see if we can change it when I put it on light.
Well I’m not satisfied, but let’s keep it on this way. On a live website we see that the image is bigger so we’re going to the size of this row. Go to ‘Design’ we go to ‘Sizing’ we’re going to change this to 1280. And now the size is almost the same except for spacing between them. I’m going to change the custom gutter width, gonna change it more back. Like this. All right let’s change the max width to 1180, I think it’s better. Yes this looks way better. All right what they have is a yellow button ‘Download the app’. It’s not doing anything, it’s not moving or anything, it has no hover color, so we’re going to create it. Press on this. Add a button, ‘Download the app’ then we go to….
