Modify the MotoCMS template beyond recognition. 10 easy steps
It has been exactly one week since the Moto CMS became available to Russian-speaking users. We came to this small line with a ready-made flash website template store based on our control panel. This afternoon, the 65th template was added to templates.motocms.ru.
We dare to assert that a large selection of MotoCMS flash templates allows you to create a website with almost any design and functionality.
Let's take a closer look at the example.
')
Caution! A large number of screenshots.
Take any flash template from the Moto collection to see how the basic functions, effects and tools work. Add new pages, change colors and fonts.
Before you start editing the template, you need to upload files to the hosting and install the template. Step-by-step guide on template installation will help you to do this. Or you can simply follow the link “Demo Control Panel” located in each template.
Then everything is simple and intuitive. Ten steps and you get your own website, ready to go. So, let's go:
1. Make the control panel talk to us in a clear language. Choose “Preferences” either in the horizontal top menu, or click the shortcut on the panel. Next "Control Panel Preferences" - "Interface Language".
Select "Russian" in the proposed list of languages.
Hooray. MotoCMS control panel is Russified.
2. Select the item "Master" in the menu "File". It is with his help, step by step, that a personalized website will be created based on a template.
3. The “Masters” functional is really masterful :). You can edit the content, change the structure and layout, manage the settings of the site itself, and the control panel. If you want to get more fundamental knowledge or just chat with nice people, then choose the fourth item - “Help and Support”.
Using the “Products” page as an example, let's analyze the process of editing an existing template.
To go to this page, follow the arrows: “Settings” -> “Wizard” -> “Edit Website Content” -> “Edit Pages”. Here you can create a new page by clicking the “Add” button (a new page can be either completely clean or with a typical structure inherent in this template).
Needless to say, you can easily rename an existing page, change the title and URL in the right pane (see the screenshot above).
In our example, we changed the page title and title to “Products”. To edit the content of the page, click "Edit."
The page we need opens in the main CMS editing area. Changes can be made to any element of the page. This is done using the element's property editor. When you select a separate object on the page in the right pane, the corresponding editor is activated.
4. We ourselves can not wait to try :). Let's first change the site logo. Click on the text area to highlight the borders of the logo. The properties of the text object appear in the panel on the right. Using the WYSIWYG editor, you can easily change the text size, color and apply alignment. You can also expand an element, apply various effects such as “blur”, “glow”, “shadow” and others. We changed the text color of the logo using a text editor that appears when you double-click on an element.
To rotate an object, move the mouse cursor to the corner of the object frame until you see a rounded arrow (see the screenshot below), then click on the left mouse button and rotate the object in the desired direction. On the "Effects" tab, select "glow" and set the white color.
5. Since we are now on the "Products" page, then you may be wondered: will the logo appear on all pages of the site in this way? Yes, if you select “Slogan Holder” in the “Location” field in the top toolbar.
Do not forget to save the changes by clicking on the “Save” button. Now you can see all the changes made on the site using the "Preview" button.
When editing a template, there is one danger: everything is done so simply and intuitively that it is sometimes hard to stop. Go back one screenshot and try to remember this page is normal, because now it looks like this:
As you can see, our unwavering hand has not spared neither slogans, nor color design, nor the location of menu items and individual buttons, as well as their orientation in space. And this is just the beginning!
6. We continue the experiments. Next in line is the site menu. Select the menu area on the page where it is (in our case it’s a horizontal multi-colored bar with four buttons at the bottom of the Products page). In the right sidebar you can set the menu properties and add some effects. To change menu items or add new ones, click the Edit Module button at the bottom of the right pane or double-click on the menu itself on the page. In the window that opens (screenshot below) you can create a new menu item, register its name, set a color, and also specify where the user will go when clicking on the selected menu item. To change the location of the menu module, simply drag it to the desired location.
Thus, we slightly changed the colors of the menu and applied the “Glow” effect using the “Effects” tab in the right sidebar.
The background color of the page can be easily changed, like any other element of the site content. Just click on a blank page and set the necessary properties in the right sidebar. Want to add zest? Use the ability to go from the page background (by double-clicking on it) to any other page, pop-up window or external URL. All the necessary functionality is waiting for you in the "Actions" tab.
Since we have changed the color of the page, it will be logical to change the color of the buttons on this page. Select the color you want using the corresponding field in the object properties tab.
7. Getting to the content. Change the text messages on the page and add some more information. Click on the text you want to replace, a cursor will appear inside the text block, and then everything will be just like in a regular text editor. Delete text, add, replace font and color and other familiar formatting features.
We absolutely do not like the images on this page. We will change! Click once on the picture to view the available property options in the right pane. When you click on the “Browse” button in “Image”, you will be transferred to the “Media Library”, where all images placed in this template are stored. You can add an image to the Media Library by clicking the Add button in the upper left corner of the window.
Next, select the desired image and click on the "Select" button at the bottom of the page. The old image will be replaced with the new one by default. You can also apply effects to the image, such as blur, color, shadow and others.
Do not forget to save the changes :).
8. Moto CMS also allows you to change the background of the site, not just a single page. The background can be a photo, wallpaper or any other image that will make your flash site more attractive and unique.
Click the "Photo" button in the left toolbar and enter the "Media Library", add the desired image using the "Add" button at the top of the screen. Select the image, click "Select" and place the object in the desired location. In order for the background to be placed in the background, behind other objects, you need to click on the "In the background" icon in the top toolbar. The site background will appear on all pages of the site and pop-up windows as soon as you select the “website” layer in the “Location” menu. You can change the width or height using the right sidebar.
Here is the background we got as a result:
As you can see, MotoCMS allows you to easily edit any element of the template. The right control panel shows the settings of object properties, the top panel edits objects as a whole, and the left panel allows you to add modules and elements to the page.
9. Back to editing and internal relink. Let's try to connect the "Brands" section on the "Products" page to another page via the "Details" button. To do this, you must first create an additional page.
Click the "Create" button in the upper left corner of the control panel (see screenshot). Choose a page type - a regular page or a pop-up window. Then you need to specify which page you want to create - empty or with a sample of the content. We will create a regular default page with a sample of the content.
We assign the newly created page the name, title, URL and location of the page in the structure of the site. Let's name our new page, for example, "Promotions".
What can be promotions without text? Place the information on this page in the “Rich Content Block” module, which contains a scroll bar that allows you to place a large amount of information in the module. In the left panel we find the “Module” button and in the drop-down menu select “Rich Content Block”. The properties of the module will be located as usual - in the right sidebar. Double-click on the module to get to the editing area and fill in the module with the necessary information.
All, we will not stop :). Let's now add a YouTube video to our promotions. To do this, click the "Module" button in the left pane and select "Media player Widget". Click on the page to place the module. Double clicking on the module area takes us to edit mode. Since we decided to post a video from YouTube on the site, we select in the column “File Type” - “Video from YouTube”. In the “Video ID” column, enter the video URL on YouTube, and the system will automatically extract the video ID.
Turn came to links from one page to another. We will implement it using the “Read more” button. In the left pane, select "Slot" - "Read more Button". Next, put the button at the end of the text in the "Brands" section, rename it, for example, in "Details". Then go to the “Actions” tab in the right sidebar. We tick the "Include" and specify "go to the page" and the page "Promotions". You can also make a transition not only to the page, but also to any pop-up window, go to an external URL, or open a file.
Also, you can link not only an element, slot or module, but also plain text. To do this, select the necessary text message, in the text editor panel, find the tag with the image of chain links and click on it. Further, the procedure is exactly the same as in the "Actions" tab.
10. Go to the most delicious - the presence of a built-in font manager. It allows you to use our Online Font Creator to add an unlimited number of fonts to the site. You can also make your site multilingual, which will allow users from all over the world to visit it.
SEO experts, the following two paragraphs are for you! For many years, it was believed that websites created using flash technologies cannot be promoted in search engines. Thanks to MotoCMS, you will see that when promoting a flash site you can successfully use SEO tools and it will be indexed by all major search engines.
In the website settings, you can set unique website meta tags for each page and use SEO tools like Google analytics and Google Webmaster Tools that will allow you to promote your project in search engines more effectively.
Perhaps, for one review is enough :). We reviewed the main steps in creating a professional and beautiful flash site based on a template from the templates.motocms.ru store. Believe me, this is only the tip of the iceberg of the opportunities that open when using Moto CMS and templates made on its basis.
Try to independently implement any, even the most daring, ideas when creating websites.
We are always happy to help you and answer any questions regarding the operation of the Moto flash CMS system. On our site you can read the FAQ section, write a request to the help desk or share experiences on the web developers forum .
PS Rarely which template based on Moto CMS costs more than $ 250. We sometimes are shocked by such prices.
We dare to assert that a large selection of MotoCMS flash templates allows you to create a website with almost any design and functionality.
Let's take a closer look at the example.
')
Caution! A large number of screenshots.
Take any flash template from the Moto collection to see how the basic functions, effects and tools work. Add new pages, change colors and fonts.
Before you start editing the template, you need to upload files to the hosting and install the template. Step-by-step guide on template installation will help you to do this. Or you can simply follow the link “Demo Control Panel” located in each template.
Then everything is simple and intuitive. Ten steps and you get your own website, ready to go. So, let's go:
1. Make the control panel talk to us in a clear language. Choose “Preferences” either in the horizontal top menu, or click the shortcut on the panel. Next "Control Panel Preferences" - "Interface Language".
Select "Russian" in the proposed list of languages.
Hooray. MotoCMS control panel is Russified.
2. Select the item "Master" in the menu "File". It is with his help, step by step, that a personalized website will be created based on a template.
3. The “Masters” functional is really masterful :). You can edit the content, change the structure and layout, manage the settings of the site itself, and the control panel. If you want to get more fundamental knowledge or just chat with nice people, then choose the fourth item - “Help and Support”.
Using the “Products” page as an example, let's analyze the process of editing an existing template.
To go to this page, follow the arrows: “Settings” -> “Wizard” -> “Edit Website Content” -> “Edit Pages”. Here you can create a new page by clicking the “Add” button (a new page can be either completely clean or with a typical structure inherent in this template).
Needless to say, you can easily rename an existing page, change the title and URL in the right pane (see the screenshot above).
In our example, we changed the page title and title to “Products”. To edit the content of the page, click "Edit."
The page we need opens in the main CMS editing area. Changes can be made to any element of the page. This is done using the element's property editor. When you select a separate object on the page in the right pane, the corresponding editor is activated.
4. We ourselves can not wait to try :). Let's first change the site logo. Click on the text area to highlight the borders of the logo. The properties of the text object appear in the panel on the right. Using the WYSIWYG editor, you can easily change the text size, color and apply alignment. You can also expand an element, apply various effects such as “blur”, “glow”, “shadow” and others. We changed the text color of the logo using a text editor that appears when you double-click on an element.
To rotate an object, move the mouse cursor to the corner of the object frame until you see a rounded arrow (see the screenshot below), then click on the left mouse button and rotate the object in the desired direction. On the "Effects" tab, select "glow" and set the white color.
5. Since we are now on the "Products" page, then you may be wondered: will the logo appear on all pages of the site in this way? Yes, if you select “Slogan Holder” in the “Location” field in the top toolbar.
Do not forget to save the changes by clicking on the “Save” button. Now you can see all the changes made on the site using the "Preview" button.
When editing a template, there is one danger: everything is done so simply and intuitively that it is sometimes hard to stop. Go back one screenshot and try to remember this page is normal, because now it looks like this:
As you can see, our unwavering hand has not spared neither slogans, nor color design, nor the location of menu items and individual buttons, as well as their orientation in space. And this is just the beginning!
6. We continue the experiments. Next in line is the site menu. Select the menu area on the page where it is (in our case it’s a horizontal multi-colored bar with four buttons at the bottom of the Products page). In the right sidebar you can set the menu properties and add some effects. To change menu items or add new ones, click the Edit Module button at the bottom of the right pane or double-click on the menu itself on the page. In the window that opens (screenshot below) you can create a new menu item, register its name, set a color, and also specify where the user will go when clicking on the selected menu item. To change the location of the menu module, simply drag it to the desired location.
Thus, we slightly changed the colors of the menu and applied the “Glow” effect using the “Effects” tab in the right sidebar.
The background color of the page can be easily changed, like any other element of the site content. Just click on a blank page and set the necessary properties in the right sidebar. Want to add zest? Use the ability to go from the page background (by double-clicking on it) to any other page, pop-up window or external URL. All the necessary functionality is waiting for you in the "Actions" tab.
Since we have changed the color of the page, it will be logical to change the color of the buttons on this page. Select the color you want using the corresponding field in the object properties tab.
7. Getting to the content. Change the text messages on the page and add some more information. Click on the text you want to replace, a cursor will appear inside the text block, and then everything will be just like in a regular text editor. Delete text, add, replace font and color and other familiar formatting features.
We absolutely do not like the images on this page. We will change! Click once on the picture to view the available property options in the right pane. When you click on the “Browse” button in “Image”, you will be transferred to the “Media Library”, where all images placed in this template are stored. You can add an image to the Media Library by clicking the Add button in the upper left corner of the window.
Next, select the desired image and click on the "Select" button at the bottom of the page. The old image will be replaced with the new one by default. You can also apply effects to the image, such as blur, color, shadow and others.
Do not forget to save the changes :).
8. Moto CMS also allows you to change the background of the site, not just a single page. The background can be a photo, wallpaper or any other image that will make your flash site more attractive and unique.
Click the "Photo" button in the left toolbar and enter the "Media Library", add the desired image using the "Add" button at the top of the screen. Select the image, click "Select" and place the object in the desired location. In order for the background to be placed in the background, behind other objects, you need to click on the "In the background" icon in the top toolbar. The site background will appear on all pages of the site and pop-up windows as soon as you select the “website” layer in the “Location” menu. You can change the width or height using the right sidebar.
Here is the background we got as a result:
As you can see, MotoCMS allows you to easily edit any element of the template. The right control panel shows the settings of object properties, the top panel edits objects as a whole, and the left panel allows you to add modules and elements to the page.
9. Back to editing and internal relink. Let's try to connect the "Brands" section on the "Products" page to another page via the "Details" button. To do this, you must first create an additional page.
Click the "Create" button in the upper left corner of the control panel (see screenshot). Choose a page type - a regular page or a pop-up window. Then you need to specify which page you want to create - empty or with a sample of the content. We will create a regular default page with a sample of the content.
We assign the newly created page the name, title, URL and location of the page in the structure of the site. Let's name our new page, for example, "Promotions".
What can be promotions without text? Place the information on this page in the “Rich Content Block” module, which contains a scroll bar that allows you to place a large amount of information in the module. In the left panel we find the “Module” button and in the drop-down menu select “Rich Content Block”. The properties of the module will be located as usual - in the right sidebar. Double-click on the module to get to the editing area and fill in the module with the necessary information.
All, we will not stop :). Let's now add a YouTube video to our promotions. To do this, click the "Module" button in the left pane and select "Media player Widget". Click on the page to place the module. Double clicking on the module area takes us to edit mode. Since we decided to post a video from YouTube on the site, we select in the column “File Type” - “Video from YouTube”. In the “Video ID” column, enter the video URL on YouTube, and the system will automatically extract the video ID.
Turn came to links from one page to another. We will implement it using the “Read more” button. In the left pane, select "Slot" - "Read more Button". Next, put the button at the end of the text in the "Brands" section, rename it, for example, in "Details". Then go to the “Actions” tab in the right sidebar. We tick the "Include" and specify "go to the page" and the page "Promotions". You can also make a transition not only to the page, but also to any pop-up window, go to an external URL, or open a file.
Also, you can link not only an element, slot or module, but also plain text. To do this, select the necessary text message, in the text editor panel, find the tag with the image of chain links and click on it. Further, the procedure is exactly the same as in the "Actions" tab.
10. Go to the most delicious - the presence of a built-in font manager. It allows you to use our Online Font Creator to add an unlimited number of fonts to the site. You can also make your site multilingual, which will allow users from all over the world to visit it.
SEO experts, the following two paragraphs are for you! For many years, it was believed that websites created using flash technologies cannot be promoted in search engines. Thanks to MotoCMS, you will see that when promoting a flash site you can successfully use SEO tools and it will be indexed by all major search engines.
In the website settings, you can set unique website meta tags for each page and use SEO tools like Google analytics and Google Webmaster Tools that will allow you to promote your project in search engines more effectively.
Perhaps, for one review is enough :). We reviewed the main steps in creating a professional and beautiful flash site based on a template from the templates.motocms.ru store. Believe me, this is only the tip of the iceberg of the opportunities that open when using Moto CMS and templates made on its basis.
Try to independently implement any, even the most daring, ideas when creating websites.
We are always happy to help you and answer any questions regarding the operation of the Moto flash CMS system. On our site you can read the FAQ section, write a request to the help desk or share experiences on the web developers forum .
PS Rarely which template based on Moto CMS costs more than $ 250. We sometimes are shocked by such prices.
Source: https://habr.com/ru/post/110008/
All Articles