In the last article we previewed Moboom, a web-based software program for creating mobile sites. In this article, we’re going to look at some of those features in depth.
When building a design, you have the opportunity to preview what that content will look like on the various devices by clicking on any one of the views in the top tool bar. You can also make changes as necessary when you do so.
When looking at the left sidebar, the first heading you’ll see is “Sites.” In this section, you can search the various sites (if you have many) and you can choose to display the sites by grid or list view. You can also sort the sites by name and date.
The Library is where you store all the image assets, including any widgets. You can make use of filtering on the far left to locate a particular image or widget. Clicking on any file will give you more information about it.
The Marketplace contains two major sections, one for widgets; the other for site themes. You can filter the search for these. Some of these are free and others are paid items. As an example, if you click on a theme, it will open to a page with more information and you can also see a demo of the theme.
In the Documentation section you can read tutorials, search the forum, ask questions or watch video tutorials.
In the Account Info section you can manage passwords, credit card information and access to the account. This is important if you have people collaborating on a project.
Now that we’ve looked the above, we’ll take a look at some specific settings and options within Moboom. To give you an idea of what can be done, we’ll create a basic site; then look at some of the setting options available to you.
To get started, go back to the Sites tab and at the top right of the screen click on the Create button.
In the Create Site dialog box, set the name and subdomain of your site, click on the site type (in this case a site where we start from scratch) and click on the Create button.
Here’s our new site with some components in place.
We’ll look a few of these and some of the controls here, beginning with the left sidebar.
Creating a new page is simple. Click on the New Page header, which brings up a dialog box. Enter the name of the page and click on the Add New Page button and it creates a new page which appears in the left sidebar.
Note the About page, which was added in the previous step.
Directly below the Pages header is the Page Elements head, which has been expanded. These are elements that you’re only likely to edit once and will stay constant through the site.
Content sets are where you can use content on one site only or to share it with other sites that you’ve built with the Moboom interface. There are two ways of doing this, one is to click on the Shared button at the top right of the screen shot above…
…and the second way is to click on the Synced content tab and this allows you to import XML, CSV, JSON or Excel into your document.
The last option is for those who don’t know coding. Here, you click on the Managed button. When you do so, you’ll want to fill out the fields above with some parameters. As an example, we’ll name ours: Blog and add attributes of Date, Author, Article and Image. Once that’s done, click on the Create Content Set button.
This creates the content sets for our blog and you can start adding content. If you decide you want to add more attributes, click on the Fields button to set up another attribute. To add it to your list, click on the Add button.
To create a blog entry, go back to the Content button and click on the Add Content Item button. This will create your first blog post.
After entering the text and settings, click on the Create button at the bottom right to create the blog post. That’s it!
After that, you can customize the theme. There are several settings here which I’ll mention briefly. It’s my intention to cover these in more depth in the next article. For now, your options are: Theme Presets, Site Styles, Widget Styles and Less Variables.
Theme Presets makes use of the Less Variable to start theming your site so you could have multiple color versions, such as red, blue, green, etc.
Site Styles is where you can add custom CSS to your site.
Widget Styles is where you write these inline in the studio. An example is the H1 tag. When you do so, that information will populate in this section.
Less Variables: This system is built off of Bootstrap and Moboom uses all the Less Variables that are used in Bootstrap.
That’s all we’re going to cover for this article. In future articles we’ll look at building a responsive website in greater depth.
Resources
Bootstrap: Used for developing responsive, mobile first projects