Dynamic Content for Elementor has enhanced the ACF Flexible Content widget with a new display mode called "Dynamic HTML".
This mode is specifically designed to leverage the 'data' shortcode, allowing you to dynamically integrate and manipulate flexible content data directly within your Elementor projects.
Availability of the 'data' Shortcode
The 'data' shortcode is exclusively available in the "Dynamic HTML" setting of the ACF Flexible Content widget and is not accessible in other widget settings. This makes the 'data' shortcode a powerful and specific tool for customizations that require dynamic data display in Elementor projects.
Available 'data' Shortcodes and Their Outputs
Depending on your configuration settings within the ACF Flexible Content widget, different types of 'data' shortcodes will be available. Each type serves a specific purpose, streamlining access to and formatting of the data as needed:
{data:row}: Returns the complete row data as an array. This array needs to be either accessed directly by specifying a sub-field name like{data:row||sub-field-name}or can be looped through an array iteration.{for:item {data:row} {get:item} @sep=', '}Fetch the complete row data as a formatted string, with fields separated by commas. This is ideal for simple displays where basic formatting is sufficient.
Practical Examples
Displaying Raw Data: To access a specific element of the row data, use:
{data:row||sub-field-name}Formatted Output: For a user-friendly display of the flexible content data, formatted with commas:
{for:item {data:row} {get:item} @sep=', '}