Create a One Page Website on WordPress - Monday Masterclass

In this Monday Masterclass, we go over how to use Elementor's Hello Theme & Theme Builder to create a one page website.
The website will come included with a nav menu in the header, as well as a footer.
We will learn to:
✓ Create the page itself, with the content divided into sections
✓ Build a menu that will allow visitors skip ahead to the relevant sections
✓ Publish a header that will include our menu.
✓ Publish a footer as well.
Our example client has commissioned us to build a website for his yacht rental service, Yachtora.
Our content will include the following sections:
Top (Home)
Features
About Us
Our CEO
Destinations
Photo Gallery
Subscribe
Contact Us
Read the full post: elementor.com/...
Get Elementor FREE: elementor.com/
Get Elementor Pro: elementor.com/...
Get Hello Theme FREE: wordpress.org/...

[@Valeras]

The teacher is just super!! You explain very well.

[@alanrojasyacolca]

You have no idea how much I've been DREADING the moment of creating my one page website, and you just made it so simple to do1 Thank you so much!

[@pipelinebrands]

Finally - Thank you for keeping this simple and clean. One page sites are great and I can't wait to see the seo part of the masterclass. I would even pay for separate training or a one on one tech support. Keep up the great work!

[@kevinroberts3789]

I'm just getting caught up on the backlog of Monday Masterclass videos and wanted to say how well produced these are! Very well written and well paced, and of course very useful content. Thanks.

[@IainMace]

Hi great video. Would be super handy to have a video showing setting best practice to set defaults of the theme ie colours, fonts etc so everything is consistent throughout the site.

[@mnburch]

Great tutorial. Unfortunately, it appears one cannot complete this tutorial, specifically building the header, without upgrading to Elementor Pro. In the future, please clearly indicate in the description that one must have upgraded to Pro in order to achieve the total end result. I don't know why this isn't done by default, especially by you Elementor folks. I would like to know straight off if I can do something with nothing other than Elementor Free and perhaps some free plugins. I am a one-man shop and can't afford Pro and paid plugins for each site I build.

[@expectnothing.]

For real m8 I got too excited.

[@brittneylphillips]

I appreciate this because I came back to this video (after having watched it the first time) to see if he was using the free or paid version

[@alperenozkan]

Thank you very much, you are publishing best of best tutorials and waiting impatiently...

[@mehdighorbani9021]

Wow! I don't expect such a complete tutorial in such a short video. Well done! Tnx!

[@SupSports24]

sir when u created the new menu what did u paste in the url section of features and others....

[@ЕвгенийТе-з1ы]

Thank you for this tutorial. With every tutorial I watched in this channel the Elementor Website Builder seems to be very easy to use.

[@rodneylivanze2906]

Thanks for such an amazing video. I'm guessing more are in the works. I had a question around SEO, How do you sort out your SEO for a one-pager, more so the links? Also, please share how you created the link within the custom field (3:21), it was not very clear. Once again, thank you for the great content.

[@iutiubdotkomm]

Those are the links to the CSS ID that he created before

[@theo.rivera]

I had to watch it in slow motion... so it goes like this yourwebsitesname.elementor.link/#cssidname

[@trexelectronic6339]

Where do i find the vid where i can somehow find my competitor's suppliers and or cust base to target them directly and undercut them for example, there must be code or backdoor thing for that...

[@thebibleproof]

A quick refresher on best practice one pagers. Thanks.

[@clintt5266]

wow is that command-E feature ever a handy trick! Save some clicks right there...

[@garydeverson2729]

For the short amount of time you have in these videos, this is excellent

[@ALMBusinessInstitute]

Great Video. We are just starting a website rental program and this one page site is perfect for that. Keep the videos coming.

[@EllieUltra]

Why do you put the full URL in the menu and links instead of just the hashtag? If it's all on the same page, it doesn't need anything but the hashtag and the word. This could especially get messy if a site is being built in dev and pushed to live and still linking back to dev without being searched and replaced. Just seems like needless extra work, unless I'm missing something?

[@iutiubdotkomm]

Tried it without the full URL and just # plus the CSS ID instead. It works just as well. Would be nice to hear why full URL should be used.

[@EllieUltra]

@@iutiubdotkomm I never use the full URL for any internal links and I've been designing/building websites for about 20 years. I think some people just have some quirky habits that aren't typical and cause more work, but they're not aware of it or stuck in their ways about it. I'm sure I have some, too, especially being that I'm self taught.

[@iutiubdotkomm]

@@EllieUltra thank you for your reply. That is my procedure too. In my comment I was refering to the Elementor team though, if they could elaborate if this is indeed a "quirky habit" or if there is any good reason to do otherwise. Keep up the good work

[@biggerfishTX]

great video - is there a way to make the menu appear at the top of each section?

[@glendaabuyuan1875]

Is this the same as using anchor widget to link the menus to the section on the page?

[@nigarsultana4882]

i don't have elementor pro, can i build this page?

[@_nawazpasha]

Please make video on how to optimise Website with hello theme and elementor and give before and after on Google page speed insights

[@Elementor]

Great idea - we will do that!

[@clementyo4526]

@@Elementor same as my question and really looking for it coz many reviews mention that elementor not super in speed performance. But i start to like elementor.

[@_nawazpasha]

@@Elementor Can We See this by this Monday

[@ReplicaNikes]

​@@_nawazpasha Why are you being so demanding? Just chill. They are giving us a lot of free value here.

[@WilliamStanley-qg5ux]

That was wonderful sir

[@jonajohnston3174]

I have a question. Is it possible to have only one of my pages with that format on my website and use one button to go back to the homepage?

[@spyrosnikolaidis]

In the video your page's layout is set to canvas elementor. which has no footer or header. So what is the catch here? is this correct or you changed it when the video was off ? because how the header is visible on canvas page? Also. The header is above the top section on the page. but you haven't touched the margin of the header section nor the margin of the top section of the page. how did you accomplish that? Sorry for my questions but this is quite confusing , thank you

[@susangemayel-tapper3794]

GREAT tutorial and the teacher speaks clearly and explains everything he does. Elementor team, you guys are excelling above the rest THANK YOU!

[@daricouk7758]

@Elementor Do you need a domain and hosting first before can work on wordpress or is it also possible to access the edit enviornment of wordpress without having any host and domain ?

[@Elementor]

Hi darico, you can work in WordPress locally without a domain or host, but in order to publish your website live, you'll need to have a host. Take a look at Elementor Cloud Website, which offers WordPress preinstalled, together with Elementor Pro, hosting, and more: elementor.com/features/cloud

[@christianehlers9189]

Thanks for the tutorial, but I didnt get the header IN the top-picture of the Yacht-template. I tried it three or four times but the header is always above the template. I would be pleaed, if you read the comment and give a hand. At least a small request: Not only For a lot of non native speaker you are very fast in handling the elementor routine functions. It would be helpful, to slow down the routines.

[@jisunleedotnet]

Same problem happened to me...

[@junio-marketing]

Same problem here!

[@AndyRobinson1010]

This was driving me nuts until I found the link in the description area which points to the associated blog page (elementor.com/blog/build-one-page-website/) - I don't know why this was not covered in the video, as it is crucial to follow this masterclass and the technique is really useful going forward. But look for the sections on 'z-index' and 'negative margins', good luck!

[@joannesmithmarketing8026]

@@AndyRobinson1010 thank you-- I thought I was going mad!!~! I did the tutorial 3 times and it was sitting above the top content!! -- came across the tutorial that shows how to do this also kzbin.info/www/bejne/j2rZn6tsib-jaKc

[@mydigitalmarketingjourney1087]

Thank you. Very clear. I'm actually working on a one-page website for a client right now and this will help.

[@Elementor]

Glad we could help!

[@samuxel]

definetly one of the best page builders!

[@mdl3439]

Where do you find your link? Trying to link the menu

[@therealPickleface]

Very weird. When I take the same template I still see me page title.... and I don't have a setting to turn in off?!

[@Neil9705]

Thank you Elementor Team. Would request you to make more and share more wonderful content like this please.

[@paritoshnpandya8426]

can we add PROJECTS/POSTS with MENU , in one page website, When we open the project page there should me menu on project page . The menu on project page should take is back to the one page website ?

[@kamrankhanofficials]

How can we use the pro locked contents on free hosting websites, if its possible or not..?

[@edwardsrubyg]

Thanks this is such a great help. How much should I expect to pay a Designer to create a 1 page website, just a ballpark price ? please, thanks in advance!!!

[@tjveach]

Great job, keep going. At some point let’s create a much more complex site. I love that you guys are taking this approach.

[@Elementor]

We'll definitely explain more advanced sites :)

[@Bapzrz]

My header still is above the top section instead of over it. What did i miss?

[@imfavaz]

Hi . From where you got the link for specific div ?

[@tomlathem8841]

Can use other theme or hello theme is better?

[@Seasonsofeating]

What is your main URL for this site example? None of the menus that I just created is working???

[@iconbobby]

Is there a way to make the menu links SCROLL to the sections, rather than just pop down to them? Also, once you're at the section, how about a "return to top" link?

[@bwtr203]

What is the secret to setting a transparent header as you did? I set up the header exactly the same and set the background opacity to zero and still have a white background somehow.

[@borispodobnik7994]

In top section of the page go to advance and in the top margin field insert value -100. It works for me

[@maxou2175]

hello ! where do I get the full URL ? Thank you !

[@bhavatarini5995]

Does a one page website need privacy policy and terms and conditions pages?

[@pequ83]

Thank you for the video. Very useful material. I have a problem with the footer, because it is not at the bottom and floats up and down with the user. Can you help me?

[@ExploringLife]

Thanks a lot... I was looking for this... How can I put slider and sticky menu...

[@Avangers101]

Please show how to optimize it for SEO and speed .

[@Elementor]

We have a previous episode on SEO, and we'll be making one on speed soon

[@Avangers101]

Please provide a link here .

[@NavidBarati]

@@Elementor Great, Speed is really our highest priority. Thanks

[@candicehoutekier8853]

@@NavidBarati Agree, speed is highest priority

[@AlvesCristianoG]

Do I need Elementor Pro for this?

[@mattsmith429]

just getting into using Elementor, many thanks for the content 👍

[@abuelbayangan9273]

1:50 assigning a css id to sections 2:50 creating a menu from the css ids

[@georgeelliott8988]

@3:23-Where is the URL from that you add the Menu link to?

[@iutiubdotkomm]

I believe it was the first CSS ID, named top, with a #

[@theo.rivera]

I had to watch it in slow motion... so it goes like this yourwebsitesname.elementor.link/#cssidname

[@RunningArtGFX]

How do I make a two page one? I have it made I just the link don’t take me to the other page. Example: projects on page one. It doesn’t take me to project page.

[@MQuotesz1313]

One small doutt sir....how to add image editing tools in blogger thems....like how to create Name generated image ...frame adding own image and download with name in blogger drag resize and rotation...how is possible...tell me

[@janhvisinghal10]

hi.. much appreciation from india :) can u plss tell me which theme to choose for building 1 paged website on wordpress ??

[@abrahamprieto1466]

Something weird, in the tutorial I see you select "Elementor Canvas" but with that option the menu does not appear, only appear in default and Full width options.

[@JUANinOman]

That's what I noticed too, prior to working all those instructions, I made sure that I set to Elementor Canvas as seen in this video but the header will not appear. So changed it to full width instead

[@BD-hy8bl]

Back top top and/or sticky menu & z index for the header as an update version if possible pls. Thanks.

[@marcotocci]

Hi! You're great teacher but I can't solve my problem! Trying to make the same design, I have repeated the same steps but I can't in any way make the header transparent. Can you help me please??

[@worldbiking]

Excellent content and delivery! Good pace.

[@WolfgangDegreif]

Nice explanation, but watch out. I'm a newbie and just installed elementor pro. But dragging elements to the side does not work. I asked for help twice and made a ticket, but nothing happens.

[@shehzadbaloch9711]

Great! Keep making videos

[@SSTNETWORK]

love the presentation ... thanks a lot

[@cjwebdev]

Can you show the changes that are made in a live view? It would be nice to see the changes as you edit them.

[@clementyo4526]

Hi, is elementor great for speed performance? I am very interested in elementor. Can you make review for speed performance?

[@Elementor]

We'll definitely do that. Hello Theme is great for speed. I would also recommend a good hosting plan, and using caching

[@raylehman3653]

the link you are adding in the MENU isn't clear. I have labeled a section as TOP on my website btwlegacyfoundation.org/. should my link be btwlegacyfoundation.org/#top?

[@virtualtouchpro]

Does Elementor makes website slow. Another question - Are the Elementor websites are slow to rank?

[@MANNOSALWA]

Instead of the full url in the menu section , only the CSS ID with the # sign would do too

[@MakingWebsitesEasy]

Elementor, you've done it again! Excellent explanation and examples! Looking forward to the next one!

[@Elementor]

Great. Do you have any suggestions?

[@paulanascimento234]

For some reason only two out of my menu sections are working as a one page. The remaining two keep loading when I click on them. Any idea what could be happening?

[@Elementor]

Hi Paula, these kinds of things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? It's a great place to ask questions like this, and get great advice from other web creators. And you can share screenshots and links there as well: forum.elementor.com.

[@CharlesHale85207]

Great information, make things much easier when you can see it hands on!

[@wrightstartskatingacademy154]

How much would it cost to have a one page site like this developed and optimized?

[@DanielMerrido]

Incredible, with videoclip on top on bot, amaizing

[@atiftalk6167]

Amazing sir keep uploading the tutorials thanks 😍

[@abidrai726]

Very nice

[@okochemackos3888]

Great tutorial. Thank you guys..

[@MrMarcelWiel]

That was great! Really compelling and super interesting... thanks

[@natallam596]

Thanks sir ALLAH bless you.

[@candicehoutekier8853]

Thank you, I liked it. I can't wait for the next lesson!

[@davespurs7597]

Hiya, Can you please connect Mailster Newsletter plugin to Elementor Pro Forms (without having to use a 3rd party). This would be great. Many thanks.

[@upamm]

Cheers for HELLO Theme

[@JamesMall007]

Thanks guys, great video keep them coming :-)

[@Andrew-yt6pf]

Excellent tutorial!

[@niravdiev4477]

Great video! Thanks again! :)

[@pramoddoshi]

How to add slider in elementor website ?

[@MarioBarretta]

Great video . Do you have idea to give us examples how to manage search by Ciustom field and Taxonomies or Custom post types? also how to manage User Submitted post genrating advanced forms without to use external plug in ? i think that, giving us these added values, Elementor will stay on the first position of podium for ever XD Thank You for all

[@kuda-online]

I m here at 2 views happy to be here , Thanks for sharing

[@acehobojoe]

Looking forward to the caching one !

[@tegapraiz2765]

Hi I really enjoyed the video it was really educative but I would like to ask can you do a video on a 5 page website how it should look like and how Much one should charge a client for it also how much would you charge a client for a 1 page website

[@devilsadvocate2643]

You basically want them to do your job ? lmao

[@tegapraiz2765]

@@devilsadvocate2643 not really ..... But how much would you charge a client for a 1 page website p.s am self taught that why am asking so many question

[@Syeidin]

Wow, Can I get he .json file?Please?

[@jeanniemarie9156]

I learned a lot, thank you

[@KimMcKee]

brilliant as always, thank you!

[@cyclist030]

If you running a onepage you need 'to top' links or a sticky header menu ;)

[@coldbreak509]

Why are you using pixels?

[@sofieadie]

I put the elementor link but it didn't work. it crash

[@shubhamrawat5758]

Great👍

[@Sadi_CH]

good experience with you buddy

[@Ruffian_Xion]

1:36 "write us a mAssage"???

[@EllieUltra]

I wish all I had to do was fill out a contact form to get a massage!

[@joel199191]

No background video on mobile version (?) Ps. Toda!

[@jheelparekh2225]

How to make a one-page website with Astra theme?

[@Elementor]

Hi Jheel, we recommend the Hello theme together with Elementor. You can also post your question in the Elementor Community Facebook group, where you can get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314

[@dinorossi6611]

We need a new A to Z tutorial on Generatepress theme and Elementor. A 2019 slow paced one... making a blog from A to Z

[@constancedenardis4740]

woo hoo thank you