(+84) 463.28.7979

Allow your Clients to Update their Websites on the Go

Digging in!

On our template’s homepage, we can see there are quite a few areas on the page that I’ll need to make editable. Since making things editable with the Pagelime mobile app is no different than with the Pagelime web app, we go about adding the editable classes to the different parts we’re interested in.

Here’s the markup for the welcome message.

  1. <div class=”headingrow”>
  2. <h1>Welcome to our website</h1>
  3. <p>Lorem ipsum dolor sit…</p>
  4. </div>

We’re going to make the p tag editable with Pagelime. Since we’re using the mobile app, we’ll also give it a descriptive title.

  1. <p id=”welcome” class=”cms-editable” title=”Welcome Text”>Lorem ipsum dolor sit…</p>

Here’s the next section:

  1. <div class=”subheadingrow”>
  2. <h2>Employee of the month - Jenny Smith</h2>
  3. <img class=”leftalign”src=”images/home-image-sample1.gif” alt=”” />
  4. <p>Tasty and fullfiling, … </p>
  5. </div>

I want to make the headline, the promo image and the main content itself editable.

  1. <h2 id=”eomtitle” class=”cms-editable” title=”EOM Headline”>Employee of the month - Jenny Smith</h2>
  2. <img id=”eomimg” class=”leftalign cms-editable” title=”EOM Image” src=”images/home-image-sample1.gif” alt=”” />
  3. <p id=”eomtext” class=”cms-editable” title=”EOM Text”>Tasty and fullfiling, … </p>

The Recipe of the month section mirrors the above format exactly, so we make the same changes to that block of HTML.

Finally we make the image in the upper left corner editable:

  1. <img id=”changer” class=”cms-editable” title=”Changing Image” src=”images/changer.png” />

Pagelime intro

Now I’ve delivered the first version of the site to Chef Tony, and he can download the Pagelime Mobile App here:

He can log in with his email and password, and he’ll see his site on the dashboard:

Pagelime intro

At this point, he has the ability to edit the site, manage images, view documents, use Google Analytics, and even make new pages and templates. For the purposes of this article, we’re only going to deal with editing the Site and Images.

Clicking on Edit Site brings you to the Select Page screen where Tony can choose the homepage for editing:

Pagelime intro

The next screen provides you with a list of the editable areas we defined earlier.

Pagelime intro

Clicking on “EOM Headline” will allow us to change the employee of the month text. Tony makes it Chef Tony, because he just so happened to cook a mean Paella today. We tap “Done,” switch to “Preview,” and can now see now the ‘employee of the month’ section has now, indeed, been updated to “Chef Tony.”

Pagelime intro

We’re now going to update the Changer Image. To do so, we’re going to use the “Edit” view. We tap the button in the subnav which brings up a preview of the website with green overlays. The overlays show you what’s editable and can be tapped to open that region – similar to the live editing in the Pagelime web app.

Pagelime intro

This gives us a preview of the image we’re changing. We now have the option of taking a live picture on the fly, choosing an image from our phone, or choosing an image stored in the Pagelime image manager. For this tutorial, I’ll take a picture of a Paella, and then use the auto-cropper tool, which allows us to proportionally scale and crop our image to match the dimensions of the editable image on the site.

Pagelime intro

We can now check the preview and see how it looks before clicking publish…

Pagelime intro

When we check the actual website…

Pagelime intro

… we see that everything has been updated — all from our phone! No real technical knowledge is needed, and you have an awesome bit of client candy to help upsell your clients and make more money. (We won’t tell Tony he forgot to update his Employee of the Month Photo.)

So there you have it: a website integrated with a CMS with the added benefit of iPhone – on the fly – updating! Go make a glass of Limeade, enjoy the spring air, and the smell of all the extra green you’ll be making.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>