An Indepth Guide to Using MotoCMS HTML

MotoCMS Editorial 5 November, 2013 5,479

How to Use MotoCMS HTML

Within this introductory post to MotoCMS HTML we are starting a new collection of articles dedicated to our powerful website builder, which was created for developing and editing HTML websites. We are going to highlight all features and functions of the system.

You might already had a chance to estimate HTML templates based on MotoCMS. Each template powered by the CMS for HTML has a built-in admin panel that simplifies customization process greatly and the widest range of features is caused by numerous tools and widgets. So right now we invite you to make an exciting tour to the most distinctive features of MotoCMS HTML.

Contents

Overall Functionality

The MotoCMS admin panel’s functionality gives users all possibilities to manage their websites with no matter of programming skills and previous experience. Whether you are a novice or advanced developer you will have no problem with the system use. Let’s take a sneak peek at the top functions of the system.

1. Drag&Drop System.

It is the easiest possible way to manage website appeal. The users can modify their web projects by replacing objects on the stage, then adding any content items and ordering them swiftly. Literally, you need to grab a needed object and place it in a desired position.

2. Page settings and SEO.

The first thing you should do when start using MotoCMS admin panel is set the page size for your future website. Edit the page height with up-down arrow buttons or type figures by hand – for this you will use Page Settings Panel. There you can also type Name, Title, URL for the page if just double click on the fields. With these functions you can optimize your site for search engines as easy as ABC.

Widgets

The MotoCMS admin panel has a rich collection of widgets for highly enjoyable and rather effortless website development.

Contact Forms

MotoCMS Contact Form Widget

This widget serves for strengthening website owner’s professionalism in visitors’ eyes. They should see that you are serious about what you do and extremely interested in their opinions. If a site visitor has a question, recommendation or complaint, he/she should have a chance to express it and get in touch with you at ease. Therefore Moto CMS is equipped with a multifunction Contact Form widget. It enables you to edit Text Format, Items Style (Line Thickness and Color, Shadow Color and Distance), Buttons Style (Line Thickness and Color, Shadow Color and Distance). There is also an option to add new items to Contact Form (Field item, Area item, Select item, CheckBox item, Radio Button item). Everyone who wants to make his/her online presence successful can’t do without well-thought-out Contact Form.

MotoCMS Contact Form Widget

Galleries

MotoCMS allows you to embed various galleries to the HTML themes. They make website appearance creative and fabulous – this is exactly what needed for photographer portfolios, web studio templates, fashion industry themes and for everyone interested in building a splendid site. Let’s take a closer look at each gallery.

MotoCMS Galleries

  • Background Slider

This kind of galleries is one of the most impressive. It gives users an opportunity to demonstrate pictures in a full-screen mode. The toolbar enables users to pick the automatic or manual mode for the slideshow, if automatic then appropriate settings must be chosen: Duration, Show Control (previous-next buttons and pagination) and Controls Padding. By the way the Pagination function enables image navigation with the help of thumbs.

MotoCMS Background Slider

  • Carousel Gallery

Carousel gives users an access to several images at the same time. This gallery is usually a horizontal dynamic cycling of pictures with partially visible previous and next ones. You can specify the scrolling speed if choose the option ‘Move Automatically’, then click on the ‘Enable’ button and set duration time. If no, pictures will be showcased by hand. Within the toolbar you can set a size of the main picture, Image Style, Image Hover Style and Control (previous-next buttons). Image Style function is for configuration the color of the image in the gallery, while Image Hover Style allows configuration of the image style when hover the mouse over gallery.

MotoCMS Carousel Gallery

  • Grid Gallery

Grid Gallery allows you to make a quick acquaintance with numerous images. There is no need to flip through all pictures, via this gallery they are shown on one page in a small size and each can be zoomed in, if needed. The widget editing means specifying Row and Column number (it depends on how many pictures you want to display), setting Control and Thumbnail Style options. Moreover, you can choose the way the pictures will be enlarged – in the Background (a full-screen mode) or Lightbox (big size images with still visible background pattern).

MotoCMS Grid Gallery

  • Reflection Gallery

This is an innovative way to showcase images, because all of them will have a fascinating reflection effect. The central picture is bigger than all others but each reflection image is the same as its original. The users can set the Opacity percentage for a reflected picture within the admin panel, Distance Between Images and Text Characteristics. Pay attention that the text will be published on the central image only.

MotoCMS Reflection Gallery

  • Slider

Slider is the most popular Gallery widget in web design. This widget is a good solution for any website so far as it looks organized and highlights important content. Use the Panel to set General Settings (Slideshow characteristics), previous and next buttons peculiarities and Image Properties.

MotoCMS Slider

  • Slider with Thumbnails

This functional Slider has two sections – the first represents an image of a big size and the second section is a sliding horizontal or vertical ribbon with thumbs. Such options as Automatic Slideshow, browsing pictures by hand, Image Size, Thumbnails height and distance between them, Image Properties are available.

MotoCMS Slider with Thumbnails

  • Sliding Click Action Gallery

This dynamic gallery gives an opportunity to showcase images in a very convenient way – they are scrolling vertically or horizontally (you can specify it in the admin panel). To navigate this gallery, you can use either left-right arrows or mouse (set the option in the widget toolbar).

MotoCMS Sliding Click Action Gallery

  • Sliding Gallery

This gallery is a sister of the above-mentioned one, but they are a bit different. When pictures are showcased via Sliding Gallery they can be viewed in a full size in two ways – in Background or Lightbox – this can be specified within admin panel. The same as in Sliding Click Action Gallery, here you can specify General Settings (Navigation style, Orientation and Distance Between Images). The Thumbnail Style option enables you to set the Color, Background and Stroke for thumbnail images.

MotoCMS Sliding Gallery

General

This category includes such widgets as ‘Button’, ‘HTML’, ‘PayPal Buy Now’, ‘PayPal Donate’, ‘Rich Content’ and ‘Vimeo Video’. Below we’re giving an overview of all these tools, what they are for and how to use them.

MotoCMS General Widgets

  • Button Widget

This widget allows users to place various buttons anywhere on their webpage. You can create the design of the button yourself – set the Buttons Style, Button Hover Style and Icon Style the same easy as Text Style and Text Hover Style. It is also possible to add the ‘Click Action’ function.

  • HTML Widget

HTML Widget enables users to launch any customer application and for this you need just to paste HTML code in a specific section. The admin panel gives all necessary prompts for installing each module, the only requirement is to follow them. Take into account that this widget isn’t reflected in the control panel, so be attentive and open a website preview to see how the widget will look.

MotoCMS HTML Widget

  • PayPal Buy Now Widget

Online purchases are possible with exactly this widget so it is a must-have tool for online stores. The widget has a wide range of properties: Email address to receive payments, Item Name (which is your product name), Item ID (optional feature), Currency Setting (22 currencies are available – from the most common U.S. Dollars and EUR to TWD and THB), Price, Additional Amounts (Shipping Amount and Tax Amount) and Customize Button feature (Button type, mode, text). Opening in the current or new window function is accessible.

  • PayPal Donate Widget

This tool is used for making donations, that is why it is in great demand for charity organizations and funds. This particular widget has absolutely the same properties as PayPal Buy Now Widget with one exception – the Price option is changed into Contribution amount, which can be fixed or entered by donator by hand.

  • Rich Content Widget

This widget enables users to embed much more information to their web projects due to its scroll bars and option to combine various content items (text, images etc) within single block. Scrollbar Thickness, Scrollbar Padding, Scrollbar Track Color, Scrollbar Thumb Color and Widget Style (Fill Type, Background Image, Stroke and Padding) are fully customizable. To edit the widget push the ‘Edit Widget’ button or double click on the widget area. Thus you will be able to set Width for the widget (Height can be changed if stretch the widget block with arrows by hand in admin panel), Background Color and Content Position.

  • Vimeo Video Widget

This tool is a good assistant in embedding Vimeo videos to the website. In Video URL it is necessary to copy and paste direct URL to the video file. Then select the Autoplay option if want to play video automatically and specify Controls Color.

Maps

MotoCMS Google Maps Widget

The widget allows MotoCMS customers to integrate a Google Map to the website and in its turn this increases your findability for visitors greatly. After adding a widget, double click on it and indicate your location. A marker icon can be chosen from the Media Library and the quantity of them is unlimited. Add the title and description of your location then.

Possibilities of this widget are truly impressive: Default Map Type selection, Position of Map Focus, Zoom function, Controls Position settings (Location, Zoom, Scale, Map Overview, Map Type), Map Types’ specification (Normal, Satellite, Hybrid, Physical) and Style options.

MotoCMS Google Maps Widget

Menus: Horizontal and Vertical

MotoCMS Menus Widget

This widget is a helpful tool in creating an easy navigation through your website. Horizontal and vertical menus have absolutely identical features except orientation which is obvious from the name.

In both menus’ toolbars you can add a desired quantity of pages and sub-pages by clicking on the ‘Add a New Menu Item’ button. By selecting an item and clicking on the ‘Remove Selected’ button you can delete unnecessary element.

MotoCMS Menus Widget

This widget is full of properties demonstrated on the panel:

– General Settings (Icon Position, Menu Text Style, Active Menu Text Style, Submenu Text Style, Active Submenu Text Style, Stretch Buttons option),

– Main Menu Style (Delimiter (add it from your Media library), Buttons Style, Buttons Hover Style, Main Items Indicator),

– Submenu Style (Buttons style, Buttons Hover Style, Submenu Items Height, Submenu Items Indicator).

– The style section enables setting Fill Type, Background Image, Stroke and Padding.

Preferences

This section enables changing the options of the website and its admin panel. It also gives an access to Media Library and Fonts Manager.

MotoCMS Preferences

Website Preferences

This set of functions includes ‘Website Settings’, ‘SEO & Analytics’, ‘Under Construction’, ‘Password Protect’. We’re describing these functions in details below, so careful reading is recommended.

MotoCMS Website Preferences

  • Website Settings

In this section you may type the title for your webpage in the field ‘Website Title’. It is a kind of prefix for your pages’ titles. For example, you choose a title ‘John’s Page’ and so every page title will have this prefix – a page ‘Gallery’ will be displayed as ‘John’s Page – Gallery’. If you don’t like it, just leave the field empty.

Website Settings also allows you to set the homepage, this means picking a page that will be showed first. Website Height, Width, Preloader, Page Preloader, Background Style parameters and Favicon are available on this panel too.

With the help of Page Transitions options you may set Show Effect, Hide Effect and Animation Duration to your website appeal.

‘Background Gallery Style’ section has many options to take use of – controls area of the gallery, controls area hover, next and previous buttons etc.

‘Lightbox Style’ Section is a chance to set all needed features for the Lightbox (background, colors, effects, styles etc.).

If you are a person of foresight, you will definitely take advantage of this function – ‘Mobile Website’. Please your visitors with the possibility to browse your webpage via mobile devices, for this mark an option ‘Redirect mobile devices to alternative version of site’ on the panel.The ‘Reset mobile website’ button forwards you to addition settings panel, where you may create a mobile version of your website in a few seconds.

  •  SEO & Analytics

Within this function you can activate Google applications, such as Google Analytics and Google Webmaster Tools. If you don’t have accounts for these tools, you have a chance to create them right from this panel by clicking on the ‘Create a new account’ link. Generate your sitemap with an appropriate button on the panel.

  •  Under Construction

This function is great if you want to hide your website appeal from visitors while modifying it. You may set a theme for this page (white or black) and type a message. Be creative and interest your visitors in browsing your theme later – type an inviting message or a witty joke, it will definitely act in your favor.

MotoCMS Under Construction

  • Password Protect

To make an access to your website pages limited input a password. Activate the function in the toolbar and then set a password. The login box view is fully-customizable.

MotoCMS Password Protect

Control Panel Preferences

This section enables users to adjust settings for the admin panel. It includes ‘Advanced Settings’, ‘Password’ and ‘Backup & Updates’.

  •  Advanced Settings

The admi panel is available in 15 different languages and it’s really a piece of cake to select a needed one.

Users may enable a Welcome Screen, ‘Check for updates’ function. It is possible to set the Preview parameters too. If you’d like to see preview from the page you last edited mark the option ‘View the website in the same preview window’, but if you want to start preview from the first page then mark a proper option – ‘View the website from the start page’.

  • Password

Here you can change a password for entering your admin panel.

MotoCMS Control Panel Password

  • Backup & Updates

This section is for creating backups and searching for updates. The panel provides all necessary explanations and instructions so there is nothing difficult to manage these features.

MotoCMS Backup&Updates

Media Library

Media Library in MotoCMS is truly multifunction. Firstly, there is a function to create folders for grouping various media files. At the top there is also a filter for choosing one particular type of files to work with. To add images or videos from your computer press the button ‘Add media’. Moreover, there are buttons ‘YouTube’, ‘Flickr’, ‘Picasa’ and ‘Facebook’ to add files from these resources. At the bottom of the panel there are buttons for moving and removing files.

MotoCMS Media Library

In addition, Image Editor is included into this section of Preferences. Pick a picture and click on ‘Edit Selected Item’ for opening the editor.

MotoCMS Media Library

A duplicated toolbar is a true helper for editing process. On the left there are simply buttons and on the right all functions are listed. The ‘Navigator’ function is for choosing an image scale (by hand or with buttons ‘Fit’, ‘1:1’. ‘2:1’). The ‘Rotate’ function enables you to turn the image and to re-size it use ‘Transform’ option. There are also possibilities to adjust colors, set brightness and contrast, effects, input name and metadata and view previous changes you have made. The ‘Library’ option is used for viewing all files from your Media Library.

MotoCMS Image Editor

Fonts Manager

This section displays available fonts which you can activate/deactivate or delete at all. The ‘Add Font’ button is for adding new fonts to you control panel.

MotoCMS Fonts Manager

Mobile Editor

Mobile Editor is a perfect supplement to all existing MotoCMS features. This tool will transform your website into mobile-friendly with hands down. At the top of the Control Panel select the ‘Switch to Mobile Editor’ function. The editor contains the same features and opportunities that the Website Editor do. Remember that to activate mobile version of your site you need mark a proper option in the ‘Website Settings’ section.

MotoCMS Mobile Editor

Conclusion

MotoCMS HTML is a fully-functional website builder, and we hope you have made sure that it is really easy to use. Moreover, we upgrade our products constantly, so frequent updates are guaranteed. We won’t make you wait for long!

As we already said, this post is only the first in our future collection which will be created for you, our customers, that is why your opinions are extremely important for us. If you have any suggestions or wishes, please don’t hesitate to contact us, we will make everything possible to fulfill them.

Author: MotoCMS Editorial
Here are the official MotoCMS news, releases and articles. Find out the latest info about product, sales and updates.
  • Sami Haddad

    how to fix the background pics to fit all screen resolution ?