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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
