|
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.
Intro to LightCMS:
LightCMS is a content management system created by Element Fusion. Since there are a ton of CMS options out there (see CMS Toolbox) 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.
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.
Looking to Hire a Designer or Developer?
Post a free job listing to the DesignM.ag job board for freelance, part-time or full-time positions. Your listing will be seen by thousands of talented designers and developers. - Post a job for free. 
|
Using VoIP technology (this means any mobile device, even your iPod), users will be able to route all their phone calls from any mobile device as well as send and manage SMS text and voice mail through one central web based location.
