Pootle page builder – a first look at a promising plugin

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

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.

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

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.

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:

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.

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.

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.