Elementor vs. Advanced Custom Fields

Elementor vs. Advanced Custom Fields

When choosing to build your WordPress site, there are many options available. In this article, we discuss using a page builder (Elementor) verse Advanced Custom Fields.

For those who aren’t familiar, page builders are WordPress plugins (or sometimes themes that have them built-in), that allow you to drag and drop pieces of content into different layout configurations and customize them. 

Drag and drop gallery view

For instance, let’s say that you want to build a page that has an image gallery on it. You simply choose the layout, select an image gallery module, and drop it on to the page. From there, you can decide which images you want to display and adjust the overall look and appearance of the gallery. All of this is happening live as if you are looking at the result on the front-end of your website.  

With Advanced Custom Fields, things are a bit different. To get to the same result as Elementor, you first must create the image gallery yourself and design/develop the look and feel — as well as any settings the end user might want.  

Image gallery view 

You might think, “Well, that’s a no-brainer, I would choose Elementor!” and that is totally a rational response. The thing is, there is a perfect use case for both products and that is why they are so popular in the WordPress ecosystem. 

For the low to “no code” user, they will want to choose Elementor because it provides great experiences out of the box. For Agencies with full time developers (or the freelance web developer), they might choose Advanced Custom Fields because it gives them the flexibility to control more of the experience and provide better scalability. 

There isn’t a wrong choice, as both provide great solutions to the end user. Here at MercuryWorks, we use Advanced Custom Fields for new web projects, let’s take a look at why.

A Deeper Dive into ACF 

Image of a computer screen with html code displayed.

Since we here at Mercury develop with ACF (Advanced Custom Fields), we have first-hand experience on the advantages of using ACF to custom tailor our projects to the client’s needs and expectations, as well as provide an intuitive user experience for managing content. 

Over the lifecycle of ACF, we have seen it grow to become a very powerful development tool. In the early days, when you created fields, you were more-or-less locked into the template for those specific fields and couldn’t easily change the order of your page.  

As an example, if you had a page that you designated to be your Contact page, you would create a template for it and write out the PHP and HTML. Whatever order the code was in your template is how it would render on the page. If the client wanted their content order adjusted, it would require a developer to make a code change and restructure the page content to meet the client’s needs. This was the common approach until ACF introduced the Flexible Content field.

ACF Flexible Content

With the release of ACF Pro version 3.1.0 came the Flexible Content field. With the Flexible Content field, you were able to segment your code into individual parts and build layouts that could be dropped onto a page and arranged in any order—by both the developer and the end user.

Screenshot of flexible content field interface.

This was a game changer, but it took a while for developers to adopt the approach as it shifted the way a site was developed. Instead of building page by page, you would now consider the site as a whole and determine what layouts or partials you would build that could be re-used on other pages. It was more planning up front, but the result was a better end-user experience with the “flexibility” to re-arrange and re-use your content. Once Flexible Content fields caught on, it became the standard approach to developing with ACF. 

In the earlier example of a Contact page, the user had no control over adjusting the layout order. Using that same example, with Flexible Content fields, the developer could create various re-usable content layouts that could be added to any page. 

The developer would create the flexible content group, set the location that it will be shown on (all pages), and then build layouts that the user can drop onto a page. These layouts could consist of anything but usually were common use elements that could be used on most pages. Layouts that were more single use could also exist in this group or specified to be displayed in other groups based on page template or however the fields’ location was determined. 

For example, on some of our recent projects we created a Text Editor layout which is just a basic WYSIWYG (what you see is what you get) field that the user can drop on to a page. Another example would be an Accordion so a user can show and hide text behind a title (think how FAQs are commonly shown). We also created more advanced layouts like a custom Hero, Recent Posts, and an Image Slider. These are just examples, but the possibilities are endless. 

How ACF Flexible Content Compares to Page Builders 

Although you get more out of the box with a page builder, ACF Flexible Content fields give you the advantage of custom-building layouts, which lets the client not worry about the design. This approach removes the “how should this page be designed?” bottleneck when adding content, as those design decisions are handled during the development phase of the project. The user can simply pick a layout to place on a page and only think about the content they want displayed.  

Woman working at her computer  

This also improves break-ability of a page when a user makes content changes. They can have more peace of mind when adding another paragraph or dropping in an image, knowing that the layouts they are using have been developed and designed to “just work” together. 

In this sense, you can think of ACF as more of a Content Builder versus a Page Builder. Your page is already built, and the layout/design are handled during the development so all the client must do is build the content.

Good for Users and Developers 

Using ACF as a content builder empowers the user and gives them the ease of mind when editing their site. It also empowers the developer as it makes projects easier to work on.  

With code version tracking tools like Git and deployment processes with Azure DevOps, developers can collaborate together on the code and deploy it to their respective environments while not overwriting each other’s work.

Screenshot of git version tree interface.

This is not as easy to do with a page builder as most of the work is done through the builder’s user interface and isn’t tracked or setup to work collaboratively. With ACF, you still have content entry to do and still need it to be consistent across your environments for testing, but the overall process is simplified when you can separate the code and keep track of it.

 

Looking to the Future 

As detailed here in this article, ACF Flexible Content fields are a solid tool to build amazing projects and deliver top-notch solutions for clients. As we look to the future (or present), there are other tools in the WordPress ecosystem to consider that are quickly maturing.  

The WordPress Block Editor (a.k.a., Gutenberg) is a different way of building content for WordPress posts and pages, compared to the old WYSIWYG text editor of yore. It is a very similar process as building with ACF Flexible Content fields, as explained previously in this article. You have various blocks of content that you can drop onto the page, arrange the order, and adjust settings to customize the look and feel. 

Screenshot of WordPress page builder

The WordPress open-source platform is constantly evolving and improving. Since the Block Editor is a core part of that platform, it’s very likely we here at Mercury will adopt it into our own projects at some point.  

From our testing, it’s a relatively simple process to convert existing PHP template parts over to work as custom blocks, thanks to the amazing team over at Advanced Custom Fields. Their plugin lets you register custom blocks and work on them like you would any other PHP custom field.

Wrapping Up 

From working with other content managements systems, various page builders, and building custom projects with ACF, we have seen our fair share of tools and platforms and couldn’t be happier with WordPress powering our clients’ sites.  

Speaking of which, if you are reading this and have an awesome idea that you need turned into a real-life product, please reach out to us. We would love to “make it work”! 

Interested in Learning More?

Fill out the form below and our team will follow up shortly.

"*" indicates required fields

No Comments

Leave a Comment

Your email address will not be published.