We’ve been blown away by the incredible sites you have been building with Canvas Page Builder and Page Customizer.
What’s been really exciting to see is the level of creativity that the combination of Canvas and these two plugins has unleashed.
We’ve been getting some common questions over the past couple of weeks, so I thought I should put together some video tutorials to show you some of the coolest features you can now build on your sites 🙂
As ever, if you have any questions or would like us to do a specific tutorial for you, please post them in the comments below.
Thanks for taking the time to Pootle 🙂
Jamie
How to create a full width section with Canvas Page Customizer and Page Builder
How to change the padding of text on full width sections
How to create fully customized pages
How to set a different mobile background per page
How to resize columns in Page Builder
Typographic controls
How to remove the space between full width sections
How to create a distraction free WooCommerce check out page
How to create a beautiful login page to your WordPress website
How to copy layouts between pages
How to create beautiful parallax rows with colours with variable opacity
How to remove the white space between the page and the footer
How to change the background colour of a specific widget
Comments
22 responses to “10 Canvas Page Builder and Page Customizer tips and tricks (now 13)”
David
Wish list: use this page builder to create custom post types. What do you say?
Jamie Marsland
Hi David,
Well the PageBuilder really negates the need to create custom post types 🙂
Hope that makes sense ?
Jamie
David
But then you wouldn’t be able to create pages that automatically pulled in this content.
Jamie Marsland
HI Dave,
PageBuilder will work with custom post types. eg testimonials and team plugins from woothemes.
PageBuilder really aid in creating complex and creative page layouts and not in creating custom post types. But our PageBuilder will help arrange custom post types on a page. Here’s a demo site i put together that shows this http://www.canvas-pagebuilder.com/news.
My point was that often we see sites where custom post types are just used for layout reasons, and don’t add any extra functionality or semantic value to the presentation of information. E.G Quite a few themes have custom post types, which are only used for say presenting 4 columns on a page, in these circumstances using a PageBuider makes more sense, because the end users have lots and lots of flexibility to change the layout should they wish.
Thank you for these amazing Canvas Extensions and also for these very helpful tutorials. I see that you have linked to the example news site twice as a reference for flowing custom post types to pages, but I haven’t quite cracked the code on that one. Can you please elaborate on how we use the PageBuilder to flow custom blog categories onto a page?
Video’s are brilliant, is there any chance of pumping up the volume of future training video’s for old folk like me, whose ears are a tad worn out!
Would be well appreciated
All the Best
Allan
Jamie Marsland
Thanks Allan,
Yep we’ll crank up the volume next time 🙂
Jamie
Robert Schopen
As you’ve been blown away by what people are doing, it would be great to see a showcase of some of the best examples – I love looking at other peoples’ work for inspiration but so frustrating if it uses techniques beyond your skill level. But using these two tools it opens up a lot of new possibilities so good to see them in action !
Jamie Marsland
HI Robert,
Yep we’ll be putting together a PageBuilder showcase in the coming weeks 🙂
There’s some really creative uses of PageBuilder that are actually very easy to implement – and we are going to share them!
We’ll also be introducing row level padding options in an upcoming release 🙂
Jamie
Shane
Video 2 does show this, but I found that it also increases the margin for all the widgetized areas so, for example, if you have a row with 4 columns and text, it will squeeze that text as well. I found another solution to give a larger margin between the edge and allow the text to float in the center. I used the Woo Column Layout Shortcode and made a 5-column layout. I place a 1/5th column on each end and a 3/5ths column in the middle where I placed my text.
Here is an example (http://www.itsabouttimeproductions.biz/). It’s the text in the middle tan row that I did this with. The site is a work-in-progress, but you get the idea.
Jamie Marsland
Hi Shane,
Thanks very much for sharing,
fyi in an upcoming release will be implementing per row padding 🙂
Jamie
Mike Gilbert
Hi Jamie,
How long until that per row padding? I think that is the feature I’m struggling without.
I’m trying to use a full-width page, but need the content to be in the centre of my page, rather than hitting the edges. Any suggestions?
Mike
Jamie Marsland
Hi Mike,
Should be in the next couple of weeks 🙂
Jamie
Roberto Martana
Hi Jamie,
it works between rows but I’m not able to eliminate the space between the last row and the footer widget. This is frustrating for me: can you give me any help?
Thanks!
Roberto
Paul
Hi Jamie,
I have a similar layout 4 column on home page as your padding example.
When in mobile view there is no padding to the columns – ie text right to screen edge.
Is there a setting that will affect this?
Thanks,
Paul
Jamie Marsland
Hi Paul,
Are you using the latest version of PageBuilder and Page Customizer?
Jamie
Rich
Im loving all the PootlePress “added value”. Kudos! I saw there’s code for replacing Canvas Woocommerce navigation with WP-PageNavi in the “100 tips”. It’d be great to have this for the main Canvas theme too. 😉 Rich.
Amanda
Hi, I don’t have any options to clone page. Is this a Page Builder feature or a Page Customizer feature. I only have the former
Jamie Marsland
Hi Amanda,
You can import layouts which does the same thing as cloning pages 🙂
Comments
22 responses to “10 Canvas Page Builder and Page Customizer tips and tricks (now 13)”
Wish list: use this page builder to create custom post types. What do you say?
Hi David,
Well the PageBuilder really negates the need to create custom post types 🙂
Hope that makes sense ?
Jamie
But then you wouldn’t be able to create pages that automatically pulled in this content.
HI Dave,
PageBuilder will work with custom post types. eg testimonials and team plugins from woothemes.
PageBuilder really aid in creating complex and creative page layouts and not in creating custom post types. But our PageBuilder will help arrange custom post types on a page. Here’s a demo site i put together that shows this http://www.canvas-pagebuilder.com/news.
My point was that often we see sites where custom post types are just used for layout reasons, and don’t add any extra functionality or semantic value to the presentation of information. E.G Quite a few themes have custom post types, which are only used for say presenting 4 columns on a page, in these circumstances using a PageBuider makes more sense, because the end users have lots and lots of flexibility to change the layout should they wish.
Hope that makes sense,
Jamie
Hello Jamie,
Thank you for these amazing Canvas Extensions and also for these very helpful tutorials. I see that you have linked to the example news site twice as a reference for flowing custom post types to pages, but I haven’t quite cracked the code on that one. Can you please elaborate on how we use the PageBuilder to flow custom blog categories onto a page?
Much appreciated!
Kayleen
Hi,
Here’s a tutorial 🙂
https://www.pootlepress.com/2014/06/video-tutorial-create-magazine-layout-like-new-york-times-website/
Jamie
Hi
Video’s are brilliant, is there any chance of pumping up the volume of future training video’s for old folk like me, whose ears are a tad worn out!
Would be well appreciated
All the Best
Allan
Thanks Allan,
Yep we’ll crank up the volume next time 🙂
Jamie
As you’ve been blown away by what people are doing, it would be great to see a showcase of some of the best examples – I love looking at other peoples’ work for inspiration but so frustrating if it uses techniques beyond your skill level. But using these two tools it opens up a lot of new possibilities so good to see them in action !
HI Robert,
Yep we’ll be putting together a PageBuilder showcase in the coming weeks 🙂
There’s some really creative uses of PageBuilder that are actually very easy to implement – and we are going to share them!
Jamie
Hi Jamie,
Is there a way to customize the margins of the text in full width? I don’t want my rows to be so far apart.
Thanks!
Hi Sara,
Yep take a look at video 2 on this post https://www.pootlepress.com/2014/07/10-canvas-page-builder-page-customizer-tips-tricks/.
We’ll also be introducing row level padding options in an upcoming release 🙂
Jamie
Video 2 does show this, but I found that it also increases the margin for all the widgetized areas so, for example, if you have a row with 4 columns and text, it will squeeze that text as well. I found another solution to give a larger margin between the edge and allow the text to float in the center. I used the Woo Column Layout Shortcode and made a 5-column layout. I place a 1/5th column on each end and a 3/5ths column in the middle where I placed my text.
Here is an example (http://www.itsabouttimeproductions.biz/). It’s the text in the middle tan row that I did this with. The site is a work-in-progress, but you get the idea.
Hi Shane,
Thanks very much for sharing,
fyi in an upcoming release will be implementing per row padding 🙂
Jamie
Hi Jamie,
How long until that per row padding? I think that is the feature I’m struggling without.
I’m trying to use a full-width page, but need the content to be in the centre of my page, rather than hitting the edges. Any suggestions?
Mike
Hi Mike,
Should be in the next couple of weeks 🙂
Jamie
Hi Jamie,
it works between rows but I’m not able to eliminate the space between the last row and the footer widget. This is frustrating for me: can you give me any help?
Thanks!
Roberto
Hi Jamie,
I have a similar layout 4 column on home page as your padding example.
When in mobile view there is no padding to the columns – ie text right to screen edge.
Is there a setting that will affect this?
Thanks,
Paul
Hi Paul,
Are you using the latest version of PageBuilder and Page Customizer?
Jamie
Im loving all the PootlePress “added value”. Kudos! I saw there’s code for replacing Canvas Woocommerce navigation with WP-PageNavi in the “100 tips”. It’d be great to have this for the main Canvas theme too. 😉 Rich.
Hi, I don’t have any options to clone page. Is this a Page Builder feature or a Page Customizer feature. I only have the former
Hi Amanda,
You can import layouts which does the same thing as cloning pages 🙂
Jamie