10 Canvas Page Builder and Page Customizer tips and tricks (now 13)

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

[hr]

How to create a full width section with Canvas Page Customizer and Page Builder


[hr]

How to change the padding of text on full width sections


[hr]

How to create fully customized pages


[hr]

How to set a different mobile background per page


[hr]

How to resize columns in Page Builder


[hr]

Typographic controls

[hr]

How to remove the space between full width sections

[hr]

How to create a distraction free WooCommerce check out page


[hr]

How to create a beautiful login page to your WordPress website


[hr]

How to copy layouts between pages

[hr]

How to create beautiful parallax rows with colours with variable opacity

And here’s the link to get your colour opacity css CLICK HERE

[hr]

How to remove the white space between the page and the footer

Click here to get the CSS

How to change the background colour of a specific widget

22 thoughts on “10 Canvas Page Builder and Page Customizer tips and tricks (now 13)

  1. Wish list: use this page builder to create custom post types. What do you say?

    1. Hi David,

      Well the PageBuilder really negates the need to create custom post types :)

      Hope that makes sense ?

      Jamie

      1. But then you wouldn’t be able to create pages that automatically pulled in this content.

        1. 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

          1. 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

  2. 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

    1. Thanks Allan,

      Yep we’ll crank up the volume next time :)

      Jamie

  3. 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 !

  4. 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

  5. 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!

    1. Hi Sara,

      Yep take a look at video 2 on this post http://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

      1. 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.

        1. Hi Shane,

          Thanks very much for sharing,

          fyi in an upcoming release will be implementing per row padding :)

          Jamie

          1. 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

          2. Hi Mike,

            Should be in the next couple of weeks :)

            Jamie

  6. 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

  7. 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

    1. Hi Paul,

      Are you using the latest version of PageBuilder and Page Customizer?

      Jamie

  8. 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.

  9. 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

    1. Hi Amanda,

      You can import layouts which does the same thing as cloning pages :)

      Jamie

Comments are closed.