Start Your MojoMotor brought to you by META Q
Interior Ad 3 brought to you by The META Q

Start Your MojoMotor

MojoMotor is a new content management system (CMS) by EllisLab, the maker of our favorite CMS, ExpressionEngine. Well-suited for smaller sites with less dynamic functionality requirements, MojoMotor lets admins and content creators edit and create content in page and in context.

On our first stab at building with MojoMotor, Q Digital Studio took a project from HTML and CSS prototypes to a complete, fully functioning, updatable website in less than a single work day, and the whole process was a blast to boot. Like its big sister, ExpressionEngine, MojoMotor is simple, intuitive and elegant. Though it may not be suitable for every project, clients will find MojoMotor easier to understand than an admin section when they edit their content in place.

Here's an overview of the build process and the features that will help you get MojoMotor up and running in a jiffy.

Installing MojoMotor

Before installing MojoMotor, I highly recommend creating solid HTML prototypes of your site, including any variations in page layouts. This will make setup much easier when it comes time to add layouts to your site. Those familiar with the ExpressionEngine install process will find MojoMotor's a breeze.

The install process: create a database, upload the application files and point your browser to the install wizard. A word of caution: the optional import function turned my perfectly tabbed-out markup into a sludgy mess which left me feeling a bit violated. Watch out.

Keeping that in mind, Ellis has a nice tutorial video for importing sites into MojoMotor (http://bit.ly/9DRoHo), which will help you to prepare your files for the best possible outcome, should you choose to use the site import option. Remember, it's not required.

Admin Toolbar

Site administrators can use the Admin Toolbar to add pages, add layouts and to administer the site. The Admin Toolbar is dynamically added to any page of the site so long as the user is a logged-in member.

Much like templates in ExpressionEngine, the layout section of the Admin Toolbar lets you add and edit different HTML layouts, which you can use across the site. Since Mojo supports embeddable layouts, templates can be broken down into reusable sections such as header, sidebar, footer etc.

When creating pages, you can select which layout to use for each particular page. As of the date of this article's publication, layouts can only be added and edited in the Admin Toolbar. However, word has it that Ellis is working to ease your suffering by making file-based editing available in the near future.

Building editable regions

What makes MojoMotor so fun to build with is its in-page, in-context editing capability. Just about any part of an HTML layout can become an editable region by adding a special css class to an element in a layout.

The special class is different depending on what type of region you want to create:

  • Page regions - these regions are specific to the page or URL and cannot repeat across multiple pages or multiple locations on a single page.
  • Global regions - These editable regions are repeatable and can be reused across multiple pages and locations on a page. Editing a global region from anywhere on the site will update all other instances of the region so long as they share the same template.
  • Super global regions - Super global regions behave exactly like global regions, but become Super when they exist in a layout that has been embedded in to another.

    <div id="page_content" class="mojo_page_region">
        <p>This is a page region.</p>
    </div>
    
    <div id="page_content" class="mojo_global_region">
        <p>This is a global region.</p>
    </div>
                            

Building pages

Using the Pages tab of the Admin Toolbar, you can create new pages and organize them into parent and sub pages that have a drag-and-drop functionality. Once a new page has been created, you can set a custom Uniform Resource Identifier (URI). Select which layout to use and add keywords and descriptive text. These can be output into layout files. You can also decide whether or not to include the page in the page list output.

Adding content

Once a page has been created, all you need to do to add content is to navigate to the new page. There, logged-in users will see the highlighted areas where editable regions have been added.

Simply click on the region and the area converts to a WYSIWYG widget. Those who know and love Pixel and Tonics Wygwam will be happy to know that the same WYSIWYG application - CKEditor 3 - has been used for MojoMotor's content editor.


Once editing is complete, simply click save and MojoMotor will take care of the rest. No page loading is required. It's that simple!

Where to go from here

Before taking on a MojoMotor project I'd highly recommend looking over the features and descriptions listed on the MojoMotor website , and glancing through the documentation to make sure it will fit your project's needs. If you want to see how MojoMotor works first-hand before purchasing a license, MojoMotorist has set up a demo site that you can use to take MojoMotor for a spin.

And, of course you can always ask Meta Q any questions you might have. We'll do our best to point you in the right direction. Happy Motoring!


Terris Kremer's avatar

Terris Kremer

Front-end developer at Q Digital Studio

Terris Kremer is a front-end developer at Q Digital Studio. While he may joke that both front- and back-end developers are dweebs, Terris really does make development look cool. For Terris, work is a game that he can (and does) play all day long.

Posted

3.15.2011

Categories

Code > MojoMotor

Tags

cms, ellislab, mojomotor

3 comments >

What others are saying

Susan Snipes

Great article. I concur, clients LOVE how easy it is to use MojoMotor with the “on-the-page” editable regions. It makes training very easy :)

Boyink

Appreciate the overview as I’ve yet to really take a look at MM.  Was disappointed to see the profanity in the sidebar though.

Terris Kremer

@Boyink, oh my! Thanks for pointing that out as it certainly wasn’t intentional. That’s what I get for taking samples from a public demo I suppose.


Speak your mind