Scroll

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

Start Chat

MotoCMS 3 Design

1. Background
2. Colors
3. Text Styles
4. Size and Values

MotoCMS 3 Design

MotoCMS 3 Design section allows you to modify the appearance of your site's objects, using various editing tools. Amount of tools for each widget can be different.
MotoCMS 3 Design

You can change object's style by highlighting it on the page. You will see a number of features on the left side of Admin Panel once you select it.

Each widget has different "Preset", which affects it's overall design and contains various number of features. Amount of presets for each widget can be different.

Each preset can be edited within the Design - Widgets menu item.

MotoCMS 3 Design - Background

Background menu item allows you to change existing background style of each page.
MotoCMS 3 Design Background

Please be informed that you can’t erase original (default) "Body" background style.
MotoCMS 3 Design Background Style

"Presets" - this feature contains a list of your background styles. Each preset has it’s own title. You can create/delete/duplicate any preset (except default preset).

In order to add new preset please click "Add" button.

If you wish to add new background to the Presets list - please specify your background’s title and "Add" button.
MotoCMS 3 Design New Background

In order to duplicate preset please click "Duplicate" button. In order to remove preset please click "Remove" button.
MotoCMS 3 Design Duplicate and Remove

"Name" - this feature indicates preset title. Must be unique.
MotoCMS

"Background Properties" - this block is used for editing color, background image, size of mentioned image, position and tile.
MotoCMS 3 Background Properties

"Color" - this feature allows you to change your site’s background color.

There are presented 25 preset colors and 5 additional (independent) colors. If you wish to change colors, please click "More Colors" link.
MotoCMS 3 Design Colors

Within the color picker area you can choose any color. In order to save results please click Ok button. If you wish to abandon changes - please click Cancel button.

"Background Image" - this feature allows you to add/remove background image of your site.
If Background Image wasn’t set yet - please click button, so you will be redirected to the site’s Media Library.
MotoCMS 3 Design Background Image

Please choose necessary image from the list of images within the popup area and click "Apply" button. 
MotoCMS 3 Design Select Background Image

Your "Background Image" section will change it’s appearance ("Edit"/"Remove" buttons will appear on the right side of the section).
MotoCMS 3 Design Background Image Edit and Remove

In order to change background please click on the "Edit" button and choose necessary image within the Media Library.

If you wish to remove image background - please click "Remove" button.

"Reset" button will revert all made changes for current preset to its previous look (to the point before you start applying changes).

"Size" - this feature appears, when you create a Background Image for your site. It has 3 different options: "Original" (default), "Cover" and "Contain".
MotoCMS 3 Background Image Size

"Original Size" option displays default (original) image with it’s default size. 

"Cover Size" option stretches image on the entire screen, preserving the original proportions.

"Contain Size" option stretches image’s height in reference to lowest height or width parameter. It also preserves the original proportions.

"Position" - this feature relocates image’s position according to the chosen arrow button (Left Top arrow button is used by default).

"Tile" - this feature allows you to repeat your background images on the page.
MotoCMS 3 Design Tile

"Don’t Repeat" feature is used by default.

"Repeat" feature allows you to reflect background image on the page in various proportions. 
MotoCMS 3 Design Repeat

"Repeat X" feature allows you to reflect background image in reference to the area’s width. 
MotoCMS 3 Design Repeat X

"Repeat Y" feature allows you to reflect background image in reference to the area’s height. 
MotoCMS 3 Design Repeat Y

"Fixed" - this feature is enabled by default. It allows you to use fixed position for your background image. If Fixed feature is disabled, then background image will move simultaneously with content.
MotoCMS 3 Design Fixed

Please be informed that this background preset can be used on the other pages and will affect all of them. 

MotoCMS 3 Design - Colors

"Colors" tab allows you to edit the color scheme of your site.
MotoCMS 3 Design Colors

"Main Colors". There are presented 25 preset colors and 5 main colors. Main Colors (top colors) generate 5 additional colors for each vertical line, depending on the main color’s brightness settings. You can also change any direct color within the column and it won’t affect other colors in the line.
MotoCMS 3 Design Main Colors

In addition you may click on any color in order to open Color Picker, where you can choose necessary color. Current/New section reflects your colors (original color and new color), so you can compare them during the editing process. 

"More Colors" - this block allows you to use additional colors for your palette. If you wish to change them - please click on any color and choose alternative color within the Color Picker.
MotoCMS 3 Design More Colors

MotoCMS 3 Design - Text Styles

"Text Styles" - this menu item allows you to add new text styles or modify existing styles.
MotoCMS 3 Design Text Styles

"Add Text Style" - this feature allows you to add new text style.
MotoCMS 3 Design Add Text Style

"Style Name" - this feature allows you to create/edit your style name (this field is empty by default). Minimal length of characters - 2. Maximum length - 200.
MotoCMS 3 Design Style Name

"Style Properties" - this block allows you to modify your style’s features.

"Preview" - this feature allows you to preview all changes of the text style via Control Panel directly.
MotoCMS 3 Design Preview

B (Bold) - defines thick characters
I (Italic) - defines thin characters
A (Font Color) - palette of colors 

In order to change text’s color please click "A" button. There are presented 25 preset colors and 5 additional colors. If you wish to change colors, please click "More Colors" link.
MotoCMS 3 Design More Colors

Within the color picker area you can choose any color. "Current" field shows your current color, while "New" field shows color, which will change your current color. In order to save results please click "Ok" button. If you wish to abandon changes - please click "Cancel" button.

"Line Height" - this feature allows you to modify interline spacing of your text style. Please use slider button in order to increase/decrease the spacing.

"Letter Spacing" - this feature allows you to modify letter spacing of your text style. Please use slider button in order to increase/decrease the spacing.
MotoCMS 3 Design Letter Spacing

"Responsive" - this feature provides possibility to make your site's content (text) responsive. It allows you to set custom font size, line height and letter spacing for each specific font. This feature is available for all devices: tablet, phone landscape and phone portrait.
MotoCMS 3 Design Responsive

"Link Properties" - this block allows you to modify link style within the text.
"Normal" and "Hover" styles reflect the appearance of your link. Normal style is used by default. In order to edit specific section you need to choose Normal or Hover section. You can edit font and color styles for each section separately.
MotoCMS 3 Design Link Properties

Both features have similar amount of tools (preview field, font styles, font color). All functions use the same logic of work as features within the Style Properties section.

If you wish to remove existing style - please click "Remove" button on the right side of your text style. If you wish to duplicate default/existing text style - please click "Duplicate" button.
MotoCMS 3 Design Duplicate and Remove 

MotoCMS 3 Design - Size and Values

This menu item allows you to modify object's spacing on your site's pages.
MotoCMS 3 Design Size and Values

"Size and Values" menu item is separated into two submenu items: "Spacings" and "Grid Settings".
MotoCMS 3 Design Spacings and Grid Settings

"Spacings" submenu item allows you to configure spacings for all site's objects on each resolution.

You can edit spacing feature for all devices: PC, tablet, mobile landscape and mobile portrait.
MotoCMS 3 Design Edit Spacing

"Spacings" submenu item allows you to increase/decrease "Small", "Medium" and "Large" spacing from all object's sides. It allows you to set unique object's position for each device.
MotoCMS 3 Design Object Position

To check you widget's position on the site's page you need to choose preview type (for example, mobile portrait version).
MotoCMS 3 Design Preview

Then you need to enter Mobile Portrait section, where "Small", "Medium" and "Large" spacing features are presented. Then you can increase/decrease spacing value within the necessary field.

!Important! To apply spacing for website objects you need to enter "Pages" section and choose necessary object.

Please be informed that it affects only Small, Medium and Large spacing. If you use spacing 0, Auto or custom spacing - it won't affect them at all.
MotoCMS 3 Design Spacing Specifics

"Grid Settings" submenu item allows you to set custom column spacing and fixed row width for the "Row" widget.

"Column Spacing" feature has fixed spacing size (from 10px up to 60px). "Fixed Row Width" feature has fixed size (from 980px up to 1920px).
MotoCMS 3 Design Column Spacing and Fixed Row

Have more questions? Submit a request

Comments