Layouts 1.9 Beta1 Available for Download
Toolset team is excited to reveal a first beta for Layouts 1.9. This is the biggest step in Layouts project (so far) including “page builder” mode and front-end editing.
Let’s start with Dario’s presentation. Then, we’ll go over the details.
Layouts 1.9 allows you to separate between designing templates and individual pages. The layouts that you’ve known so far are now called “Template Layouts”. When you need to design a page, you will not create a new layout for it. Instead, you will use the Layouts editor from inside the page.
|Before Layouts 1.9||From Layouts 1.9 and on|
|The structure of layouts in the site||
Parent layout and a layout for each page
Parent layout, Template Layout per post-type, Content Layout per page
|The listing page for layouts||
All layouts show in one huge (and slow) list
Only Template Layouts are shown. All “per page” layouts are gone from this list.
|Designing a page with Layouts||
Create an entire layout, connect it to the right parent and assign to the page
Click to “Content Layout Editor” and design only “the content” of this page
The idea here is to make it easier to design pages with layouts. Now, you can use one template for all pages (or posts, or cars or whatever you like) and design “the content” of each item separately. Some post types only need a template and there’s no sense in designing each item with a layout. Other types (like pages) can have a default template and specific “the content” design for specific pages.
Use Layouts plugin on any theme without PHP integration
The new page-builder mode in Layouts lets you use it on any theme without editing a single line of PHP in the theme. You will be able to design “the content” of pages, posts and custom types. Layouts plugin needs the Bootstrap CSS to load. You choose if Layouts will load it or you let the theme load it (some themes come with Bootstrap, so we don’t want it to load twice).
You will need to integrate Layouts with the theme (the Layouts PHP integration), only in order to design Template Layouts.
We’re using Layouts extensively for our own sites and there are a few issues that kept nagging us:
- It’s not easy to know which layout to edit when we want to change something
- It’s not easy to understand what to edit to accomplish the changes that we need
- It’s not easy to understand where to add styling (cell, row, grid)
The front-end editing in Layouts 1.9 resolves these, and more.
Now, you will see a button to edit the layout on the front-end. So, the first problem is resolved. You don’t need to look for the layout that’s responsible for a page. Just click and edit it.
But, that’s not all. A page is typically made of several layouts:
- Parent layout – responsible for the site’s header, menu and footer (and other elements that appear on every page)
- Template layout – the elements that appear on all items that belong to a certain type (like a ‘sidebar’ for pages)
- Content layout – the specific design of “the content” of the page you’re looking at (not all pages will have a Content Layout)
So, which one of these are you editing?
The simple answer is – “All of them, together!”
When you’re in front-end editing mode, you can hover over any element in the page. You’ll see two editing tools – an “edit” pencil and a “wrench”.
The “edit” pencil opens the cell that you’re hovering over. That cell can belong to any of the layouts making up the page. So, if you want to change the way the menu looks, click on it. You’ll be editing the parent layout. If you want to change something that is part of the page’s content, click on it. Now, you’ll be editing that page’s content.
The hierarchy tool lets you see what every element belongs to.
Besides identifying the different layouts, it also gives you access to all the containers that wrap the cell. You know that to achieve good design, you often use containers and apply styling to them. The hierarchy tool shows you all the containers of a cell. This way, you can add CSS classes and IDs to the right elements. Click on any element in the hierarchy to edit its settings and apply the styling that you need for it.
Migrating your content from Layouts 1.8 to Layouts 1.9
First, you don’t need to change ANYTHING in existing sites when updating Layouts to version 1.9. Everything will keep working as before. If you don’t make changes to the site’s layouts, nothing will change on the back-end or front-end.
Layouts 1.9 gives you the possibility to design pages a lot more conveniently. This means changing a little your workflow and updating existing sites. We recommend that you stop using a layout “for a single page” and start using the new arrangement of Template Layouts and Content Layouts. To make it easier, we’ll include a content migration plugin which will help you convert existing layouts into templates and to design Content Layouts for pages.
Known issues and incomplete features in this beta
We wanted to deliver this beta as soon as possible, so you can play with it and give us your feedback. This beta is definitely not ready for production sites yet, but it will be right after the holidays.
Here is what’s still missing or known to not work fully:
- Integration with WPML – you cannot translate anything yet with Layouts 1.9. When we’re done (in the production release), you will be able to very conveniently translate both the template and content layouts.
- Styling glitches – there are styling quirks all over the place. We’re handling, but if you notice something, feel free to leave a comment so we’re sure we noticed it too.
- Theme integrations – we’re updating all theme integration plugins for Layouts 1.9 support. This will include new default layouts, as well as support for the new features in Layouts 1.9.
- Smart defaults for row modes – “Full width” rows take a different meaning when rows are inside containers. We’re going to set sensible defaults and descriptive names and icons to help you choose the right row mode in different cases. Now, if you see a row overflowing, try a different mode. In the production version, you shouldn’t have to do this, because rows will have more sensible defaults, depending on where they’re inserted.
- Inconsistent “preview” functionality – the entire “preview” functionality in Layouts is a little weird now and it’s even more inconsistent in this beta. In the production Layouts 1.9, it’s all going to be sorted out. You will be able to edit safely and preview all changes. Nothing will update in the database or on public pages. Only when you “save”, your changes will go live. You will also have the option to cancel the edits.
Download and try
So, it’s a beta, right? The best way to test Layouts 1.9 is to create a new development site. Use this beta together with View beta. Log in to your Toolset account, click on Downloads and then switch “Select plugins” (on the top-left of the Downloads page) to “Beta”.
You need to test Layouts 1.9 with a theme. We recommend trying it with two themes:
- The default WordPress theme, without the integration plugin
- Our own Toolset starter theme
This way, you’ll see how Layouts works as a “page builder”, without any theme integration and also how it works with a fully integrated theme.
Layouts team is on its toes now, eager to get your feedback. If you see issues, let us know and we’ll handle them. If you like something or don’t like something, tell us. We’ve released this beta early, so that we can get your feedback and still make changes according to it.