If you design websites for clients you know that most clients these days want the ability to update the site themselves. Fortunately, content management systems make this possible. It’s easy to set up fully-editable sites using WordPress, but WordPress isn’t always the right solution.
Each client has their own unique needs and there may be times when the client just needs a small website with few pages.
For situations like this Cushy CMS is an excellent option. With Cushy CMS, you can easily give clients the ability to change content on any page without extra complex details.
In this post, I’ll walk you through the process of setting up a website for a client that allows them full editing power. The basic version is of CushyCMS is free so everything we’ll be doing here is using the free version.
How to Set Up a Website on Cushy CMS
Throughout the tutorial, there will be many screenshots. If you want to see the full-size version, click on the screenshot.
Step 1: Create Your Account
If you have never used Cushy CMS before, you’ll need to create an account. With the account, you’ll then be able to set up clients as “editors” and assign them the rights to edit their site. Creating the account is very easy, just go to the signup page and enter your name, email, and password.
Step 2: Add Site
Once you’re logged in, you’ll see the options to add a site or add an editor.
To start with, we’re going to add the site, so click on the “Add Site” button. On the next page, you’ll enter the client’s URL and their FTP data. If you don’t have this information, you’ll need to get it from the client before you can get everything set up. Next to the “Path” field, click “Choose” and find the root folder. When you’re done, click on “Add Site” and it should tell you that it was a success.
Step 3: Assign Some Pages
Now that the site has been successfully added, we’re going to assign 3 pages that the client will be able to edit. Of course, you can do more or less depending on the client’s needs. We’re going to assign the home page, about page, and services page. To do this, click on the link that says “Assign pages to site” (below the domain).
To do this you’ll enter the full URL of the page, give it a name that the client will understand, and select the path to the specific file as it is located on the server.
Now, repeat this step for however many pages you want to assign. In this case, I have done this for the home page, about page, and services page.
Step 4: Assign Editor
Now that we have the site and pages added, we’ll need to give the client access to these pages. As the designer, you’ll have access to everything that you set up, but you’ll be able to assign each client to specific sites. So if you have multiple clients using Cushy CMS, you’ll be able to access all, but they’ll only be able to access their own sites and pages.
After you complete step 3 you’ll be on a page that looks like the screenshot below. Click on the green button for “Add Editor.”
Here you’ll enter the client’s name and email address (they’ll be emailed the login information) and choose which sites and/or pages the editor will have access to. In this case we’re choosing all three of the pages that have been set up. When you’re done, click “Add Editor” at the bottom of the page.
After you’ve added the editor, you will see a message stating that it was a success. Now click on a link to one of the pages below. You’ll get an error message telling you that no editable elements have been defined. Cushy CMS works very simply. If an element, such as a div for example, has a class of “cushycms”, it will be editable. Nothing else will be editable. So, since we’ve uploaded a standard template we need to also add some classes to each of these pages to allow editing.
Step 5: Add cushycms Class
We’ll open up the index.html file and add a class (class=”cushycms”) to the content div that contains all of the content in the main area of the page. You can also add title elements to make it more organized when editing, so we’ll add title=”home content”. Make sure that you add the class to an element that contains everything that needs to be edited. You can add multiple classes per page.
We’ll also do the same thing for the about page and the services page, and we’ll upload all of these pages to the server. I’m also going to add the class=”cushycms” to the sidebar of the services page so that we’ll be able to change the photo. (click on the image below to see a larger version). Now that the class has been entered, we’ll be able to edit anything that is in the content div. Back in Cushy CMS, click the try again button.
Step 6: Edit the Content
Now, we’ll select the services page from the list of pages that have been set up, and you’ll be able to edit.
You’ll notice here that it keeps the h2 tags and paragraph tags in tact. All of this is editable. New headers can be added, bold or italics can be applied to text, links can be added, etc. The basic functions you would expect are all there.
We’ll change the h2 tags to give specific information rather than Service 1, etc. We’ll also apply bold to a few words and insert a link.
When you’re done, click “publish page”.
Here is what the services page looked like before the edit:
Cushy CMS now interacts with the server and the changes will take effect. Below is a screenshot of the page after it has been edited.
Step 7: Change the Photo
It’s also nice for clients to be able to change photos from time-to-time, and since we added the cushycms class to the containing div, we’ll be able to update the photo in the sidebar of the services page.
So, we’ll choose the services page from the dashboard and we’ll see something like the screen shot below.
Now if you click on the image to select it, and click on the button to add or edit an image (it’s a picture of a little tree next to the “insert table” option), you’ll be able to upload a photo to the server and add it to the page. Alternatively, if the image you want is already on the server you won’t have to upload it.
Click on the upload tab and browse to find the image that you want and click “send it to server.” The image is now uploaded and plopped in that spot of the page. Choose a width and enter it, the height will automatically be adjusted (or vice versa). Click “ok” and you’ll see the change.
We’ve now been able to update the text and the photo of the page.
In this case, I have worked through the process while being logged in as the designer, but the client would be able to do the same things after they get their login information by email. So now they have a small website that they can easily maintain on their own without any technical knowledge.
At the Cushy CMS homepage they also have a brief video that walks you through the process, so be sure to check that out if you have any interest in using the CMS.
And for more helpful tutorials check out these posts: