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:18 Create the Frontpage
6:35 Create the Scroll on Wheel Effect
7:47 Create the Header
12:47 Create the Model X 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
📖Transscript📖
Recreating this Tesla website is actually way more easier than you might think. I’m always building in a Divi builder because it’s such a great theme. https://wpressdoctor.com/getdivi/ and here you can get 10% off for 24 hours.
Let’s add a new page, the name of the page is Home. And for this website we need a ‘Dot navigation’ to turn it on and I’ll show you later on why. And a normal row. The first module would be a text module and the content is pretty easy just “Model 3. So the first thing we’re going to add is of course the background image. Upload an image. This video is NOT sponsored by Tesla and you are not allowed to download and use any copyrighted images or logos. And then we go to design we go to sizing and we’re gonna put in the height of 100vh. This way you have a full height section. Let’s grab the right font. Inspect it, we search for “family”. They’re using all kinds of fonts for Arabic, Chinese, Chinese but what we need is Latin. And for Latin they’re using Gotham SSM. We’re going to download the font from Fonts Geek and Gotham Medium looks the right way. Then we go to the text setting and we’re going to make this a H1 just to be nice. We’re going to use a different heading font and the font will be the Gotham SSM. Upload your font and you press ‘upload’. This is not a Divi error, it’s the error of WordPress. I’ve created a video about how you can fix this. After implementing the fix I press upload and now it works like a charm let’s align center and they’re using 40 pixels in the heading size so I’m just going to add another text module and I’m going to give it the same font and I’m going to line it in the center and it’s also black so the font is not actually the same it’s not the Gotham SSM it is I think it’s Gotham Book so we’re gonna download this one also. And I’m just going to upload it and then the font size is 15 pixels and we’re going to give this a we go to design we go to spacing we’re going to give it a 0 bottom margin like this press ok now the color is actually black we’re going to make it black again we go into our text module and we make touches delivery a link like this and then we’re going to edit the link style with text hyperlink we’re going to make it underlined and also just black and then we have two buttons which are really easy let’s see what color they’re using at this color so we go with the bottom text color will be white and the background color will be this one then we go down we’re going to check the radius it’s going to be 25 pixels because it’s rounded we don’t have any border and the font let’s change it to gotham book I think so we’re going to make it a little bit smaller
and then we go to design we go to spacing we’re going to give it a padding on the left side and right side and you’re using the gotham ssm4 in the font it’s still a bit too big in the font so we’re not using the icon and the font should be just a little bit smaller like this now we also have a top and bottom padding 15 pixels 10 pixels I think and it’s even wider like this 80 pixels all right let’s align it on the right side then we’re just going to copy paste this entire button to there we’re going to design it go to the alignment making on the left side then the color of the button is this the text color is black and the content will be existing inventory then the next thing they have is a little icon over here so we’re going to add another row like this and we’re going to add a icon
over here the icon is a arrow down this arrow go to design make it black we’re gonna make it way more smaller and then we go to spacing and the top padding should be and then we’re gonna change the padding so we go to this one design spacing padding top zero then we have to move this entire two rows down below the Tesla so we’re going to do the row settings we go to advance we go to position we’re gonna place the position on absolute we’re gonna place it in down here and then we have the vertical offset so we can change it 200 pixels like this and we’re also going to do the same with this row we go to advanced position gonna make the position absolute and then we’re going to change the vertical offset and then when I look at the front end this is my website so we go to settings we go to reading a static page select our home page save changes so this is how the front end looks and this is how the official website looks we need to move the buttons closer to each other and the of course the header is not the way it’s supposed to be so we’re quickly gonna push this one a little bit more down first we’re going to sizing and we’re going to use different gutter right because they were closer to each other then we go to advanced position we’re going to give it a little more vertical offset like this now this icon is still a bit lower so we go to the fence position going to make it again a little bit lower now it looks almost exactly and the same this is excellent now to create the other pages when you scroll down is actually really easy we just duplicate this entire section like this and we scroll down and we’re going to create here model y change the background of the section add it in and that’s it it is super easy let’s do it again so the next one is the model s and there we are and then the next one next one is the model x and then we’re moving to solar panels which detects as and then the image here we go and then of course we have the solar roof and the last one is the accessories they don’t have this one that’s okay and the name of this picture is bcaa4263 all right and the button on this one is only sharp now so remove this button let’s go to one and let’s change this one to chop now and we’re going to align it in the center like this voila so to scroll with your mouse wheel we’re going to need a little bit of script we go to diffie theme options we go to integration and we’re just going to enable this script and now when I look at my website when I use my mouse this is what happens isn’t it awesome so now it actually slides like this but you still have these things on the side and I actually don’t want it so what we’re going to do we’re going to inspect this one and the great thing on the inspector is that you can also add css to test it out this entire edb site nav I want to use the functionality of this thing but I don’t want to show it because on a Tesla website they also don’t have it we’re just going to type in over here display none we’re going to copy the selector copy selector then you go back to the theme options general we scroll down and we’re going to have the selector we’re gonna type in display is not just like this and we’re gonna save our changes I still have the functionality but the box is gone on the right side and this is the way I actually want it this looks really neat now we’re going to create this beautiful menu on the top of the website to do that we go to diffie theme builder and we’re going to add a global header like this we’re actually going to need three columns and the first one is a image with the logo the Tesla logo and we’re gonna add in a menu module like this let’s add in another menu over and there the first thing we do is we’re gonna create this one to be almost full width because that’s what they have then we’re going to create these two menus and you go to appearance and menus we’re going to create another menu over there model s add to menu and the solar panels is the last one save menu create a new menu second menu created custom links then we reload the theme builder and we’re going to change content to the second menu and then we’re going to style it up so the first menu will be design menu text the font will be the kelton ssm the color will be black like this and it’s just 15 pixels big copy the module styles base the module styles now we have the same this one is aligned on the right side but you might think well at layout we can have a line left on the center but where is the right one well it’s not actually here if you go to menu text you can now scroll down and there you can just align it on your right side yeah you just have to notice then what we see is this logo is way too big on the original so we’re just going to go sizing then we’re going to change the width to 50 pixels like this I think this is a bit too small let’s just see how big this thing is this thing is actually 119 pixels almost 120 so we’re just going to make it 120 pixels like the original press save and then we’re going to remove the spacing up here design spacing top padding 0 also on the bottom when I now refresh my page this is how it looks it looks pretty nice so what they actually did is this is on top of the image how can we create that well that’s pretty easy you can actually go to advanced we go to position we’re gonna give it a fixed position on the top side of the website like this just save it so when I now look at my own website this is actually what happens the menu stays up and we’re actually scrolling down the page but you can see that there has been some changing in the spacing so the model x and order online and the custom orders are just way too high so we go back to our home page and then we go into this row like this go to design you go to spacing and then on the top we’re going to add some margin at 50 pixels like this and on this one we go to advanced position and we’re gonna give it some more like 100 that’s it and then the other one also advanced position we’re gonna give it some less to 45 refresh my page we have to make the changes to all the sections on this page because this one is still a bit off now I made these changes to this row so I can quickly just copy row styles go to the next one and press paste row styles like this there’s also another method I’m just going to over here I’m going to use this one click modis or hover modis I’m going to use click modus then I’m going to hold my shift down key click on the model s go down click on model x like this click on solar panels and click on the solar roof and the accessories and then I’m just gonna press and paste row styles now they all moved down just like this so that’s awesome it saved me a lot of time also with this one I want this I’m going to copy these rows styles like this and I’m going to paste it in over here and I press paste row styles then it goes down to make it even faster hold my shift key click on this one scroll down click on this one and then we’re going to paste row styles again and also with this one based rose styles like this here we go now the website looks actually really neat with all these Tesla products and it just works so this is pretty amazing I’m really happy with the result till so far why don’t we just create the model x oh I see we’ve made an error mode or why let’s go with model x we’re going to add a new page model x and then we’re going to publish this page on the model x page they’re not using the scroll mouse wheel effect so we’re not going to create it so we’re going to create this which is really easy this thing is just exactly the same as the front page so we just edit the front page and then we’re just going to copy this entire section however it’s not possible because of my header so what do we do we go to here to the wireframe view and we just copy this entire section copy section then on the model x page we just paste this section over there let’s first change this model x this one is blade and the background image is of course use this model x main hero desktop lhd we’re going to remove this one over there we don’t need it this looks great one two three four five columns and it is of course a text module with this inside of it let’s change this one go to design go to text gonna make it the same font let’s turn it into 28 pixels they don’t have this one is smaller so what are we going to do we’re going to just duplicate this one and then we can create this one this one is smaller so we go to design sizing and I think it’s 20. that’s great I’m just going to align it in the center like this also this one
to just copy this entire column to the next one we just go into the settings and delete all the other ones and just one two three four and now we have again five columns but now I can easily change them I think these are actually a little bit smaller so we go back to design and we’re going to make them 15 like this then I’m just going to copy the module style hold down shift and select this ones and just press copy oh paste module styles so let’s just paste in the button then I’m going to take these two buttons I’m just going to save them in the library for use this is the dark button and this is the light button then I press over here I go to add from library and I add the light button use this module and we see that the light button is actually transparent when I hover over it it becomes the light button order now is the text and the design from the button is black so the button background is actually transparent but upon a hover like this it becomes this color yes and what it do has it has a border around it which is white the text color is white and upon hover the text color becomes black so we go to spacing we’re going to turn this a little bit down so that the order now just fits in perfectly yes this is better look at this excellent this almost looks exactly the same as the original and what do we see is that Tesla is using a gradient on the lower end page to start the new section we go to our background cannot select it anymore so we go like this we go to the section settings we go to background we’re going to add a gradient edit and then the first gradient stop will be black and the second gradient will be transparent like this and scroll down and it says place gradient above background image right the direction should be zero and then the gradient stops we can just drag it to go all the way
it’s a little bit lower you’ll see how easy it is to recreate any website you see on the internet then we go to the next place all new interior like this really easy to create just duplicate your entire section like this and then we just go down and we change this background upload it and now the gradient has been turned upside down so the gradient starts here and ends there so we just go to our gradient and we’re going to place this to 180 degrees and then the title is all new interior and the color is white and they don’t have a subtitle if you don’t like to work with negative margins what you also can do over here is add another section to it just a small section with one row and with this module inside of it then we’re going to make this row completely black and then we have this which I think looks a bit better and then we just have a excellent row to make this spacing a bit smaller less padding and now this actually is in the center of your two sections which looks exactly the same as Tesla has created it yes this is this is excellent then what does Tesla have even more nothing is just the image and then starts the next section all right I’m going to remove all these things we’re going to start the next section which is a row with a black background
and in this row they have a image gallery like this with some text all right let’s add a new section regular with this and we’re gonna add a slider like this this is the slider let’s add in the first content which is cinematic experience like this no button and we have this text we’re going to use a image like this upload the image let’s delete the background what we need is a dark section we cannot tune it any further we need custom css so we go to the settings of this page advanced custom css and I’m going to pasting this css which actually does it makes the container go to and display flash with the column refers and we’re going to align these items in the center then we go to the slide settings we go to design we go to sizing I’m gonna change the width to 1400 pixels the minimum height to 800 pixels actually things are starting to move around let’s make this a little bit smaller and change the phone to the right one and it was actually I think like this and also this phone’s too book version advanced custom see it says we’re gonna give the slide image a width of 1200 pixels like this it’s starting to look like way more the way it should then we’re gonna move the slide title with a margin top of 700 pixels I know I know this is not exactly the right way we should do this so if you have a better css code or script or anything to do this please let me know because I love to learn new things then we go to design we go to image we’re gonna give the image a rounded border of 15 pixels then the next thing we do is we go to the row settings over there we’re going to give it a design sizing a max width of 1200 pixels this way it’s more centered the next thing we do is we go to give it and go to spacing we’re going to give it a negative margin of minus 200 pixels so this is more up and we don’t need any bottom margin or padding now the only thing we have is that this text is not in the center
so we’re just going to paste in a little bit of css code and it is not that nice of a fix I know but it does work however so let’s create this slider and you see that the dv builder is now one mess so there has to be a better way let me know if you found one because I know it is there we’re just going to duplicate these sliders I’m just going to change them accordingly to the official website
and then we have all the slides included in the website then we go to our custom css we’re just going to change this code like this so on the front page we now have this slider working like this but what I don’t like about is that all these animations man they’re driving me crazy to remove this one we go to the settings of the slide we go to advanced custom css we go to slide description and we’re going to type in any animation name is none like this we’re also going to do this on the slide title
now you see that the animation is way smoother on the on the title any description so we go back we’re going to turn off the arrows like this go to advanced custom css and we go to slide image over there then you can give another animation to it for example fate in top animation is fade in top and now you can see that the animation is actually very smooth exactly like the official Tesla website so for the next section we have just an image with text text image really easy to recreate we just create a new section over there with two columns the first one is a image this is the first image over there press copy module and we’re gonna press base module we’re gonna add a black background to there and we’re gonna add some other text module over here which is like this
gotham book white and title will be h3 actually wireless gaming h3 of course got some ssm regular white and then we go to design and then we go to spacing let’s change the spacing to 10 pixels then we see that it’s lined out in the center and then we just go to the settings of this row design sizing we’re going to equalize the column eyes like this we go to the second column advanced custom css main element margin top auto and margin bottom auto and now it is actually aligned perfectly in the center let’s create the next one just copy this entire row oh first we need to go to design spacing get the top padding to zero and also the bottom padding like this and then we’re just going to copy it again now it is meshing up we’re going to change the columns like this change the image over here and we’re gonna change the text to this and also do this great do the same trick again now we’ve created this entire section within diffie all right the next section this section is exactly the same as the first one so we can just go over here and we’re just going to copy this section no I can’t reach it anymore so we just press copy section
and we just scroll down and we just press base section like this there’s no text in it so we’re going to remove it remove this one also oh this one is still there I’m going to change the background to the model x performance hero this is just a little bit smaller and we have this text over here so we’re going to change the height
to 90 feet few height well it’s even less I think it’s 80. then they only have three so we’re gonna remove the last columns like this and like this and then we’re gonna just change the text
did I just change it up manually while you could actually just rearrange the columns and then we have created another section so long page man this page is actually very long and all these things we’ve already created and it’s not that hard to remake so um this tutorial is already getting very long so I’m going to stop it right now guys but you get the idea it’s really easy to create this entire website within diffie if you want me to do another website let me know in the comments if you like this video hit the like button and subscribe of course for more wordpress related videos I see you again in the next video and I wish you a awesome day
