Displaying Flexible field

The Flexible Content field is a unique ACF field type that is not available in other meta vendors. It provides a versatile, block-based editor, allowing for structured content creation.

With the Flexible Content field, you can define multiple layouts and sub-fields within a single field, giving you complete control over the content structure. Editors can easily choose and arrange these layouts within the editor interface.

Pay attention: the Flexible field is supported only in Advanced Views Pro.

1. How to display a Flexible field

To display a flexible field, follow these steps:

a) Create a new Layout ('Primary'):

1. On the Fields tab, click the 'Add field' button.

2. Choose the flexible field.

3. After selecting the flexible field, you'll see a new 'Sub-fields' tab appear in the row. Click on it.

4. Select all the layouts you want to display.

5. Save the current Layout.

b) Create a new Layout ('Internal'):

1. On the Fields tab, choose your group in the 'parent group' field.

2. In the parent field, select the 'flexible layout' from the previous step.

3. Click the 'Add field' button and assign all the layout fields you want to display.

4. Save the current Layout.

c) Amend the 'Primary' Layout:

1. Find the 'flexible' field in the fields list.

2. Open the 'Sub-fields' tab and locate the target 'layout'.

3. Fill out the "Field Layout" setting by choosing the 'Internal' Layout.

4. Save the Layout, copy its embedding shortcode

5. Embed Layout: paste the shortcode inside the target place

You're done!

Advanced Views will automatically retrieve the set of chosen layouts on the page and pass the data of every layout to the specific Layout defined for each layout. This process occurs dynamically, granting editors the freedom to customize content without manual intervention.

2. Render options

2.1) Items List

To display all the items in a single row, you can use the CSS Flexbox:

#layout__flexible-content {
display: flex;
gap: 10px;
}

2.2) Items Grid

To display all the items as a grid, you can use the CSS Grid:

#layout__flexible-content {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
 }

@media screen and (min-width:992px) {
 #layout__flexible-content {
  grid-template-columns: repeat(4, 1fr);
 }
}