Redesigning StevePavlina.com – Part 3

This is part 3 of the 9-part series on Redesigning StevePavlina.com.

Page Builders

Searching for a good theme was turning out to be a dead end, so I put theme hunting on the back burner and turned my attention to researching page builders. A page builder is an add-on tool, usually a paid WordPress plugin, that provides a visual interface for creating and laying out new WordPress pages. Some page builders let you edit pages on the front end of your website, whereby you can activate the page builder straight from the admin bar while visiting any page of your site. So if you see something on your site that you want to change, you don’t have to go to the WordPress dashboard area to change it, and you don’t have to modify theme files. You can just click and drag to add new elements like a sidebar, photos, videos, text areas, headlines, and more.

I saw a demo of Visual Composer at my first WordPress meetup in August. I believe it’s the most popular page builder out there. After I learned about VC, I tried out the free online demo, and I thought it might have some potential, at least as a rapid prototyping tool. At least one member of the meetup group seemed to be a big fan of it, but it was also clear that some members didn’t like VC at all.

Using page builders is somewhat controversial in the developer community. Some developers like them, while others don’t respect the use of page builders. One valid objection to using page builders is that they can create lock-in, depending on how they’re designed. This means that if you use a page builder to create your site, you may have to keep using it for your site indefinitely — and paying the licensing fees each year to continue doing so. Otherwise if you uninstall it, it will break your site.

Some page builders don’t have a big issue with lock-in. If you uninstall them, you may have to redo the layout for the pages on your site, but your content will still be intact and readable via the WordPress editor. So it might take some reformatting effort if you stop using the page builder or switch to a different page builder, but it would still be reasonably doable, especially if your website isn’t very big.

Other page builders aren’t so nice because they insert lots of shortcode directly into your content, and they don’t remove this shortcode upon being uninstalled. That means if you ever uninstall the page builder plugin, you’ll be in what’s called shortcode hell. Your content will be riddled with shortcodes that will be visible to your site’s visitors, making your content appear garbled until you clean it up.

If you’re not familiar with shortcodes, suffice it to say that these are instructions embedded in the text to tell WordPress how to format different elements. Using shortcodes isn’t a problem per se since many are directly supported by WordPress. I use shortcodes myself, such as to embed the audio clips on the Audio page, but I’m hesitant to become dependent on shortcodes unless they’re part of WordPress or Jetpack, i.e. software that’s directly maintained by the WordPress team and that I can reasonably expect will be around for many more years. I only use other plugin-dependent shortcodes sparingly, so that if I ever uninstall the plugin, it won’t be a problem to remove its associated shortcodes. When you remove a plugin that uses shortcodes, then typically what happens is that the shortcodes for that plugin will be treated as regular text, and they’ll be displayed as such to visitors of your website on whichever pages you used them.

I liked some things about Visual Composer, but I had to rule it out due to the potential for future shortcode hell if I ever uninstalled it. I didn’t like the fact that I’d be locked into it and that it would be painful to switch to something else if that ever became necessary. I also felt the interface and features weren’t as well-executed as I would have expected for such a popular tool. The free online demo crashed on me several times while I was creating some modest test pages with it. I got the impression that these guys were doing a great job on their marketing but somewhat lacking on the technical implementation. I usually feel more at home using tools created by hardcore technologists, tools which are often less well-known on the marketing side.

I also checked out Divi, Live Composer, Velocity Page, Make Plus, and a few other page builders. All of them seemed lacking in key areas that could make it difficult to maintain my site in the long term. Ultimately I ruled all of these out, but I still liked the general idea of using a page builder; I felt it had a lot of potential for my site redesign. Even if I only used it for prototyping and testing ideas, it could save me much time.

At least that was the situation with page builders when I investigated them in September 2015. I don’t know if the situation is different today. Obviously such tools will continue to evolve.

This was a classic case of a partial match. I found some of what I wanted but not quite enough to say yes. On a scale of 1-10, I found many 6s and 7s. I wanted a 9 or 10, and I might settle for an 8 if I couldn’t find anything better.

Beaver Builder

Eventually I found my 10 while continuing to research page builders. And it had a funny name too: Beaver Builder.

This page builder didn’t seem to be as popular as some of the others I looked at, and it didn’t have as many features as Visual Composer, but when I tried the free online demo of Beaver Builder, I liked it right away. It had a simpler and more elegant interface, making it easier to use. And it didn’t crash on me — another good sign.

I tested it by creating a sample About page for my website, still using the free online demo. It looked good, and it was a breeze to create it.

I spent several hours researching Beaver Builder, reading their FAQ and tutorials, and learning more about it. I liked what I saw. If I used Beaver Builder, it wouldn’t leave me in shortcode hell because it saves its changes to the wp_postmeta table in WordPress’ database, not the wp_posts table.

I was cautiously optimistic. I sensed that this was a tool I could use to build a website the way I really wanted. I also saw evidence that it had a good support team behind it. The actual developers were doing the support themselves, not some trained customer service reps, so I could talk programmer to programmer if I encountered any challenges along the way. This proved to be especially important when doing some customizations to my site later on. Without the assistance of the developers, it would have been much more difficult to pull this off.

I liked the design and layout of the Beaver Builder website itself too. It wasn’t overly salesy and pushy. It was easy to get the information I needed, to understand the features, and to peruse many demo layouts.

This may seem minor, but I also liked the name. While other page builders used descriptive or techy sounding names, this one stood out from the crowd by using a playful name with a bucktoothed beaver mascot. It gave me a chuckle. Somehow that made using the tool feel more light-hearted and fun to me, more like play and less like work. This aligns nicely with my own values and personality. This was only a bonus though. I wouldn’t invest in a page builder just because I liked the name. Even so, this gave me the impression of a team of developers who probably enjoyed their work a little more than most, which I saw as a good sign for longevity.

There were good logical reasons for me to like Beaver Builder — the features list, the great support, the technical competence of the developers, the reduced risk — but I also liked the overall vibe I felt when using it. I got an intuitive ping that it was the right choice. It satisfied my mental filters as well as my emotional ones.

Now the interesting twist is that Beaver Builder has two parts to it. The page builder is one part, which works as a WordPress plugin. Additionally Beaver Builder also has its own WordPress theme — a very flexible theme with a well-developed customizer for changing colors, fonts, and more. You can use either the page builder or the theme separately, or you can use both together. Initially I figured I’d just use the page builder and find another theme, but when I checked out the BB theme, I liked it right away. It was clean, straightforward, elegant, and highly usable. I could easily envision using it for my site. I used their free online demo to play around with their theme customizer, and I had to conclude, Yup, this will work.

So ultimately I found my theme in a roundabout way. I looked at a lot of themes I didn’t like, which helped me refine my tastes, and then I found the right theme during a time when I wasn’t actively looking for a theme. I find that many good discoveries follow this pattern. First we saturate our minds with possibilities and ideas. Then we take a break, and the right choice eventually pops up.

The cost for Beaver Builder was $99/year for the page builder, or $199/year for the page builder and theme together, and they offer significant renewal discounts. Both licenses were for unlimited sites. I bought the package deal since the theme and page builder complement each other nicely. Later in the project, I discovered that it was helpful to get support for the theme and the page builder from the same place since some of my customizations required changes to both.

Since I began working with Beaver Builder, their development team has grown from three to six people, and the page builder and theme have seen many updates along the way. A couple of my suggestions were even incorporated into some releases — it’s good to see the team actively uses customer feedback to improve the product.

After I bought Beaver Builder, I decided to learn the software thoroughly before I started using it to create real pages. I went through every feature, every window, and every option to gain more awareness of its capabilities. I even familiarized myself with features I never expected to use, just so I’d be aware of them. This self-training didn’t take long, perhaps one afternoon. Afterwards I felt well-prepared to start crafting some pages with it.

At this point I was feeling pretty optimistic. I had my theme, and I had a page builder which would speed up development. I felt Beaver Builder was good enough to use not just for prototyping but also for building the final site and for maintaining the site after it launched. All of that turned out to be true. I’m glad I didn’t prematurely settle for a partial match.

The nice thing about Beaver Builder is that you don’t need to be a programmer to use it. Some developers have been installing Beaver Builder on their clients’ sites so their clients can make edits to pages without having to pay a web developer for every little change.

Child Theme

After I installed and configured Beaver Builder’s theme and page builder, the next thing I did was to spin off a child theme from the main Beaver Builder theme. I learned about child themes at the WordPress meetup group, which immediately made sense to me. A child theme works like the concept of inheritance in object oriented programming.

A child theme tells WordPress to start with a parent theme, such as Beaver Builder’s theme, and then apply the changes specified in the child theme. So the child theme only needs to include what’s changed from the parent theme. That way you can make all your changes to the child theme, and whenever the main theme gets updated, those updates won’t overwrite your customizations. So whenever there’s a Beaver Builder theme update, which happens now and then, I can install it, and it won’t overwrite my customizations, which are stored in the child theme. Otherwise if you make your changes to the parent theme itself, then you can’t update that theme if there’s a new release without losing your customizations since the update would overwrite your changes each time. WordPress will even warn you about doing that whenever there’s a theme update. Fortunately creating a child theme is very easy and takes about a minute once you know how.

Additionally, if I ever want to swap in a different theme instead of using Beaver Builder, such as if the developers eventually move on and stop supporting it, I can swap in a different parent theme, and with a little work, my child theme customizations can be applied to the new theme as well.

Consequently, using a child theme was a no-brainer. It would allow me to maintain my site and take advantage of new WordPress features with greater ease.

Once I created the child theme, I took a stab at using the Beaver Builder customizer to create the header and footer for the site and to specify the fonts, colors, and sizes. Then I showed it to Rachelle, and she helped me refine it some more. I didn’t expect that these initial settings would be final, but they got me started on building the site. I knew I could always tweak these things later, and I eventually did so, again with Rachelle’s help.

Since I’d already imported my blog database, at this point I could see what my actual blog posts would look like. Even though I hadn’t done much customization yet, I thought the initial results with the customized Beaver Builder theme looked pretty good. There was still a lot more work to be done, but I was off and running.

Continue to Part 4 in this series.