Wiki

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; }
            

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

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>
            

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 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>

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.

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.

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.

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.

	Main Page
	
I`m the footer
	Home

            

		

			Remove
			Add
			Up
			Down
		
       
         

	

		
Home
		
Footer
		
Main Site
	

	

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.