Creating a page using Divi Builder, you can add dynamic content to the page you are working on. Not just default dynamic content of WordPress such as post title, post meta, featured image, and so on, but also dynamic content from custom fields. In this article, we will show you how to add custom fields in Divi Builder.
When it comes to custom fields, there are some popular plugins available out there. From JetEngine, ACF (Advanced Custom Fields), to Pods. Divi Builder itself supports ACF, Pods, Meta Box, and Toolset.
Step 1: Create the Custom Fields Using ACF
ACF, as you might have known, is a popular WordPress plugin to create custom fields. There are over 20 field types supported by ACF, including advanced fields such as jQuery-based date picker, color picker, file upload, and so on. Being a freemium plugin, you can use ACF for free. You can download the free version of ACF on the WordPress plugin directory.
Once installed and activated, go to Custom Fields -> Add New to create a new custom field group. First off, give your field group a name and add a field by clicking the Add Field button.
Give your field a label and name and select the field type on the Field Type option. If you want to set the field as a required field, you can toggle the Required? option. Click the Close Field button once you are done setting the field. To add another field, you can simply re-click the Add Field button and follow the same steps.
Once you are done adding the fields, you can reorder them if you need to. To do so, simply drag a field you want to change the order of downward or upward.
Next, go to the Location section to set where you want to assign the field group to. ACF allows you to assign the field group to a post type — be it default post type (blog post), custom post type, or other post types — to a page and other content types on WordPress. You can add multiple locations. If you want to assign the field group to the default post type, you can set the following rule.
To assign the field group to the pages, you can use the following rule.
Or, if you want to assign the field group to both default post type and pages, you can click the Add rule group button to add a new rule. Your rule should look like the following.
A crucial thing to note. If you want to add custom fields on a page (not post), make sure to set the rule to assign the group field to page. Divi Builder doesn’t recognize the field group assigned to default post type when you work on a page.
Once done setting the rules, go to the Settings section to set the placement of the field group. You can display the field group beneath the content editor or on the right panel. You can set the placement on the Position option. From the Settings section, you can also set the field group style, label placement, and instruction placement. Once done, click the Publish button to publish the custom field group.
Step 2: Add the Custom Fields to a Divi Builder Page
Once your custom field group is published, you can start to use it. Create a new page (Pages -> Add New) or post (Posts -> Add New) and edit it with Divi Builder. Sure, you can also edit an existing page or post. On the Divi Builder editor, add the Text module. On the text editor on the appearing panel, click the database icon and select the custom field you have just created (you can find it on the ACF section which usually lies at the bottom).
That’s it. You can then style up the custom field you have just added just like when you are styling a regular static text.
The Bottom Line
Divi Builder — a premium page builder developed by Elegant Themes — comes with a feature that allows you to add custom fields to your design. Be it page, post, or template. As we mentioned earlier, Divi Builder only supports ACF for the time being. One thing you need to underline when creating a custom field group using ACF. Make sure to set the rule according to where you want to add the custom fields to. For instance, if you want to add the custom fields to pages (not post), you need to set the rule that assigns the custom field group to pages.
Similarly, if you want to add the custom fields to a blog post (default post type), you need to set the rule that assigns the custom field group to the default post type.
The custom field group assigned to pages and default post type (as well as other content types) can be used on templates when you are working with Divi’s Theme Builder.
1 thought on “How to Add Custom Fields in Divi Builder”
We are making a new website (with Divi) for one fashion model agency. Client has a particular request – to organize models (about 1700) based on age (3-5, 5-7, 7-9…)
We’ve searched and discovered that the best solution is the ACF plugin. Our idea is: enter the year of birth on the model page – and ACF will automatically put the model to the belonging category.
Do you have a similar experience or a better idea?