Introducing Custom Fields Integration: ACF, Toolset & Pods

Easily integrate custom fields from WordPress, ACF, MetaBox, Toolset or Pods, and create more advanced websites without code.

Build dynamic websites that integrate #WordPress Custom Fields in #Elementor

There are two ways to build a website: static and dynamic. Static sites are built one page at a time, constructing individual pages separately. Building sites dynamically is the smarter way to go, because it enables you to use templates that generate multiple pages.

Blog posts and portfolio templates are good examples of areas on your site that you should build dynamically. Modify the blog post layout just once – and WHAMMO! multiple posts will instantly get the new design. This helps you complete projects faster and saves you valuable time (which you can use to read our blog 😉). 

But hang on, how do you avoid the higher costs and complicated code-work involved in developing dynamic websites?

The answer is simple: Custom Fields Integration via Elementor.

With Dynamic Content, you can incorporate custom fields that originate from WordPress, ACF, Toolset, Pods, MetaBox.io, or other custom field plugins, and visually design them using Elementor.

Dynamic Content

Creating Advanced Sites Has Never Been Easier

Dynamic Content eliminates the need to translate custom fields, as well as other WordPress data, to code. Don’t struggle with code, instead focus on your design.

With the Custom Fields Integration, you’ll be able to:

Create advanced websites faster than ever before. Add and customize your site’s featured image, site logo, post title, and post content. Each content entry in your database is now available in our drag & drop editor, ready to be styled with the same ease that you’re used to in Elementor.

Integrate with ACF, Toolset, Pods and other Custom Field plugins with ease. After creating the custom post types and custom fields using CPT plugins, Elementor automatically integrates with all custom fields and taxonomies, letting you style them however you like.

Visually design dynamic post templates. This feature is a huge upgrade for designers, who can now use an all-in-one solution to manage content-rich websites visually.

So, how does it work?

Design Dynamic Content in Elementor

First, create the template that will be used to style the dynamic content. This can either be an Archive template, which displays a list of posts, or a Single template, which displays a single post or page.

Next, add the dynamic content elements to the template.

This can include:

  • Content stemming from Custom Fields plugins.
  • Content that is built-in to WordPress, such as the post title, featured image and so on.

For the first type of content, you need to click on the dynamic content icon and pick the relevant field.

For the second type of content, simply use the dedicated widgets that can be dragged in from the panel.

Finally, select the conditions, in order to choose which posts will use this template. It can be across your entire website, for a specific category or any other condition.

"Elementor and Toolset complete each other very well. Developers using Elementor don't have to go through Photoshop and break their design into CSS."
Amir Helzer
Toolset Founder​

Sites You'll Be Able To Make

Build Advanced Sites With Less Hassle

Great designers and web professionals should strive to expand their portfolio beyond landing pages and small 5-page websites.

In case you’re wondering about the kinds of websites that can be built using dynamic content, check out Nick Schäferhoff’s list, outlining 10 content-rich websites you’ll be able to create using Custom Fields Integration:

  1. Portfolio sites
  2. E-Commerce sites
  3. Recipes sites
  4. Movie Review sites
  5. Online courses sites
  6. Staff and team pages
  7. Coupon sites
  8. Business Directories
  9. Classifieds
  10. Real estate listings 

Previously, if you wanted to create these kinds of sites, you would have had to either hand-code it into WordPress or use a dedicated theme or plugin oriented to that specific type of website. Elementor now offers a way better alternative that is more flexible, visual and code-free.

how to add custom fields

Follow Our Step-By-Step Tutorials

Sometimes, the best way to learn a new process is to take a close look at a specific site. That’s why we created a step-by-step tutorial showing how to create a movie review website using ACF and Elementor. Follow along to learn how to incorporate dynamic elements like IMDB ratings. 

"The work that you’re doing with Elementor and bridging the gap between the data in the backend and the control over the visual on the front end is super impressive."
Elliot Condon​
ACF Founder​

Why WordPress Professionals Should Jump Onboard This Feature

Custom Fields integration is so much more than a new feature.

In fact, it has the potential of substantially benefiting both you, as a web professional, and your client. Understanding how both sides benefit is key, since you will have to convince your clients and ‘sell’ this feature to them.

For you, the benefit translates into an easier implementation process of changes, shorter development times, additional earning potential and less competition.

For your client, it means getting a more tailor-made website that fits their needs, getting an easier to use interface to input their business’s content and providing more stable, solid and reliable infrastructure to build their site on. 

Nick also wrote extensively about the benefits of using Custom Post Types, so be sure to check out this article and see how it can affect your business. 

So, What Will You Build Next?

We can’t wait to see what direction you will take this exciting new feature.

Will you find a novel way to create sophisticated, dynamic and custom-made websites?

I’d love to hear your ideas.

Seriously, go for it! Shoot me a comment about your experience with Custom Fields and Elementor.

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

55 Responses

  1. What if i don’t want to use plugins for fields? Let’s say i have coded up meta boxes and other fields and want to call them from elementor ?

  2. Hi! Pods / ACF works great with Elementor, love it. However – Is there any new features here? It still worked great a month ago?

    1. Yeah, I don’t see anything new here since it was first released in v2 or whatever. I like the ACF integration, but there is one thing that is keeping me from loving it: Conditional display. It would be great if there was some way to only show something if it wasn’t an empty value.

      Looks like I’m not the only one:
      https://github.com/pojome/elementor/issues/4246

  3. Ben, love Elementor! Please, integrate this 3 feature in elementor to do it more powerfull in advanced website:

    * Dynamic visibility (check dynamic.ooo for elementor). The posibility to hide o restrict content per role (or woo comerce membership) that is great for advaced website. Eg: show a “buy membership to a logged in user” or hide “ads” to already suscription member. Or show “create a free a accout” to visitor not logged

    * Create with a template a skin for the post grid o any grid (check plugin Loop or Any elementor pro). That’s is really good to have inside Elementor Pro Core to create our custom grids, for example to show the price ok hover in certain way or create exactly what we want. Like you did with the footer and headet, but know with the loop for grids.

    * Add a querry option inside Woocomerce grid, to querry by the products purchased by current user. So with that we can show the items that they have, ebooks for eg in his account in more beutiful way. Like ibooks app in IOS for eg.

    That’s some idess please check and study further to get Elementor to the moon and beyond! ???

  4. This is absolutely great. BUT, there’s a current github issue for a feature request related to this.
    It is totally necessary to have conditional show of the widget to check if the custom field IS NOT empty. There are so many cases where not all the custom fields are completed and this functionality just leaves empty tags… not so useful like this.
    The thread at github has no feedback and it is months old. The link is #4246. Really hope you guys take a look at this. We, developers, really need it. Thank you for continuously improve Elementor / E. PRO!

      1. Any particular reason Repeater Fields are not included? The article states that Recipe sites can be made. How do you add the ingredients without the repeater fields? It would be great to have Repeater fields. What is the ETA?

  5. I had high hopes but the bugs i experienced before are still happening. I sent you guys a screencast of it. With two different installs on two separate hosts the custom fields just don’t work. I’m baffled by this. I’ve tried with ACF and Toolset and nothing – just blank.

  6. I used this Pro feature when it was in Beta mode. I built my client’s demo site and used ACF fields dynamically. Then one day I updated Elementor and the new release took it away and broke my client’s customizations. So I had to roll back to where it was Beta. So with this article, are you saying they brought it back in full, non-Beta mode as a newer release? I would hate to update once again and break the site as it is now live.

  7. Using Toolset + Elementor for a NGO platform dedicated for humanitarian professional working in humanitarian crisis and exchanging on how to create the best sanitation system
    website live in November

  8. If anyone’s curious about Carbon Fields “integration”, there was an issues thread on GitHub (unrelated to Elementor) where someone asked about removing the initial underscore from meta keys like _sample_text_input or whatnot that seems to effectively hide it from view in Elementor.

    Rather than breaking Elementor to get it to work, it’s worth taking a look at this URL they mentioned: https://carbonfields.net/docs/guides-serialized-datastore/?crb_version=2-2-0 where, presumably, you could shorten the example to extend the class only to save the key as-is _without_ the prefix, so it would save the field name like normal.

    I edited the database directly to change the key value of an old Carbon Field and it came right up for availability in Elementor as Dynamic > Post > Post Custom Field

  9. Hi. I have been using ACF with Elementor for a few weeks. There are issues with fields not updating. Also , I would like to know bwst practice for handling fields that are sometimes be blank

  10. I’d love to see CMB2 support added as well, although I recognize the difficulty since CMB2 doesn’t store field definitions in the database. In the meantime, I’ll keep coding shortcodes. As a developer myself, I used to put down most page builders. Elementor has changed my mind – I love the speed and flexibility it gives me. Great job!

  11. This is an Awesome addition to design! The “Takeover” continues! Elementor is all I know and want to ever know in building websites. You guys Rock! Thanks Ben.

  12. I couldn’t get the Pods website field to show on the front end with Elementor (but would show in the template preview). So I switched over to ACF Pro, and I when I go to add ACF in Dynamic Content, it won’t even bring up the link field as an option.

  13. Elementor keeps getting better and better.

    I know the feature has been there for a few weeks, but it’s good to have this kinds of posts for newcomers.
    Keep up the good work Elementor team!

  14. Does elementor support community sites where users can login and post structured content? (Example: like hotukdeals.com) If not, anyone know how to do this on WordPress?

  15. We are almost there … its almost code free custom apps and MVPs for non technical founders.
    A bit more around conditional logic baked in to Elementor or some hooks in to Toolsets logic would be profound.
    And if we can just get Toolsets “Views” with Elementor styling…. praise be!

  16. Is is it possible with custom field integration for input in one field to populate another empty field. For example, can data (information) submitted in a blog field by an external contributor fill a field in another blog. I’m try to build a educational site in which student complete online tasks on a worksheet blog and have it submitted to their personal portfolio blog page.

    Thanks
    Bruce

  17. Will this let the Posts Widget show entire posts, with paragraph formatting and images, if I do something with custom fields?
    The Posts Widget always had dynamic fields, but shows only a string of words without formatting or images.
    How do I put custom fields in the Posts Widget, if I create a custom field that contains a post?

  18. Testing this for the last months… Working good.
    But my big problem is how to do multilanguage sites with Elementor and with that ACF integration?
    Another problem is that I can’t use the templates for all single posts in category XY as every single posts will have a little bit individual features… So I have to do edit a post and chose a single template and then change it a little…
    But any good advices for multilingual sites using Elementor and ACF? With lots of product data which will remain the same in every language… ???

  19. Elementor is already having Facebook Posts Embed feature but setting the URL value is static. While creating templates and archives Elementor’s Facebook Posts Embed could have made the work very easy but since there is no option to set dynamic value from custom post field, I have to go through some other lengthy workaround. Hopefully in next updates we get the option to set dynamic URL value.

Leave a Reply