When you’re done reading this, take a moment to fill out the Samurai WordPress Survey! Go!
The release of PageLines DMS is very close now, and those of us who have been working with the beta have a chance now to show you a little bit of what is under the hood. As you are aware, I think DMS is a important event in the WordPress community and you can read why in my other post casually named “Can PageLines DMS Save WordPress?“.
So you know, no pressure on those guys.
I am working on a video course that will take folks through building PageLines sites from raw install to delivery, but doing that correctly takes time so stay tuned if you want to know when I have it ready. At the moment, what I can do is tease you a little bit with what you will have to work with when you get your hands on the DMS bits.
Let us consider the front page of this very website. Go ahead, take a look, I’ll wait.
When I am logged into a WordPress administrator account, that same page looks very different for me. It looks like the screenshot you see here. Let’s talk about some primary bits of the experience for site creators.
1 and 2 – Section Toolbar
You will hear a lot about this, but DMS is based on the concept of a section. These sections are modules of self contained design and functionality that know how to play well with other sections. When you hover over a section as I am doing in the screenshot, you get a toolbar.
Marker 1: The section grid controls. The “12/12 ” means this section is currently full width in its container. You could adjust that all the way down to 1/12. If any section after it is small enough to fit into the gap after you adjust, they will go side by side. The “0″ next to that is the place you can adjust pushing sections around without needing to add spacer sections. Again, think Bootstrap.
Marker 2: The section management controls. These let you edit, duplicate and remove a section respectively. In particular, the ability to quickly duplicate a section is awesome.
3, 4, 5 and 6 – DMS Controls
There is a lot happening in this bar. It marks the primary division between your view of your site, and the UI of DMS. You can obviously drag it up and down to cover more or less of your page, but there is much more control to be had.
Marker 3: The “close” or “power” button for DMS. When you toggle this, it will get the DMS UI as out of the way as possible.
Marker 4: The “preview” toggle. This allows you to tell DMS toremove all of its hinting from the view of your site, but does not close down the DMS editing UI below.
Marker 5: The refresh trigger. While much of what happens in DMS is live, some things have to happen within the context of a page render, so there is a refresh cycle. When you are making changes you are ONLY affecting how you see the site. Until published, these changes are not permanent. Think of it as a draft mode.
It is worth noting that when a refresh happens, the entire WordPress cycle is invoked, so short-codes are rendered and the loop runs. I have found this to be very nice when developing a plug-in that renders out to short-codes as I can re-render those changes and see instantly how it will interact with DMS.
Marker 6: The “publish” button. This makes the changes you have been working with instantly live to your site.
7 – Section locality indicator
In the future, we will have a lot to say about the DMS concepts of templates options and local over-rides.
Marker 7: The settings hierarchy list. What you see here indicates that these section settings are local, only for this page and that there are no default settings available from the template in use on this page.
8, 9 and 10 – Section Options
Every section can define its own UI to allow for management of that section. This gives section developers great freedom, while the DMS API allows the general look and feel to remain consistent. There are a number of controls here you will see often.
Marker 8: The section type. We are looking at a “Hero” section in this example. As you can see, this section type generally means a title, text, image and a call-to-action button.
Marker 9: The refresh icon. This is the same refresh from Marker 5, however it is often convenient to have it close to the setting itself. Also, this icon serves as a string reminder that to see these changes you need to refresh.
Marker 10: The “live” refresh icon. This icon is present next to settings that are rendered live, usually text / content options that do not rely on a full cycle WordPress rebuild. In theory then, you will never have to hit it (and I have not needed to) but it is also a welcome visual indicator of which options are “live”.
There you have it – the first look I can give you under the hood of a DMS powered site. There is much more to come!
All done? Take a moment to fill out the Samurai WordPress Survey! Go!