Meet МотоCMS 3.0
- Trial period, reliable hosting provider, catchy domain name
- Getting Started with MotoCMS Admin Panel
- Making new pages for your website
- Transforming your website design
- Most popular widgets in MotoCMS 3 Admin Panel
Trial period, reliable hosting provider, catchy domain name
Step 1. Start trial period
You have always a chance to test your favorite MotoCMS 3 template before purchasing. Please note that free trial period lasts 14 days only. With your demo version you can not just start learning how to make a website, but save much of your time. Purchase own website after the trial period with all modifications and transfer it to your hosting safely.
After choosing your MotoCMS 3 template, click on the “Try FREE for 14 days” button to start your trial. In pop-up write a valid email or sign up with your Twitter or Facebook accounts. Wait a few seconds for your website to be installed and done! Enjoy the whole functionality of MotoCMS website builder without any charges.
Don’t forget to check your in-box for a letter with login details and a direct link to your demo template.
Please, note that you won’t be able to continue our course without a registered trial version.
Step 2. Choose a reliable hosting provider
Before uploading your template files on your hosting, make sure that your provider meets following requirements:
PHP v.5.3 or 5.4;
Zend Guard Loader;
with MySQL database support.
Choosing your hosting provider, keep in mind that BLUEHOST has a special offer for MotoCMS customers. Become a MotoCMS customer and buy hosting with a domain name costs from $3.49 a month. No additional sofware is required. BLUEHOST will brovide you with everything your MotoCMS 3 website needs.
Note that you should purchase BLUEHOST only when you created a good domain name for your website.
Step 3. Come up with a catchy domain name for your website
A few tips on how to create a perfect domain name:
There are a lot of different domains, but .com is best domain for a business website. Choose this domain to start your online business.
Creating your domain name, remember about keywords. Choose a perfect keyword for your domain.
Writing a domain name try to get maximum identity with your brand name. Be correct and prevent misspelling.
Be original and simple.
Come up with a domain name that people can remember.
When you came up with a domain name for your website, choose your BLUEHOST plan, update personal information and select a payment method.
Getting Started with MotoCMS Admin Panel
Here you will be able to see each page of your website. If you need to choose a page, use a list box in the top of dashboard.
You can also edit the layout like you want within several clicks. Edit various elements of each page using simple drag’n’drop.
Aside of editing, you are empowered to copy and remove pages as well as set the home page of your website.
If you click on any element on the layout, you’ll see a toolbar on the left side. It includes a lot of widgets with the help of which you can add more functionality or re-design the entire page. As you scroll down the toolbar, new widgets will appear.
Switching desktop, tablet and mobile modes
In the admin panel powered by MotoCMS you can switch between preview modes for personal computer, tablet and smartphone to look at your website from different points of view. There are two modes for mobile devices: horizontal and vertical.
Your website template is fully responsive from the beginning. So each new page is mobile-friendly and adjusted to all modern mobile devices by default.
Don’t forget to click on the “Save” button to continue customizing your website without any losses in future.
Edit your website styling in the Design category. Here you can customize your website easy, transforming your website color palette, text styles, backgrounds, choosing presets for different widgets and more.
In the Settings of your MotoCMS 3 website you can connect such services as Google Analytics and Google Webmaster Tools to track your website traffic, add commentaries with Disqus and manage general settings such as website’s name, favicon, language etc.
Remember that using tools from Google you should have a Google account.
Continue working with your website
Don’t waste your time and buy your MotoCMS 3 website template shorly after you finish its customization. Click on the “Buy Template with Your Modifications” button, approve your purchase on the checkout and enjoy your MotoCMS 3 website with all modifications.
Making new pages for your website
How to edit website menu
With MotoCMS 3 Admin Panel you can the edit the original menu bar, remove it, or create the complete new one.
Just make a double click on the menu bar or press the “Edit” button to open the menu nesting structure.
Here you can add new menu items, change their position, delete them and more.
Creating a new page
Making new pages for your website is easy. Click on the “Add” button near the page listbox to open a pop-up, where you should write your website name and its URL (the link). You can make a simple structure for your website creating parent pages. Bind several pages together with a parent page to find every needed page instantly.
The page has two statuses: “Draft” and “Published”. Remember that you should publish your “Draft” page to make it available for users.
Working with the page design
Making your page design you should go through two steps: layout and background customization.
Layouts are standard and extended. Standard layouts made up of three segments – the header, the content and the footer.
Extended layouts has customized width of the head and the bottom parts. Set the footer and the header size like you need and enjoy your website to the full extent.
There are two ways to change your website background: set unique color design or upload an image file.
Click on the “Background” section in Design Options to start.
After customization save your background with an original name and use it in future with other background templates.
If you want to color a new background, choose the “Colors” section. You are welcome to use five color sets including 5 tons each. There are also 5 additional colors by default.
If you would like to have background image on a page, add it to Media Library by pressing “+” button. Upload your image by drag’n’dropping it from your device. Consider that your picture should have proper size and quality. Otherwise, it will look really bad.
User-Friendly File Manager
Media Library is a user-friendly file manager, allowing simple management of your personal content in the admin panel. Categorize your media files in pretty intuitive library with different folders. Create or remove any folders in a few clicks.
If you want to add your media files (images, video, audio etc.), click the “Upload” button in Media Library. Then you can click on the “Choose Files” button or simply use drag’n’drop functionality to drop files by hand.
Please, note that maximum upload file size is 2 MB. When you file is successully uploaded, you will be informed:
Recommended file formats:
Images – *.jpeg, *.jpg, *.png, *.gif, *.ico;
Audio – *.mp3, *.mp4;
Video – *.swf, *.avi, *.mp4;
Archives and Other – *.zip, *.pdf.
Media Library Properties
In Media Library you can browse and edit general information about files: uploading date, file size, dimensions and more.
File URL – the link to the file;
File Name – title of the file;
Default Title – title for SEO. Rewrite it anytime in the properties;
Default Alt – if your browser blocks image preview, you will see this text, moving the mouse.
There are a bunch of filters to simplify your search of files:
Displaying all the items;
Displaying only videos;
Displaying only audios;
Displaying only documents;
Displaying only archives;
Some of these filters can be combined. You can use two or three filters at the same time, while the rest of the files won’t be available.
Transforming your website design
Manage backgrounds with choosing a needed color or setting an image as a page background. Keep in mind that you have to give your customized background a name and save it as a separate template before leaving.
After applying an image, choose its size among these options:
The best way of making a perfect background is when your image has the same size with your layout. In this case, you should select the “Original” size for your background.
With the “Cover” size your image width is stretched to full screen.
With the “Contain” size your image height is stretched to full screen.
The “Position” option will stick your image to the background center.
Use one background image several times, if necessary. Switch between “Don’t repeat”, “Repeat”, “Repeat X”, “Repeat Y” options.
“Don’t repeat” – this option is set automatically.
“Repeat” – your image will be repeated within the original image size.
“Repeat X” – horizontal replication of your image.
“Repeat Y” – vertical replication of your image.
“Fixed” is an awesome feature, allowing to adjust a chosen image to the layout. Check the box to fix your background. Note that in this mode your image won’t change its position towards the layout while scrolling.
Managing colors of your website
Click on “Colors” to change your website coloration. Here are presented 5 main colors used for your website. Main colors generate 5 colums with 25 original hues for a website manager to choose a perfect color palette for own web design. If you need more colors, there is also 5 extra colors by default.
If you want to change a color, simply click on it in the color palette. Choosing another tone in the palette, you will be able to compare current and new colors and select the best one.
Click on the “Reset” button, in order to return to the original color design.
Design your text content in “Texts Styles”. Click on the “Add Text Style” button to customize your own text style:
Style Name – give a name to your text style with the length from 2 to 200 symbols.
Style Properties – here you can manage your text style settings.
Preview – see the whole progress before saving.
If you need to select another color for your text style, click on the “A” button. See how it looks like:
Choose needed colors in the palette window. You can also see the difference between the current and the new tones, as well as set your text style transparency level.
Line Height – set the spacing in text.
Letter Spacing – use this option to adjust your text size.
Link Properties – set links’ appearance by choosing between Normal and Hover modes.
Remember that every customized style is possible to copy or remove.
In the “Themes” section there is all you need to customize own website design at one place. You can transform colors, fonts, lists, backrounds and more.
Create a beautiful color palette for your website, choosing between more than 30 colors. Generate your original tones with a fascinating and easy-to-use Color Picker.
Here is an original collection of Google Web Fonts to provide your with your text styles customization.
Use 15 original presets of text styles.
If you need new lists, click on the “Lists” section. Use them with text editor.
There are three ways how to create a background with the admin panel. You can combine them all.
The “Widgets” section consists of 4 categories: Images, Buttons, Menus and Dividers.
5 made-up image styles are available.
Customize design of buttons easy and fast. 5 main and 3 extra button presets are available in the admin panel.
Most popular widgets in MotoCMS 3 Admin Panel
Add any kind of video to your MotoCMS 3 website template from popular video hosting services YouTube and Vimeo. Insert your own video files with Media Library, uploading video from your personal computer. Video widget is the best solution for video URL embeding in MotoCMS 3 admin panel.
Embed the code of your video from Vimeo or YouTube and enjoy this video right on your website. Make sure that the link you added is valid. Otherwise, you will see this notification near the URL field: “Incorrect URL”. Note that URL length is limited to 200 symbols.
With MotoCMS 3 you can also use one of the most popular Google’s services. Google Maps is a great widget that will help your clients to look for your business location much easier. Google Maps properties include Address, Zoom and Height.
Type in your accurate address, including country, city etc. Google Maps will display it by default.
Zoom in or zoom out your location on the map by setting value from 0 to 20.
Make your Google Maps widget higher or lower with setting the height level from 100 to 5000 pixels.
Social Media Widgets
Social networking is another fascinating source, allowing a website owner to get large amount of traffic and promote own business online.
There are two social media widgets in the MotoCMS 3 admin panel that you should pay attention at: Social Buttons and Social Links.
Drop the Social Buttons widget for your website users to share and like the content you publish on your website. Enable or disable buttons, set their position and alignment on the layout. Choose different preview modes to see how the widget will look on different devices.
The Social Links widget contains links to Facebook, Google+, Pinterest, Linkedin, Twitter and Instagram. Add URLs of your social media communities in appropriate fields, set alignment and spacing, as well as choose the widget’s design among 3 made-up presets.
Remember that social media (as well as the rest of widgets in MotoCMS 3 website builder) won’t be able to function without adding a special container on the layout.
The Container widget for MotoCMS 3 website builder is like foundation for a house. It’s the most basic widget that should be in the head of your website structure.
After dropping this widget on the layout, you can manage its Settings and Design.
Margin – clear out space around an element (outside the border).
Padding – clear out space around the content (inside the border) of an element.
Here you can also create Anchor – a link to a particular area of a page. Check the Sticky box to glue the Container widget to the top of the screen.
Here you can customize your Container widget background. Add an image by clicking on the “+” button or choose your favourite color with the fascinating color palette. Container’s background is transparent by default. You can also set the widget’s borders and corners.
This is another must-have widget that can simplify your website structure. This widget is improtant, because Row is the widget that makes your layout responsive. With the Row widget you are able to drop a bunch of other widgets inside your MotoCMS 3 template.
As for the Row widget structure, you can set the number of columns from 1 to 6 or simply disable column spacing by checking the box below. The columns are parted with dashed lines. Bear in mind that after deleting one of the lines in the Row widget you won’t be able to restore this action.
This was the last lesson of our course. We hope it will be helpful for you during learning how to work with the MotoCMS 3 admin panel. Learn every class carefully and you will be create a beautiful and powereful website with our content management system easy as pie.