How to Build the Tesla Home Page in Elementor - No Coding Required!

[@stevemcirvin]

Thanks so much for introducing me to the snap scroll feature!

[@august6083]

Nice video. What theme was used, not sure if it was mentioned.

[@KingGrizzly]

Elementor Hello Theme. WIth Elementor, the theme really doesn't need to do much since Elementor is so capable. We highly recommend using the Hello theme.

[@sabisgood]

Great tutorial! I'm enjoying watching your content. That's very interesting how to build a Tesla home page on Elementor. I'm curious for the next video about building a Tesla website part 2, maybe the "custom order" section would be interesting :)

[@georgeandrei3026]

Hello, thank you for this video, can you show us how you made transparent header menu please? Or how i can set on desktop version to not show the header menu default( I mean that with white backround...) Thank you!

[@KingGrizzly]

Hi George. For this demo, I clicked on the gear icon at bottom left and set the "Page Layout" to "Canvas". This will remove a header and footer. After this, it's possible to add a section to the page and put a menu in it. Select that section and set a negative margin on the bottom until it pulls the section below up behind the menu. Alternatively, instead of using a canvas, you can go to Elementor > Theme Builder and create a header or adjust the styling an existing one in a similar way. Here's a video about theme builder headers: kzbin.info/www/bejne/fnncZoWBa7xgbKs

[@georgeandrei3026]

@@KingGrizzly Thank you for the answer! I appreciate it, and I subscribed to your channel. I think it was another method, I already tried with negative margin. Thank you!

[@KingGrizzly]

@@georgeandrei3026 Thank you George!

[@clementyo4526]

Awesome Brian 👍😁 good inspiration

[@KingGrizzly]

Thank you Clement! I wonder what else we can build with minimal code in Elementor...

[@MikeRuman]

Thanks for doing this video! I’ve learned a ton!

[@ingenierosistemas590]

Hello, thank you very much for the video. I didn't understand how you did the stycky effect of the titles: "model 3" ... "modelY".

[@KingGrizzly]

I don't think I did anything special with the section titles. They are sitting inside an inner section along with the text (eg: "Order Online for Touchless Delivery"). If they appear to stick, it may be an illusion because the snapping transition is quick. The main menu is set to sticky by going to Advanced > Sticky:Top for the header section.

[@BeginnerVids]

Any chance on turning this into a start to finish tutorial video? It would be really helpful!

[@KingGrizzly]

This video is close to step-by-step, not quite but most cues are provided, so we'll leave it. I'll keep this in mind for future releases. Thanks!

[@BeginnerVids]

@@KingGrizzly no worries! regardless, the video is still very helpful. thank you!

[@KingGrizzly]

@@BeginnerVids Thank you very much!

[@melmelon3]

Amazing!!!

[@halowatches]

What theme are you using - finding trouble with the scroll snap effect not working at all

[@KingGrizzly]

We always use the free Hello Theme from Elementor.

[@halowatches]

@@KingGrizzly Yeah for some reason the snap effect isn't working for me. I'm wondering if there is something I'm missing since elementor got rid of sections and just uses containers now

[@KingGrizzly]

@@halowatches It should still work, but I haven't tested the effect with containers yet. I happened to notice @Ferdy Korpershoek released a video in the last few days showing how to build the exact same Tesla page using containers ( kzbin.info/www/bejne/i4PYlHeOipaXi5o ). Maybe explore that for clues?

[@addi2980]

can you do the video again with the new elementor pleaaase? :D

[@KingGrizzly]

Ha! Building the same page in containers would be fun. I'll see what I can do. 🙂

[@heatherdawnnovecosky4245]

Thank you for this, DUMB question...do you have to build your sections and inner columns before inputting the elements as in buttons, text etc? How do you get the bottom links & down arrow to sit at the bottom of the page. Obviously, I have a lot to learn in elementor. THANK YOU for any help. :)

[@heatherdawnnovecosky4245]

Sorry, I see you tried to explain by adding inner sections. I will try and make that work. :)

[@heatherdawnnovecosky4245]

I have set this up exactly but now there seems to be an auto in left and right margins and image is cut off on those areas

[@KingGrizzly]

@@heatherdawnnovecosky4245 If you are saying the images don't make it to the sides of your screen, here are some things to try: 1: Make sure the section is set to "full width" 2: Click on the gear icon at bottom left and choose "Page Layout > Elementor Canvas" What theme do you have activate? I used the Hello theme for the demo.

[@heatherdawnnovecosky4245]

@@KingGrizzly thank you, yes the section is set to full width as you show in the video. I purchased the theme (The Pipes) from Ancora Themes. I was working with the developer as my client wanted their homepage to resemble the Tesla site with the snap scroll. The developers could not get the snap to land correctly(there was always the next photo showing especially on mobile.) So I purchased Elementor Pro to try to get it working myself. Elementor Canvas worked! Thank you! How to you set the inner sections to sit lower on the page?

[@KingGrizzly]

@@heatherdawnnovecosky4245 Hard for me to know without seeing what you are doing. You may want to reduce the padding on the full height parent section the inner sections are inside of, or try "space between" for the vertical alignment setting on the parent column. You could also try absolutely positioning the inner section and set the bottom icon and a value like: 50px. Maybe those clues will help!

[@LandOfTheFree645]

I can not figure out how you did the "Space Between" the inner sections on the Model 3 section. Ive been trying to do this seemingly simple thing for about 3 hours to no avail. About to throw my computer off the balcony.

[@KingGrizzly]

Oh no! I think I mention it at the 6 minute mark. There are two inner sections. One contains the headline/subheadline. The other has the buttons and arrow. I set "space-between" on the parent column as well as some top and bottom padding to move things around. If you are using a newer version of Elementor which has containers, the process would be different.

[@gabrielfacenta8582]

Hi! thanks for the video. I wanted to do it but when i go to the page settings section, the scroll snap option is not there :( There is only the "Custom css" option. Any idea of how can i do it?

[@KingGrizzly]

Hi, you'll first need to go to Elementor > Settings > Experiments and set Scroll Snapping to "Active". This may also require Elementor Pro as well.

[@gabrielfacenta8582]

@@KingGrizzly thank you! I just did it and it works! 💪

[@NoFearCooking]

Do you offer to export these as templates? I’m relatively new to WordPress and completely new to Elementor. The navbar is giving me trouble 😢

[@KingGrizzly]

Sorry, I don't have those pages anymore! What seems to be the trouble with the nav bar?

[@NoFearCooking]

​@@KingGrizzly ​ I figured it out around a half hour after asking the question but I appreciate you checking in! I ended up using containers and it solved the problems I had. Containers are great, can't wait for them to get out of Alpha.

[@KingGrizzly]

As a convenience, here is the UNREQUIRED snippet of "code" in this demo for the hyperlink underline effect (I gave the containing section the class of tesla-panel, no period required, under the Advanced - Class field. This is not required. /* Simulate underline with box shadow */ .tesla-panel p a { box-shadow: #171a20 0px 1px 0px 0px; transition: all .15s; } /* Grow underline on hover */ .tesla-panel p a:hover { box-shadow: #171a20 0px 2px 0px 0px; } Also this is required if you want to trigger a pop-up fly-out from text or menu: Inside the Elementor pop-up, click on the gear and go to the "Advanced" Tab. Enter a[href="#menu-tesla"] under the "Open by Selector" field. Next, link any text or button to: #menu-tesla

[@addi2980]

Great!

[@Learnwithzahid247]

hi can i get the downloadable file of the tesla site?

[@KingGrizzly]

Sorry, I didn't keep a backup of this demo!

[@raulgil8207]

Good video, however the scroll snap doesn't work for me, I must be doing something wrong

[@KingGrizzly]

Any chance you are using a touchpad in Firefox on a Mac? I noticed the Tesla site and Elementor site both had trouble for that setup.