Element Fusion

Recently, we released "drafts" as a new feature on our Water, Sky and LightCMS content management systems. One advantage of this feature is the ability to make changes to your page and save them, without taking the changes live. In this tutorial, I will show you how this works.

Find the content you want to edit

The first step is to find content on your site that you want to edit. The drafts functionality is available anywhere our text editor is used. This includes text elements, blog posts, and calendar events. So, you can apply this technique to any of these elements. Once you find the element you want to edit, click the edit or settings button to open the editor.

Save drafts

Once you have the editor open, make a few changes to your content. Then, take a look toward the bottom of the editing screen. Here's what you'll see:

The "Save Draft" button will activate any time you have made changes to your content. Click that button to save your current changes as a draft. You can keep working on your content, making changes and saving drafts as often as you would like. Your changes are not going live to the site, but rather being saved as drafts within the editor.

Now, notice the "update" and "cancel" buttons at the very bottom. Clicking "update" is what takes the current changes in the editor live to the site. Clicking "cancel" will let you exit the editor without making changes to the live site (your drafts will still be saved). Go ahead and click "cancel." You'll be taken back to your live page where you will see that nothing has been changed.

Revert and restore

Now, go back into editing your element again. When you load up the editor, it will load the most recent draft you were working on (this will be different than what is on the live site). Notice in the bottom status bar it says, "You are working on a saved draft" with an option to "revert to the live version" (see image below). If you decide you want to scrap your changes, just click to "revert to the live version" and start over. However, if you want to keep working on your changes, you can continue editing and saving drafts as needed.

Load previous versions

You can also use the drop down menu on the bottom status bar (see below) to load any previously saved draft. Remember, nothing you do in the editor will ever affect the live site unless you click the "update" button. So, revert to a previous version, save twenty new drafts, revert to the live version, do whatever you want with the confidence that your changes will not be lost and your live site will not be affected.

Take it live

Once you have the edited version looking just the way you want it, take it live. All you have to do is click the "update" button and whatever is currently displayed in the editor will be taken live to the site. This version now becomes your "live version."

Easily find all previous live versions

One nice little feature is that the editor will save all previous "live" versions and designate them in the drop down list so they are easy to find. All previously live versions are notated as "saved" and highlighted in green (see above image). Other versions (that have never been live) are not highlighted and are notated as "saved draft" or "autosaved draft." So, if you take something live and then realize you made a mistake, just open it up again, restore the previous "saved" version from the drop down, and click update again. Now your previous live version has been restored, and the other live version (the one you replaced) is still available from the drop-down as well.

Have fun

The new drafts functionality not only gives you peace of mind to know that changes are always saved, it also gives you flexibility in working with and restoring previous versions of your content. I hope this tutorial helps you to understand this feature a little better. If you have any questions or thoughts, please leave them in the comments.