Field connection basics (Themer)

Theme Builder field connections let you connect certain Page Builder row and module settings to external data on your site. This works in theme layouts, rows and modules on a Page Builder page, and saved rows and modules.

For example, suppose you're building a layout where you want your first Heading module to display the title of your Post or Page, such as this screenshot:

To do this, in your layout's first Heading module, you'd connect the Heading field to the Post Title

With Theme Builder installed, eligible connections are displayed in Page Builder for each eligible module setting. Eligible module settings have a plus sign displayed to the right of the setting. As shown in the following screenshot, after you click the plus sign next to the Heading field, a list of the eligible connections is displayed. You can scroll down through the list to find the one you want or use the search field at the top of the list.

With that field connection, whatever post or page that Heading module appears in will take the Post Title of that page.

Going back to the previous example, suppose you want the photo under the heading to be taken from the Featured Image of your post. You'd add a Photo module to your layout, then click the plus sign next to the Photo field to display your choices, as shown in this screenshot.

If you hover over the connection you've chosen, icons appear that let you remove the connection, or, if the connection has any settings of its own, to edit it, as shown in this screenshot.

If you have the Advanced Custom Fields plugin installed, you can also set connections to ACF fields. See the Related Article on connections to Advanced Custom Fields for more details.

Note: You might be wondering why there's no field connection to the header logo that's set in the Beaver Builder Theme Customizer. Currently there are no field connections to Customizer settings. This is because each theme does customizer settings differently, so the field connections would have to be set up on a per-theme basis. So, for example, if you want to add a logo to a header layout, use a Photo module with a link to an image in your media library.