How to Set Up Your First Site with LightCMS

Choosing the right content management system for a particular project can be a critical decision that has long-lasting impact on the client and the success of their website. Unfortunately, with so many options out there it is difficult to get to know more than just those that you use on a regular basis.

In this post I’d like to present some basic information about LightCMS and provide a tutorial for getting a simple website working with the basic features of LightCMS. This is a very simple tutorial that only covers the basics of the system, but hopefully it will be helpful to learn a little bit more about LightCMS in case it can be of use to you and your clients.

LightCMS

Intro to LightCMS:

LightCMS is a content management system created by Element Fusion. Since there are a ton of CMS options out there it’s important to know what LightCMS is and what it is not before getting into the tutorial.

LightCMS is intended to be an excellent solution for both designers and clients. In order to use LightCMS on a website, the site will have to be hosted on their servers. As a designer you can sign up to be a reseller and use the system on your clients’ websites.

Everything is fully brandable, so it will appear to be your own CMS rather than your clients knowing that it is going through LightCMS/Element Fusion. As a reseller you will be able to offer your clients a powerful and user-friendly content management system and hosting package, and you’ll receive a commission on those monthly payments. The rates can be adjusted by the designer, but the suggested retail prices start at $29 per month and go up from there. The package needed will be determined by factors like the number of pages on the site, the amount of disk space, and the number of users.

LightCMS includes a lot of useful features, such as blogs, photo galleries, a form builder, event calendars, RSS feeds, sitewide search, online donations and more. Once the site is created, users can login and easily and quickly make changes to their pages, add new elements and add new pages.

Of course, like any other CMS, it is great for some clients but not the perfect fit for all situations. Hopefully this article will help you to get more familiar with LightCMS in order to determine if it could be of use to you and your clients.

Benefits to Designers:

Because the emphasis from LightCMS is signing up designers as resellers in order to ultimately get more business, you can expect that there will be some significant benefits for designers who use LightCMS.

1 – Residual Income

As a reseller you’ll have the opportunity to make some recurring income on the monthly fees that clients are paying to use the system. The suggested retail rates include a 35% markup, so if your client is paying $29 you will make $10, if your client is paying $49 you will make $20, and so on. If you’re adding new clients regularly you can see that this would add up over time.

2 – Support

One of the major headaches that discourages many designers from being hosting resellers is that there is often added responsibility in terms of customer service. With LightCMS you can provide customers with their support email address if it is something that you can’t take care of or don’t have time to deal with.

3 – No Design Restrictions

LightCMS works by using editable regions in specific places on the page where you want them to appear. As a result, you can create any type of design you like and simply insert a small piece of code to allow clients the ability to edit the page. You won’t be held back in terms of design because of the system.

4- Free to Become a Reseller

There are no sign up fees or other costs involved with becoming a reseller. You can sign up for free and see how you like the system. Maybe you’ll like it enough to use with all of your clients, or maybe you’ll only want to use it every now and then in the right situation. Either way, it won’t cost you anything to become a reseller.

5 – Private-Labeled

You can replace the LightCMS branding with your own to give clients a consistent experience with you and your company.

6 – Free Websites

Since LightCMS needs to be hosted on their servers, you won’t be able to set up a test site on another server while you learn the system or while you’re developing a site for a client. However, they offer an unlimited number of free websites with certain limitations. Free sites can have up to 3 pages, which is enough to use for testing the system out and start working on a client site. If/when you want to upgrade it’s an easy process.

7 – Marketing Materials

As a reseller of LightCMS you will have access and approval to use their marketing materials on your own website, including a feature list, a pricing grid, and videos.

Benefits to Clients:

1 – A Feature-Rich CMS

While there are other CMS options out there to chose from, including a number of free choices, LightCMS gives users easy access to a lot of features. In some cases, the features that are standard with LightCMS could be built on another CMS, but they may take more customization or development work, and ultimately more money.

2 – Easy to Use

With LightCMS, clients will login to their site and edit right from the page. They can easily change existing content, and they can also add new elements, such as text areas, blogs, photo galleries, event calendars and forms.

3 – Support

One of the down sides to using a free CMS for clients is a lack of support. In many cases there will be forums or documentation, but since LightCMS is both a hosting account and a CMS, clients can get support from Element Fusion.

4 – Includes Hosting

Although free content management systems are available, clients will be paying for hosting in one way or another. Of course, prices will vary greatly according to the needs of the client, but in some cases the cost of using LightCMS for clients will be comparable to what they would be paying just for hosting.

How to Set Up Your First Site with LightCMS:

As I mentioned earlier, you can set up an unlimited number of free websites, which is a great way to get familiar with LightCMS before using it on a client website. The basics of the system are very simple and easy to grasp, but you’ll also want to get familiar with the code output so you know how to style it appropriately, and so you know what is possible with the system.

In this tutorial we’re going to walk through the process of signing up for a free 3-page website and setting it up with LightCMS. First, go to the Reseller page and you’ll see a button at the top that says “sign up now.”

Clicking on that button will lead you to a simple form where you can create your first site. Your free site will be at publishpath.com (although you can change that later), so you’ll enter the name for your site, such as http://tutorialsite.publishpath.com.

You’ll then be asked for your name, email address and phone number (email address is all that is required). After that you’ll set a password, check the box to agree to the terms, and you should see this confirmation message.

You can then click the login link, enter your email address and your password and you will see the dashboard of your website.

Unlike most other content management systems, when you are logged in you are actually seeing your website, plus some additional options. For example, here is what the default design will look like to anyone who is not logged in.

When you’re logged in, you’ll see all the necessary admin navigation at the top of the page, and also in relevant sections that have been defined as editable. For example, at the top of the page you will see links such as “page settings” and “add new page.”

In the body of the page you’ll see links like “text” and “add element.”

These links will show up wherever the page has an editable region in the code. There are a few different types of “tokens” that are key to sites using LightCMS, editable regions being the one that is used the most commonly.

By placing the code for an editable region in a specific location of a page, the user will be able to add a number of different elements in that location, including a text box, a blog, an event calendar, a form, and more. Where you are seeing the link “text”, a text box has already been set up in that editable region. To change the text in that box you’ll simply click on the word “text” and it will open the WYSIWYG editor.

To demonstrate how the system works, we will take a basic template, make some changes so it is usable with LightCMS, upload it, and start adding some content. I will be working with the CleanBiz Template from ThemeForest for this tutorial. This process will show you what is involved with taking an existing design and putting on LightCMS. Of course, the core concepts can also be used to create a site from scratch specifically for LightCMS.

Before getting started with LightCMS, I recommend that you check out some of their documentation about uploading your own designs. This gives some important details about what will need to be included with a template in order for it to work.

Your designs can have an unlimited number of templates for use with LightCMS. This is great for customizing a particular page or for building a larger site where you don’t want every page to look the same. There are three templates that we will be using for this basic site that we are creating:

1 – Admin Template - Controls the admin dashboard.

2 – Homepage Template

3 – Inside Template – Controls the secondary pages.

The design must have an admin template and a homepage template for it to work, others can be used as needed. We’ll start with the homepage. The homepage template must be named “home.html” and it must have at least one editable region, named “MainContent.” Other editable regions can be named however you choose.

To start with, we’ll open up the index.html file in the CleanBiz template and rename it home.html so it is compatible with LightCMS.

The main content section on the homepage of this template starts with the H2 “Sample Article 1.”

The token for an editable region named MainContent is:

<$region name="MainContent"$><$/region$>

We want the whole area in the main content area to be editable. For now we will delete the content in the template and leave only the editable region in it’s place. The H2 tags and paragraphs were contained in a div with an id of “content” so we will leave the div and the code will now be as follows:

<div id="content" title="home content">
<$region name="MainContent"$><$/region$>
</div>

In the right sidebar of the template there is also a section “Something About Me.” We’re also going to get rid of this content and make that region editable by entering the following code:

<$region name="AboutMe"$><$/region$>

Now our homepage is titled home.html, and it has editable regions, including MainContent, so it is ready to go.

Next, we need to create an admin template, so we’ll create a new file called admin.html. The only requirement of an admin template is that it must have an editable region, MainContent, and the editable region must be more than 600 pixels wide. Of course, you can get more creative if you want to, but to meet the basic needs we will use the following code in our admin.html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
</head>
<body>
<div id="adminarea">
<$region name="MainContent"$></region>
</div>
</body>
</html>

In the CSS file for the template we’ll need to style this div so that it is at least 600 pixels wide, so we’ll add the following code to the CSS file:

#adminarea { width: 960px; }

That takes care of the needs for both our homepage and our admin template, so now we’ll create a template for the secondary pages. We’ll create a file called inside.html. The CleanBiz template comes with a few secondary pages, including an about page.

About Page

We’ll use this about page as the basis for our template for secondary pages. So we’ll copy all of the code from about.html and paste it into inside.html which we just created.

Like the homepage, this about page also contains the main content in a div with an id of “content,” so we will leave the div there but delete all of the content. In it’s place we’ll enter the code for an editable region called MainContent:

<$region name="MainContent"$><$/region$>

Next, we’ll do the same thing that we did for the homepage by deleting out the content in the “Something About Me” section, and add an editable region called AboutMe:

<$region name="AboutMe"$><$/region$>

Now, we’re ready to upload our design and move forward. In order to upload the design we will need to zip the files. After you have zipped the folder containing all of your files, go back to your webiste’s dashboard, hover over the “My Website” link at the top of the page, and click on “Designs.” This will bring you to the design manager where you can make changes to an existing design or upload a new one.

Click on “Upload a new design” and browse to find you zip file. Then click on upload. You should then get a message that your upload is complete, and it will include a link to the “My Designs” page. Click on “My Designs”. Here you will see the options that are available to you, which includes the one that was just uploaded and the default design that is active.

If you click on CleanBiz (or whatever your other design is named) it will open a few options. Click on “apply” to use this design on your site. You’ll then be directed to the dashboard where you will see the homepage with all of the admin options.

If you click on the “preview page” link it will remove the dashboard links and you’ll see it as a visitor would, except it has a small bar at the top that includes a link to go back to the admin view.

You’ll notice that the main content area of the page still includes the filler content that was on the default design when the free site was created. Since that design also used the editable region named MainContent, the contents of that editable region will show up wherever we use an editable region with the same name. For example, if you switched the names of the two editable regions that we set up and put the MainContent region in the sidebar, this content would show up at that spot in the sidebar. Since the original design had no editable region named AboutMe, that region is blank for now.

Now let’s get the site back to what it looked like in the original Clean Biz template. To start with, from the dashboard, click on the link “text” above the main content area.

When you click on that link you will be led to a WYSIWYG editor where you can change the content of that region.

We want to highlight all of this welcome text and delete it. If you remember from earlier in the tutorial, the homepage of the CleanBiz template included a blog-like area with two headlines and article excerpts. So to get the same end result, I’ll click on the HTML tab at the bottom of the WYSIWYG editor and paste the original code from the homepage of the CleanBiz template:

Once the code is pasted in, click “update” and the page will be saved. Now we have the “Sample Article” section that comes with the CleanBiz template, but it’s now editable through LightCMS.

Now let’s move on to the sidebar. In the area where we designated the editable region AboutMe, you’ll see a link with a green icon to add an element.

Click on that link and you’ll be able to choose what type of element you want to add. We’re going to select “text”. Then click “add.”

You’ll see the following message that the text element is blank.

Click on the word “text” and the WYSIYG editor will open. Now we’ll be pasting the code from the CleanBiz sidebar (minus the code for the photo) into the text area.

Next, we’ll upload the photo. Place your cursor before the first paragraph.

Click on the Image Manager icon.

Click on “upload.”

Find the picture you want to upload on your computer.

Click “Insert.” The original CleanBiz template uses align=”right” on the image, so we can click on the HTML tab of the WYSIWYG editor and add that code to the image. Then click update. Now if you click on “preview page” you’ll see this.

The site now looks like the original CleanBiz template, but it has two editable regions.

Now we’ll create an About page, so click on “add a new page.”

Now we’ll enter the page title and the filler text for the about page.

Click “update” and the page now looks like this.

It still needs the sidebar content to be complete, so click on “add element” in the sidebar.

Click on “copy an element from another part of your site.”

Open the drop down menu and select the AboutMe section from the homepage.

The sidebar on the about page now shows the same content as the sidebar from the homepage. When you edit the content in this section of the homepage it will also change on the about page.

So we now have a homepage and an about page with editable content. This is just a very basic tutorial, there is a lot more that we could do in terms of working with the editable regions, but this post is already getting pretty long. If there is sufficient interest, I could do a second tutorial that covers the process of setting up some other features, like a blog and an event calendar. If you’d like to see that, please leave a comment.

Do You Have Any Experience with LightCMS?

If you have ever worked with LightCMS please share your thoughts of the CMS in the comments. While my experience with LightCMS is very limited, I do think it could be a great option for some projects. It’s pretty easy to work with from a design perspective, and I think the features will justify the cost for many clients.

Published May 6th, 2009 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

40 Responses

Comments are now closed on this post.

  • Eric Granata, May 7, 2009

    Great post! I love LightCMS like I love Apple. My clients love it too. It’s so easy for them to use. I have a 76 year-old ccomputerphobe client who maintains three websites!

  • Big Buddy, May 7, 2009

    I’ve put 3 clients on that system this week and the first thing they say is how easy it is to update the site. I’ve only had to give them the link for their customized help page, and they haven’t needed my help adding pages or updating information. It is by far the most user (client) friendly CMS I’ve ever come across on the web – given the features it has.

    The best part about it is I can be “pixel-perfect-picky” about my design too. Awesome!

    Although I do LOVE Modx when it comes to free, open-source solutions. It’s very similar, just not as feature rich.

  • Danh ba web 2.0, May 7, 2009

    Good tip. Thanks a lot

  • Vandelay Design, May 7, 2009

    Eric and Big Buddy,
    Thanks for the feedback. It’s good to know that it is working well for your clients.

  • Wow!! Thanks for the information. Can’t wait to try this for one of my new clients. Do you like this better than WordPress?

  • Vandelay Design, May 7, 2009

    Louisville,
    Personally, I would use Light and WordPress for different purposes. WordPress is better for blogging and a better fit for people who want to be able to edit the code of their site, install plugins, etc. Light is better for businesses or organizations that may want a blog as part of the site, but not the whole thing. The event calendar is great for churches and non-profits, and it seems like non-tech savvy people have an easier time editing than with WordPress.

  • Eric Granata, May 7, 2009

    If you’re asking me, WordPress is a fantastic blogging platform. But I’m not sold on it as a CMS.

    That said, LightCMS could use a bit of development on their blog feature.

    So, if I am building a site that hinges upon a blog, I might consider using WordPress as the blog platform and CMS. However, most of the clients I have are not interested in a blog as much as they are a website that they can easily update. LightCMS does the trick and does it well.

  • Tim Wall, May 7, 2009

    As the Marketing Director for LightCMS, I will refrain from offering my totally biased opinion on the system. But just wanted to say thanks for putting together this overview and tutorial. This is really thorough work! One of the best tutorials we’ve seen, and we write a lot of tutorials on the system :)

    Thanks again.

    If anyone does want to talk to a completely biased person about LightCMS, you can email me anytime: tim@elementfusion.com

  • OI Web Designer, May 7, 2009

    COOL… i love Joomla & WordPress
    i think i must try LightCMS for new taste
    thanks for share

  • Jonathan Hinshaw, May 8, 2009

    We’ve been using Light CMS for about 2 months now and so far put about 10 sites up. My firm specializes in Joomla and WordPress, but our clients find these a little hard to use and we end making custom admin tools and editors so the non-techy’s (our clients) can edit their pages etc. Light CMS has been an easy transition and our clients love it.

    Best of all, teh Light CMS guys have an awesome support team. They even sent us some “Web Designers are Sexy” shirts when we signed up as a reseller. These guys are top notch!

  • Vandelay Design, May 8, 2009

    Thanks for your feedback Jonathan. It’s good to hear.

  • michelle, May 11, 2009

    Previously we are prefer joomla CMS to our clients but when we tested and use lightCMS we feel its very user friendly and its good to suggest clients to use lightCMS for there back end purpose. Thanks Michelle.

  • Ronnie Roper, May 11, 2009

    We have been using LightCMS for about a year and love it. Our clients find the system easy to navigate, change content and pages. If we have to make changes ourselves it saves us time because the system is so easy to work with.

  • d2m.ca, May 12, 2009

    How you compare LightCMS with ExpressionEngine.

    Are they the same as flexible as ExpressionEngine

  • Vandelay Design, May 12, 2009

    d2m.ca,
    My experience with both is pretty limited. I think Expression Engine has more options and flexibility for blogging.

  • d2m.ca, May 12, 2009

    My experience with EE is like a love and hate relationship, because I know its limitation sometime something you want to accomplish its just like mission impossible

  • irzhik, May 27, 2009

    A friend of mine will be interested in this article. Becouse he is a site creator. But as for me..i hear about joomla and wordpress.

  • adam16ster, June 1, 2009

    whats the difference between lightcms and watercms? looking over the features they seem to be the same to me.

    any thoughts on frogcms? where would you put frogcms compared to lightcms?

  • Vandelay Design, June 1, 2009

    Adam16ster,
    WaterCMS and LightCMS are the same thing. LightCMS is branded towards designer and those designers sign up to become resellers. WatrerCMS targets the potential clients directly.

  • Tim Wall, June 1, 2009

    @adam16ster, WaterCMS and LightCMS are both produced by our company, Element Fusion. They are essentially the same product, but WaterCMS is our retail product which we sell to our own end user clients. LightCMS is our reseller or wholesale product that other designers can use for their own clients. The primary difference is that the pricing on LightCMS is discounted for the resellers.

  • julien, June 3, 2009

    Thanks for this great article. I’ve always wanted to try LightCMS. Just wondering if it can compete with WordPress.

  • Zafi, June 5, 2009

    I seen lightCMS Before, absolutely great article.

  • ksolo, June 15, 2009

    great overview tutorial! would definitely be interested in seeing you write more on this topic.

  • Sean, August 27, 2009

    Hosted CMS is def the way to go for basic client sites. LightCMS is a good product. I’ve also had solid luck with (My Managed CMS). They have a dead simple page editor. Not quite as many features as Light, but they’re growing.

  • doctor games, September 2, 2009

    Previously we are prefer joomla CMS to our clients but when we tested and use lightCMS we feel its very user friendly and its good to suggest clients to use lightCMS for there back end purpose. Thanks Michelle.

  • belal, October 28, 2009

    Such an article is nice and useful for any newbie for learning a new technology or in your language to give first step to a technology. I would like to get more advanced option learn about creating a client side with custom template. If you could provide more articles or provide links, that would be great. Thanks.

  • Software developer, November 10, 2009

    Content Management System is a flexible way to update content at the web site, enterprise informational portal or even intranet portal. But the thing to be noted that only custom-oriented approach in the design of informational system can help to reach the goals of the business. In case of Joomla, this CMS appears to be too common for the specified tasks of small business companies.

  • IT services India, December 28, 2009

    Great article very clear explanation it will be very useful for newbies. By the article i came to know how to get light CMS

  • BLBD, June 11, 2010

    I have a client that wants to use LightCMS’s platform but wants a WordPress Blog. Any suggestions?

    • Vandelay Website Design, June 11, 2010

      BLBD,
      All LightCMS-powered websites have to be hosted on Element Fusion’s servers so I don’t think there is any way to install WordPress on the same domain. You could contact Element Fusion and ask though.

  • Eric granata, June 11, 2010

    BLBD, point the primary domain to LightCMS and use a sub domain for the blog.

  • Miriam, January 25, 2011

    Hi
    really awesome post i just created a simple theme and uploaded it
    however my menu bar does not work
    do I need to assign any tokens to the menu bar or anything for this to work?
    thanks

  • Freaky1, February 17, 2012

    @Miriam January 25th, 2011

    If you made theme and the you uploaded it you make that only with “photos” bar needs to be code let’s say when you click on it it will pop up and so on.

    For that you need some coding and it needs to be separated like one picture + others (header and so on) .

    I think you are beginner so for first try to go to youtube and whatch some tutorials how to make Navigation bar for website and so on you have tons of tutorials on that ;).

    First you’ll need to learn little bit HTML and then CSS it’s not that easy to start but when you’ll get what’s the point you’ll know on fast what it’s going on and so on. Videos can definitely help you to get better.

    Good bye;)

  • Blair Rorani, May 27, 2012

    @miriam the best way to add a menu is to use the global menu token. This will automatically generate a menu for your site based on the pages you’ve added. You can still control the style of menu using CSS.

    See http://help.lightcms.com/global-menu.

    If you’re still after help email blair [at[ rorani [dot] com or DM @blairrorani.

  • Services, June 13, 2013

    It’s a shame you don’t have a donate button! I’d certainly donate to this fantastic blog! I suppose for now i’ll settle for book-marking and adding your RSS
    feed to my Google account. I look forward to new updates and will talk about this
    website with my Facebook group. Chat soon!

    http://wallinside.com/post.php?id=4019742