Sridhar Katakam

Genesis and WordPress Tutorials

Using ACF Pro for multiple drag-n-drop Hero, Text-Image and Image-Text sections in Genesis

by 53 Comments

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.

Live Demo

Screenshot:

acf-pro-genesis-page-template

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:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Great tutorial! I would love to know how to achieve this same look on the front page without using a plugin. Thanks Sridhar, your work is a lifesaver!!!

    Reply

  • Hi Sridhar,
    I have never used ACF Pro, but it seems easy to use.
    Can I use ACF Pro together with Genesis Extender Plugin ?

    I would love to make this Layout on a site of mine where I use the Genesis Extender Plugin too. Then I can make this tutorial as my first project with ACF Pro.
    ACF Pro would be a good buy anyway, for sure 🙂

    thank you

    Reply

  • Hi Sridhar, excellent tutorial as always.

    Would it be possible to use the template code provided to add content to a page rather then replacing it.
    i.e append the flexible content area to a post or product after the default content area.

    I’m currently using the function below to add a single advanced custom field below the main content on product pages, but it would be much better if that content area could be made flexible using the code you’re provided.

    add_action( 'woocommerce_after_single_product_summary', 'add_custom_field', 10 );

    function add_custom_field() {
    global $post;

    echo get_post_meta( get_the_ID(), 'overview_acf', true );

    return true;
    }

    Which elements of your tutorial would need to be removed in order for the flexible content to fit within the current page structure.

    Many thanks
    Darrell

    Reply

  • I spent most of today trying to figure out how to do this exact layout on my own today (with ACF Pro), then I came over to your site and I couldn’t believe it! If I wanted to use this for a CPT (portfolio item) rather than a Page, can you tell me what I would need to change? Or would you not advise that?

    Reply

  • Hi

    Great tutorial – spent all day trying to get ACF to work!! I have dropped this into altitude pro but its not full width (full view width)

    Please can you let me know what changes to make to get full width inner pages on altitude pro ..I cant see page.php in my choice of page templates – should the new page.php be visible or does page.php in Genesis=the default template..

    Thanks in advance

    Reply

      • Hi

        Thanks for taking the time to reply. Its a local dev site built on a laptop so no URL. It is a default install of altitude pro with no changes – I followed this tutorial exactly.

        Its using the Altitude Pro as provided by Studiopress no changes – so I guess any install of Altitude Pro can be used as a reference for the CSS?? I can send you a copy if you need one.

        It would be great to get this working to not have to buy another theme.

        Thanks a lot

        Reply

  • Hi

    I seem to have found the CSS rule for the content
    /* Content
    ——————————————— */

    .content {
    float: left;
    width: 700px;
    }

    .page .content {
    padding-bottom: 50px;
    }

    .sidebar-content .content {
    float: right;
    }

    .full-width-content .content {
    padding: 0 200px 50px;
    width: 100%;
    }

    .full-width-content.front-page .content {
    padding: 0;
    }

    If this is changed to remove the padding it seems ok

    .full-width-content .content {
    padding: 0 200px 50px;
    width: 100%;

    Any chance you could share how to only apply this CSS rule to the page.php for this tutorial and what changes need to made to the media queries

    Thanks

    Reply

  • Hi

    This works perfectly apart from one small thing – there is a thin white line between the top menu and the hero image – any ideas on how to get rid of this – looks like the site inner?? or background is showing

    Thanks

    Reply

  • Fantastic. If I wanted to add an alternate full-width section with a custom bg color. Would I just add another layout and another elseif? Or can I add a true/false option for ‘custom color’ on the hero row and somehow select a custom bg color? What would be the easiest hack?

    Reply

  • How would you go about adding three 1/3 blocks (1/3, 2/3, 3/3) in a row in addition to the full width and image-text/text-image section on genesis sample theme?

    Reply

  • Is it possible to have the columns stacking in an alternating order depending on what side the picture is on?

    Currently when the pictures and text blocks stack like this:

    picture
    picture
    text
    text…..and so on.

    I would like them to stack like this:

    picture
    text
    picture
    text….and so on.

    Thank-you!!

    Reply

  • Your tutorial works great with Altitude pro but I am getting vertical padding under the image/text blocks . This is causing the corners of the images to not touch and ruins the effect. Is this fixable in the CSS?

    Reply

  • Great tutorial thanks.

    Ive got this working perfectly on the “Home Page” ive created, but what i want to do is to put it into a widget area in the Centric child theme. The title “Home page” appears but nothing else, am i missing something, or should i be approaching this differently ?

    Reply
    • >