Scroll

Mobile version

MotoCMS Flash templates have a special feature - Mobile version of MotoCMS Flash template. The main template is made in Flash, however some Mobile devices do not support Flash technology, that is why Mobile version made in HTML. Also, it can be used by devices that have no Flash Player installed.

Please, note! Your device's browser should support JavaScript in order to show mobile version correctly.

Due to the difference in Flash and HTML (Mobile) structures it's not possible to automatically recreate exactly the same mobile version of template, which was made in Flash. That's why such version must be created from scratch and manually. 

All Flash Moto CMS template's mobile versions have a default design, however you can easily re-edit it in MotoCMS Flash template's Mobile Editor and make it look as you need. The standard Mobile version of Flash MotoCMS template is 620px wide, it contains one page and one pop-up. Mobile version's Editor looks like the regular Flash MotoCMS Control Panel excluding some features which can't work properly on mobile devices. Also, you can set it's dimension to fit most mobile devices screen dimensions.

In order to redirect mobile devices or devices with no Flash Player installed to the Mobile version automatically, please go to your MotoCMS Flash template's Control Panel, click Preferences > Website Preferences and then enable Redirect mobile devices to alternate version of site.
Mobile3.PNG

Mobile4.PNG

Mobile version of MotoCMS Flash website can be accessed by URL like: http://yourdomain.com/m/  and it is editable by URL http://yourdomain.com/m/admin/. An example of the default mobile version with no changes done to it, is shown at the screenshot below.
Mobile1.PNG

In order to go to Mobile version's Editor from MotoCMS Flash template's Control Panel and create a mobile-friendly version of your website, please click 'Switch to Mobile Editor' button.
Mobile2.PNG

Mobile version's Preferences

Website Preferences

Mobile version Editor's Website Preferences are concerned to Mobile version only. In order to change your mobile website's dimension please go to Mobile version Editor's Website Preferences (shown below). 

Website width and minimal height
Mobile5.PNG

Website width and minimum height are set for all mobile website pages. As MotoCMS Flash template's Mobile website is stretchable, you can change each page's height in Properties Panel of this page.
Mobile6.PNG

Preloader

You can choose the preloader image or animation for website loading and pages loading in Website Preferences. GIF, JPG, JPEG and PNG  file types are supported.
Mobile21.PNG

Website Pleloader is shown when you go to your mobile website. Page Preloader is shown while you're surfing through your mobile website pages.

Website Background 

You can choose your website background which will be shown at all mobile website pages. In order to have an image as a background, please choose Fill Type: None and then choose the Background Image from your Media Library (see below).
Mobile22.PNG

You're able to set Background Image Fitting and Position.

In order to fill your website background with a color, please select corresponding option in Website Preferences - Website Background Style (Fill Type: solid) and choose the preferable color using Color Picker or typing Color #, see screenshot below.
Mobile23.PNG

Website favicon

Upload your logo or style image that will display on visitors browsers, tabs and when website is placed in favorites or bookmarked.

Here's a list of supported favicon images dimensions:

  • 16*16 pixels
  • 32*32 pixels
  • 64*64 pixels.

SEO&Analytics

Mobile version of MotoCMS Flash template is not accessible for search robots by robots.txt file. This is done in order to avoid duplicating content and indexation of website pages twice by search robots.

However, Google Analytics counts visits of your mobile website adding them to the general visits counter. You can also add the individual Google Analytics account for your website's mobile version, so you can track the visitors of your mobile website separately from your main MotoCMS Flash website.
2014-09-04_18_57_08-Moto_CMS.png

The Under Construction and Password Protect options are also available for the HTML version for mobile devices.
2014-09-04_18_58_08-Moto_CMS.png

Media Library

MotoCMS Flash template's Mobile version uses the same Media Library content as MotoCMS Flash website. All items are shared through these two version and you can use any item of your MotoCMS Flash website's Media Library in your mobile website and you can use any item of your mobile website's Media Library in your MotoCMS Flash website without any issue.

Media Library contains Mobile folder. You can use if for managing you Mobile version's Media Library items or you can create additional folders following Managing Media Library Folders video tutorial if you want. This will make Media Library usage more comfortable.
2014-09-04_18_59_31-Moto_CMS.png

Fonts

MotoCMS Flash template's Mobile version support Google Fonts only. Mobile version has several pre-installed fonts, but you can add the needed Google Fonts. You can add the desirable font following this guide on adding Google Font to Flash MotoCMS template's Mobile version .

Please, note! We can not guarantee that all 100% of Google fonts would be possible to add to your templates mobile version due to some characteristics that do not depend on our system. Some, very rare exceptions may happen.
2014-09-04_20_26_43-Moto_CMS.png

MotoCMS Flash template's Mobile Editor. Special features and widgets

Here's a list of main differences of MotoCMS Flash template's Control Panel from Mobile Editor.

Block
Mobile7.PNG

This widget is designed to add special appearance animation effects for different objects. This option makes it possible, to place other objects to the block, set the “Show Effect” and “Hide Effect” for them as well as specify horizontal and vertical alignment.
Mobile20.PNG

Available Show effects:

  • Fade In
  • Expand
  • Enter Left
  • Enter Right
  • Scroll Up
  • Scroll Down

Available Hide effects:

  • Fade Out
  • Collapse
  • Hide Left
  • Hide Right
  • Scroll Up
  • Scroll Down

Note: when an object is in the block, its placement is changed and  this object cannot be placed in multiple blocks. 

Shape
Mobile8.PNG

MotoCMS Flash template's Control Panel has different Shape Objects. Due to HTML websites structure, only rectangle Shape Object can be added to mobile website now.

Video

The “Video” tool allows you to add video objects to your website pages. When you click the “Video” button on the left panel, you are able to add a YouTube video to your website page(-s).

Media Library will be launched automatically when Video button clicked. If you already have your YouTube video added to the Media Library  - you'll just need to choose it and click the "select" button. After this please click on the area of the page where you'd like to place the video object. If you haven't added the needed YouTube video yet, please add it -  just click YouTube button, find the needed video, click Add in order to add it to your Media Library and then select it from your Media Library.
Mobile33.PNG

The right side panel for the YouTube video object gives you possibility to play the video directly in the Control Panel while editing the website or replace it with another one. “Auto Play Movie” option will force your video to play automatically once the page is loaded, and “Repeat Movie” option will loop your video.
Mobile34.PNG

Contact Form

MotoCMS Flash template's Mobile version allows mobile website visitors send emails to your email address.
Mobile16.PNG

Like any other module, the Form Widget has got its custom properties displayed on the right panel, when the module is selected.

Switching to the Edit Widget, Forms Widget opens a control panel that displays all the fields included. A built-in WYSIWYG Editor allows you to change the parameters of the existing fields, add new ones or delete the fields. Here you may place the status field, and the “Reset” and “Submit” buttons. Please click the field to open its properties on the right.

Unfortunately, it's impossible to attach file to a message sent by mobile website's Contact Form.
Mobile17.PNG

Following options are available:
Mobile19.PNG

  • Item ID is a unique item number of the form. It’s not required for the item numbers to be put in order. It’s quite possible for the item with ID = 2 to go first. But it is significant for them to be unique and the number of items should correspond to the highest ID. For example, if you have four items, the IDs should be from 1 to 4.
  • Name is a name of the form item, which is used for the validation error messages or is bound with a given field and its value on sending a message.
  • Field is required and takes one of the two values “Yes” or “No” and defines if the input field is required or not by submitting the form. By default requires to be set to “No”.
  • Text to show is the text that will be showing up on the initialization form (for the forms that do not have labels with a field name).
  • Restrict indicates the set of characters that a user may enter into the text field. For example: my_txt.restrict = "A-Z 0-9"; or my_txt.restrict = "^a-z". If the value    of the restrict property is null, you can enter any character. If the value of the restrict property is an empty string, you can't enter any character. If the value of the restrict property is a string of characters, you can enter only characters in the string into the text field. If the string begins with ^, all characters are initially accepted and succeeding characters in the string are excluded from the set of accepted characters. If the string does not begin with ^, no characters are initially accepted and succeeding characters in the string are included in the set of accepted characters.
  • Maximum length defines the maximum number of symbols allowed in the selected field.
  • Display as password takes one of the two values ‘Yes’ or ‘No’ and defines whether the showed text to be displayed as a password (******) or not. By default requires to be set to “No”.
  • Multiline - you may activate or deactivate the multiline function for the selected field.
  • Validator — a validator type: String Validator; Email Validator; Number Validator; Date Validator.

When using a validator, additional properties pertaining to a specific validator which can be used.

String Validator:
- Minimum characters — minimum number of characters that is allowed for this field;
- Regular expression — regular expression and the field value should match. It is used together with “Regular expression flags”.
- Regular expression flags — regular expression options. It is used only if the “Regular expression” is present. The possible options are as follows:
a) g — global, defines whether the search should match all occurrences of the given pattern. If it is omitted, just the first occurrence should be matched;
b) i — caseInsensitive. If it is present, the case is disregarded;
c) m — multiline.

Email Validator:
- Min letters after last point — minimum number of characters before the last dot;
- Max letters after last point — maximum number of characters before the last dot;
- Min letters before @ - minimum number of characters before '@';
- Min letters before @ - maximum number of characters before '@'.

Number Validator:
- Max value — maximum value;
- Min value — minimum value;
- Allow negative — defines whether you are allowed to enter a negative number.

Date Validator:
- Mask - a mask, which the date should be validated with. By default it is mm/dd/yyyy. The dividers do not matter. If mm, dd or yyyy cannot be found, the default mask is used.

Beside the management of the form fields, the contact form module has its own settings. In order to get to the settings, please click the button “Configuration”. Here you may change the following settings:
Mobile18.PNG

  • SMTP - you can set SMTP server for contact form.

2014-09-04_20_31_38-Widgets_-_Contact_Form___CMS_Guide.png

You will need to add following information in the fields:

- SMTP server - mail outgoing server
- SMTP port number
- SMTP username and password - usually your e-mail account and password
- Secure SMTP connection type  (if required)

Gallery Widget

Mobile Editor has the only one gallery widget, but it can be edited to meet the highest requirements. It allows you to create a gallery with several rows and columns of images. Slideshow mode can be enabled too. Images are opened in Lightbox when clicked.Mobile9.PNG

Mobile10.PNG

Here's an example of Gallery Widget on live mobile website:
Mobile24.PNGAnd here is an image opened in Lightbox (the full screen mode might be not supported by your mobile device's web browser) when clicked:
Mobile25.PNGGallery Widget provides such options:
Mobile26.PNG

  • Rows number (up to 16)
  • Columns number (up to 16)
  • Controls Background (set by Color Picker or type Color #)
  • Lightbox Background (set by Color Picker or type Color #)
  • Overlay Color (set by Color Picker or type Color #)
  • Description Background (set by Color Picker or type Color #)
  • Description Alpha (transparency)
  • Slideshow mode enable/disable
  • Slideshow Speed, ms
  • Choosing Controls Icons (Description, Previous/Next, Start Slideshow, Close Lightbox)

HTML widget
Mobile35.PNG

HTML Widget is one of the most demanded widgets among our customers. It allows you to launch any custom application by implementing valid HTML, JavaScript or iFrame code within the widget. The code should be pasted in the special section:
Mobile36.PNG

Please, note! The code can't be executed (the widget cannot be previewed) straight in the Control Panel, it can be only seen on the website preview.

Horizontal Menu, Vertical Menu

Mobile Editor includes two menu widgets - Horizontal Menu and Vertical Menu. They differ by menu items orientation only. Unfortunately, Horizontal Menu Content can't be used in Vertical Menu. Also, Vertical Menu Content can't be used in Horizontal Menu widget.
Mobile11.PNG

Horizontal Menu widget's subitems are opened in drop-down. Here's how it looks like in MotoCMS Mobile Editor (Menu Labels 5 and 6 have Parent Menu Item - Menu Label 2):
Mobile12.PNG

And this is how it is shown on the mobile website (Menu Label 2 hovered):
Mobile13.PNG

Vertical Menu widget's subitems are opened right. Please, see the example of Vertical Menu Content below (Menu Labels 5, 6 and 7 have Parent Menu Item - Menu Label 2):
Mobile14.PNG

This is how it looks on the mobile website (Menu Label 2 hovered):
Mobile15.PNG
If you any have problems editing your MotoCMS Flash template's Mobile version, please contact our Support team. Our agents will be glad to help you anytime!

 

Have more questions? Submit a request

Comments