Within the basic section of the toolbox you have Text (headers and body text), Buttons which can be used to link your pages together, images, videos, audio, and columns. The columns tool can be used when you want to place content side by side rather than stacked on top of each other. Currently MOBI only supports two columns since the primary focus is mobile and any more than two columns wouldn't scale properly for the average phone.

At the top of the toolbox you'll notice two other tabs. The Forms tab allows you create surveys or provide a section for feedback on your site. To learn more about forms click here.

The Advanced tab offers the ability to add a provider to your site. This allows MOBI to dynamically retrieve content for your page. If you would like to learn more about providers or request your own custom provider you can contact Matthew Henderson. Currently the only available provider is a Cool Employee provider. This allows you to retrieve employee information including phone number, email address, and department name.

The site map displays all of the pages you have created for your site. Simply click the link to the page you want to edit and the Designer will update and show you a preview of the selected page.

When you first create your site you should see two pages within the site map. Those pages are briefly summarized below.

The Home Page

When someone navigates to your site by default they will be taken to the Home page. The home page cannot be renamed.

The Master Page

The Master page allows you to manage everything that is common between every page in your site. This includes changing your site's theme, adding links to the header, changing the header text, and selecting the appropriate brand icon.

Copying a Page

Often many of your pages will be composed of the same basic layout. For example, most articles start with a header, display a big image, and then have some body text. Rather than having to drag on those controls every time you create a new article you can easily duplicate an existing page by right clicking on the page you want to copy, and selecting Duplicate from the pop up menu.

The Designer itself also utilizes drag and drop allowing you to sort the content within your page. When you hover over each tool the Designer displays a blue outline allowing you to more easily see the separation of your tools. When you hover over columns you will see a red outline around the row and a blue outline over the individual tools. When you hover over a form you will see a green outline around the form and a blue outline around each form question. When you click on a tool it will expand the properties window which will allow you to customize the content you see. If you right click on a tool you will see a pop up menu with options for sorting, deleting, and duplicating the tool.

Copying a Tool

Often within a page you might find that copying a tool will make life easier. For example:

1. Creating multiple buttons with icons and arrows and the only difference is the choice of icon and the text.

2. Adding multiple images with the same width and height that you found to be appropriate.

3. Adding multiple columns that are made up of the same tools in each column.

As mentioned above, to copy a tool simply right click on the tool and click the Duplicate option from the pop up menu. This will add a copy of the tool directly below the tool you copied and if needed you can then move the duplicate to its appropriate position.

Each tool has a corresponding properties window to allow you to customize the content. Each window contains a delete button to remove the tool from the designer. Below the properties windows for the Basic tools are further detailed.

Text

The text properties window provides you with a text editor that allows you to easily format the text and insert numbering, bullets or links. To change between header and body text simply click the Header or Body tab above the text editor.

Button

The button properties window allows you to link to an external URL, a page within your site, or document you've uploaded. To choose what you want the button to link to simply click the URL, Page, or Document tab at the top of the properties window. You can also change the text on the button, toggle the Arrows option on to display an arrow icon and better indicate that your button is a link, and add either an icon or your own custom image to the button to more easily identify to the user the purpose of the button.

Image

The image properties window allows you to specify a URL or upload your own image. You can toggle between these two options by clicking either the URL or My Images tab at the top of the properties window. You can also specify the height and width of your image, add a caption, and allow users who click the image to be redirected to an external URL.

Video

The video properties window allows you to toggle between a Brightcove, YouTube, or external link as the source of your video. To do so simply click the Brightcove, YouTube, or URL tab at the top of the properties window. To update the source for a Brightcove video simply paste the embedding into the area indicated. MOBI will parse the embedding and update the Video ID, Player ID, and Player Key fields as necessary. To Update the source for a YouTube video simply paste the URL into the specified textbox. MOBI will parse the URL and update the Video ID field as necessary. If available, MOBI will update the Designer to display the appropriate thumbnail image for the selected video. For more information on embedding videos click here.

Audio

Currently the audio properties window only allows you to link to a audio file that has a URL. You can add multiple sources (mp3, wav) to ensure that the audio file will play on any device. MOBI will detect which file type (if any) is supported and play it.

Columns

The columns properties window allows you to choose the layout of the two columns. You can choose from one of the four predefined layouts or use the slider to customize the layout to meet your needs.