Layouts 1.8 comes with three brand new cells: tabs, accordion and widget area. It also offers an easy way to add Bootstrap elements, a new feature to duplicate rows and a new global Javascript editor.
Tabs Cell
The Tabs Cell allows creating tabs on the front-end. Inside a tab, you can place any type of content, including text, media, and grids of other cells.
Building a tabs cell
It lets you build powerful and complex structures, which are rendered on the front-end using the Bootstrap Tabs component.
Tabs cell on the front-end
For more information, please visit our guide about creating and customizing a Tabs cell.
Accordion Cell
Very much like the Tabs cell, the Accordion cell allows you to create a Bootstrap Accordion structure easily and then add whatever Bootstrap Grid inside of each panel of the created accordion.
The Accordion Cell creates a vertical list of panels, that can include text, media as well as grids of other cells.
Creating an Accordion Cell
When viewing this cell on the front-end, only one panel at a time can be expanded while all others are collapsed. You can expand another panel, by just clicking on its title link.
An Accordion Cell on the frontend
You can find more information in the documentation page for Accordion Cell.
Widget Area Cell
Widget Area Cell lets you extend default widget areas for your theme. You can create new, and manage widget areas right from the Layouts editor page.
Creating a new widget area
The new widget area is also listed on the default WordPress Widgets page. You can use it like any other and add widgets to it.
Widgets page
Read more about this topic on our documentation page for Widget Area Cell.
Bootstrap Components Helper Links
Bootstrap is a great framework and Layouts is heavily based on it. It also includes a list of elements, ready to use. In order to make these elements accessible in Layouts, we added an editor menu. It lets you easily get information on how to add them.
Editor menu with Bootstrap buttons
Clicking on any of these buttons will display a dialog with an explanation of the component and a link to documentation. Instead of wrapping the implementation of this huge list of elements in Layouts, we simply send you to the correct place, to copy the code from there and paste into it the Visual Editor cell.
Dialog to get Bootstrap element
Then, simply copy the HTML that you need, return to Layouts and paste the code into the editor. In our documentation, you can find a guide on how to use Bootstrap elements in your content.
Duplicating Rows
This version of Layouts comes with a new row duplication feature. In case you want to reuse complex rows, there is no need to build them from scratch. You just copy the original row and paste it in the desired position – in the same layout or another one.
Copy row option
Paste row option
For more information, visit our documentation page on how to duplicate rows.
Global Javascript Editor
In Toolset menu, you can now find a new editor, besides the CSS one, where you can add your own JavaScript code. Layouts will take care to include this code globally, to all pages that have layouts assigned.
Layouts JavaScript Editor
More New Features, Improvements and Bug Fixes
Layouts 1.8 brings more new features and improvements, including:
Parent layout is no longer displayed in “Not assigned” section when all children have been assigned.
Added functionality to remove layout assignments when Child Layout cell is created.
Improved compatibility with WordPress 4.6, Bootstrap 4 and CRED.
Ensured compatibility with W3C Html validators.
Added filter to check unobtrusively if Layouts is active.
Ensure protocol is HTTPS in case of dynamic generation of CSS file under SSL.
For the full list, please see the complete changelog.