Hi Amir,
I tested the new betas and while the implementation is a good solution for many themes, it is, as I have already said in earlier correspondence to you, redundant for me when it comes to DIvi. The main hurdle is introducing fullwidth sections into the layouts. What follows is an overview of some research and feedback that I recently sent to Elegant Themes.
_________
Below are some observations and suggestions how best to implement layout templates in conjunction with custom post types. This is a long post but please do bear with me as I do cover some user experience, as in the experience for me as the developer.
Custom Post Types have been flagged by Nick as part of the roadmap for future development of the Divi theme.
Use the following page for reference ( I will refer to it as print post ):
hidden link
I am using Toolset Types suite of plugins to create a custom post type and custom fields for my prints catalogue.
Instead of using Toolset’s Layout plugin I opted to use the Divi sections, rows and modules directly, for reasons I will explain shortly.
To make Divi builder work on custom post types I used the Divi Booster plugin.
For the most part, the layout that I use is global and applied to all the custom post types for prints in my catalogue. I load it from the Divi Library each time I add a print post to the site and is saved as locked as a reminder not to edit directly what is in the layout. All relevant information relating to the print is entered into custom backend fields in the post editing dashboard. These are located below the divi builder.
The layout is configured as follows.
The top part, showing the image and text to the left (on desktop) I put the shortcode for the featured image in the left text box and the shortcodes for the title, price, edition size and print description in the right text box. These shortcodes represent the custom fields I made with Toolset Types and Views. Note with the View plugin you can now create a template or templates for these field layouts and (new to views) put a shortcode for the whole template into a Divi text module.
The middle section is made up of a filtered archive view of prints for the related year. This is view is generated with Toolset Views and introduced as a shortcode. This part of the layout is not global because for each year grouping I manually change the shortcode for the years relating to the main print in the post. To the right of this I have a sidebar made up of the search module and links to archives based on the categories for landscape, portrait, small, medium and large.
Below this I have an archive of the years in button format.
Finally, the bottom section is made up of a gravity form. Again introduced by shortcode. One form does all print posts and are differentiated by the post title shortcode:
<h3>Enquire About [wpv-post-title]</h3> = Enquire About Surlvol
The email notification generated when a form is sent is formatted with the same shortcode to state that an enquiry has been sent from the specified print post.
NOTE: the Divi contact module cannot do this. It would be good if it could!
I used this approach because building the layout with Divi modules this way is by far the easiest and most rewarding way to do so. There is a bit of work with CSS to prepare the general page container but once this is done things work nicely. I suspect that in the future when custom post types are introduced to the Divi theme, this step will not be required.
Toolset has had several iterations of their Layouts plugin for this purpose but they don’t quite fit into how pages can be structured with Divi. For example, with Layouts it is very difficult to implement the full-width sections like I have done with DIvi, where the sections can be coloured across the full width of the browser. Toolset is about to release a new implementation of the Layouts plugin but I don’t know how well this will compare to what I can do with Divi or how well the integration of Toolset into DIvi will ever be. That all depends on how much collaboration there is between the teams from Elegant Themes and Toolset.
There are other things you can do with the Divi builder. With the Divi, sections, rows and, columns in those rows, you can add flexbox rules to control where items appear responsively across the full range of viewports.
Moving on: how layouts are applied to custom post types. I already mentioned the Divi Booster method I used for custom post types. An alternative approach is to use Sean Barton’s layout injector plugin which configures the option globally for the custom post. This works but I prefer the Divi Booster approach because it opens up the possibility to work with a choice of different layouts. Plus you can unlock and disable global on an ad hoc basis where an alternative layout style or configuration is required. Need to return a post to the global layout? Just clear and reload from the library. There is just so much more flexibility with this approach. From what I remember Sean Barton's solution is designed to work with the Advanced Custom Fields plugin.
There are some drawbacks with my Divi Solution.
A number of months ago Elegant Themes changed how the global feature worked by implementing global sync. All in all this works very well and is quite intuitive. But, the global property is only applied to sections, rows and modules and not a full layout for a page or post. This defeats the concept of global templates. For example taking my print post again:
hidden link
Say in the initial build of this website I only included the sections down to my section for year buttons. Then several months later I decide I want to introduce an enquiry form sitewide for all print posts. I can make the section for this global, perfect. But, when I add it to the layout either on a print post or, to the layout in the Divi Library, it is not added globally to all the print posts. This means I have to add this new section individually to all 199 print posts in my catalogue.
The global option needs to be brought back to Layouts in Divi.
The next suggestion/observation: Defaults.
I mention that when a new custom print post is created I must load the layout I want to use from the Divi Library. This is not so bad. just an extra step or two in my workflow. But if I build a site for a colleague or client, not as adept in the ways of site development, I want to make the experience as pleasant and simple as possible. Sean Barton’s layout injector in a way does this, but I want the flexibility offered by my Divi booster solution.
Lastly. Toolset is quite sophisticated in how it implements custom fields and custom post types and quite frankly indispensable when it comes to serious work developing for custom post types.
Types and Views offer such features as repeating fields whereby users can repeat the the field in the backend and front end to bullet list events in an itinerary which are then consistently styled by the developer in a pre formatted layout template on the front end. Toolset Types allows for parent/child post hierarchies. And Views allows the developer to introduce filtered archives into page layouts with shortcodes. Trying to emulate and match all the hard work achieved by the Toolset Types team would be a big ask so I hope that Elegant themes work to allow Toolset plugins to play well with Divi into the future.
I hope what I have outlined will give insight into how to implement new features concerning custom post types and layouts in the future.
__________
In the last few paragraphs I talk about how powerful the Toolset suite is and implied in this is a hint to Elegant These not to go head to head with Toolset. Preferably I would like to see Elegant Themes set up Divi to integrate with the custom post types created by Types. In this way perhaps Toolset could create Divi modules for templates and viiews that we could add to the layouts with Divi Builder.
I will post a screenshot below of the back end of my print page example.
