Easily Create Website Page Headers with Divi Theme Builder and Advanced Custom Fields Posted on November 11, 2019 A common trend we see in website design is a consistent header template used across multiple pages. We are not referring to the header section that contains your logo and navigation but instead the section immediately below it. On an earlier version of our website, the page header was the green diagonal section, the paragraph, and the dark gray banner. The screenshot below indicates the page header. Although this design trend is popular, it was not always easy to implement with Divi. Our Problem Our top-level website pages (Portfolio, Services, About, Blog, and Contact) all shared the same header design. Before Divi 4.0, that required creating the rows, sections, and modules on each individual page. While this approach works, it is not scalable. When the design changes, it requires updating each individual page with the exact same changes. Talk about time-consuming! On a site where 5 pages share the template, the changes may not take too long but they are prone to human error. In contrast, on large websites with a lot of pages sharing the same template, updates can become extremely expensive and inefficient. Our Solution Using Divi 4.0’s Theme Builder and the Advanced Custom Fields Plugin We were eager to try the Theme Builder released with Divi 4.0. By creating a template for our top-level pages with content populated using Advanced Custom Fields (ACF), we were able to create just one template – one place to make design updates – that appears exactly the same across all of the pages it is applied to. Gone are the days of one-by-one updates! How Did We Do It? Before following the steps below, ensure you have the Divi 4.0 theme installed. Additionally, make sure that the ACF plugin is installed and activated. Identify which content sections will become fields in ACF. Keep in mind that ACF shortcodes only work for simple text fields. The six text fields we need for our design are outlined below. Create a field group for the header section. Once the field group is created, create your fields. Each of our fields is named with a descriptive name indicating which text section the field will populate. All fields should be required. Below is an example of the settings we used for one of our fields. Once all fields are created, determine which pages will use the layout. In the Location section of your ACF Field Group, update your rules to display the fields the appropriate pages. In the Settings section of your ACF Field Group, make the group active and position it high after the title. Save your changes. Now that your field group is created, it’s time for the fun part – creating the template with Divi! In the Divi Theme Builder, add a new template. When the Template Settings popup appears, choose the pages that you want your page header template active on. The pages we chose appear in the screenshot below. Once the pages are selected, click on “Add Custom Body”. If your template has been pre-created and saved to your Divi Library, you can “Add From Library”. Otherwise, select “Build Custom Body”. Build your Divi layout as usual. Use placeholder text in your text fields while designing your layout. In order for your unique page content to appear on the page below the page header, place the “Fullwidth Post Content” module within a full-width section. Below is a screenshot of our template layout to illustrate the concept. Once your design is complete, it’s time to use ACF shortcodes to grab page-specific data and display it in the template. Note that above we had a field called “page_title”. To display the text saved into that field, use the shortcode . The same can be done for all other fields in your group. Please note that the template builder will show Divi’s loading spinner wherever shortcodes are used. This will not occur on pages that use the template. Once your shortcodes are added, your template is complete. Save the template and back on the main template builder page, save all changes. Navigate to one of the pages that will have the template. The page should display your custom fields. Fill them in with your content and save the page. Once the data in your ACF fields has been saved, edit your page with the Divi Builder. You will see that your page header appears at the top of the page with the data saved into the ACF fields. The section will not be editable. Make the changes to the rest of your page below like you normally would with Divi. That’s it! The possibilities are endless using this technique. If you follow along with this tutorial, please feel free to share a link to your website with us on Facebook and contact us with any questions.