50 minutes | Oct 29th 2019

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. 2. A page-builder makes web-design fast with WYSIWYG drag-and-drop editing 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. 5. Page-builders will probably someday integrate directly into the Gutenberg editor 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. As I mention in last week's episode SecondLine Themes includes the free version of Elementor page-builder and comes with some Elementor widgets for you to use. Our favorite WordPress page-builders 1. Elementor Pro Much of what Elementor Pro has going for it is also available in Beaver Builder. All of what you get in Elementor isn’t all that’s available. There are add-ons and features that you can add to enhance an already great framework. For example I use Elementor on The Audacity to Podcast as well as My Podcast Reviews and I purchased ‘Essential add-ons’ plugin for Elementor to use on My Podcast Reviews as it had some features that the add-ons did better than Elementor Pro. 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. Elementor Page Builder 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! WordPress Page Builder – Beaver Builder 4. Themify Builder Themify puts out a lot of beautiful themes there themes all include the Themify builder or you can use the builder on its own. Themify builder gives you a lot more granular control, great if you have some experience in basic web technology. One of the things I don’t like is that their updates have often broken things. For example they might add new fields but have placeholder text that reads “Add subtitle here”. This actually happened to me once and the placeholder text showed through and displayed on the website! Themify offers many beautiful themes and handy plugins, which are all included in some membership options. Themify also has a free version. It was because of the granular controls available in Themify builder that I was able to do certain things on Podcasters’ Society the the other builders simply couldn’t do. Themify works really nicely with Gutenberg editor too. Themify 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. Need personalized podcasting help? I no longer offer one-on-one consulting outside of Podcasters' Society, but request a consultant here and I'll connect you with someone I trust to help you launch or improve your podcast. Ask your questions or share your feedback Comment on the shownotes Leave a voicemail at (903) 231-2221 Email feedback@TheAudacitytoPodcast.com (audio files welcome) Connect with me Subscribe to The Audacity to Podcast on Apple Podcasts or on Android. Join the Facebook Page and watch live podcasting Q&A on Mondays at 2pm (ET) Subscribe on YouTube for video reviews, Q&A, and more Follow @theDanielJLewis 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.
Play Next