How to Conquer Your WordPress Design with a Page-Builder – TAP337

If you're frustrated by your WordPress theme's limitations, you don't know how to or don't want to write custom code, or you want a lot more flexibility in your website, you might want to consider a page-builder plugin for WordPress.

Benefits of page-builders

1. You don't have to know HTML, CSS, PHP, or JavaScript to design your own webpages

Although these are the four most used things to build your website and webpages behind the scenes you don’t have to know them in order to create webpages.

Having a tool that makes it so you don’t have to think about those things makes it easier for you to just build your pages.

WYSIWYG stands for “What You See Is What You Get” and is an approach used not only on page builders but also in most word processing apps. It makes it so easy to change the font, colors, borders and many other aspects by dragging and dropping to get just what you’d like to see while you’re making it.

If you want a box for example with a colored background and a certain border with text inside you can do so in less than 60 seconds. Page builders allow you to make the page look and act as you want it while taking care of the coding for you without any direct input to coding needed by you.

You don’t have to write code, save, refresh and go back and forth between tabs to see what it will look like. Page-builders eliminate all of that extra work.

3. A good page-builder can be used anywhere on your site

Most of the page builders offer the opportunity for you to do this.

Let’s say you’d like to use a common element in different places like a newsletter sign up or a call to action. A good page-builder will be able to let you make this and then call it into use where you need it without having to rebuild it again and again.

In the case of Divi it uses shortcodes to allow you to place the content where you need it quickly.

4. A page-builder lets you build sections and pages “in your own image”

If you want your background color to be purple for example then you can have the background as purple as you’d like. You can make the pages look just like you’d like them to regardless of what the theme you’re using may have set as a color.

Speaking of colors; One of the best design concepts you can learn is contrast. Making sure that things that need to look different from each other do so. And things that are supposed to be connected look similar.

The way that two different colors work together is very important too as to not only how the page looks overall but also how well it can be read. Contrast also applies to fonts as you don’t want to mix fonts that crash with each other either.

I know a lot of people don’t like the Gutenberg editor as it’s so different than what you may have grown used to with the old WordPress editor. But even if it bothers you I suggest that you work with it as much as you can because it works in much the same way that page-builders work. So, if you can use Gutenberg then you can use a page-builder and vice versa.

The way things are going with the development of Gutenberg and page-builders we may well see the day where instead of working in a page-builder outside of the WordPress editing screen it would instead be integrated right inside. This would allow you to make changes all in one space and adding in a page-builder would open up new functionality.

Start with a page-builder now so you’ll be ready for it when that sort of functionality arrives.

Tips for using a WordPress page-builder

1. Ensure your theme is compatible

Most page-builders work with most WordPress themes but there may be some conflicts. You’ll need to check for this before committing in case there’s a conflict that might break your site.

2. Use a page-builder only when you need more than Gutenberg can offer

It’s really easy to get excited about what a page-builder can do but don’t jump to one too quickly. Gutenberg brings a lot of functionality to the WordPress platform that you simply couldn’t do with with the old WordPress editor.

You may have just what you need already built in so consider this before making that leap.

3. Avoid page-builders for full post content

Don’t write your show notes inside a page-builder for example.

Thinks of a page-builder as for special content. A page-builder is designed to help you build pages. An About page, your store page, your Opt-in page, a subscribe page, or a gear page for example.

Speaking of which I’ve got a new gear page! I used a page-builder to make the page and the individual elements inside the page and it was much easier that it would have been had I done it manually.

Another reason to not use a page-builder for the full post content is what might happen should you decide to stop using a page-builder or perhaps change to another. You may end up with broken pages or lots of extra code laying around making it very hard to get straight.

There may be tools in place to allow you to back out of the use of a page-builder or transition to another one but I’m not aware of any yet.

4. Use global styles over single styles whenever possible

Think of a button you’d like to be blue, don’t build all sorts of buttons styling them one-by-one to be blue. Instead, go into the page-builder settings and set the style to how you’d like it to be.

Doing so will allow you to easily change all of the buttons later by changing one setting instead of chasing down many more than that to get it right.

5. Look for free or premium addons to extend your chosen builder

Do this before you consider switching builders. For example you might be on one of my 2 top recommendations; Elementor or Beaver Builder and see the other one and get excited about feature the other has that yours doesn’t have. This might make you want to switch but before you do so look for free and paid plugins or add-ons that might do just what you need to the page-builder you have already. Both of these page-builders are very popular and there are a lot of add-ons available.

It was easy to use as all I had to do was make the purchase, install the plugin and what I needed was in place ready to use.

There’s also a free version of Elementor! It’s included with SecondLine Themes so if you purchased a theme there based on episode 336 then you already have Elementor in place.

I upgraded to Elementor Pro for some of the advanced widgets, the pop-up builder, and the theme builder.

For example check out my Podcast Movement 2019 Interviews and my gear page. When you get to the gear page look at the header and you’ll see different sections for different categories of gear. In each of those sections you’ll find different items and each of those individual pieces of gear standalone and can be used in other places as needed easily. That way if I ever need to update anything about that piece of gear I can do so in one place and it will update everywhere I have that content inserted.

Keep in mind you don’t have to upgrade to Elementor Pro as the free version does a lot as is.

2. Divi Builder

Previously Divi was #4 in my list but shifted as I was recording the episode due to the new version they just realized.

Elegant Themes makes one beautiful theme and a couple of plugins too. You could get it as part pf a theme and as a standalone plugin as well. What made Divi difficult though was it was only for page content. It looked beautiful and was easy to work with but it made it hard to work with other elements like buttons for example.

Version 4.0 was just released and brings theme-building features so now you can use Divi to build your header, or your footer or your entire site for that matter.

You can get Divi as an annual renewal or with a lifetime purchase.

Unfortunately, there’s no free version. If you decide to try it you’ll need to purchase it and if you find you don’t like it then they have a return policy.

3. Beaver Builder

Similar to Elementor not only in the functionality but also in the ay it allows other developers to create add-ons.

Updates aren’t as frequent but when the do release new versions they’re really good. But there’s a free version of Beaver Builder!

With all of this said, keep in mind what you need to do without getting too wrapped up in what you can do.If you've ever read a Spider-Man comic or seen one of the movies you know that “With great power comes great responsibility” and your site is no different.

Disclosure

This post may contain links to products or services with which I have an affiliate relationship and may receive compensation from your actions through such links. However, I don't let that corrupt my perspective and I don't recommend only affiliates.

This website contains links and references to products and services that may include affiliates, sponsorships, or other business relationships in which The Audacity to Podcast and D.Joseph Design LLC may receive compensation from referrals or sales actions.

50%

5/5

Enter your name and email address below to learn “7 Ways to Get More Podcast Reviews” FREE!

First name

Email address

50%

Enter your first name and email address below to get my favorite TextExpander snippets!

First name

Email

Yes, I consent to receiving emails

This form collects information we will use to send you podcasting-related updates with tips, offers, and news. We will not share or sell your personal information. You can unsubscribe at any time.