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

Jul 8, 2014

—

in Canvas by WooThemes, Canvas Extensions, Video Tutorials

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

Comments

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

keith whalen

July 8, 2014

Very, very impressed

Reply
Nick Burne

July 8, 2014

Thanks Keith!

Reply
Ronald

July 8, 2014

One word: beautiful !!!

Reply
1. Jamie Marsland
  
  July 8, 2014
  
  Thanks Ronald 🙂
  
  Reply
Nick Burne

July 8, 2014

Thanks Ronald!

Reply
Monique

July 8, 2014

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

Reply
stephen strydom

July 9, 2014

Hi,
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?
Regards,
Stephen

Reply
Jamie Marsland

July 9, 2014

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 ownhttps://www.pootlepress.com/2014/06/sneak-preview-canvas-page-customizer-video/

We’ll be producing some specific Page Customizer tutorials very soon as well 🙂

Jamie

Reply
Morten

July 10, 2014

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.

Reply
1. Nick Burne
  
  July 10, 2014
  
  Great point Morten! 🙂
  
  Reply
Morten

July 10, 2014

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?

Reply
1. Nick Burne
  
  July 10, 2014
  
  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
  
  Reply
  1. Morten
    
    July 14, 2014
    
    Hi Nick,
    
    how about a Rows Custom Post Type and a Rows page template like they do it here:
    http://cobaltapps.com/forum/forum/main-category/web-design-talk/15685-how-to-wysiwyg-editor-for-full-width-rows-genesis-friendly-version
    
    Reply
    1. Nick Burne
      
      July 15, 2014
      
      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!
      
      Nick
      
      Reply
imrul khan

July 10, 2014

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

Reply
1. Nick Burne
  
  July 21, 2014
  
  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
  
  Reply
Jonhard Larsen

July 22, 2014

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?

Regards
Jonhard

Reply
1. Nick Burne
  
  July 26, 2014
  
  Hi Jonhard, I think it works now, so I will remove that message! Any problems, please email support. Thanks, Nick
  
  Reply
Catriona

September 23, 2014

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?

Reply
1. Nick Burne
  
  September 23, 2014
  
  Absolutely Catriona! ; ) Any problems, just email support@pootlepress.com
  
  Reply