Advanced Custom Fields Pro is an excellent plugin that does more than just let you create custom fields. One of the many features available in the Pro version is Flexible Content Field.
In this tutorial I share a custom Page template in Genesis to display a meta box in WordPress Page editor in which users can add any number of Hero, Text-Image and Image-Text rows (sections) in any order they want.
The Page template is going to check for the presence of at least one of these rows and if present, replace the standard Page content with full width section(s) that has/have been added in the backend.
We are going to use Modernizr to detect if the visitor's browser is modern (IE 10+, Firefox, Chrome, Safari) and if so, use Flexbox for displaying the Text-Image or Image-Text sections' content in 2 equal width columns (while ensuring that responsive behavior is taken care of). For non-modern browsers, we will use display: table for the container and display: table-cell for the inner elements as CSS fallback.
The Hero section ("layout" in ACF Pro's Flexible Content field) is set up to display a "Show Call to Action?" checkbox which when ticked will display additional sub fields for entering CTA URL and CTA text. When these are populated, a button will appear beneath the text in Hero section.
Screenshot:
Overview video:
Step 1
Click here to download a custom build of Modernizr that adds flexbox html class for modern browsers for the Pages using Flexible Content field. This file was generated by going to https://modernizr.com/download, typing flexbox and downloading the build.
Upload this .js file to child theme directory/js.
Ex.: wp-content/themes/genesis-sample/js/modernizr-custom.js
Step 2
Install and activate ACF Pro.
Go to Custom Fields > Import / Export and import this file (mirror in case the link goes down).
After importing, the 'Flexible Content' field group should like this screenshot (1MB file).
Step 3
Create a file named page.php in the child theme directory having the following:
