 PageBuilder plugins. So in a nutshell, what these do is they offer a visual way to build custom layouts using drag and drop elements and style settings. Typical features include rows and columns and responsiveness. And various modules and widgets let you add elements like text or a button or a map or an image and a whole lot of other things. Now without a page builder, you need to either choose a theme that meets all of your layout needs, or you have to be able to code custom WordPress templates. And we're talking about PHP skills at that point. And I also want to point out that what we're looking at today are plugins, not themes. By keeping this functionality in a plugin, it can be used on a site regardless of the theme choice. Because of that, page builder templates usually work only within the content of a page. That's part of the underlying code, but it's basically what you put into that main editing box. So realize that the header and the footer are most likely controlled by your theme. So it is important to choose a theme that works for you. And as the title of this session suggests, there have been really big improvements in the last couple of years, and that's what we're going to look at today. But let's back up a bit and look at some general pros and cons about page builders. If you ask some people about page builders, the reaction is definitely not positive. But why this bad reputation? Some of the big reasons include performance can suffer due to inefficient code. They're too limited or restrictive for some people, and the lock-in effect due to short codes. Now, if you're unfamiliar, in brief, a short code is just a small piece of code that acts like a shortcut. This is a WordPress thing, and it can be really useful. But in the case of page builders, sometimes they take over. For example, creating this page layout with a page builder resulted in a nicely formatted page. But if you remove the plugin for some reason, this is what's left behind. Now, that kind of looks like a garbled mess, but your actual content is in there. You can strip out all the short codes, and it will remain. But that can become a lot of work on a large, many-page site. Now, the short code debate is a whole other topic, and for the time being, we're going to go back to page builder plugins. But I wanted you to understand what I was referring to. And in spite of all the flaws and problems, there's a clear demand for the functionality that's offered by page builder plugins. And some intrepid developers have continued to hammer away at this challenge, and I salute them for doing it. And the reality is that the reality is finally starting to catch up with that ideal that people are seeking. Some recent offerings are proving that page builder plugins can be fast and well-coded. There have been user interface improvements, and some have even eliminated reliance on short codes. So maybe it's time to give page builders another look. There are many of them out there, but today we're going to take a look at three that have large user communities, active development, and good support. And just a side note, both Beaver Builder and Divi also have themes that have page building aspects, and that's not what we're looking at today. I don't want you to confuse it with the plugin. They have both. And one more thing, before we dive into details of these builders, is who is a page builder for? Who is the audience? I would argue that page builders can be helpful for various kinds of users, not just for beginners or people who don't know any code. The key to remember is that best is subjective, and each case will be different. You need to assess both the requirements of your site or client and also the skills of your team. And you should also be aware that if you need more control in your process, you will probably have a more complicated building process as well. Now, no page builder is perfect, but some will be a much better fit than others. For example, even if you have 35 different content elements at your disposal, you may only use six to eight of those types heavily. And a page builder that can ace those types is worth a second look. Now, coming from a user experience design angle, I think a good way to explore requirements and goals is via personas. So I've put a few in here. The first we have is Catherine. Her team expertise is content and marketing, but not web design. She wants her small business to have a site that looks good and can handle e-commerce. And she's OK with using pre-made templates and elements. Now, Clayton is another type of user. He's part of a small team at a nonprofit. They have design and content skills covered, but no one who can code custom templates and functions. And he wants to create layouts in a more visual way and is comfortable tweaking the CSS when needed. And our third user is Abby. She's a solo web designer who deals with various clients, and she has to be able to customize but also wants to reuse elements for efficiency. Being able to edit CSS and add code snippets is a must for her, and she also wants to keep clients from breaking their sites. So keep those users in mind as we return to the plugins and think about how they might use them. We're going to take a quick walk through the interface and the basic features of each. First, we have Elementor. Now, since page builder plugins affect only the content area, you still have to add a title and publish your page from here. And this is also where you can choose a full-width template if your theme offers it. And I won't go into a lot of detail, but that will be important if you want to do something in your page builder that involves, say, like a hero image that goes edge to edge. Your theme must support that. And that will be true of all of them. So then we click Edit with Elementor, and that will get us into the page builder. The Paying User Interface presents all the elements on the left, and your content is over on the right. Each section of the page can be moved around, dragged and dropped. There are controls for column and section, and you can edit and duplicate the content at all right in this pane where you can see what's happening. When editing an element, you'll get various settings based on what it is. The Content tab is where you add text or images, and you'll immediately see it on the page. Under Style, you can affect things like colors and typography. And the Advanced tab lets you set margins and padding, and this is also where you can add CSS classes if you plan to edit your style sheet. You can also preview your content at different screen sizes and make edits that only affect that screen size. For example, you might want to make the title smaller on your mobile view. You can also get to settings right from this interface rather than having to go back out to the WordPress dashboard. And finally, the Short Code Check. Elementor does not rely on short codes, so if you remove the plugin, your content is revealed, and it's not quite the same, but it degrades gracefully and it can easily be edited. So to recap, some standout features for Elementor are a clean and visual UI and those mobile style controls. And a potential flaw is that it's the newest of the bunch, so it may still lack features that you need. Next up is Beaver Builder. We start out the same way before we click on the Page Builder tab that gets us into the builder itself. Here the elements overlap your content, and there are no icons, but otherwise it's a very similar array of choices that you have. You can control settings for rows and columns as well as individual chunks of content. Editing one opens up a window that covers your content, but when you make changes, that page in the background still updates kind of in a live manner. We also get multiple tabs here, including general and style, and also advanced, which lets you set margins and indicate if the object should be displayed or not via mobile. And this is where you can add CSS classes and IDs. And that's kind of a nice bonus that Beaver Builder lets you add both if you choose. And finally, the shortcode check. Beaver Builder also does not rely on shortcodes, so if you remove the plugin, your content will degrade gracefully, and you can edit it in other ways. Probably the biggest standout feature for Beaver Builder is the ability to save elements as global templates. So not just a whole page, but a piece of a page. You can save it as a global template and, for instance, you might have a call-out box that appears multiple times throughout your site. With a global template, you can edit that once and it updates across the site. So that's really nice. And a potential flaw is no nested columns, which can limit your layout ability, but put a pin in that because that's true right now. It might not be in the future. And then we have the DiviBuilder plugin. We have the same sort of start. We click the DiviBuilder and that gets us into the actual Builder interface. And this one's a bit different. Here we build the layout using blocks where you don't actually see the content. And then you click Preview to see the resulting page. When editing an individual element, you can click and get a preview of that one element on the fly, so that speeds things up a bit. And when in that 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, et cetera. And then you can also flip over, if you prefer, to the Custom CSS tab. And there you can write code instead of using the Advanced Design Settings. You can do largely the same things, but for some people, putting the CSS straight in is going to be a lot faster. DiviBuilder is pretty complex, but it also offers a lot of control. For example, the role editor lets you limit what contributors are allowed to change. So you can lock down parts of your site and allow other parts to be edited. And finally, the short code check. Now, DiviBuilder inserts a lot of short codes. And this is something that you should consider for yourself, whether it will be a problem in the future or not. It's kind of a hotly contested topic. Some people won't go near this. Other people don't think it's a big deal. So I'll leave that where it is for now. And a recap for DiviBuilder. A standout feature is probably the fact that although it's complex, maybe a slightly bigger learning curve, it offers a lot of control, things like the role editor, but also others. Potential flaws, it really relies on short codes. And drag and drop is currently only on the back end and requires constant previewing. So if you're going to try one, which one? There is a lot of overlap, but there are key differences too. And it's important to really think about your site or project and the team skills you have before choosing. And honestly, sometimes it's just going to come down to how you feel about the interface or some other subjective thing. And don't forget that a PageBuilder plugin is always just one part of your site. At a minimum, you're always going to have at least a theme as well. You may also have other plugins or you may make CSS edits. What you mix your PageBuilder with will depend on your requirements and your skills. So here are just a few possible combinations that may make sense for the users we looked at earlier. So you remember Catherine and her small business site? She might use a 2016 default theme, along with the Elementor PageBuilder for layouts and the WooCommerce plugin to make her shop work. There would be little to no need for coding in this configuration, so it really would meet her needs. Then we had Clayton at the nonprofit, who has some design shops, but is definitely not a developer. He'll start with the Generate Press theme since it offers a lot of design control without coding and pair it with BeaverBuilder visual drag-and-drop page layouts. And that would pretty much fulfill his needs. He can also customize CSS if he chooses, because BeaverBuilder will let you add classes and IDs. And finally, there's Abby, the web designer who wants both efficiency and flexibility. She opts for the robust Genesis framework as her base. The DiviBuilder plugin helps you create layouts rapidly and save all the parts as templates for future use. And it also lets her manage permissions so her clients don't accidentally break their sites. She might add the Genesis extender plugin in addition so that she can insert a bit of code now and again. And finally, she might top things off with other plugins depending on the requirements of the given project. And these are just example combinations. Any of these three page builders could work well depending on the site requirements and what other ingredients are in play. Also, keep in mind that this is a really fluid field right now, and things are improving all the time. The plugin developers are pretty responsive to the active user communities, so if you start to explore these things, you should make your voice heard and let them know what you like and what you don't like. So what's the latest news? Well, Elementor is actually releasing a pro version on December 12 that finally adds global templates and more CSS control, among other things. BeaverBuilder has an update coming this month, possibly next week. And it adds nested columns. So that basically overrides what I said earlier. We will have nested columns, which is great. And they're also adding a lot more controls about responsiveness, which should be good as well. Still no big UI improvements as far as I know, but that's probably down the road. And there's no date yet, but the DiviBuilder has plans to offer front-end editing, more like the other two, instead of building with blocks and previewing the page each time. So the biggest takeaway here is that there is no one-size-fits-all PageBuilder plug-in. You basically need to examine your requirements and your team's strengths to get a good start on choosing one that fits. And I would encourage you to check out more than one. I've narrowed the list down quite a bit by giving you three to look at instead of, say, 33. And try things out with a side project, experiment. And now is the time to go forth and explore. So thanks for listening.