Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer Create a One Page Website with Page Builder
One-page websites are incredibly popular right now – and for good reason. Not only can they be easier to conceptualise and create, but they can also give better results. Higher conversion rates, increased sales and a more focused design.
In version 2.3 of Page Builder, we’ve given you the ability to specify custom row IDs for your Page Builder rows. This feature makes it easier than ever to create one-page sites using any WordPress theme.
In this guide, we’ll show you how to build a one-page site using North and Page Builder. Both are free and incredibly powerful. You can install everything using the SiteOrigin Installer plugin.
I’d also like to introduce you to Ian Rossiter. A long time user of Page Builder and the guy who’s been helping us create the beautiful layouts on the pre-build layouts directory. He’ll be joining us in creating educational content for SiteOrigin products. We couldn’t be happier to have him on board.
76 Comments
Does the menu item highlighting work as well? I think this is quite important for a onepage website.
Good point! I’ll log that as something we could add to North. As for other themes, Page Builder couldn’t really control this, unfortunately.
It will work sort of with this plugin: https://nl.wordpress.org/plugins/page-scroll-to-id/
Also even on a onepage website is is sometimes nice to be able to add a second page (a blog or some content which is not appropriate for the frontpage). Could you do that with north and still be able to use the menu when you are on the second page? I guess you will have to change the menu link from #hero to http://homepage/#hero otherwise the page won’t be found.
Yeah, North is a fairly standard theme, so it’ll work for multi-page sites too. I’ll have a look at that plugin too. Looks interesting.
I made this site (http://www.hands2happiness.nl/) with pagebuilder and that plugin. You’ll see that the menu highlighting sometimes goes on and off when scrolling through the page.
I think this is because of the second page and therefor i had to change the menu linking from #hero to http://homepage/#hero.
Hey guys,
a question: Is page builder able to add say 3 posts from x amount of categories in magazine style?
Hi Max
You can post questions over on our support forum. The team is standing by to help.
This brings incredible joy to me as I read this! Can’t wait to get home and watch the video :D
Also long time fan of Page Builder!
Hopefully the South African accent makes you feel right at home :)
Oh definitely!
I wish there will be more videos as this one in the future, that shows advanced functionalities and how to!
Great job as always guys, keep it going!
Thanks Andrea! I’m hoping that we’ll be able to keep going with these videos. They’re really fun to make.
This is absolutely a killer, fantastic video great to watch and listen to it is crystal clear.
I just wonder if this tutorial works Vantage theme as well?
Thank you
MO
Thanks M! Ian gets all the credit for the clarity of this video. He put a lot of effort into the presentation.
To answer your question, yes, this will work with Vantage :)
Too many single-page themes out there with rigid structures and their own built-in “widgets” for items I may not want. THIS is what I’ve been waiting for! Thanks, SiteOrigin!
Very glad to hear it, Wesley! It’s really exciting that just about any WordPress theme can form the basis of a one page website. Especially when you add in https://wordpress.org/plugins/page-scroll-to-id/ (thanks to Jasper for suggesting).
Love everything SiteOrigin! You guys are great, this video is as well. Pssst this video and page looks great on my phone. (Android). Woooo!!
Thank you very much, Carrie! And SiteOrigin loves you back :)
Nice tutorial. I like siteorigin. Hello from Russia.
Thanks Alexander! And greetings from South Africa :)
Best time this feature added for me, i am just building a theme using siteorigin as a page builder of my choice and in combination with my addon plugin for siteorigin (https://wordpress.org/plugins/addon-so-widgets-bundle/) i will taking advantage of this awesome new feature for sure in my theme.
Thank you so very much.
Munir
It’s great having you as a SiteOrigin developer Munir. I’m very interested to see your theme when it’s done. Thanks for integrating it with Page Builder!
Hi, using the focus theme, but cant get mp4 files to work on ios, my content is in the mature category, have bought a vimeo subscription pro temp, but is there a way of adapting the plug in?
Hi Mike! The best place to get help would be over on our support forums – https://siteorigin.com/thread/
This is just great Greg :-)
Thanks Maher!
Howdy Team,
I knew, you are none the best. I enjoy any further development of your house. Thank you for this great guide.
Best regards from Berlin
Bernd
It’s an absolute pleasure, Bernd. The team here at SiteOrigin will continue building and building awesome products as long as we have support from people like your self :)
Great Video! and IMHO your hair style is a lot nicer than Nick Roach (Elegant Themes founder).
Can’t wait to see more videos… and hair styles lol ;)
Pete.
Thanks Pete! My girlfriend once joked that Ian’s hair needs its own Instagram account. It really is a thing of wonder.
Simple, effective and powerful<– 3 words to describe your videos and Site Origin as a whole!
Great job and I'l definitely be giving this a whirl on my next little project in a few days.
'blomin marvelous :-)
John.
Hi John
Those exact 3 words should be posted up on the walls here at SiteOrigin. It’s exactly what we’re aiming for with our products. Glad to hear we’re hitting the mark.
Just wanted to swing back and say thanks once again.
I followed the video and using only the SiteOrigin tools, was able to get a local community website up and running in just a couple of hours. http://www.EytonParish.org.uk
Really great toolset and very very impressed with the results!
Kudos to you and the team.
This is amazing.
Thanks so much for the video.
Just wondering, with the ID, when i click the Navigation Menu, my url is http://www.mysite.com#row-hero
is this ok?
Thanks
Hi Tom
Thanks! Yeah, that’s so you and your users can easily get the URLs for the different sections of your one page site. I’ll see if there’s a way for us to control this. I haven’t tested it yet, but perhaps this is provided by https://wordpress.org/plugins/page-scroll-to-id/.
If you need any more help, please be sure to post over on our support forums https://siteorigin.com/thread/
Incredible, i don´t understand english, but in this video everything is so easy to learn…
Thanks from Galician (spain)
Thanks Carlos! Glad to hear our videos are even helpful – even for non-English speakers.
Thanks for this brilliant video. The facilities in the free version of the siteorigin north theme are great for this single page use, and showing us how to use those layout settings to manipulate this for the page like this is so useful.
I’ve just created a site along similar lines to what you demonstrated and the method you’ve demonstrated is so much easier. And the results are impressive.
Great Joy and Happiness
Thanks for the awesome feedback Peter! Great joy and happiness indeed :)
Outstanding tutorial! Very powerful features in your plugin. I must download and begin experimenting immediately. The prebuilt layouts is especially interesting. Do you have a list of the layouts included with your various themes or do all your themes include every layout you provide? Also, I assume it’s straightforward to build my own layouts but I’ll take that topic to your forum. Thanks for your awesome contributions to the WP community.
Thanks Christopher! To answer your question, every layout on the prebuilts layout directory is available within Page Builder. They’re theme independent, so they come with you wherever you happen to go with Page Builder.
The new internet mantra = Less is More
That’s definitely a good mantra Barry. Less confusion, more power. That’s when technology becomes really useful.
I got directed to this by internet marketer Rob Cornish who runs gainhigherground.com – you might want to have a chat with him as he is good at joint ventures
Hello,
thanks for taking the trouble to enlighten folks. When I click use to install the fitness gym theme there are no images being loaded like in the preview (North and Builder installed successfully), just a generic layout is visible…
What did I miss?
Thanks!
Sorry,
I hadn’t noticed that I have to install additional widgets manually. My bad!
Glad to hear you solved the issue Olaf. Those should be auto-activating, but I’ll look into it. If you have any other questions please feel free to post on our support forums.
How i make when i click Home my page scroll to the top?
Sorry for bad english
Hi Josko. If you have any other questions please feel free to post on our support forums.
Do you have page on wikipedia? I can’t find it. Could be a great way of free advertising. Wiki results come up highly ranked in searches – Musica Gloria
Hi Barry. One day I hope SiteOrigin and even our individual plugins qualify for a Wikipedia entry, but I’ll wait for the Wikipedia community to decide when the time is right :)
With only one page how would you monetize it?
Hi Barry – One page sites aren’t for everyone. Especially not for content sites where you’d monetize with advertising. One page sites are generally best for things like product or company pages.
Great video, can’t wait to build a one-page site myself :)
Hi Greg Priday,
I´m an oldish guy (73). Last Christmas one of my grand daughters gave me – as I thaught a typewriter, but it happend to be a “DELL COMPUTER”. – It tooks me and some “oldish guys” several month to learn what all the kids have in their bloo.
Anyway we also came to know about “site origin”. – and tryed hard to learn. But it seemed that we are too stupid. – Is there any chance for an german advice in site origin. It was 1966 when I used to live in England (Chelmsford) – so I´m very sorry for my horrible english.
best regards Opa-Otti
Excellent video!
Isn’t it vital to create a child theme so that work doesn’t get lost if there is an update to the parent theme? Also, will the Vantage theme (that I am purchasing) work well with video?
Thanks,
Robert
Hello I aa using Slider Site Origin, how can I overlay text on my image or put a text like a legend under the slide, when I use the slider Site Origin slider. thank you for your answer. best regards
I followed the video and it works great except that when a menu item is clicked, the section it scrolls to has a blue border around it. The borders aren’t there when just scrolling down the page. I tried editing the CSS but can’t make the borders go away. Any ideas on how to remove them?
I’m using the North theme with a prebuilt layout. The site is at cometcandy.com.
Thank you so much for this video. The instructions were very easy to follow and I’m very happy with the result.
And thank you also for the terrific work SiteOrigin is doing on its themes and Page Builder. I have been struggling for months to develop a website for my firm. I have very expensive taste but no budget to go with it. With your products, I have been able to develop a website that I’m proud of. Thank you!!
Thank you so much for the very awesome feedback, Denise! I just had a look at your website, it’s looking great :)
Hola,
This is Catalina from Colombia living in Madrid. 1.Is there any chance to see these videos in spanish? 2. I actualized my site origin builder and now I can’t see the content of my page. What can I do?
Best regards,
Please how can the picture images that came with the “Fitness Gym” be changed?
I created a one page website using north theme and i also created a blog page but when i go to the blog page hellow world example http://fashionforfighters.org/2017/03/12/hello-world/ and click the other menus like support i go to this link http://fashionforfighters.org/2017/03/12/hello-world/#row-support but it should be http://fashionforfighters.org/#row-support. the problem is i am stuck on the blog page and cannot go to the other menus. How do i fix this?
How do I hide the menu bar on the left side of my control panel?
Inside Custom CSS, it covers the work area.
See attached link:
https://www.dropbox.com/s/5l2o5d18q1gonwi/Sk%C3%A6rmbillede%202017-05-01%2010.28.22.png?dl=0
I have the same issue as Jerny Samala. Does anyone know a good option for incorporating a blog using this method? If you use any recent posts widgets, or carousels you get taken off the page, then the navigation will now work.
Hello,
I’ve tryied it on a sample website, it’great, BUT there is an issue with the primary menu :
When the website contains more pages than just the front page, primary menu items custom links are disabled.
Is there a way to fix this ?
Greetings,
Agnes
Hello again, sorry for the previous comment, just after posting it, I remeber to write the custom link this way :
httt://www.mywebsite.com/#row-name
Hope it can be useful to someone…
Hi!
Thanks, this was very helpful. I’ve made a few sites this way and they look good and work fine.
Now I have made another one, in the same way, but located in a sub-folder of another website. On my computer it looks fine, but on my mobile device, it’s not responsive, even thouggh in the WordPress environment the mobile device view shows it is. Funny thing is, that I also cannot refresh the page on my mobile device.
The site is: cavesinn.com (location: theokoopman.nl/cavesinn)
Any idea what causes this and how I can fix it?
Thanks!
Kind regards,
Theo
Hi again,
I’ve figured it out. The problem was the ‘frame’ around the website that made the address look better, but messed with the responsiveness. I’ve now changed the settings and it works well on mobile, too, only the address now includes the addres of the website that contains the sub-folder. Then again, responsiveness is more important to me.
Thanks again.
Theo
Where are the page attributes and page settings in the new WordPress? I can’t find it anywhere. Please help, new user.
Oh my word!!!! I figured it out!!!! So don’t worry…thank you!!!
Hello, I have made the landing page with Siteorigin, but i don’t understand how I can make the button to scroll to the right section?
Also I don’t have any links for each section in the link window?
Please help
my website is http://svcentre.ee/svcentrenew/
Very good explanation!
Thank you very much
I’m using site origin and widgets on my page. I only want to have 4 items listed on my page at a time. However, I have more than one page in the same topic. How do i create a “go to” next page option at the bottom of my page so it will take you to the next page to see the additional pages?
Does the menu item highlighting work as well? I think this is quite important for a onepage website.
Hi, sorry we missed your question. Menu highlighting will work with our Corp theme. Please, see: Page: One Page Website.