Layouts Overview
Site layout, including the Header, Content Area & Footer, are controlled by the Toolset Layouts plugin. Layouts allows you to defined common Header/Footer Layouts, then define Child Layouts for specific Content Types & Scenarios. Layouts are comprised of Rows, Columns & Cells. To modify Layouts, visit Toolset > Layouts in the side admin menu.
For full documentation on Toolset Layouts, visit the Layouts Guide.
Header
Much of the Style & Behavior is controlled using the WordPress Customizer. It is best to set up as much of the Header as possible using the Customizer, then add additional styles to style.css if needed. This allows Divi Theme to behave the way it was intended, and results in a more “Accessible” site out of the gate.
Divi’s Header components are inserted into the Layouts via Divi-specific Cells and can be moved around if need be. You can also place custom Layouts Rows/Columns/Cells above and below those containing Divi elements.
Content Area
The Content Area refers to everything below the Header and above the Footer. The Layouts for the Content Area are controlled by Toolset Layouts as well, and can be applied to specific Post Types, Pages, Archives, etc. The Content Area is typically configured as a Child Layout that will get automatically insterted into your Header/Footer parent layout depending on the content that’s being requested on that page. An example might be creating a custom Child Layout for your E-Commerce shop with 2 sidebars and a custom upsell section above the products.
While Divi allows you to create Sidebars, the recommended approach for creating sidebars that are part of the site’s layout is to configure them inside of your Toolset Layouts. There are rare occasions when you have a one-off piece of content inside your content area that resembles a sidebar where using Divi may be appropriate.
The Content Template itself is considered the area specific to that type of content (ie. Single Product). In the case of a Single Product, this area would include the Product Image, Price, Add-to-Cart button, etc, but not the sidebars and other Layout-specific elements around it. These are managed under Toolset > Content Templates. While you can technically create an entire page (Header, Content Area, Content Template, Footer) inside of a Layout, it’s best to keep them separated for reusability. For more information on Best Practices, visit the When to use Content Templates instead of Layouts guide.
For construction of arbitrary pages (ie. Home, About, etc), we’ve chosen to use the Divi Builder (built into the Divi Theme), as it allows for easier building of page content, more front-end editing tools, etc. It is possible to construct page content using Toolset’s Front-end Layouts Editor, but it is advised to stick with one option for consistency, in this case, Divi Builder. For more specific information on Page Building, visit the Page Building documentation.
Footer
Generally, you can create the footer area using Toolset Layouts just as you would the Header and Content Area, but optionally, since the footer area of our websites often contains fancier calls-to-action and visuals, we prefer to use Divi Builder to build the footer content itself as a Global Layout, then insert that into one of Toolset’s Layouts Visual Builder cells. For more information on creating Global Modules and using them inside of Toolset Layouts Cells, visit the Advanced Techniques documentation.
weCreate Footer Branding
weCreate places our company branding and backlink in the footer of all of our websites. Currently, this is done using a Divi Global Layout, then inserted into a Toolset Layouts Visual Editor Cell, as per the Advanced Techniques mentioned above.
In the near future, we will have a custom Toolset Layouts Cell to allow quick insertion & customization of this branding.
