Pagebuilder Plugins: You’ve Come a Long Way Baby!

WORDCAMP US 2016 Page Builder Plugins: You’ve Come a Long Way Baby! #WCUS Let’s dive right in and take a look at page builder plugins! @mmizejewski

What is a page builder? In a nutshell: Offers a visual way to build custom layouts using drag-and-drop elements and styles settings

A visual way to build custom layouts using drag-and-drop elements and styles settings typical features include: rows and columns and responsiveness.

Various modules or widgets let you add elements like text, an image, a button, an icon, a map, and loads of others.

1. Without a page builder, you need to either choose a theme that meets all your layout needs… 2. Or be able to code custom WordPress templates (we’re talking PHP skills here)

Page builder plugins not themes Important: we are looking at plugins today — not themes By keeping this functionality in a plugin, it can be used on a site regardless of theme choice

the_content()

1. Page builder plugins usually work only within “the_content()” of a page 2. That’s a part of the underlying code, but it reflects whatever you put in the main editing area 3. Realize that header, footer, or other areas are likely controlled by your theme, so choosing that wisely is a must.

BIG Improvements As the title of this session suggests, there have been big improvements for page builder plugins in the last year or two

Pros and Cons

1. But let’s back up a bit and look at some general pros and cons 2. If you ask some people about page builders, the reaction is not positive…

Bad Reputation? performance suffers restrictive lock-in: shortcodes

1. Why the bad reputation? 2. Some of the big reasons include 1. performance suffers due to inefficient code 2. too limited or restrictive 3. the lock-in effect due to shortcodes

What is a shortcode? A WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

1. In brief, a shortcode is small piece of code that acts as a shortcut. 2. They can be useful, but in the case of page builders, sometimes they take over

For example, creating this page layout with a certain page builder results in a nicely formatted page But if you remove the plugin for some reason…

1. This is what’s left behind! 2. You can strip out all the shortcodes and still have your basic content, but that can be a lot of work on a larger site 3. The shortcode debate is a whole other topic though, and we need to get back to page builder plugins

I don’t give a damn about my reputation

1. In spite of flaws and problems, there is a clear demand for the functionality offered by page builder plugins. 2. And some intrepid developers have continued to hammer away at this challenge.

Improvements fast and well-coded much better UI no reliance on shortcodes

1. And the reality is finally starting to catch up to the ideal. 2. Some recent offerings are proving that 1. page builder plugins can be fast and well-coded. 2. There have been user interface improvements 3. And some have even eliminated reliance on shortcodes

So maybe it’s time to give page builder plugins another look?

3 of the Best Elementor Beaver Builder Divi Builder There are many out there, but we’ll look at 3 that have 1. large user communities 2. active development 3. and good support Sidenote: Beaver Builder and Divi also offer themes with page builder features, so don’t confuse those with their plugins.

Who is it for?

1. Before we look at details, who is a page builder for anyway? 2. I would argue that page builders can be helpful for various kinds of users — not just beginners or people who don’t know any code

Best is always subjective The key is to remember that “best” is subjective. Each case will be different

Consider project requirements team skills more control = more complexity You need to assess both 1. the requirements of your site or client 2. and the skills of your team Also be aware that if you need more control that usually also means a more complicated building experience

1. Also, no page builder is perfect, but some will be a better fit than others. 2. For example, even if 35 different content elements are available, you may only use 6-8 of those types heavily 3. A page builder that can ace those is worth a second look.

Katharine Team and Skills Team of two, mostly focused on content and marketing. Neither has much of an eye for design Goals and Requirements • Build and maintain a site for her small business • Happy using premade templates and elements • OK with updating each item individually if a style changes Coming from a user experience design angle, I think a good way to explore requirements and goals is through personas First we have Katharine 1. Team expertise is content and marketing — not web design 2. She wants her small business to have a site that looks good and can handle e-commerce 3. She’s OK with using pre-made templates and elements

Clayton Team and Skills Small team heavy on messaging and design skills, but no one that can delve into WordPress code to create custom templates and functions Goals and Requirements • Build and maintain a site for a medium-sized non-profit agency • Lay out content in a more visual way • Wants option to add classes and edit CSS Clayton is another type of user 1. He’s part of a small team at a non-profit agency 2. They have design and content skills covered, but no one who can code custom templates and functions 3. He wants to create layouts in a more visual way and is comfortable tweaking CSS when needed

Abby Team and Skills Solo web designer who has to wear many hats Goals and Requirements • Customize while reusing patterns and elements for efficiency • Control over CSS when needed • Add code snippets for functions and conditionals • Keep clients from breaking things And our third user is Abby 1. She’s a solo web designer who deals with various clients 2. She has to be able to customize but also reuse elements for efficiency 3. Being able to edit CSS and add code snippets is a must 4. and she also want to keep clients from breaking things!

Three to Watch

1. Keep those users in mind as we return to the plugins 2. We’ll take a quick walk through the interface and features of each…

Elementor page builder plugin First, we have Elementor

1. Since page builder plugins affect only the content area, you still have to add a title and publish your page from here 2. This is also where you can choose a full-width template, if your theme offers it 3. Clicking Edit with Elementor gets you into the page builder

1. The paned user interface presents all the elements on the left and your content on the right 2. Each section of the page can be moved around 3. There are controls for column and section, edit and duplicate

1. When editing an element, you get various settings based on what it is 2. the Content tab is where you add text or images that you can immediately see on the page

1. Under style you can affect colors and typography

1. The Advanced tab lets you set margins and padding 2. this is also where you can add CSS classes, if you plan to edit your stylesheet

1. Elementor allows you to preview at different screen sizes and make edits that only affect that size — Great feature! 2. example: making title text smaller on mobile screen

You can also get to Settings right from this interface rather than having to go to the WordPress dashboard

And finally, the shortcode check 1. Elementor does not rely on shortcodes, so removing the plugin reveals your content 2. The layout degrades gracefully and can be easily edited.

Elementor user interface mobile editing newest of the bunch Standout features: - clean and visual UI - those mobile style controls Potential flaw: newest of the bunch, so may still lack features you need

Beaver Builder page builder plugin Next, we have Beaver Builder

Starts out the same way before clicking on the page builder tab

Here the elements overlap your content and don’t have icons

You can control settings for rows and columns as well as content chunks

Editing opens up in a window that covers your content

We also get multiple tabs here with including general and style

Advanced lets you set margins and indicate if the object should be displayed or hidden on small screens this is also where you can add CSS classes and IDs

And finally, the shortcode check 1. BB does not rely on shortcodes, so removing the plugin reveals your content 2. The layout degrades gracefully and can be easily edited.

Beaver Builder global element templates no nested columns Standout feature: - the ability to save elements as global templates - e.g. a callout box that appears in several places on your site. You can edit in one place. Potential flaw: no nested columns can limit your layout

The Divi Builder page builder plugin

Same start again until you click Use the Divi Builder

This is a bit different - build layouts using blocks

Then preview to see the resulting page

When editing an individual element, you can click get a preview on the fly

When in this mode, you can also see how it will look on different screen sizes

Under the Advanced Design settings, you can affect things like padding, typography, and whether the item should appear on small screens

There’s also a custom CSS tab if you prefer to write the code rather than the Advanced Design Settings

Divi Builder is complex, but it also offers a lot of control With the role editor, you can limit what site contributors are allowed to change

And finally, the shortcode check 1. Divi Builder inserts a LOT of shortcodes 2. Consider if this would be a problem for you in the future or not

The Divi Builder role editor shortcodes backend editor Standout feature: - most complex of the three, but it offers a lot of control like the role editor Potential flaws: - really relies on shortcodes - drag and drop is only on backend and requires constant previewing

So which one? overlap, but differences what are your needs? subjective

• There’s a lot of overlap, but key differences too - important to really think about your site requirements and team skills before choosing - Sometimes it comes down to something subjective, like how you feel about the interface

Page builder plugins are not used in a vacuum Don’t forget that a page builder plugin is always just one part of your site. 1. At a minimum you will also have a theme 2. You may also add other plugins or make CSS edits 3. What you mix your page builder with will depend on your requirements and skills

Possible recipes of theme + page builder + other plugins Here are just a few possible combinations that may make sense for our users…

Katharine Team and Skills Team of two, mostly focused on content and marketing. Neither has much of an eye for design Goals and Requirements Remember Katharine and her small business site? • Build and maintain a site for her small business • Happy using premade templates and elements • OK with updating each item individually if a style changes

Possible recipe Woocommerce plugin + Elementor + twentysixteen theme

1. She might use the twentysixteen default theme 2. along with the Elementor page builder for layouts 3. and the woo commerce plugin to make her shop work There will be little to no need for coding in this configuration.

Clayton Team and Skills Small team heavy on messaging and design skills, but no one that can delve into WordPress code to create custom templates and functions Goals and Requirements • Build and maintain a site for a medium-sized non-profit agency • Lay out content in a more visual way • Wants option to add classes and edit CSS Then we had Clayton at the non-profit who has some design chops, but is definitely not a developer.

Possible recipe Beaver Builder + GeneratePress theme

1. He’ll start with the GeneratePress theme, since it offers a lot of design control without coding 2. And pair it with Beaver Builder visual drag-and-drop page layouts 3. All 3 of our page builder plugins allow adding custom classes to take the CSS further, so he’s set there too.

Abby Team and Skills Solo web designer who has to wear many hats Goals and Requirements And finally, there’s Abby: the web designer who want both efficiency and flexibility • Customize while reusing patterns and elements for efficiency • Control over CSS when needed • Add code snippets for functions and conditionals • Keep clients from breaking things

Possible recipe Genesis Extender plugin + Divi Builder + Genesis framework and theme

1. She opts for the robust Genesis framework as her base 2. The Divi Builder plugin helps her create layouts rapidly, and save all the parts as templates for future use. It also let’s her manage permissions so clients don’t accidentally break their sites. 3. She might add the Genesis Extender plugin, so she can insert a bit of code when needed 4. And finally she might top things off with other plugins depending on the requirements of the project.

1. And these are just example combinations. 2. Any of the three page builders could work well depending on the site requirements and the other ingredients

Page Builder features are a moving target

1. Also keep in mind that this is a very fluid field right now, and things are improving all the time… 2. The plugin developers are pretty responsive to the active user communities too.

the latest… Elementor Pro release Beaver Builder UI update in the works Divi plan to switch to frontend editing

1. Elementor is releasing a Pro version on 12/12 that finally adds global templates, and more CSS control among other things 2. Beaver Builder has an update coming this month that adds nested columns and more responsiveness settings (but still no UI improvements) 3. And no date yet — but The Divi Builder has plans to offer front end editing like the others, instead of building with blocks then previewing the page each time

The biggest take-away here: no one-size-fits all page builder plugin 1. Examine your project requirements and team strengths to get a good start on choosing one that fits 2. Try things out with a side project 3. Go forth and explore!

THANKS FOR LISTENING Michele Mizejewski @mmizejewski

Links and Image Credits • • • • • • • • • • • • Elementor page builder plugin Beaver Builder page builder plugin Divi Builder page builder plugin Stormtrooper Photo by JD Hancock Nope Octopus Page builder performance tests WordPress.com on shortcodes The Problem with Shortcodes Developer perspective and the power of feedback Genesis Framework GeneratePress Theme Genesis Extender plugin