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.
Introducing Custom Fields Integration: ACF, Toolset & Pods 1
Amir Helzer
Toolset Founder​
websties Introducing Custom Fields Integration: ACF, Toolset & Pods 2

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."
0 1 Introducing Custom Fields Integration: ACF, Toolset & Pods 4
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.