Flexible Content Element

Content Controls

Field

The Field controls are useful to determine the ACF Flexible Content field that the Flexible Content element will display:

• Flexible Content Field – Select the field that will be used for displaying Flexible Content
• Tag – Choose a tag for the element
• Advanced – Select an Empty Global Block for when no results are found.

Blocks

The Blocks control is where you will map ACF layouts to Global Blocks.

• Add Block – This button creates a new block where you can then assign content.
• Layout – Select the ACF Flexible Content Layout that you would like this Block to use
• Block – Select the Global Block that has been designed for the ACF Flexible Content Layout.

Design Controls

List

The ‘List’ section focuses on customizing the appearance of lists in your layout. Adjust the width, layout type, and delve into specific settings for sliders, including effects, autoplay, and navigation options.

• Width – Set the width of your list, allowing for flexible design options.
• Layout – Choose your preferred layout style, such as grid, slider, or list.
• Slider – Modify the settings for the Slider layout. More information may be found via the Slider Controls documentation (Available when ‘Layout’ is set to ‘slider’)
• Items Per Row – Define the number of items per row in the list. (Available when ‘Layout’ is set to ‘grid’)
• One Item At – Set breakpoints for displaying only one item per row. (Available when ‘Layout’ is set to ‘grid’)
• Space Between Items – Adjust the space between items in the list. (Available when ‘Layout’ is not set to ‘slider’)

Item

In the ‘Item’ section, you can customize the style of each item within the Flexible Content element, including the background, borders, and padding, to create a distinct look and feel.

• Background – Select a background color for items.
• Borders – Adjust the border settings of items, including radius, style, and shadow.
  • Radius – Modify the border radius for rounded corners.
  • Styling – Customize the border style, width, and color.
  • Shadow – Apply a shadow effect to each item.
• Padding – Set the padding within the item for better layout and spacing.
  • Padding – Define specific padding values for all sides of each item.

Container

In the ‘Container’ section, you can customize the overall container of your element, including its background, borders, and padding, to create a distinct look and feel.

• Background – Select a background color for the container.
• Borders – Adjust the border settings of the container, including radius, style, and shadow.
  • Radius – Modify the border radius for rounded corners.
  • Styling – Customize the border style, width, and color.
  • Shadow – Apply a shadow effect to the container.
• Padding – Set the padding within the container for better layout and spacing.
  • Padding – Define specific padding values for all sides of the container.

Spacing

The ‘Spacing’ section provides controls to adjust the margin at the top and bottom of the element, allowing for precise spacing and alignment within your page layout.

• Margin Top – Set the top margin to create space above the element.
• Margin Bottom – Adjust the bottom margin to control spacing below the element.