How to Customize a MotoCMS 3 Template: The First 3 Steps

How to Customize a MotoCMS 3 Template: The First 3 Steps

Welcome to another tutorial, dedicated to the MotoCMS website creator. Previously, we reviewed the most basic areas of the admin panel.

In this chapter, you will learn how to get started with customizing your MotoCMS 3 responsive template. We will show you how you can add a logo to your website, edit its brand name and add a navigation menu.

Uploading your logo with Media Library

A logo is an essential part of any branding campaign. If you have a made-up image file that portrays your brand logo, you can upload it to your MotoCMS 3 website creator easily via Media Library.

image05

This drag-and-drop file manager, with an intuitive interface, is aimed at housing all your media files at one place. Here you can also edit a file's properties, as well as create separate folders to structure the uploaded files in your personal way.

Media Library supports the following file extensions:

images - jpeg., .jpg, .png, .gif, .ico.
audio - .mp3, .mp4.
video - .swf, .avi, .mp4.
documents - .pdf, .djv, .djvu, .doc, .docx, .gdoc, .rtf, .rtx, .txt, .xls, .xlsx, .ots, .odt, .xml, .ppt, .pptx, .pps, .log
archives - .zip, .rar, .7z, .tar, .tgz, .gz, .gzip, .bz2

To add your logo or any other file, you don’t have to go to Media Library directly. You can just make a double click on the widget you are about to edit. In our case, it is an Image widget that will contain logo.

image07

Once you switch on Media Library, click on the Upload button to add your file or just drop it to the required area.

image06

Please, note that the maximum uploading file size should be up to 2 MB. If you need to upload files with larger size, ask for your hosting provider to increase the value of the following server extensions: upload_max_filesize; post_max_size; memory_limit.

If you need to edit your picture, you can do this right after uploading it thanks to a built-in photo editor. Here are all the tools you need to enhance, crop, frame and resize your image or add some effects.

image09

Click the Edit button on your image thumbnail in Media Library while hovering to activate the photo editor.

image08

Adding your brand name with Text Styles

Text customization in the MotoCMS 3 website creator requires neither coding skills, nor any other kind of extra knowledge. Just make a double click on your website title to change it. Note that you can edit any text across your website in the same way.

image01

In the MotoCMS 3 website creator, there is a collection of Google Web Fonts you can use free to entice text content of your website. You can pick any text style you want and apply it to all lines, headlines or titles at once. To change a text style, click on the Text Styles section on the Design tab of Dashboard.

image00

Here is a wide range of ready-made presets, allowing you to apply any text style you want without any preparations. The feature of creating your own presets is also available.

image03

Manage everything about your text content and edit its properties, including color, size, letter spacing and more.

Editing a navigation menu

A menu is not just the navigation center of your website. It is also a widget, which you can edit according to your personal requirements. In the properties on the right side of the admin panel, you can pick your menu design preset, set alignment and spacing, as well as edit your menu structure.

image02

The menu bar has the form of a nesting tree, where you can add a new menu item or copy and delete the one that already exists. To change the position of an item (or a group of items), drag and drop it to the area above or below.

image04

That’s it for now. It was only the beginning of our walk through editing your website with the MotoCMS responsive website builder. In the next tutorial, we will continue the customization process of a MotoCMS 3 template. Stay tuned!