• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / Pootle page builder – a first look at a promising plugin

Pootle page builder – a first look at a promising plugin

Posted: January 29, 2016 Updated: January 4, 2018 by Claire Brotherton
6 Comments

The page I built with Pootle page builder

I came across Pootle page builder the other day and was keen to try it out.

It’s made by Pootlepress, who specialise in WordPress plugins, themes and training.

Pootle page builder is free to download from the WordPress repository. There are paid add-ons for it, which I haven’t tested.

I tried it out using WooThemes’ Canvas, one of my favourite themes.

The page I built

The page I built with Pootle page builder
The page I built with Pootle page builder. I didn’t have time to make a snazzy logo or improve the look of the navigation.

Starting out with Pootle page builder

Once you have installed the builder, you’ll get the option of using it when you create a page.

For Canvas theme you should set the main layout to one column if you want to make use of the full width backgrounds. This can be set globally in Canvas > Settings > Main Layout, or on the individual page.

I decided to hide the page title with CSS. This is a feature included in the Page customizer add-on.

Next thing is to create a row, and choose the number of columns. Don’t worry too much about this, as you can add and delete them later on.

When you add some content to a column, the usual WordPress post editor opens up, where you can type and add media as normal. When you’re done, the builder shows you what text you’ve added, so you don’t forget.

Pootle page builder in the back end
The back end view

Hovering over a column or a row brings up options to edit, duplicate or delete them. There are tooltips for all the options.

Pootle page builder tooltips on hover
Pootle page builder shows tooltips on hover

If you choose to delete a row or column you get an “Are you sure?” dialog box, AND there’s the option to undo it afterwards as well.

Some features of Pootle page builder

Full width video background

I decided to create a single column row with a full width video background. The option to set a background is set by clicking on the Row display setting icon.

Row Visual Style options

I got a  stock video of a fairground ride from Pexels.

Sensibly, the plugin decides that you don’t want to load a video backgroun d on mobile, so invites you to add a photo instead.

I couldn’t find a photo to match the video, so chose this one of a rollercoaster from Pixabay. (All the other photos on the page are from Pixabay.)

This is what it looks like on a small tablet:

Tablet view showing rollercoaster image
The full width background image on a tablet

One issue I found was that the background only covers the amount of text that’s within it. I had to set a min-height:400px; to the row inline CSS to get around this. The option to add inline CSS is in the Advanced tab of the editor.

I used the Canvas settings to change the font. The heading font is Codystar (Canvas > General Styling > Misc Typography.)

Multiple columns

For the section below, I used a 3 column layout, and centred the content in each column in the editor.

The body font is Lato (Canvas > Posts > Post/Page Text Font Style).

The buttons were added with the Shortcodes Ultimate plugin.

Custom CSS

The row with two photos was harder. I had to add a CSS class to each column and add the background images with some code.

The text was added using the Editor and overlaid on top with some extra styling to add padding and background.

Full width image background with colour tint and parallax scrolling

In the last row, I added two columns and dragged between them to customize their width.

Drag in between columns to change their width
Drag the divider between columns to change their width

I also set the row full width, added a background image and added a tint and transparency to it, along with setting the text colour to white. I added a parallax scroll effect to the photo.

Settings for a background image
Settings for a background image

Like the buttons, the Google map was added with a shortcode.

Pootle page builder likes

  • The drag and drop is easy to use, not fiddly at all.
  • The option of full width backgrounds for rows. 🙂 This is great for Canvas theme, as you can set the header and footer full width in that theme, but not normally the page content. Backgrounds can be image, video or plain colour.
  • As suggested in one of their videos, you can use the page builder with other plugins.
  • You can switch theme and the content in the builder is retained, though it might not display optimally if you’d customised the CSS in your original theme.
  • You can add CSS inline, and set custom classes for individual columns and rows.
  • Once you have created a page layout you like, you can reuse a layout in another page, and modify it.

Pootle page builder feature requests

  • You can’t switch from Pootle page builder to the default WordPress visual editor without losing your content – you do get warned about this. It would be nice if the content was saved so that you could do this.
  • As with other page builders, there’s an issue with SEO. Building the content with the page builder rather than the default WordPress editor shows you a word count of 0, so you can’t optimise the page with a plugin like Yoast. One way around this I can think of is to view the page on the front end and copy and paste the content into a draft page. Add your focus keyword to this draft and optimise it, then go back to your original page and copy your optimised meta description over to the page built with the builder. Adjust the copy and permalink if necessary. It’s a bit cumbersome, though!
  • I’d like to see an option to set the background image for a column as well as a whole row. It can be done with some custom CSS, but you need to know CSS.
  • Fix the bug that causes extra white space below the footer. This will be addressed in a future release. The workaround is to add to the CSS body{ height: auto !important;} in the meantime.

Verdict

It’s a simple builder that does some quite cool stuff. It’s pretty easy to pick up, without too many options.

For me, the basic free version of Pootle page builder is more suited to a web designer or developer, as there’s a few things I needed to add my own CSS for, mainly around heights and padding.

If you liked this post, please share, or comment below.

Related

Category: WordPress Tags: page builder, plugin

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Maria Antonietta says

    January 29, 2016 at 5:13 pm

    Thank you for testing this plugin, Claire. I’m not into page builders, too much of a control freak I guess.

    That said, I understand sometimes builders speed up development time and clients have more freedom to make layout adjustments themselves without code.

    As you said, there’s a limit however to what can be done without knowing CSS, and I’m not an expert on page builders, but my guess is that sooner or later that limit is reached with any page builder, or options/Customizer panel for that matter.

    Reply
  2. Claire Brotherton says

    January 29, 2016 at 5:26 pm

    Yes, I agree there are definitely pros and cons.

    I have found sometimes with a page builder that there are so many places that you can store CSS that I can’t remember where I put a particular style rule. Then it can be tricky to debug. I can’t imagine what that would be like for a client!

    Reply
  3. Thames South Dot Com says

    February 2, 2016 at 5:23 am

    Whatever you say, when comes to running a woocommerce based wordpress site, the extra plugin install can bring the site to be slowed down dramatically.

    Reply
    • Claire Brotherton says

      February 2, 2016 at 10:47 am

      That may be so – but it may depends on how many plugins you have overall, and which ones – some are very lightweight.

      P3 (Plugin Performance Profiler) can help determine which plugins affect your load time the most.

      Also, good hosting and caching help your site run faster.

      Reply
  4. Deborah says

    April 9, 2016 at 5:00 pm

    Claire,

    Thank you for your review of Pootle. I’ve started to explore page builders again, since so many oeople are talking about how they streamlined creating a website. One thing I’ve noticed with page builders, is a tendency for verbose code, with lots if divs. Code quality could be improved. Have you noticed that issue?

    Reply
    • Claire Brotherton says

      April 11, 2016 at 3:24 pm

      Yes, builders do generate a lot of divs. I’m not sure what the solution to that is.

      Another issue I’ve found is that some builders automatically add headings to sections that are not semantic e.g. <h4> when the previous heading used was an <h2>. I think it’s better to let the user choose the heading type, and educate them on why the order matters.

      Reply

Leave a Reply Cancel reply

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

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map