Quick and Easy Sites With ThemeForest and PageLime

One of the many awesome aspects of ThemeForest is the affordability of such amazing templates and themes. However, I quickly noticed many of my items’ buyers expected my hourly rates for content customization to be little more than the item price itself—which was just not possible.

Thanks to some really great lightweight CMSes, which we rounded up in our 10 Fantastic Lightweight CMSes You Should Try post, I can easily provide many of my buyers with an easily editable website in very little time and at a very low cost.

In today’s how-to, I’ll walk you through the simple steps of setting up a ThemeForest template with the easy to use CMS PageLime.

ThemeForest.net

If you’re not familiar with ThemeForest, now’s a great time to get acquainted. ThemeForest is a wonderful marketplace for premium quality templates and themes at prices you’ll be hard pressed to beat anywhere on the web.

ThemeForest.net

ThemeForest.net

There’s more than just regular website templates available though. There’s amazing templates for a variety of purposes covering many of today’s online web needs.

Landing Pages

Landing Pages

PageLime CMS

PageLime is a very simple CMS that is implemented using CSS classes and enables you or your clients to easily edit just about anything you choose to be editable. The CMS uses an easy to use “What You See Is What You Get” (WYSIWYG) editor that your clients won’t have a problem using.

PageLime

PageLime

PageLime is a great solution for your clients that need a simple CMS to take the workload of your shoulders but that still might need rely on you from time to time. Pricing is setup well with a Free plan giving you 3 sites to work with and the next step up offering 50 sites. Charge your clients a small monthly fee for this service and you’re in business!

Pricing

Pricing

There’s quite a few additional features that come with paid plans so be sure to check those out at the pricing page.

How It Works

PageLime is a hosted solution that connects to your web server via FTP to access and edit your website files. This way you won’t need to install any additional software on your client’s web server in order to offer them an easy content management solution.

Read on to see how to set this up in a matter of minutes!

Getting Started

First thing’s first; we need to find a template at ThemeForest.net, which might already be selected by your potential client or you could direct your client to choose. I’ve selected the 96 Display template by author Devilcantburn for this tutorial.

96 Display

96 Display

If your client already has a website, you can skip this step or recommend that they select a new template from ThemeForest if what they have is horrid looking (I’ve done this many times). Once you’ve uploaded the template to either yours or your client’s web server, you’re ready to get started with PageLime.

PageLime Setup

Sign up for PageLime, which literally only takes a few seconds, requires no payment information and includes a free 14-day trial of their paid plans. You can even simply sign in with several of today’s popular web services including Google, Open ID, Facebook, Twitter, etc.

PageLime signup

PageLime signup

Once you’ve signed up and logged in you’re ready to add your site and start using PageLime.

Add New Site

Start by adding a new site from your dashboard view (the first page you’ll see after logging in).

Add New Site

Add New Site

Next, enter the URL to your home page. This isn’t the URL to your site but the URL to your specific home page file.

Home page URL

Home page URL

On the following page, enter your site’s settings, including the web server FTP login information.

Website Settings

Website Settings

Before continuing, click the Advanced tab and customize any additional settings you may want. Here I’ve selected to use SFTP and changed the default editable CSS class name to “cms-edit” rather than “cms-editable”.

Advanced Settings

Advanced Settings

Once you’ve saved your site settings, you’re ready to begin editing your site and getting it ready for CMS integration.

Insert CSS Classes For Editable Sections

PageLime needs to know what elements or sections you want to allow editing for, which requires a simple CSS class be applied to that specific element or section. From your Manage Sites page, click the name of the site you’d like to begin editing. This will bring you to the Site Actions page where you can start editing the site.

Site Actions

Site Actions

You may want to open your sitemap and add additional pages first, or manage additional site features to enable image galleries, SEO, content history or other neat features. I’ve gone ahead and added the remaining pages of my template to the sitemap and enabled additional site features I’d like to use.

Additional Site Features

Additional Site Features

Edit Code

Edit Code

From the Site Actions page, click Edit Site to begin integrating the CMS features and enable editing. The website template will load, ready for us to setup our editable sections. Click the Page Tools in the top right navigation and select Edit Code.

A code editor will open, allowing you to easily add the class names to make your sections editable. We want to make the following three sections editable, which are on the home page.

Editable Sections

Editable Sections

I’ve opened the code editor as described above, entered the CSS class “cms-edit” along with unique CSS IDs on the sections I would like to be editable for my client and clicked Upload page. These sections will now be easily editable using the WYSIWYG editor.

Add Classes & IDs

Add Classes & IDs

Edit bubble

Edit bubble

Now when you visit the page in the WYSIWYG editor you’ll see Edit bubbles for each of the editable sections. Click these to open the editor and edit the content in each of the sections.

By default, the WYSIWYG editor’s background is white, but the text in my template is white so I’d like the editor’s background color to be black. I’ve changed this setting in the WYSIWYG settings tab under Site Settings.

WYSIWYG Settings

WYSIWYG Settings

You can also add functions to the WYSIWYG editor by dragging the icons from the right into the simple or advanced editors on the left.

Editing & Publishing

Now you or your client can easily edit the content in these sections!

Editable Sections

Editable Sections

I’ve made a few quick changes and uploaded them to the site by clicking Page Actions in the top left of the navigation, then clicking Publish. If you’re not ready to publish the changes for live viewing, however, you can alternately save them as a draft.

Publish Changes

Publish Changes

Sitemap Sidebar

Sitemap Sidebar

When you’re ready to edit another page, click the gray bar in the left sidebar to open the sitemap.

Sitemap Pages

Sitemap Pages

From here you’ll be able to navigate through your site’s pages, edit their properties, remove them from the sitemap or edit their RSS settings.

Editable Elements & Sections

There’s a lot more you can do with the PageLime CMS that will make it incredibly easy for you to enable your clients to manage their website’s content and all the while at a very affordable price that doesn’t short change you. PageLime is capable of repeating regions, image and document management (including an image optimizer), page templates, navigation management and more. Visit PageLime’s documentation page for more information.

Users & Permissions

Once the site is setup and ready to use with PageLime, you’ll need to give your client access. To accomplish this, visit your Users & Permissions page via the drop-down navigation under Manage Account at the top right of the page.

Users and Permissions

Users and Permissions

Select register new user from the Actions in the right sidebar and enter the new user’s information and site permissions. You can even add more administrators if needed, although you’ll need a business account.

New User Setup

New User Setup

Conclusion

With PageLime and ThemeForest I was able to get my client setup with a beautiful website and a CMS they’ll know how to use immediately, all in less than an hour. While this does come at a monthly cost (if you choose a paid plan), I can easily turn around and charge my clients a low monthly fee for the service. I also offer most of my clients web hosting, so I can bundle hosting charges and a CMS for an all-in-one solution.

What do you think of PageLime and the idea of lightweight CMSes to handle simple projects that don’t need a full-on CMS?

If you’re looking for a lightweight CMS solution, check out our roundup of the top 10 Fantastic Lightweight CMSes You Should Try.


  • http://www.BruneianDollar.com Bruneian Dollar

    Interesting. I might give that a try on my next client. :)

  • http://supersite.me Simon

    Nice step by step tutorial, it looks like good solution for static website and there are also more CMS systems like PageLime which allow customizing editable regions.

    Another editing way is not adding editable regions, but make just 1 template for CMS, and store subpage contents separated from design – so if you add new subpage, you don’t have to edit all pages with new menu item, check this free Eco CMS with 1-file template system.

  • Lori

    I have been asked by a small church group to update their website. More like web page, Specifically they wanted pictures and password protected “database” of names and addresses. They currently have a static site, very basic that a member created using something like “html for dummies”. I was planning to use wordpress. Would you recommend this over wordpress for something very simple that I could leave for others to edit / update?

    thanks

  • Pingback: Best of AppStorm in November | Mac.AppStorm

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow