How to create long scrolling pages with full width rows with Page Customizer & Page Builder for WooThemes Canvas

We have been hard at work developing our new extension Page Customizer which gives you the ability to have page level control in Canvas. Options include full width pages, background images, background colors, hiding elements and mobile options too. Not only this but you can also set these options site-wide and then turn them off on individual pages! This gives you a huge amount of control.

Combine this with the new version of Canvas Page Builder that gives you loads of options for styling rows (including adding classes, background colors, background images and more) AND newย Page Builder Widget options and you can do some truly remarkable stuff.

For this tutorial you will need:

  • Our new Page Customizer Canvas Extension
  • Canvas Page Builder v1.0
  • Page to Scroll id (free)

Let us know what you think in the comments below!

1. Introduction

2. Quick tour of Page Customizer

3. Quick tour of new Canvas Page Builder features

4. Page Background Image

5. Creating the header and aligning menu right

6. First row with Page Builder widget font settings

7. Add full width rows

8. More font styling with Canvas and Page Builder

9. Smooth scrolling navigation

10. Mobile responsiveness & options


20 responses to “How to create long scrolling pages with full width rows with Page Customizer & Page Builder for WooThemes Canvas”

  1. keith whalen Avatar
    keith whalen

    Very, very impressed

  2. Thanks Keith!

  3. Ronald Avatar

    One word: beautiful !!!

    1. Jamie Marsland Avatar
      Jamie Marsland

      Thanks Ronald ๐Ÿ™‚

  4. Thanks Ronald!

  5. Monique Avatar

    Well worth the wait! Wonderful, easy to follow tutorials.

  6. stephen strydom Avatar
    stephen strydom

    I am a bit confused: Is page builder and page customizer designed to work together or could PC be used on its own? Are there perhaps video’s showing what can be done with PC alone?

  7. Jamie Marsland Avatar
    Jamie Marsland

    Hi Stephen,

    Page Customizer can be used on it’s own ๐Ÿ™‚ But it does work beautifully with Page Builder.

    Here’s some videos that show you Page Customizer on it’s own

    We’ll be producing some specific Page Customizer tutorials very soon as well ๐Ÿ™‚


  8. Morten Avatar

    Hi Nick,

    I am very impressed with what I see here and I am definitely becoming a customer.

    Just a little hint; with regards to video “6. First row with Page Builder widget font settings”, when you copy text from the web to paste into your WordPress content, remember to click the “Insert as text” button in the editor prior to pasting. It will strip formatting like spans.

    1. Great point Morten! ๐Ÿ™‚

  9. Morten Avatar

    Video # 7. Add full width rows:

    From what I get from the video you can add padding to the row content in the sitewide settings and you can manually add a div class to a row in the Row Visual Style editor.

    So if I use the “add div class to a row in the Row Visual Style editor” the client will have to remember to add the class.

    If I use the padding method, how will the width of the content behave on different screen sizes? Will it align neatly like in a Canvas standard page?

    1. Hi Morten, I take your point clients having to remember to put in classes. Not ideal. The padding setting in Page Builder widgets is not 100% ideal either as it is set for all widgets globally and with pixels (rather than em which is more proportional). This is the reason we think being able to put in your own class is important. I will reflect on this to see if there is any improvements we can make, but if you think of any ways it could work better, please do get in touch. We really want to develop our products collaboratively. ๐Ÿ™‚ Nick

        1. Hi Morten,

          I have emailed you back too ; ) Thanks for your email and thoughts!

          I don’t understand how a rows template and custom post type help here. One of the things I love about the way our Page Builder works is it gets away from all the endless custom post types that plugins use at the moment. We think there is end coming to all of these because of page builders like ours.

          From what I can see, adding rows as custom post-types completely limits the flexibility of adding rows in Page Builder.

          What is the main benefit of this do you feel? Now with the Pootle Visual editor widget, adding content using widgets has the same visual editor as a custom post type.

          So I just canโ€™t see the benefit.

          Let me know if you think I am missing something!


  10. imrul khan Avatar
    imrul khan

    Just a quick question, whats the difference between page builder and page builder developed by siteorigin?

    1. Hi Imrul, Canvas Page Builder was forked from Page Builder from SiteOrigin. We have made some developments to make it work great with Canvas (making all the Canvas widgets work perfectly), we have made some of our own developments, such as more comprehensive and integrated row styling too. We also offer premium support (by email) and upgrades for 1 year. Hope this helps! Nick

  11. Jonhard Larsen Avatar
    Jonhard Larsen

    Hi Nick, First let me say, some very impressive plugins you guys have made.

    I have been following along your tutorials, and when I am trying to use the Align right plugin I get: “The Align Right plugin does not currently work with the full-width button”

    But it work in your tutorial ๐Ÿ™‚

    I have the Page Builder og Page Customizer installed and of course the plugin Align Menu Right.

    What is there to do?


    1. Hi Jonhard, I think it works now, so I will remove that message! Any problems, please email support. Thanks, Nick

  12. Hi there, this looks lovely and I’m about to buy Page Customiser and get cracking. Can you use Sticking Nav on these long scrolling pages?

    1. Absolutely Catriona! ; ) Any problems, just email

Leave a Reply

Your email address will not be published. Required fields are marked *