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. The amount of tools for each widget can be different.
You can change the object's style by highlighting it on the page. You will see a number of features on the left side of the Admin Panel once you select it.
Each widget has a different "Preset", which affects its overall design and contains a various number of features. The amount of presets for each widget can be different.
Each preset can be edited within the Design - Widgets menu item.
You can select either regular pages or Blog pages from the list of available pages, where specific widgets can be customized directly.
MotoCMS 3 Design - Background
Background menu item allows you to change the existing background style of each page.
Please be informed that you can’t erase original (default) "Body" background style.
"Presets" - this feature contains a list of your background styles. Each preset has its own title. You can create/delete/duplicate any preset (except default preset).
In order to add a new preset please click "Add" button.
If you wish to add a new background to the Presets list - please specify your background’s title and "Add" button.
In order to duplicate preset please click "Duplicate" button. In order to remove preset please click "Remove" button.
"Name" - this feature indicates a preset title. Must be unique.
"Background Properties" - this block is used for editing color, background image, size of mentioned image, position and tile.
"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.
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 the Background Image wasn’t set yet - please click + button, so you will be redirected to the site’s Media Library.
Please choose the necessary image from the list of images within the popup area and click "Apply" button.
Your "Background Image" section will change its appearance ("Edit"/"Remove" buttons will appear on the right side of the section).
In order to change background please click on the "Edit" button and choose the 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".
"Original Size" option displays default (original) image with its default size.
"Cover Size" option stretches the image on the entire screen, preserving the original proportions.
"Contain Size" option stretches the image’s height in reference to the lowest height or width parameter. It also preserves the original proportions.
"Position" - this feature relocates the 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.
"Don’t Repeat" feature is used by default.
"Repeat" feature allows you to reflect background image on the page in various proportions. 
"Repeat X" feature allows you to reflect background image in reference to the area’s width. 
"Repeat Y" feature allows you to reflect background image in reference to the area’s height. 
"Fixed" - this feature is enabled by default. It allows you to use fixed position for your background image. If the Fixed feature is disabled, then the background image will move simultaneously with content.
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. You can either customize your site colors following the instructions below by yourself or have our designers customize your site color scheme - just purchase this service by following this payment link.
"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.
In addition you may click on any color in order to open the Color Picker, where you can choose the 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 an alternative color within the Color Picker.
MotoCMS 3 Design - Text Styles
"Text Styles" - this menu item allows you to add new text styles or modify existing styles.
"Sort By" - this feature allows you to sort text styles by their name or size.
"Add Text Style" - this feature allows you to add a new 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.
"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.
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.
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.
"Enable Shadow" - this feature allows you to enable/disable the shadow effect on the text, changing its placing and also granting a possibility to select a required color for the shadow effect.
"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.
"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.
Both features have similar amount of tools (preview field, font styles, font color). All functions use the same logic to work as features within the Style Properties section.
If you wish to duplicate default/existing text style - please click "Duplicate" button.
MotoCMS 3 Design - Size and Values
"Size and Values" menu item is separated into three submenu items: "Spacings", "Grid Settings" and "Heading Spacing".
"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.
"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.
To check your widget's position on the site's page you need to choose preview type (for example, mobile portrait version).
Then you need to enter the 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.
"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).
"Heading Spacings" submenu items allows you to adjust top and bottom indents for the h1, h2, h3, h4 headings.
An "em" size is equal to the current font-size, for instance, if the font-size is 1em, it is equal to 12pt.
Comments