MotoCMS 3

MotoCMS eCommerce

MotoCMS Blog


Welcome to our LiveChat! Please press "Start Chat" button to proceed

Start Chat

Widgets: Basic

1. Text
2. Image
3. Button
4. Horizontal Divider
5. Space
6. Menu
7. Contact Form
8. Advanced Contact Form

Note! Your Control panel can also include Advanced Contact Form widget as an item of the Basic Widgets section. This widget lets you create an unlimited number of fields, like dropdown menu, radio buttons, checkboxes, Captcha etc. You can learn more about this plugin in this Advanced Contact Form Widget guide.


This widget allows you to create text blocks on your site, where you can add/edit/remove text, customize it’s font type, style, colors or size, manage redirect links.

"Text" widget also has the following common features: "Spacing", "Animation".

Widget’s height is equal to the height of the text within the widget.

When you place Text widget within the column - you will see "CKEditor" with various amount of editing tools.

You can set Bold, Italic or Underline text style, customize heading (as example, for SEO purposes), edit font’s size or align text correctly within the column.
"Styles" - this tool contains a list of text styles, which can be used within the Text Object. For more details on how to create text styles please see following tutorial Text Styles.
"Text Format" allows you to set Headings ("Normal" is used by default).
"Font Size"  option allows you to increase/decrease font size.
If you wish to align text within a column - you can use 4 types of alignment: "Left Alignment", "Center Alignment", "Right Alignment", "Justified".

In order to edit text’s color please click "A" button.

There are 25 preset colors presented and 5 additional (independent) colors. Also you may see “Default” color section, which is used for entire text by default. You can click on the color picker section and change it manually. If you wish to change colors, please click "More Colors" link.

Within the color picker section you can choose any color. In the left column you can see your current color, while in the right section you can see your new color. In order to save results please click "Ok" button. If you wish to abandon changes - please click "Cancel" button.

It's also possible to set the background color under the text in the Text widget to highlight an important part of the text.

If you wish to create redirect link - please click "Link" button. If you wish to remove redirect link - please click "Remove Link" button.


If you wish to increase/decrease indent within a text widget - you can use the appropriate buttons.

If you wish to create a "numeral" or "bulleted" list - you can use the appropriate buttons.

"Insert Icon" feature allows you to add various icons into the text.

"Search" field allows you to find necessary icons using specific keywords (for example, you can find music related icon by typing "music" keyword in the "Search" field).

You can manually choose any icon from the list, press "Apply" button and then icon will appear in the text directly.

"Set fixed width for the icon" feature allows you to display icons on the same level when you create vertical lists.

If you wish to remove text formatting - please click on the "Tx" button.

You can "Undo"/"Redo" changes for the Text object, using appropriate arrow buttons.

"Tables" feature provides a possibility to create tables (like in Excel document) and fill its area not only with text but with various MotoCMS widgets.

You can separate the table into several rows and columns, enable headers, select visual preset which affects its design, add stripes, hover effect to it. You can also enable a compact style if you wish to use a smaller preview version of the table.


This widget allows you to use/edit image object on your site’s page.

"Image" widget is separated into two tabs: "Settings" and "Design".
"Settings" - this tab provides the following editing tools for your image: "Image", "Title", "Alt Text".

"Image" widget also has the following common features: "Link To", "Devices", "Alignment", "Spacing", "Animation".

First of all you need to add image from the Media Library. Please click + button within the "Image" feature.

System will redirect you to the Media Library. Please choose necessary image and click "Apply" button.
You may also choose different image size, when you wish to add image on the site's page from the Media Library (for this please put "Image" widget on the page and it will automatically open necessary section). "Image Size" is separated into 5 different sizes: Original (Default), Small, Medium, Large, HD (depending on the size of each image). You can choose any size from the "Image Size" drop-down list (if the image meets required size).
Small - 125*125рх
Medium - 300*300px
Large - 1200*1200рх
Extra Large (HD) - 1980*1980px

Please be informed, that fields Title and Alt Text would be filled automatically, using the image’s details from same columns, within the Media Library.

"Title" - your image’s title (it can be changed within the same field for mentioned image within the Media Library). Also it improves SEO (when you overlay image with cursor - you will see image’s title). Search engines can also index such a title.

"Alt Text" - this text will appear instead of your image if your browser’s settings block the possibility to preview images.


This widget allows you to create/manage button on your site’s page.

Button widget is separated into two main tabs: "Settings" and "Design".
Settings - this tab contains the following functions: "Size".

"Button" widget also has the following common features: "Link To", "Alignment", "Spacing", "Devices", "Animation".

"Size" - this feature allows you to change button size. You can use "Small", "Medium", "Large" options. "Medium" size is used by default. Button’s font size will change depending on the button’s size. You can see an example on the screen shot below.


This widget allows you to separate your site’s content with horizontal line.

"Divider" widget is separated into two main tabs: "Settings" and "Design".
"Settings" - this tab contains the following functions: "Width".

"Divider" widget also has the following common features: "Alignment", "Spacing".

"Width" - this feature allows you to increase/decrease divider’s width. Default width is 100%.



This widget allows you to create additional space between site's objects on the page.

"Space" widget has the following feature: "Height".

"Space" widget also has the following common features: "Spacing", "Visible On".

"Height" - allows you to increase the height of your space area (from 1 up to 999 px).


This widget allows you to create site's menu, where you can add/edit menu items, duplicate/remove existing menus, manage redirects through the menu items and edit hierarchy of the menu elements.

"Menu" section is separated into two main tabs: "Settings" and "Design".

"Menu" widget has the following features: "All Menus".

"Menu" widget also has the following common features: "Devices", "Alignment", "Spacing".

"All Menus" - this feature allows you to choose necessary menu structure from the list of menus.

You can also click "Edit" button in order to enter Menu widget's structure for further editing.


If you wish to create new menu - please click "Create New Menu" button.

Please specify your menu's name within the "Name" section and click "Add" button.

If you wish to duplicate menu - please click "Duplicate" button. You can duplicate/remove duplicated menu or new menu widget. If you wish to remove menu - please click "Remove" button.

Please note: you can only duplicate Default Menu. It's not possible to remove it.

In order to add new menu item please click "Add New Menu Item" button.

There are presented two main features: "Name" and "Link To".

"Name" - this feature allows you to edit menu item's title.

"Link To" - allows you to enable redirect option for the menu item.

You can edit or remove menu item using appropriate buttons.

"Edit" area shares the same features that are presented in "Add New Menu Item" section.

Please note: The number of menu items is unlimited. But the level of subitems is limited to 3.
Please be informed that if you didn't save your menu item - it will have blue overlay color and "draft" status. It means that "Duplicate" feature won't duplicate this item until you save your menu changes. If you saved menu item correctly - it can be duplicated as a part of entire menu widget's structure.

You can drag & drop menu items using your mouse cursor. You will see a dotted border when you drag your menu item. This area indicates the position where you can place menu item.
!Important! If you wish to create several input levels (up to 3) - you need to relocate the item under necessary main menu item and move it slightly to the right (dotted line will be visually moved to the right).

If you relocate the main menu item - all submenu items would be automatically relocated as well.
You can drag & drop submenu item and place it on the same level as main menu item (under or over it).

If you wish to save menu changes - please click "Save Menu" button.

"Design" tab allows you to select presets for the regular menu widget and it's hover style.menudesign.jpg

"Sticky Preset Name" can be used if your Menu widget is located in the Container widget, where the "Sticky" feature is enabled, allowing you to scroll the page and always see your menu widget on top. For example, you can enable Preset 1 for the "Preset Name" showing one design of the menu widget while not scrolling page. If you select Preset 2 or 3 for the Sticky Preset Name" - the menu will look different when you scroll the page.

Contact Form

This widget allows you to create a Contact Form and receive emails from site’s visitors.

"Contact Form" widget is separated for two tabs: "Settings" and "Design".

"Contact Form" widget has the following features and blocks: "Email To", "Form Fields", "Form Settings".

"Contact Form" widget also has the following common features: "Spacing", "Animation".

"Email To" - this field contains your email account details, where system will deliver emails. If the field is empty, emails will be sent to the email address specified in the admin user profile.


Form Fields

There are 6 main fields presented: "Name", "Email", "Phone", "Address", "Subject", "Attach File", "Message" and "Agreement" (for GDPR purposes). You can enable mandatory feature (*) for each field separately by using Field Mandatory button (“*”), on the right side of each field.

All fields can be removed. You can set the "Email" field for your contact form as optional. This will allow you to collect the necessary information without specifying the visitor’s email address. In this case you need to uncheck the "Email" field in the "Form Fields" block.

"Agreement" field allows you to enable confirmation field which won't allow visitor to send email without accepting your terms and conditions. Now you can set links to website pages related to privacy policy, license agreement, etc. You can edit default text via "Edit" button.

You can enable Text Editor via "Label" switcher and customize your text styles or enable a redirect link via "Link" icon.

Each form field has an icon with two dotted circles on the left, which you can use as a drag option to change the position of each field in the Contact Form.


Form Settings

This block allows you to edit form field’s status messages. There are presented the following fields: "Send Button Text", "Success Message", "Error Message for Mandatory Fields" and "Error Message for Email Field".

"Make Form Inline" feature allows you to use the horizontal Contact Form/MailChimp widget. Please be informed that it may negatively impact the design of the current Contact Form.

You can select, whether it's vertical or horizontal on different devices if you disable/enable the device icon.

Also, you can set 0 or higher spacing between the form fields/elements. 

Action After Form Submission

"Action" - this feature allows you to enable redirect action once visitor sends you an email via your Contact Form widget.

"Reset Form" - this feature will automatically clear all contact form fields after the sending the email.


"Design" tab contains number of presets, which change the visual appearance of the Contact  Form widget.

"Button Styles" block allows you to change the appearance of buttons within the Contact Form widget, including "Send Button", "Attach Button", their size and alignment.


Advanced Contact Form

Advanced Contact Form plugin is an extra widget which allows you to make complex Contact Forms with extended features set. You can order Advanced Contact Form plugin for any MotoCMS 3 or MotoCMS Landing or MotoCMS eCommerce template by purchasing this plugin using this payment link. You can learn more about this plugin in this guide.

Have more questions? Submit a request