Wiki

Getting Started with Jaemobi

How to create a mobile website in 2 Minute with Jaemobi.




1
Preview Panel

Instant mobile preview panel helps you design your mobile website on the fly with an easy drag & scroll interface.

2
Mobile Wireframe

Easily upload your logo, edit mobile header & footer or display image slider using top content with only one click.

3
Sitemap Panel

Add new pages, edit page titles, sort page orders and edit any page you like with easy drag & drop interface.

4
Design Panel

Select any theme from theme collection and customize it as you like or add your custom CSS code.

5
Page Editor

Manage your page content with using predefined plugins oradd your own widgets. Widgets are the content blocks and you can sort them with the drag & drop interface.

6
Predefined Widgets

Advanced predefined widgets help you create ready-to-gomodules with just one click. Display image galleries, directions, latest tweets, contact form or image slider.

learning ui

Setting up your mobile website

Initial Setup

1
Upload Your Logo

Press the Edit Logo button and upload your logo.

2
Create a Header Bar

Press the Edit Header button and create your header using Header/Footer Bar Settings on the Editor Menu.

3
Top Content Area

Press the Edit Top Content button and enter your custom content. You can embed a Youtube Video, Image Slider or a simple picture.

4
Setup Navigation Menu

Press the Add New Page button and start creating your page navigation.

5
Create a Footer Bar

Press the Edit Footer button and create your footer using Header/Footer Bar Settings on the Editor Menu.

6
Select Your Theme

Select any theme from theme collection and press the Save Theme button.

7
Test on Your Phone

Press the Generate button on the QR Tag box. Scan your temporary tag with your phone to check how it looks and works on a smartphone

initial Setup

Header

Adding Your Logo

You can easily upload a logo with the Edit Logo button on the wireframe panel. You can select JPG and PNG file formats for your logo.

When you upload your logo it will align itself to the left. In order to center logo you have to add the following CSS code using the Edit Custom Design File button.

You may also adjust the width of your logo and add margin space to center it vertically on the header.

                #HeaderContent { text-align:center; } /* centers your logo */
                .mobilelogo { width:80%; margin:10px 0px; }
            

This is how logo structured on your mobile page.

                <div data-role="header" data-theme="a" id="HeaderContent" data-position="inline"  >
                    <img class="mobilelogo" src="/images/yourlogoname.png" alt="logo"/>
                </div>
            

Header Options

You can customize your homepage header. Here is an example of a header with a logo. Simply click on the Edit Header button on the mobile wireframe and copy/paste the following html line into the editor.

                <div class="ui-bar ui-bar-b">
                    <a href="#" data-role="button" data-icon="check">Done</a>
                    <h3>I'm just a header</h3>
                    <a href="#" data-role="button" data-icon="gear">Options</a>
				</div>
            


You can keep your logo or hide it with the following line of CSS code. You can also replace your logo with smaller file to optimize loading time.

                .mobilelogo { display:none; }
            


In addition, you may choose to have both your logo and buttons on the header by adding the following html code, using the Edit Header button.

<a href="#" data-role="button" class="ui-btn-left">Like Us</a>
<a href="#" data-role="button" data-icon="check" class="ui-btn-right">Share</a>
            


You can also create your custom navigation menu on the header with the following code.


<div data-role="navbar">
	<ul>
		<li><a href="tel:555-55-55">Call Us</a></li>
		<li><a href="#" >Facebook</a></li>
		<li><a href="#" >Twitter</a></li>
	</ul>
</div>
            

Styling Header and Logo

If you would like to change the background color of your header you can do it with the following css code. Simply press the Edit Custom Design File button and copy/past the following code into Custom Css Editor

#HeaderContent {
	background: #333333;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #333333 ), to( #ccc));
	background-image: -webkit-linear-gradient( #333333,  #ccc );
	background-image:    -moz-linear-gradient(#333333,  #ccc );
	background-image:     -ms-linear-gradient( #333333,  #ccc );
	background-image:      -o-linear-gradient( #333333,  #ccc );
	background-image:         linear-gradient( #333333,  #ccc );
	border: 1px solid #333;
}
            

Top Content

Using Top Content as an Image Slider

Top Content lets you add custom content to the homepage of your mobile website. This content can be an image slider, picture, text or an embedded video.

In order to use Top Content as an image slider, FLEXSLIDER Jquery Plug-in was used. This is a sleek image slider and that is able to adapt to any resolution. You can also try importing your own Jquery Plug-in.

Image Slider comes with all new accounts. If you wish, you may delete it by pressing the Edit Top Content button and delete the content in the html editor. If you change your mind, you can find the same code from the widgets menu.


Customizing Image Slider Design

If you would like to hide the arrows, you can override the arrows option with the following CSS code.

            .flex-direction-nav { display:none; }
            #TopContent { padding:0px; }
            

In addition, if you would like to hide the control navigation, you can use the following CSS code.

            .flex-direction-nav { display:none; }
            #TopContent { padding:0px; }
            .flex-control-nav { display:none; }
            



Looking into the Image Gallery

The following code shows how the image gallery is structured as a default plugin. With the following list pattern, you can add slides as many as you like. You can also replace the .js and .css file with your custom files. Make sure to set widths of pictures to 100%.

<link href="http://www.jaemobi.com/content/css/plugins/flex-slider.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
	$(function(){ 
		$.getScript("http://www.jaemobi.com/content/scripts/jquery.flexslider-min.js");
	});
</script>
<div class="flexslider" data-theme="none">
	<ul class="slides" style="margin-bottom: 5px;" id="imageslider" data-theme="none">
		<li>
			<img alt="" src="/images/demo-slides/slide1.jpg" width="100%" />
		</li>
		<li>
			<img alt="" src="/images/demo-slides/slide2.jpg" width="100%" />
		</li>
		<li>
			<img alt="" src="/images/demo-slides/slide3.jpg" width="100%" />
		</li>
	</ul>
</div>

Sitemap

How it works

Jaemobi Mobile Website supports 3 level page structure so you can build very flexible navigation systems. Simply add new pages using the Add New Page button then sort your pages using the Sitemap Panel. On Sitemap Panel you can easily change the order of links or nest pages within each other. As soon as you drag a page, the sitemap panel interface will guide you through how it actually works.

If a subpage will have child pages inside, nested page navigation will appear right under the sub page content. You can check the example below to see Sitemap Structure on client side preview.

sitemap

sitemap2

Pages & Widgets

General Overview

Jaemobi Mobile Website Builder offers many options to create your own mobile optimized pages. Jaemobi page content structure is based on widgets. Widgets may include html codes blocks, pictures, scripts or just simple texts.You can also access the most-used mobile plug-ins from the widget panel.

Creating your first page

First, add a new page. Press the Add New Page button from the opening dialog, enter your page name and press the Save button. You will see your newly added page both on Sitemap Editor and Mobile Preview Screen. Now you are ready to add content into your page.

sitemap

Press the Edit Page button from the page on the Sitemap Panel. Then the interface will change to the Page Editor mode where you can manage and preview your page content. In Page Editor mode, you will see the Mobile Preview Panel on the left, Page Editor Panel in the middle and Widgets Panel on the right.

To add your own content, press the Insert Custom Widget button. From the Widget Editor, enter your custom code or add your content using Mobile Editor Snippets. When you finish adding your content, press the Save button. Now you can check how your new content looks on Mobile Preview Panel. You`ve just inserted your custom widget. You can also insert as many widgets as you like based on your allowed widget quota. You can also sort, edit or delete widgets as you like. When you are done editing your page content, press the Done button to update changes.

Widgets

Jaemobi also offers predefined widgets which includes custom plug-ins. You can easily drag & drop selected predefined widgets into the Page Editor. Predefined widgets are used as reference code blocks. You can change the content of inserted widgets on the Page Editor but you cannot change the content of predefined widgets. Everytime you drag & drop a widget into your page, a default widget structure will be inserted.

sitemap

Footer

Footer Basics

The Footer is a global element of all pages so the footer remains the same for each page. There are several ways to customize your mobile website footer using the same logic as the header structure. Like the header, all elements align to the left by default. If you wish, you may add the following code to center your content.

.ui-footer { text-align:center; } 
            

You can hide footer element globally or only for specific pages based on page levels.

            .ui-footer { display:none; }  /* Hides Globally
			#IndexPage .ui-footer { display:none; } /* Hides footer only at only at home page.
			#Subpage .ui-footer { display:none; } /* Hides footer only at first level sub-pages.
            #Parent .ui-footer { display:none; } /* Hides footer only at second level sub-pages.
            #Child .ui-footer { display:none; } /* Hides footer only at third level sub-pages.
            

Here is how is the footer container is structured on the mobile page. The content that you insert to the footer will be appended into this container.

	


You can copy/paste the following html code into the Footer Editor if you would like to have both buttons and text on the same line.


Main Page

I`m the footer

Home


Here is another footer example with grouped buttons in a row.



Here is another footer example with navigation buttons. You can specify different themes to all buttons or just specific buttons by adding a data-theme attribute, as shown below.

UI Components

Coming Soon

Themes

Coming Soon

Account Settings

Coming Soon

Custom Domain Settings

What is Custom Domain?

Custom Domain option lets you use your custom domain with Jaemobi Mobile Website. When you choose that option, your mobile visitors will access your mobile website through your custom domain such as mobile.yourdomain.com instead of yourdomain.jae.mobi.


How to Point Your Subdomain to Jaemobi

1. Log into your domain registrar where you bought your domain and go to the DNS settings or DNS management page.
2. Add an A record to the following domain name m.jae.mobi or IP address: 74.208.228.175. Delete all other A records that do not point to this address. This is the only change you need to make – you do not need to change your name servers.
You’re done! Note that it can take 12-24 hours for your domain settings to propogate across the Internet.


How to Add CNAME value for your domain




How do I create a CNAME record for my custom domain?

A CNAME, or Canonical Name, record is an entry within the Domain Name System (DNS) that specifies where a user can find your web pages, or any other URL. You'll use the CNAME to associate your custom domain with your blog. After registering your domain, decide if you want to use a particular subdomain for your mobile website. E.g. m.mydomain.com, mobile.mydomain.com. Keep in mind that changes to DNS records make take up to 24 hours to take effect. Each hosting service has slightly different ways to create CNAME records. Guidelines are provided here for some of the common services. When in doubt, check with the particular company you're using for additional help or instructions.

GoDaddy.com


  • Log in to your account at www.godaddy.com.
  • Open the Domains tab and select My Domain Names. You'll be directed to the Domain Manager page.
  • Click the domain that you'd like to use with your mobile website
  • Click the Total DNS Control And MX Records link at the bottom of the section entitled Total DNS.
  • Click Add New CNAME Record in the box labelled CNAMES (aliases). If you've already created a CNAME record for your mobile website's address, click the pencil icon next to the existing CNAME record.
  • For the Name, enter only the subdomain of the address you want to use for your blog. For example, if your regular website address is www.mydomain.com, for your mobile website address enter mobile, m or etc here.
  • Add an A record to the following domain name m.jae.mobi or IP address: 74.208.228.175. Specify a TTL or use the default setting of 1 hour.
  • Click OK, and then click OK again.




ix web hosting


  1. Log in to your account at ix web hosting.
  2. Click Manage below the Hosting Account section.
  3. On the left side, click the domain you'd like to use with your blog.
  4. Next to DNS Configuration, click EDIT.
  5. Click Add DNS CNAME Record.
  6. For the Name, enter only the subdomain of the address you want to use for your blog. For example, if your regular website address is www.mydomain.com, for your mobile website address enter mobile, m or etc here.
  7. Add an A record to the following domain name m.jae.mobi or IP address: 74.208.228.175
  8. Click Submit.


1and1


  1. Log in to your account at https://admin.1and1.com
  2. If it's not already selected, click the Administration tab.
  3. Click Domains. The Domain Overview page appears.
  4. From the New drop-down menu, select Create Subdomain.
  5. For the Name, enter only the subdomain of the address you want to use for your blog. For example, if your regular website address is www.mydomain.com, for your mobile website address enter mobile, m or etc here.
  6. Select the checkbox next to the subdomain that you will be using. (Example: www.mydomain.com)
  7. From the DNS menu, select Edit DNS Settings.
  8. Click the radio button next to CNAME.
  9. Add an A record to the following domain name m.jae.mobi or IP address: 74.208.228.175.
  10. Click OK.

Mobile Redirection Code

Mobile redirection code lets your mobile visitors reach your mobile website instead of Full Website. When visitors try to access your domain Ex:(www.yourdomain.com) from their mobile devices, mobile redirection code recognizes the device visitor has and redirects that mobile visitor to your mobile website Ex:(mobile.yourdomain.com).


            

You should put redirection code at the top of your full website index page, most commonly inside <head></head> tags.

Getting Ready to Sell