View Cart
Previews
This theme is responsive.
New to responsive site design? Find out what a responsive theme is! Also, the Responsive Layout, Fluid Image and Fit Text stacks from Joe Workman pair well with this theme!Overview
Mobile friendly
Mobi continues to push the boundaries of what RapidWeaver can do. It is a responsive theme, which means it adapts to your site’s visitors. As their browser scales down, so does your content. It adapts particularly well to those on iPhones!
It also uses the RapidWeaver 5 Resources for both banner images as well as it has some great ExtraContent areas.
In addition to all of this innovation, the Mobi theme also supports our Blog Entry Topper feature, as well as the ability through a little bit of extra code to have icons in your navigation.
Make mine modern
We’ve incorporated a series of features in Mobi that will benefit you and your visitors. These new features are designed for the modern browsers that your visitors are using: Safari, Chrome, FireFox and Internet Explorer 9. Your site will display OK in IE8, but will not live up to the high standards of these other modern browsers.
Theme tutorials
Here are some tutorials and walk through videos to show you how to use some of the amazing features found in the Mobi theme.
I encourage you to take a few minutes to watch them, and be sure to bookmark this page so you can come back and reference them when you’re building your own sites.
- An overview of Mobi’s responsive structure
- Using Mobi’s Blog Features
- Custom Banner Images
- Using Mobi’s ExtraContent Features
- Customizing the Navigation
- Photo Album LightBox
- Using Built-in Theme FAQ Feature
Building a simple site
This video will get you started in the world of responsive themes. Responsive themes are quite a bit different to use than your normal, non-responsive theme, so we walk you through building a few responsive web pages in RapidWeaver using the Mobi theme.
Features
Header
While Mobi doesn’t come with stock photos built-in as banner images, it does allow you to use the RapidWeaver 5 Resources area for populating your banners with your own images. We’ve provided 10 different slots for your own images to use.
You’re also given the ability to hide the banner (it is hidden by default). Likewise you’re also able to choose from 5 different banner image heights (150 - 500 px in height).
Need a slideshow for your page’s banner area? No problem. We’ve created a great ExtraContent area at the top of the content section of the theme. You can use a Stacks plugin like SuperFlex to achieve a wonderful, responsive and flexible slideshow banner! We outline how this is done in the banners tutorial above. You can see an example of SuperFlex in action here.
Background
Mobi’s background might be overlooked by some, but not by us. In designing Mobi we’ve built-in some stylish, understated backgrounds that will help your content to stand out:
- Dark Classy Fabric
- Dark Zig-zag
- Dark Linen
- Tiny Tiles
- Carbon Fibre
- Dark Weave
- Dark Wave
- Dark Texture I
- Dark Texture II
- Dark Texture III
- Dark Web
- Dark Wood
- Dark Map Topography Texture
- Color picker
Width
Mobi’s ability to be very flexible is one of its key selling points. It adjusts with your visitors. When they adjust their browser your site will compensate for the amount of space they provide it.
It will even adjust for optimum viewing on the iPhone and iPod Touch. What about the iPad though? The iPad’s larger screen is perfect for viewing Mobi in all it’s full-size glory.
Here’s a peek at the width choices available in Mobi:
- 960 px max
- 760 px max
- 560 px max
- Fully Flexible
Color picker
Mobi offers a good deal of color picker options for your customization needs.
We’ve even got color pickers that work together to make beautiful gradients for the likes of menu highlights and such. Have a gander at all the color pickers:
- Links
- Navigation text
- Navigation highlight text
- Navigation highlight gradient: top
- Navigation highlight gradient: bottom
- Navigation background gradient: top
- Navigation background gradient: bottom
- Sub-navigation text
- Sub-navigation highlight bar
- Title bar gradient: top
- Title bar gradient: bottom
- Site title
- Body text
- Sidebar text
- ExtraContent 1 - Background
- ExtraContent 1 - Text
- ExtraContent 1 - Links
- ExtraContent 2 - Background
- ExtraContent 2 - Text
- ExtraContent 2 - Links
- Breadcrumb bar gradient: top
- Breadcrumb bar gradient: bottom
- Breadcrumb text
- Breadcrumb text: current page
- Footer text
- Footer link
Fonts
We’ve provided you three great looking fonts to choose from for your site title, which is displayed in the title bar at the top of the page, just below the navigation bar.
- Helvetica
- Museo Slab
- Museo Sans
Blog
Mobi features out Blog Entry Topper feature, found in many of our recent theme releases. With this feature you can to place large images above the title of your blog posts quite easily with this great feature, which is similar to that found in many other platforms like WordPress, ExpressionEngine and Tumblr.
The images inserted above the blog entries using the Blog Entry Topper automatically adjust with the changing width of the theme’s content area.
When displayed on mobile platforms the archives get hidden away in the drop down sidebar area.
On top of all of this, we made the normally bland, and un-styled tags section of the blog’s sidebar look quite nice by dressing up each individual tag.
Be sure to checkout the blog demo page on our live preview site to see all of this in action.
Site logo
The Site Logo appears to the left of the site title in the title bar. The image is shrunken down to fit the space available. It is also hidden away to save space on the mobile version of the theme.
ExtraContent
Mobi has 3 great ExtraContent areas, all in the standard areas: top of the content container, bottom of the content container and just below the content container, acting as a secondary footer.
We’ve also created an edge-to-edge feature for ExtraContent areas 1 and 2. Be sure to check out the tutorials above to learn more!
Misc
Breadcrumb trail: The wonderful icons that can be used in the navigation on the Mobi theme get used in the breadcrumb trail as well. You have the ability to hide those if you want.
Theme FAQ: We provide a built-in theme FAQ in the Mobi theme. This allows you to get answers to your questions quickly and easily.
(Note: You must turn off the theme FAQ before publishing your pages)
Misc
Photo Album: This theme comes with a great LightBox feature built right in that spruces up the RapidWeaver Photo Album page style. It also provides a great LightBox that will be optimum for users on iPhones and iPod Touches as well!
This LightBox is enabled by default. Be sure to watch the tutorials above to learn more!
Icon chart
The Mobi theme’s navigation system allows you to insert a small piece of code in the page title to get great looking, silhouetted icons in your navigation items. To learn how to use these icons please watch the navigation tutorial video in the Tutorials section above. Below is a a chart of the icons that you’ll need in selecting the appropriate icons for your navigation.
Supported browsers
Our themes support a wide variety of web browsers. We test each theme in these modern browsers to make sure that your sites will look good, and function properly. We highly suggest Safari on the Mac and PC as it is one of the most standards compliant browsers on the market today.
Safari
FireFox
Chrome
Opera 10+
IE 9+