MotoCMS Website Creator: Preset Builder, Size & Values

MotoCMS Website Creator: Preset Builder, Size & Values

In this tutorial about MotoCMS Website Creator, you will find out how to prettify the appearance of the widgets in the admin panel and customize them for the original design of your website.

In the second part, we will review the functionality that allows a user to specify spacings of the elements on a website layout for three major devices: desktop, smartphone and tablet.

Have you already launched a Moto 3 website template for a free test? If not, we recommend you to do this. MotoCMS offers the free trial version you can try within 14 days. During the trial, you’ll be able to test all the features. There are no restrictions between the trial and the real version.

How to change a widget’s design

If you want a particular widget of your website to look different, use Preset Builder. First, you should go to the Design tab and click on the section called Widgets.

image05

You can edit the following widgets:

  • Audio and Video Player
  • Button
  • Contact Form
  • Countdown Timer
  • Divider
  • Grid Gallery
  • Image
  • Menu
  • Slider and Carousel
  • Social Links.

image07

Preset Properties

To get started, pick your widget from the list or simply click on its location on the layout. Since every template has a unique design, please note that the features within each preset may vary. It depends on the web theme you get.

image06

Each preset combines various properties that you can customize with ease. You can edit the color of backgrounds, borders, text etc. You can also change its font, style, size and more.

image09

Some widgets like Menu, Button or Gallery also contain the Hover tab to make your widget doubly attractive. To save you time, you can inherit properties from the Normal tab to the Hover one.

image08

One more good thing is you can edit the Menu widget for mobile devices in a separate tab. When using a smartphone or tablet, your website menu transforms into a “hamburger” by default. Click on the mobile device tab to start editing its design.

image01

Don’t forget that if you have sub items in your navigation menu, you can customize them as well.

Adapting a website to a particular device

All Moto 3 templates are fully responsive, so they look perfect on any mobile device. But if you need to adjust your website to a particular screen or simply manage spacings on the layout, you can do this on the tab called Size & Values. It is located right above the Widgets tab.

image00

It works simply. To manage a spacing preset, first pick an appropriate preview mode. There are 4 of them: desktop, tablet, mobile landscape and mobile portrait.

image03

Once you choose your mode, you are able to see all changes in real time. For example, pick the tablet preview mode, set values for this device and watch the magic happen.

image02

If necessary, you can perform the same procedure with any other device. To apply the changes you did, go back to the Pages section and click on the element you need.

image04

Set spacing of your widget in its properties on the right side of the admin panel. There are the following values: 0, Auto, Small, Medium and Large. The last three can be customized in the Size & Values section that we mentioned earlier.

That’s it. We hope this guide was useful for you and helped you to improve your website building skills with MotoCMS Website Creator. The next tutorial is on the way!

Instructor

  • Nick is the Director of Support at OSTraining and you can find him in almost every area of the site, from answering support requests and account questions to creating tutorials and software.

0 0 votes
Blog Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x