Exploring Page Builders and Advanced Custom Fields in WordPress
In this episode, Diane Kinney and I are talking about Page Builders and Advanced Custom Fields Pro. There are a variety of tools available when it comes to building a WordPress website – and choosing the right tool for the job — can sometimes leave you feeling overwhelmed. No worries, Diane puts it all in perspective and provides some useful tips on choosing a page builder.
Yes, I’m a mega WordPress nerd and I’d love to share the things I’ve learned in the last 17 years of building both simple and complex sites.
Listen to Episode 24
Where to find Diane:
Tools and Resources discussed:
Full Transcript of this Podcast Episode
Jackie Hi everybody, it's Jackie D'Elia with Rethink.fm, and this is episode 24, which is the last episode for season two. I have my very special guest, returning again Diane Kinney. Hi Diane.
Diane Hi Jackie.
Jackie Thanks for being on. Diane runs the Versatility Group, it's a web design agency in Sarasota Florida. She's not your typical web designer, she's got extensive project management experience from her day's work and as a C level exec in the corporate world. And for the past 20 years she's been running her own agency. I've asked Diane to come on today to talk to us about her thoughts on Page Builders and the different approaches to building websites. Hi Diane.
Diane Hi. I'm excited to really dig into this topic, because I think it's such an interesting one. We take a real flashback to the past, and think about did you ever use Microsoft FrontPage?
Diane Adobe GoLive.
Jackie Not adobe GoLive, but I do remember using FrontPage.
Diane GoLive was like the designer version of FrontPage. I have gone through so many phases in two decades of web design. In the very beginning we pulled up notepad and wrote some HTML code and put it online and it was magical, it also looked terrible. Then we got design tools like FrontPage and GoLive that were more visually oriented. We built some really cool things with those tools. Pretty good looking things with really bad code. That was the season of good looks bad code. Then we entered the era, right around the time that CSS came into being, and CSS Zen Garden, and there was a huge focus on code.
Separation of concerns, getting the presentational stuff out of your HTML, about performance. We had an era of really how to name things, how to structure things. That was definitely, and it feels like we've left that era now a little bit and we've moved to some visual and builder tools again, where there is more of an aesthetic focus, there is more of a less emphasis on code perhaps. I think those changes are interesting, because one it seems to be a bit of a pendulum swing. As we are in the era of Page Builders, I suspect it will be followed by another era of focus on code, because that's what tends to happen. I think it's a really interesting place to be right now.
Jackie You and I have been chatting on numerous occasions about Page Builders, how to approach things, and we both worked with Genesis. You definitely had taken like a different approach than I did, probably, I don't know. You said like four years ago, somewhere in there. For me, I was using a lot of the StudioPress themes, which the FrontPage is built with widgets. That approach of customizing the FrontPage with the widgets and then doing just regular content entry and custom code, to do things on different pages like page templates where you can format things differently and use code to do that.
You took the approach of using Advanced Custom Fields, which you have got me hooked on I have to say, because I have through your own encouragement I started experimenting and doing some things with it, and I have to say it's changed my whole approach to, especially to building FrontPages on a website, but also just of adding a lot more functionality that is really easy for users who are actually gonna use the website to manage the site for them.
Before we jump into the Page Builder aspect, and who that's right for and what clients that's a good choice for, let's just talk about Advanced Custom Fields, I'm talking about Advance Custom Fields Pro, the paid version, there is also a free version of Advanced Custom Fields. How that kind of plays into your overall approach to building a website.
Diane It's been a really interesting path for me because before I really worked exclusively with WordPress, I worked with Drupal, when I was working with Drupal, they implemented what they called Fields in Core. They put in an entity API and what you could do with fields was just whatever you wanted basically. If somebody gave you a set of legos and said, "Knock yourself out." Which was fantastic. There were other things that were very challenging. When I got involved in WordPress I was already in that mentality of where are my fields, I need my fields.
Custom fields support in WordPress is very limited. And I don't remember how I first got, my first awareness of advanced custom field, but I was pretty much hooked from the first minute because I had found the toolkit that I wanted, where I could efficiently and quickly build solutions. It's really interesting to me, ACF is a really, really popular plugin. It's one of those plugins in the WordPress ecosystem that's definitely in the top tier. At the same time. You get kind of this pushback I guess from "real developers," who say things like, "Real developers don't use Advanced Custom Fields."
It's interesting because it's not just that particular plugin, there is also custom field suite, carbon fields, custom metaboxes, CMB2. There is a range of fields solutions for WordPress. My overall philosophy is use a fields solution, and then next my philosophy is, use the fields solution that's right for the project you are doing and that's a big question. What type of project are you doing, what type of functionality does it have? What does the end user need. What are the goals, what's the most appropriate tool? For me, more often than not, the right tool for a small to intermediate website with functionality across the site, different things and different pages, Advanced Custom Fields fits that build very nicely.
Jackie From my perspective then, when you are deciding to introduce a Page Builder, would you use a Page Builder while still using Advanced Custom Fields Pro or one of these other custom field APIs?
Diane That's an interesting question, because that is entirely possible and I've done that. I think we have to go back to almost the term Page Builder. And what does that really mean, and what are you doing with that? I've spent most of this year 2017 following news about Page Builders, trying them out, looking at how people are using them. It's something that I really wanted to understand. Because first of all I wanted to see if it was something that made sense for what I do, if it was something I wanted to incorporate and if so which Page Builder?
It's something I also wanted to be able to speak from a point of knowledge. I can't have a conversation with somebody and give them advice and say, "Oh no, you shouldn't use a Page Builder," when I've never used the Page Builder, or tested it or really seen what it does.
I think the interesting thing is, a few months ago I would have said that a Page Builder's primary purpose is to create a lot of possibility around the content area of a WordPress website. That's actually not really true anymore, because Beaver Builder has come up with their themer tool where you are templating, where you can access headers and footers. Across their products they've kind of gone from a Page Builder to a site builder in my mind. You can build an entire site using those tools, and you can incorporate other tools like ACF, like pods, different things.
I think you have to think about what need are you trying to accomplish, because I see a couple of things happening. There is a school of thought that you are creating easy to use elements for your clients to be able to updated text without breaking the site, to be able to move things around. Then there is another school of thought, which is that the class of web professionals who are more assemblers and implementers have found a whole new world available to them through Page Builders. With far less knowledge and experience than it would take to create something with code, with PHP, with advanced CSS knowledge, you can create some really complex and beautiful things with a Page Builder.
There is a huge appreciation for that, and many people who perhaps have never built a website or couldn't build a site without a Page Builder really embracing that.
Jackie They also doing very well with that too. They are able to price projects and work with folks that have a more affordable budget, and still be able to churn out some really professional looking sites, templates. And that's the one thing about Beaver Builder that I've noticed is, they have some really beautiful templates and components that you can bring in when you are doing a landing page or things like that.
You start to look at that and you go, "I could probably have this up in about 30 minutes here and look really nice." I think in those instances that makes sense to do versus building that from scratch for a specific need. Whether or not that's going to be what you choose to do, a fully customized build on the site that has lots of requirements that are not just design elements of your more functional elements. You've got requirements that it needs to do X, Y and Z, and it also needs to be able to do this. Then that gets into things that a Page Builder is not gonna be able to do for you.
Diane Right. And I think you said something very important there, which is what are the functional requirements? As opposed to always having a go to strategy, I always build sites with a Page Builder or I always build sites with this approach, or I always build sites this way. I think once you progress beyond entry level websites. It's so important to realize that there is a huge world out there.
There are vertical niches that have specific types of functionality, there are larger sites that have different types of features and integrations and different things. It's almost incredibly difficult to say the word website and have it mean something, because that's just so incredibly diverse in terms of complexity and size. The same thing that they all have in common is that initial feature, needs, analysis, not only in terms of what does the website do and offer, what is the overall plan or needs for things like performance, optimization, end user customization?
All of those should be looked at as the set of criteria for each site. So maybe for small mom-and-pop, a lot of those may not be terribly important. That could take you to answer A. Maybe it's an intermediate site and it's highly trafficked and it needs to do certain things and the majority of the user, maybe 60% of users are mobile. Optimization is everything. Maybe that calls for a different approach. Maybe it's not a Page Builder or maybe it's a more refined approach within a Page Builder. I think there is no one size fits all answer.
Jackie I agree with you. I think probably where most of us drop the ball in the beginning is just not really working on those functional requirements. Most problems with projects all result as a problem with scope. That all goes back to what questions did you ask in the beginning and did you really understand what it was they were asking for. Somebody can give you a PSD of a desktop layout and go, "Can you give me an estimate of what it's gonna cost to build this website?"
If you look at it, yeah, it's just a picture. It doesn't tell you anything about what it's supposed to do, and why, and where does it go when you click on this? What are you expecting? How are you expecting this section to be populated? Where is it coming from? Where is the data coming from and how is this a manual process? Do you want things to be automated?
So many variables on all of that in the scope. And then if you don't take the time to go through all of that in the beginning. It's really hard to choose the right tool. What is it that you are going to build in this?
Diane Almost impossible, and I think we went, we as the broader world of web professionals. Somewhere along the line we created this problem where the process became about looking at picture and saying yes, this is what I need for my website, when in reality that process should be business goals and objectives. What is this site intended to do? What are the conversion paths through the site? What role does speed and performance play? Is this the beginning of a number of phases, this is a site that will be growing and adapting? Do you offer products for sale, do you plan to in the future? Are they physical products, are they digital products, is it membership?
That process is hopefully coming back. Hopefully we have learned and we'll embrace that much more about words and conversation and less about pictures.
Jackie I think when your project starts to go sideways and you have scope problems and then clients come back and say, "That's not what I thought it was going to do." And then what about this? And you realize you didn't ask these questions, because the other thing is, you really need to drive that bus. You cannot let somebody else drive the bus from the beginning and going, here is my picture of what I went my website to be. I just need you to do this, and don't ask them questions.
You've got to take control of that process in the beginning and say, "Let's define your requirements, let's define your business goals." All of these things. And those are the questions you really need to be asking, and forget about how pretty the design looks. Then just the lack of whole focus on the mobile side as well, where you get ... I see this over and over again, and I've been doing a lot of work with agencies, so it's, you get a desktop design and in the end they just want it to work on mobile.
It's an afterthought. There is no design, there is no plan. In many cases, these people end up with scroll fatigue. On a phone or on a mobile device, because basically you just are taking this long, long page that is meant for desktop display and then just cramming it all down and trying to get it to go, it really is not creating a good user experience. We talked about that in episode eight when you were on about designing user experiences, and how they needed to be different for different devices and you have to have a different approach.
I think this all goes into this is that what tools you choose to use, how you choose to approach this, has a lot to do with what the needs are.
Diane Absolutely. I couldn't agree more. It's why it becomes very difficult to, in conversations with colleagues, should I use a Page Builder? Which Page Builder should I use? We haven't even talked about the technical pros and cons of the Page Builders themselves. You have a variety of products out there, some products just when disabled leave absolute mayhem behind, absolute mayhem.
I've had some conversations with people who are big proponents of some of these products and said, "What is it you like so much about this product? Because the code is very bloated, if you disable it, the content is a disaster, has to be completely cleaned? Why does that appeal to you?" The answer is usually that it's something that is very comfortable for that person to use. They are prioritizing their comfort over the product that they are delivering to their client. And this is what makes me think of when we go back to the days of FrontPage and GoLive.
We would look at a site and say, "That's nice, but the backend is like giant loops of spaghetti, you can't edit it." And so we are 15, 20 years in the future, and we are having a different version of that same conversation. Yes this is easy to use, yes it makes attractive things, it can be a little challenging for clients to figure out after the handoff, the code is an absolute nightmare. It's performance heavy, in terms of optimization.
When you are making this choice, you are making it from a perspective of it's a good tool for you. It's probably not a good tool for your clients and if you don't think about the product that you are delivering, your longevity in the service business is not going to be good, because somebody else is going to come behind you and say, "Well, here is all the things that need to happen with your website. The code needs to be cleaned up, it needs to be better for performance," because after people get their pretty new site, what is usually their very next question?
How do I get this site to rank? How do I get more traffic? As soon as those experts come in and they say, "Well, these are all the things that need to happen. And they are kind of hard to make happen with the tool that was used to build this site." It doesn't put you in the best professional light, I don't think.
Jackie I think one of the first things you should rule out when you are choosing a Page Builder is, if it's leaving shortcodes in your database, you should just run away and not even consider that-
Diane Just say no, that is not something you should do to people's content. That just is an ethical problem.
Jackie I just worked on a site that we took over. It was done on the X Theme with Cornerstone Page Builder. When we shut all that off, every single page, every single area of content was littered with short codes everywhere. These were short codes that actually did styling. All the styles were gone, everything. To me, none of that makes any sense at all. I'm really, I'm a purist when it comes to that sense. I really like the styles to be in the styles sheet. And classes to be used and do things properly. If you are gonna use a Page Builder that's gonna use in line styles or, I know Beaver Builder they create a style sheet and they cache it. It's very well done, as far as that goes.
If you shut the plugin off it doesn't leave your site littered with short codes all over. That seems to be like that's a good viable option-
Diane Those types of things need to be a base criteria, because imagine if I came over to your house and I just threw trash all over your lawn, and then left like I'm done here. And then you have to hire somebody to clean that up and put everything back. The words, the way they are supposed to be, that's just a fundamental belief about, I personally feel like when we take on the responsibility, if someone gives you money in exchange for a service, there is certain base things I think are very important. And not meshing their content in a way that it cannot be retrieved without significant work, which they are gonna have to pay someone to do, because nobody is gonna clean all that content for free.
Jackie There are still themes being made now, and even Genesis themes I've seen where they have custom post types hard-coded into the theme. That's all great, you build it, you've got a whole portfolio going in there. You've got all these items that you've created and set up. Then later you decide to switch themes, and it's time for change. You switch to a different theme and all of this data that you've entered is just no longer available, it's just missing. And you are like, "What happened?"
Diane I think it's really interesting. I personally I'm not a big believer in the idea of switching themes. I do not think, I think that's a false promise. It's something that's always talked about, but if you've ever tried "switching a theme," image sizes are different, so many things are different, but the content itself, your media, your words, your links, all of those elements should be there somewhere, so that they can be ... They may need to be drawn back out, but they shouldn't be wrapped and buried and essentially gone.
Jackie Where you have to write a plugin to get it out.
Jackie Yes, you switch themes you are gonna have to change styles, you are gonna have to regenerate all your thumbnails. There is lots of things you are gonna have to do to adapt it to a new design.
Diane Your content shouldn't be wrapped in line styles and short codes, that should not be the case.
Jackie Moving on, Page Builders. Pippin Williamson wrote a post, I'm gonna share it in the show notes about, he did a review of a lot of different Page Builders and had some comments and things on there. Based on your experience, I know you've tried several and I have asked you over this past year, many times, have you tried this one? Things come up in my workflow and somebody will say, "Can we work on this?" And I was like, "I've never heard of this one. I ask Diane," because I always go to you, "Diane, have you worked with this? Is it good, should I run away, what?" Which ones do you like and who would they be appropriate for?"
Diane I think that Beaver Builder is probably an exceptional product, because it handles the content well, it handles the styling appropriately. There is thoughtfulness on the part of the creators that they want to take a do no harm position. You can tell that there is respect for the content. I think that's one of the reasons why Beaver Builder is an excellent choice. They also have a very strong community, which much like Genesis tends to form around a product.
Instead of signing up for Las Vegas and lights and shows, you could do something that's a little more sleek and unobtrusive. I have recently been experimenting with Elementor which is impressive. Particularly from an interface perspective, it feels very usable, it has a lot of features, which is a pro and con type situation. I'm also very intrigued by Oxygen, which is by the group that created WPL Import, another very impressive product.
Jackie Any that you would definitely avoid?
Diane I would, I find Divi to be very concerning in terms of short codes, code quality. I know it's not technically marketed, it's marketed as a theme and or Page Builder. I'm not sure, but it's very popular, it's certainly not one that I would ever use. I mean the horror that is Visual Composer, it's even difficult for me to actually say those words, because that is just a don't. Don't ever do that. Don't do that to people.
Jackie I've also heard one called Site Origin which is free.
Diane Yes, I've tried that one out. And I think that's another solid option. I think what is happening a little bit is the market will go ... Where the market will go to some extent, there'll be some real leaders in terms of market share. And of course the more popular a product is, the more enhancements you'll see, and the more new features that you'll see, but I think Origin is a very ... Is it Site Origin?
Jackie I think it is, yes, Site Origin.
Diane I think that that is another, similar to Tailor like a very solid choice, and something that you could definitely look as an integration tool, a strong integration tool.
Jackie You shared with me a theme that you put together earlier this year. We worked on it together a little bit. And you used ACF in there. It kind of had some Page Builder-esc functionality to it.
Jackie Talk about how, why that might be a good solution, what would you use that for then?
Diane There is a very interesting capability in Advanced Custom Fields called Flexible Content. Flexible Content lets you create, I don't remember what name they use exactly, whether it's modules or blocks. You can essentially build your own elements. The ubiquitous hero image. What is a hero image composed of? You've got a background image, maybe you've got a color toning layer. A headline, a sub headline, maybe one or two action buttons. In flexible content, you can build the module called a hero. You can create those fields, and you can make them conditional for example.
If they have values, they'll show it, they don't have values they don't. Then you can create another module say a call to action, or a text block. Where things get really cool with flexible content is right in the WordPress interface. You can reorder those, you can delete one, you can add three of the same kind. Once you build them, Advanced Custom Fields gives you all kinds of native functionality. Add another of this type of block, add another of this type of block. You can create your own Page Builder for yourself, for clients, it's very awesome, I use it all the time. And it creates so much flexibility. Let's say that your client needed, routinely needed sales pages for launches or something similar. And they tended to have like a classic sales page, let's say it had six elements on it, testimonials, purchase, call to action, an illustration, product details.
You build those components out and a client can go in and say, "Create new sales page, give me this kind of block, this kind of block, this kind of block, this kind of block." Create their content, take a look at it and say, "I think the testimonial should be higher in the page." Drag them up. Literally that's all there is to it. This is a powerful thing to be able to do, because I found personally as I work on my own projects, I would rather have that capability at my fingertips than sit down to code a sales page from scratch, because then my brain can be invested in marketing, and what I'm saying, and I facilitated that whole process of creation, and the amount of time, because very easily, I enjoy writing and optimizing code, but sometimes you end up doing that at the expense of really ever getting anything done. You can just keep making things nicer and better.
Jackie It takes time. It just takes time to do those things. That time has to come from somewhere else.
Diane Exactly, that is one of the most powerful. Again, there are similar tools in that class, Custom Fields Suite is much like ACF, also worth checking out, but if you want to, the concept that you can make your own drag and drop, page templates and content fields and things, is extraordinarily powerful. You can do some amazing things.
Jackie Would you say that that equates to maybe things you could do in Beaver Builder as well if you weren't as comfortable working with code? Because on the ACF side yes, you can quickly build all these components. You till have to go put your PHP template together.
Jackie That does require a little code meddling to get it all to work the way that you want.
Diane Yes, you need some skills.
Jackie Something like Beaver Builder makes it really easy to be creative, and they have lots of cool templates, which is I think why they are such an appeal for that is, they've got lots of templates made, with lots of visual components in there that already have animations on them, and things that-
Diane One of the things that's very powerful I think in Beaver Builder is you have the ability to created saved elements. While they have an extensive library of templates and elements, a lot of times Beaver Builder is so popular that you may actually recognize, it's the countdown module, it's the ... Let's say you want to do something else. Something that's a little more original or your client has unique need. They have the ability to create modules, even saved rows. You can design something, put the elements in there, save that as a row, and make it available to reuse again.
You have that same concept that we were talking about with ACF, you could absolutely do in Beaver Builder. You could create a series of blocks that were unique in structure and design, save them, reuse them over and over again.
Jackie It sounds like the only other thing to consider with all of this is with lots of choices, you are not gonna be fluent in all of them. If you are going to work with a Page Builder, a good recommendation would be to pick one and really get to know it and be able to be fluent with it and work with it efficiently versus jumping around to different ones to try to do things. The other thing is like, if you are gonna use some custom fields API, like if you can use Advanced Custom Fields, or you are gonna use a different one, get really fluent with that, so that you can work efficiently with it.
I'm learning as I've started doing more with ACF. I'm getting faster at it as I go. And I'm starting to dig deeper into it. If you have to keep jumping around it, doing things in different ways, you are not really gonna be efficient. Decide what you are gonna do.
Diane I think in general, I'm all for learning new things, you almost have to pull back and have some discipline. We are now in an era where there are new design tools constantly. Now we have the adobe suite, we have Sketch and we have Graphic Designer and Figma, and there is probably several more. You can't learn them all.
Jackie That's like for me. I chose to use affinity designer, because I had never really done a lot of work in illustrator. I knew a lot of Photoshop, I'd used Photoshop for a long time. Affinity Photo is very much like Photoshop to me, and I like their, you pay one time, you buy the license, you've got it. It's very affordable, affinity designer. And for the type of work I do, which is a lot of SDG work, it works beautifully for me. I don't need it to do anything else. Do I need to know both of those tools, do I need to be fluent in illustrator and in sketch and in affinity designer? No, I really don't. Not for my needs.
Diane Right, and I think there is also a big benefit when let's say that you set up on your Advanced Custom Fields journey. At first, not only are you learning but you are also writing code, as you continue and become more proficient, you end up with a library of, "I've done this before, I've done this before, I've done this before." You take something you did before and adapt it a little bit, and you become, in the beginning you are definitely spending more time but as you progress and kind of stick with one thing, you are spending far less time, because you'll be using elements and you are optimizing things and writing better code.
There is a lot of benefit to, if you use five different Page Builders, that feels excruciating to me. I would never get proficiency with five different tools.
Jackie It's like somebody, they give you a site to go work on, it's an existing site from somebody else, and you open it up and it's all in Site Origin. And you have to make some major changes to things, you are like, "I don't really know what I'm supposed to do here, how this works." And you have to spend quite a bit of time to get familiar with it. I think if you are building websites for clients, focus on a specific type of work that you do, if you are going to be using Beaver Builder or another Page Builder that you love, like Oxygen like you mentioned or something else that works for you. Then stick with that.
Diane Also don't be afraid to ... I think a really good strategy is to spin up some local sites just WordPress sites. Maybe have some content that you use again and again. And install a Page Builder plugin, spin up another site, install Page Builder plugin. Use a little bit of your time to test out things that you probably will need to do, before you are trying to do it for a client in a deadline scenario, and you see a lot of frantic posts in Facebook groups. Both code and Page Builder, "Please help me. I must figure this out Thursday night."
And if you can kind of work those things out on your own time, you are gonna be a lot less stressed and be able to deliver a better product.
Jackie I think that's really good advice. My last question for you before we wrap up is, are you rethinking anything this year, what's going on in your world?
Diane I really have ... This is the year I rethought my allegiance to code only solutions, where every bit of code had to be written by me and optimized, and there is definitely a spot in my world for Page Builders and other types of solutions in certain scenarios. I think I've kind of come full circle to ... There is probably an appropriate solution for just about everything. If you are making a landing page, or a sales page, you may not need to handcraft every line of code there. If you are doing something where performance is really important or there is design intricacy that would be very hard to manage, maybe that's a different solution.
This has been the year of kind of being open-minded, about tools and approaches and educating myself about what the options are and I've never been a particular pedantic person about this is the right way to do things. And I'm even less so, I'm even less inclined to tell someone, "This is what you should do." What you should do is think and research and decide what's right for you.
Jackie That is awesome advice, and on that note we are gonna wrap it up. Diane, if folks want to get a hold of you and talk to you, ask you questions, visit with you, how do they reach you?
Diane You can always find me on Twitter dkinney, and I'll be happy to answer questions and talk. You can go to my site dianekinney.com and send me a note through my contact form. I'm in various select channels, so if you track me down in one of those I'd be happy to talk about business and freelancing and technical solutions. Come find me.
Jackie Anything you want to promote?
Diane Carrie and I are working on a book. We've been talking about that. We are getting to our one year anniversary of starting that project. It turns out writing a book is much harder than it looks. We are making good progress there, and if you'd like to get on our mailing list you can go to realworldfreelancing.com and sign up. And we'll let you know when we are getting ready to launch that puppy.
Jackie I'll put a link for that in the show notes as well. That does it for this episode everybody. I hope you have a great week. Thank you Diane for coming on. I really enjoyed the conversation. You and I have been chatting about this for so long, it was nice to kind of encapsulate everything and get it in [crosstalk 00:47:38].
Diane Thanks for having me.
Jackie All right. Thank you. Bye.