Scroll

Objects

1. Moto CMS Objects
  1.1. General Properties
  1.2. Style
  1.3. Actions

2. Simple Objects
  2.1. Block
  2.2. Text
  2.3. Image 
  2.4. Shape
  2.5. Video

1. Moto CMS Objects

Basically there are two types of Moto CMS objects: simple objects (blocks, texts, images, shapes, videos) and widgets (galleries, buttons, video player, forms, etc). Both these types of objects have common properties, as well as some individual properties.

1.1. General Properties

Each Moto CMS object has its own coordinates, sizes and transparency which you can edit.
greenshot_2013-04-24_12-51-28.png

Also, you can "lock" any of the objects placed on the stage. For this you will need to right-click on the object and choose the "lock" option. When the object is “locked”, some of the limitations will be applied. You will not be able to edit such object's properties, add the effects or actions, change the object's size, transparency, etc., until the object is unlocked. You will see the message asking if you want to unlock the object at the bottom of the page.
greenshot_2013-04-24_12-22-35.png

"Pin Object" option enables you to pin different objects to screen edges. Also it is possible to edit an offset by changing its value.
greenshot_2013-04-24_12-35-41.png

Pressing “force to top” button will set your object always to be shown on top of all other page objects. And “force to bottom” button will make all other objects to be shown on top of the selected one.
greenshot_2013-05-14_12-21-53.png

1.2. Style

Objects style can be modified for objects of any type. To add a style to the object, please use a special “Style” tab on the right panel. Please select an object on the page, click “Style” and choose the type of the effect you would like to apply.
greenshot_2013-05-14_12-29-51.png

You can choose the "Fill Type" for the object, it could be set as None, Solid or Gradient. For the gradient fill type you can set the vertical or horizontal gradient direction.

Instead of using the fill color or gradient you may decide to use the certain background image for your object. You may use any images from your Media Library for this.

The "fitting" setting allows you to adjust the way your background image will fit the object's size. "Position" function allows you to correct the object's position for the background image manually.
example.png

The "stroke" settings will help you to create a border around your object. You will be able to set the color of this border, its width and corners radius as well as the padding size. Please, try to play with all these settings - you will see how many options you have. You can change the width of the border, round the corners simultaneously for all sides or just for one side of the object and increase or decrease the gap between the border and the object, to make it exactly in the way you want it to be.
greenshot_2013-04-24_13-17-14.png

1.3. Actions

Different click actions can be applied to most of the simple objects or widgets. Select the object on the stage and click the tab “Actions” on the right panel. In order to activate the clicking action for the object, please check the “Enable Click Actions” checkbox.

You may choose one of the following options:

Go to page – you will be prompted to choose the target page to go to.

Open Pop-Up – you will be prompted to choose the target popup to open.

Open URL – you will need to specify the URL and define if it should opens in the same or in the new window.

Open File – you can choose the file from Media Library to open.

Mail To – you will need to specify the e-mail address.

Open in Lightbox – action enables the enlarged version of the image.

If you don't want to enable any of the click actions for this object – please choose “None” or uncheck the "click action" checkbox.
greenshot_2013-05-14_12-29-51.png

2. Simple Objects

There are following simple Moto CMS objects: blocks, texts, images, shapes, and videos.

2.1. Block

The block object allows you to place any other objects (like images, texts, etc.) within it in order to apply appearance and fading effects to these objects. For using the block object you need to place it on the stage and move any object inside the block’s area so it will be automatically connected with this widget. You may place several objects within one block object.


Block object has the following features: “Name” (object could be renamed); “Show Effect” and “Hide Effect” settings (how object will appear when you load the page and how it will disappear when you leave it); "Show Duration" and "Hide Duration",  "Horizontal align" (left, center, right) and "Vertical align" (top, middle, bottom) settings and “Remove” button (removes Block object from the page).
greenshot_2013-05-14_12-53-43.png

2.2. Text

The "Text" tool allows you to place the text blocks on the pages of your website. When adding the text to the page or selecting the existing text, the right-side panel with the additional settings for the text fields is activated. You may select the font type for the entire text or the highlighted content. You an add a new font from the list of available fonts by clicking the option “Add Font” and then pressing on “+” button next to the font you'd like to add.
greenshot_2013-05-14_13-19-12.png

By using the text editor you can change the font size and the color of your text, make it bold/italic/underlined. (Note: Some of the fonts cannot be changed to bold or italic). You can also change the first line and paragraph spacing, upper or lower case of the text or remove the formatting.
“Auto-size text field” is one of the text object options. Once activated this option will fit the object size to the size of the text itself.
greenshot_2013-05-14_13-25-04.png

 It is possible to insert the link within the text. Highlighting of the text fragment activates the “Link” button (see the image). Click on the button will open a popup with the link settings to choose from

Go to page – you will be prompted to choose the target page to go to.

Open Pop-Up – you will be prompted to choose the target popup to open.

Open URL – you will need to specify the URL and define if it should be opened in the same or in the new window.

Open File – you can choose the file from Media Library to open.

Mail To – you will need to specify the e-mail address.

Open in Lightbox – action enables the enlarged version of the image.
greenshot_2013-05-14_13-28-55.png

You can define the style of the text block: normal, heading 1-6. This style does not influence the appearance of your text , but it is useful for SEO. The main Heading is usually defined as h1 (Heading 1), subheadings - h2 (Heading 2), etc. For plain text the “Normal” style is set by default.
greenshot_2013-05-14_13-35-58.png

2.3. Image

The “Image” tool allows you to add images to your website pages. By clicking the “Image” button on the left panel, the Media Library will be opened. Then you can choose the image you would like to place on the page. Double click the image that you want to use or hit the “Select” button once the object is chosen in the Library. Please click the area of the page where you want to place the image or click and hold the button defining the area for the image. As soon as the button is released, the image appears on the page, and the right panel of the image properties is activated.

There are two types of images supported by Moto CMS – JPG and PNG.

The right panel helps you to change the image itself, its scale and horizontal and vertical alignments. The style or actions can be applied to the images as well.
greenshot_2013-05-14_13-41-42.png

2.4. Shape

The “Shape” function allows you to add graphic object on the website pages. The object is square by default but you will be able to modify it into circles, ovals, straight lines, etc.

After adding the shape on the stage or by selecting one of the already existing shape objects, the right panel will activate. It displays additional options for all the shape objects.

Each of the shape objects has some common properties (color, color alpha, line color, line thickness, line alpha) alongside with the individual ones.

The style or actions can be applied to the shapes as well.
greenshot_2013-05-14_13-48-08.png

2.5. 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 will be asked to choose, what kind of video you want to add: YouTube or Vimeo.
video_1.png

In a case if you are using the YouTube option, the Media Library will be launched automatically. 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.

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.
greenshot_2013-05-14_14-12-03.png

You can easily add YouTube videos to your Media Library. For this you need to press the "YouTube" button in the upper right corner of your Media Library, then search for the video you need.
greenshot_2013-04-24_14-28-24.png

If you want to add Vimeo video item you need to press on Video button on the left panel, choose the Vimeo option and then place the video object on the stage. In order to add specific Vimeo video you need to specify video item's URL in the "Video URL" field. Also you can enable the Autoplay for your video and choose the player's controls color.
video_3.png

Have more questions? Submit a request

Comments