Прошла ровно неделя с того момента, как Moto CMS стал доступен русскоязычным пользователям. Мы подошли к этому маленькому рубежу с готовым магазином шаблонов флеш-сайтов на основе нашей панели управления. Сегодня днем на templates.motocms.ru был добавлен 65-й шаблон.
Возьмем на себя смелость утверждать, что большой выбор flash шаблонов MotoCMS позволяет создать сайт практически с любым дизайном и функциональными возможностями.
Давайте разберем подробней на примере.
Осторожно! Большое количество скриншотов.
Возьмем любой flash шаблон из коллекции Moto, чтобы посмотреть, как работают базовые функции, эффекты и инструменты. Добавим новые страницы, изменим цвета и шрифты.
Прежде чем приступить к редактированию шаблона, вам необходимо загрузить файлы на хостинг и установить шаблон. Сделать это вам поможет пошаговое руководство по установке шаблона. Либо же можно просто перейти по ссылке «Демо панели управления», расположенной в каждом шаблоне.
Дальше все просто и интуитивно понятно. Десять шагов, и вы получаете свой собственный, готовый к работе сайт. Итак, поехали:
1. Заставим панель управления разговаривать с нами на понятном языке. Выбираем пункт «Preferences» либо в горизонтальном верхнем меню, либо нажимаем ярлык на панели. Далее «Control Panel Preferences» — «Interface Language».
Выбираем «Русский» в предложенном списке языков.
Ура. Панель управления MotoCMS русифицирована.
2. Выбираем пункт «Мастер» в разделе меню «Файл». Именно с его помощью, шаг за шагом, будет создаваться персонализированный сайт на основе шаблона.
3. Функционал «Мастера» действительно мастерский :). Вы можете редактировать содержимое, изменять структуру и макет, управлять настройками как самого сайта, так и панели управления. Если захочется получить более фундаментальные знания или просто пообщаться с приятными людьми, то выбирайте четвертый пункт — «Помощь и поддержка».
На примере страницы «Products» разберем процесс редактирования существующего шаблона.
Чтобы перейти к этой странице, следуйте по стрелочкам: «Настройки» -> «Мастер» -> «Редактировать содержимое веб-сайта» -> «Редактировать страницы». Здесь вы можете создать новую страницу, нажав кнопку «Добавить» (новая страница может быть как абсолютно чистой, так и с присущей этому шаблону типовой структурой).
Стоит ли говорить, что вы можете без труда переименовать существующую страницу, изменить заголовок и URL в правой панели (см. скриншот выше).
В нашем примере мы изменили название страницы и заголовок на «Продукция». Чтобы отредактировать содержание страницы, нажмите «Редактировать».
Нужная нам страница открывается в основной области редактирования CMS. Изменения можно вносить в любой элемент страницы. Делается это с помощью редактора свойств элемента. При выделении отдельного объекта на странице в правой панели активируется соответствующий редактор.
4. Нам самим не терпится попробовать:). Давайте для начала изменим логотип сайта. Щелкните по текстовой области, чтобы выделить границы логотипа. Свойства текстового объекта появятся в панели справа. Используя WYSIWYG-редактор, вы можете легко изменить размер текста, цвет и применить выравнивание. Также вы можете развернуть элемент, применить различные эффекты, такие как «размытие», «свечение», «тень» и другие. Мы изменили цвет текста логотипа, используя текстовый редактор, который появляется при двойном нажатии на элемент.
Чтобы повернуть объект, подведите курсор мыши к уголку рамки объекта, пока не увидите закругленную стрелочку (см. скриншот ниже), затем нажмите на левую кнопку мыши и вращайте объект в необходимую сторону. На вкладке «Эффекты» выбираем «свечение» и задаем белый цвет.
5. Так как сейчас мы находимся на странице «Продукция», то у вас может возникнуть вопрос: будет ли так отображаться логотип на всех страницах сайта? Да, если вы выберете «Slogan Holder» в поле «Расположение» в верхней панели инструментов.
Не забудьте сохранить изменения, нажав на кнопку «Сохранить». Теперь вы можете увидеть все внесенные изменения на сайте при помощи кнопки «Предпросмотр».
При редактировании шаблона есть одна опасность: все делается настолько просто и интуитивно понятно, что иногда бывает тяжело остановиться. Вернитесь на один скриншот вверх и постарайтесь запомнить эту страницу нормальной, потому что теперь она выглядит вот так:
Как видим, наша недрогнувшая рука не пощадила ни слоганы, ни цветовое оформление, ни расположение пунктов меню и отдельных кнопок, а также их ориентацию в пространстве. И это только начало!
6. Продолжаем эксперименты. На очереди меню сайта. Выберите область меню на странице, где оно есть (в нашем случае это горизонтальная разноцветная полоса с четырьмя кнопками в нижней части страницы «Продукция»). В правой боковой панели вы можете установить свойства меню и добавить некоторые эффекты. Чтобы изменить пункты меню или добавить новые, нажмите кнопку «Редактировать модуль» внизу правой панели или дважды щелкните на само меню на странице. В открывшемся окне (скриншот ниже) вы можете создать новый пункт меню, прописать его имя, задать цвет, а также указать, куда будет переходить пользователь при нажатии на выбранный пункт меню. Чтобы изменить месторасположение модуля меню, просто перетащите его в нужное место.
Таким образом, мы немного изменили цвета меню и применили эффект «Свечение», используя вкладку «Эффекты» в правой боковой панели.
Цвет фона страницы может быть легко изменен, как любой другой элемент контента сайта. Просто нажмите на пустом месте страницы и установите необходимые свойства в правой боковой панели. Хотите добавить изюминку? Используйте возможность перехода с фона страницы (при двойном клике мышью на нем) на любую другую страницу, всплывающее окно или внешний URL. Весь необходимый функционал ждет вас во вкладке «Действия».
Так как мы изменили цвет страницы, будет логично поменять и цвет кнопок на этой странице. Выберите цвет, какой вам необходим, с помощью соответствующего поля во вкладке свойств объекта.
7. Добираемся до содержания. Изменим текстовые сообщения на странице и добавим еще некоторую информацию. Щелкните по тексту, который вы хотите заменить, внутри текстового блока появится курсор, а дальше все как в обычном текстовом редакторе. Удаление текста, добавление, замена шрифта и цвета и другие привычные функции форматирования.
Нам категорически не нравятся изображения на этой странице. Будем менять! Нажмите один раз на картинку для просмотра доступных опций свойств в правой панели. При нажатии на кнопку «Обзор» в «Image» вы перейдете в «Медиатеку», где хранятся все изображения, размещенные в данном шаблоне. Добавить изображение в «Медиатеку» можно нажав кнопку «Добавить» в верхнем левом углу окна.
Далее выбираете необходимое изображение и нажимаете на кнопку «Выбрать» внизу страницы. Старое изображение заменится на новое по умолчанию. Также вы можете применить к изображению эффекты, такие как размытие, колорирование, тень и другие.
Не забудьте сохранить изменения :).
8. Moto CMS также позволяет изменить и фон сайта, а не только отдельной страницы. В качестве фона может быть использована фотография, обои или любое другое изображение, которое сделает ваш flash сайт более привлекательным и уникальным.
Нажмите кнопку «Фото» в левой панели инструментов и войдите в «Медиатеку», добавьте необходимое изображение при помощи кнопки «Добавить» в верхней части экрана. Выделите изображение, нажмите «Выбрать» и разместите объект в необходимом месте. Чтобы фон размещался на заднем плане, позади других объектов, необходимо нажать на иконку «На задний план» в верхней панели инструментов. Фон сайта появится на всех страницах сайта и всплывающих окнах, как только вы выберите слой «website» в меню «Расположение». Изменить ширину или высоту можно при помощи правой боковой панели.
Вот какой фон у нас получился в результате:
Как видите, MotoCMS позволяет легко редактировать любой элемент шаблона. Правая панель управления показывает настройки свойств объектов, верхняя панель редактирует объекты в целом, а левая панель позволяет добавлять модули и элементы на страницу.
9. Возвращаемся к редактированию и внутренней перелинковке. Давайте попробуем соединить раздел «Бренды» на странице «Продукция» с другой страницей через кнопку «Подробнее». Чтобы это сделать, необходимо для начала создать дополнительную страницу.
Нажмите кнопку «Создать» в верхнем левом углу панели управления (см. скриншот). Выберите тип страницы — обычная страница или всплывающее окно. Затем нужно указать, какую именно страницу вы хотите создать — пустую или с образцом содержания. Мы создадим обычную страницу по умолчанию с образцом содержания.
Присваиваем вновь созданной странице имя, заголовок, URL и местоположение страницы в структуре сайта. Назовем нашу новую страницу, например «Рекламные акции».
Какие же могут быть рекламные акции без текста? Разместим информацию на этой странице в модуле «Rich Content Block», который содержит полосу прокрутки, что позволяет размещать в модуле большой объем информации. В левой панели находим кнопку «Модуль» и в раскрывающемся меню выбираем «Rich Content Block». Свойства модуля будут расположены как обычно — в правой боковой панели. Дважды щелкните на модуль, чтоб попасть в область редактирования и заполнить модуль необходимой информацией.
Все, нас уже не остановить :). Давайте теперь добавим видеоролик с YouTube к информации о наших рекламных акциях. Для этого нажимаем кнопку «Модуль» в левой панели и выбираем «Media player Widget». Нажимаем на страницу, чтобы разместить модуль. Двойной щелчок по области модуля переносит нас в режим редактирования. Так как мы решили разместить на сайте видео с YouTube, то выбираем в графе «Типа файла» — «Видео с YouTube». В графе «ID ролика» укажите URL ролика на сайте YouTube, и система автоматически извлечет ID видеоролика.
Дошла очередь до ссылки с одной страницы на другую. Ее будем реализовывать при помощи кнопки «Read more». В левой панели выбираем «Слот» — «Read more Button». Далее ставим кнопку в конце текста в разделе «Бренды», переименовываем ее, например в «Подробнее». Потом переходим на вкладку «Действия» в правой боковой панели. Ставим галочку «Включать» и указываем «перейти на страницу» и страницу «Рекламные акции». Переход также можно сделать не только на страницу, но и на любое всплывающее окно, перейти на внешний URL или открыть файл.
Также, залинковать можно не только элемент, слот или модуль, но и простой текст. Для этого надо выделить необходимое текстовое сообщение, в панели текстового редактора найти ярлычок с изображением звеньев цепи и нажать на него. Далее порядок действий точно такой же, как во вкладке «Действия».
10. Переходим к самому вкусному — наличию встроенного менеджера шрифтов. Он позволяет в оспользоваться нашим Online Font Creator, чтобы добавить неограниченное количество шрифтов на сайт. Также вы можете сделать ваш сайт многоязычным, что позволит посещать его пользователям со всего мира.
SEO-специалисты, следующие два абзаца специально для вас! Много лет бытовало мнение о том, что сайты, созданные с помощью флеш-технологий, невозможно продвигать в поисковых системах. Благодаря MotoCMS вы увидите, что при продвижении флеш-сайта можно успешно использовать инструменты SEO, и он будет проиндексирован всеми основными поисковыми системами.
В настройках веб-сайта вы можете установить уникальные метатеги сайта для каждой страницы и применить такие SEO-инструменты, как Google analytics и Google Webmaster Tools, которые позволят продвигать проект в поисковых системах более эффективно.
Пожалуй, для одного обзора хватит:). Мы рассмотрели основные шаги при создании профессионального и красивого флеш-сайта на базе шаблона из магазина templates.motocms.ru. Поверьте, это только вершина айсберга тех возможностей, которые открываются при использовании Moto CMS и шаблонов, выполненных на ее основе.
Попробуйте самостоятельно реализовать любые, даже самые смелые, идеи при создании сайтов.
Мы всегда рады помочь вам и ответить любые вопросы, касающиеся работы системы Moto flash CMS. На нашем сайте вы можете ознакомиться с разделом FAQ, написать заявку в справочную службу или поделиться опытом на форуме веб-разработчиков.
P. S. Редко какой шаблон на основе Moto CMS стоит дороже $250. Мы иногда сами в шоке от таких цен.
Возьмем на себя смелость утверждать, что большой выбор flash шаблонов MotoCMS позволяет создать сайт практически с любым дизайном и функциональными возможностями.
Давайте разберем подробней на примере.
Осторожно! Большое количество скриншотов.
Возьмем любой flash шаблон из коллекции Moto, чтобы посмотреть, как работают базовые функции, эффекты и инструменты. Добавим новые страницы, изменим цвета и шрифты.
Прежде чем приступить к редактированию шаблона, вам необходимо загрузить файлы на хостинг и установить шаблон. Сделать это вам поможет пошаговое руководство по установке шаблона. Либо же можно просто перейти по ссылке «Демо панели управления», расположенной в каждом шаблоне.
Дальше все просто и интуитивно понятно. Десять шагов, и вы получаете свой собственный, готовый к работе сайт. Итак, поехали:
1. Заставим панель управления разговаривать с нами на понятном языке. Выбираем пункт «Preferences» либо в горизонтальном верхнем меню, либо нажимаем ярлык на панели. Далее «Control Panel Preferences» — «Interface Language».
Выбираем «Русский» в предложенном списке языков.
Ура. Панель управления MotoCMS русифицирована.
2. Выбираем пункт «Мастер» в разделе меню «Файл». Именно с его помощью, шаг за шагом, будет создаваться персонализированный сайт на основе шаблона.
3. Функционал «Мастера» действительно мастерский :). Вы можете редактировать содержимое, изменять структуру и макет, управлять настройками как самого сайта, так и панели управления. Если захочется получить более фундаментальные знания или просто пообщаться с приятными людьми, то выбирайте четвертый пункт — «Помощь и поддержка».
На примере страницы «Products» разберем процесс редактирования существующего шаблона.
Чтобы перейти к этой странице, следуйте по стрелочкам: «Настройки» -> «Мастер» -> «Редактировать содержимое веб-сайта» -> «Редактировать страницы». Здесь вы можете создать новую страницу, нажав кнопку «Добавить» (новая страница может быть как абсолютно чистой, так и с присущей этому шаблону типовой структурой).
Стоит ли говорить, что вы можете без труда переименовать существующую страницу, изменить заголовок и URL в правой панели (см. скриншот выше).
В нашем примере мы изменили название страницы и заголовок на «Продукция». Чтобы отредактировать содержание страницы, нажмите «Редактировать».
Нужная нам страница открывается в основной области редактирования CMS. Изменения можно вносить в любой элемент страницы. Делается это с помощью редактора свойств элемента. При выделении отдельного объекта на странице в правой панели активируется соответствующий редактор.
4. Нам самим не терпится попробовать:). Давайте для начала изменим логотип сайта. Щелкните по текстовой области, чтобы выделить границы логотипа. Свойства текстового объекта появятся в панели справа. Используя WYSIWYG-редактор, вы можете легко изменить размер текста, цвет и применить выравнивание. Также вы можете развернуть элемент, применить различные эффекты, такие как «размытие», «свечение», «тень» и другие. Мы изменили цвет текста логотипа, используя текстовый редактор, который появляется при двойном нажатии на элемент.
Чтобы повернуть объект, подведите курсор мыши к уголку рамки объекта, пока не увидите закругленную стрелочку (см. скриншот ниже), затем нажмите на левую кнопку мыши и вращайте объект в необходимую сторону. На вкладке «Эффекты» выбираем «свечение» и задаем белый цвет.
5. Так как сейчас мы находимся на странице «Продукция», то у вас может возникнуть вопрос: будет ли так отображаться логотип на всех страницах сайта? Да, если вы выберете «Slogan Holder» в поле «Расположение» в верхней панели инструментов.
Не забудьте сохранить изменения, нажав на кнопку «Сохранить». Теперь вы можете увидеть все внесенные изменения на сайте при помощи кнопки «Предпросмотр».
При редактировании шаблона есть одна опасность: все делается настолько просто и интуитивно понятно, что иногда бывает тяжело остановиться. Вернитесь на один скриншот вверх и постарайтесь запомнить эту страницу нормальной, потому что теперь она выглядит вот так:
Как видим, наша недрогнувшая рука не пощадила ни слоганы, ни цветовое оформление, ни расположение пунктов меню и отдельных кнопок, а также их ориентацию в пространстве. И это только начало!
6. Продолжаем эксперименты. На очереди меню сайта. Выберите область меню на странице, где оно есть (в нашем случае это горизонтальная разноцветная полоса с четырьмя кнопками в нижней части страницы «Продукция»). В правой боковой панели вы можете установить свойства меню и добавить некоторые эффекты. Чтобы изменить пункты меню или добавить новые, нажмите кнопку «Редактировать модуль» внизу правой панели или дважды щелкните на само меню на странице. В открывшемся окне (скриншот ниже) вы можете создать новый пункт меню, прописать его имя, задать цвет, а также указать, куда будет переходить пользователь при нажатии на выбранный пункт меню. Чтобы изменить месторасположение модуля меню, просто перетащите его в нужное место.
Таким образом, мы немного изменили цвета меню и применили эффект «Свечение», используя вкладку «Эффекты» в правой боковой панели.
Цвет фона страницы может быть легко изменен, как любой другой элемент контента сайта. Просто нажмите на пустом месте страницы и установите необходимые свойства в правой боковой панели. Хотите добавить изюминку? Используйте возможность перехода с фона страницы (при двойном клике мышью на нем) на любую другую страницу, всплывающее окно или внешний URL. Весь необходимый функционал ждет вас во вкладке «Действия».
Так как мы изменили цвет страницы, будет логично поменять и цвет кнопок на этой странице. Выберите цвет, какой вам необходим, с помощью соответствующего поля во вкладке свойств объекта.
7. Добираемся до содержания. Изменим текстовые сообщения на странице и добавим еще некоторую информацию. Щелкните по тексту, который вы хотите заменить, внутри текстового блока появится курсор, а дальше все как в обычном текстовом редакторе. Удаление текста, добавление, замена шрифта и цвета и другие привычные функции форматирования.
Нам категорически не нравятся изображения на этой странице. Будем менять! Нажмите один раз на картинку для просмотра доступных опций свойств в правой панели. При нажатии на кнопку «Обзор» в «Image» вы перейдете в «Медиатеку», где хранятся все изображения, размещенные в данном шаблоне. Добавить изображение в «Медиатеку» можно нажав кнопку «Добавить» в верхнем левом углу окна.
Далее выбираете необходимое изображение и нажимаете на кнопку «Выбрать» внизу страницы. Старое изображение заменится на новое по умолчанию. Также вы можете применить к изображению эффекты, такие как размытие, колорирование, тень и другие.
Не забудьте сохранить изменения :).
8. Moto CMS также позволяет изменить и фон сайта, а не только отдельной страницы. В качестве фона может быть использована фотография, обои или любое другое изображение, которое сделает ваш flash сайт более привлекательным и уникальным.
Нажмите кнопку «Фото» в левой панели инструментов и войдите в «Медиатеку», добавьте необходимое изображение при помощи кнопки «Добавить» в верхней части экрана. Выделите изображение, нажмите «Выбрать» и разместите объект в необходимом месте. Чтобы фон размещался на заднем плане, позади других объектов, необходимо нажать на иконку «На задний план» в верхней панели инструментов. Фон сайта появится на всех страницах сайта и всплывающих окнах, как только вы выберите слой «website» в меню «Расположение». Изменить ширину или высоту можно при помощи правой боковой панели.
Вот какой фон у нас получился в результате:
Как видите, MotoCMS позволяет легко редактировать любой элемент шаблона. Правая панель управления показывает настройки свойств объектов, верхняя панель редактирует объекты в целом, а левая панель позволяет добавлять модули и элементы на страницу.
9. Возвращаемся к редактированию и внутренней перелинковке. Давайте попробуем соединить раздел «Бренды» на странице «Продукция» с другой страницей через кнопку «Подробнее». Чтобы это сделать, необходимо для начала создать дополнительную страницу.
Нажмите кнопку «Создать» в верхнем левом углу панели управления (см. скриншот). Выберите тип страницы — обычная страница или всплывающее окно. Затем нужно указать, какую именно страницу вы хотите создать — пустую или с образцом содержания. Мы создадим обычную страницу по умолчанию с образцом содержания.
Присваиваем вновь созданной странице имя, заголовок, URL и местоположение страницы в структуре сайта. Назовем нашу новую страницу, например «Рекламные акции».
Какие же могут быть рекламные акции без текста? Разместим информацию на этой странице в модуле «Rich Content Block», который содержит полосу прокрутки, что позволяет размещать в модуле большой объем информации. В левой панели находим кнопку «Модуль» и в раскрывающемся меню выбираем «Rich Content Block». Свойства модуля будут расположены как обычно — в правой боковой панели. Дважды щелкните на модуль, чтоб попасть в область редактирования и заполнить модуль необходимой информацией.
Все, нас уже не остановить :). Давайте теперь добавим видеоролик с YouTube к информации о наших рекламных акциях. Для этого нажимаем кнопку «Модуль» в левой панели и выбираем «Media player Widget». Нажимаем на страницу, чтобы разместить модуль. Двойной щелчок по области модуля переносит нас в режим редактирования. Так как мы решили разместить на сайте видео с YouTube, то выбираем в графе «Типа файла» — «Видео с YouTube». В графе «ID ролика» укажите URL ролика на сайте YouTube, и система автоматически извлечет ID видеоролика.
Дошла очередь до ссылки с одной страницы на другую. Ее будем реализовывать при помощи кнопки «Read more». В левой панели выбираем «Слот» — «Read more Button». Далее ставим кнопку в конце текста в разделе «Бренды», переименовываем ее, например в «Подробнее». Потом переходим на вкладку «Действия» в правой боковой панели. Ставим галочку «Включать» и указываем «перейти на страницу» и страницу «Рекламные акции». Переход также можно сделать не только на страницу, но и на любое всплывающее окно, перейти на внешний URL или открыть файл.
Также, залинковать можно не только элемент, слот или модуль, но и простой текст. Для этого надо выделить необходимое текстовое сообщение, в панели текстового редактора найти ярлычок с изображением звеньев цепи и нажать на него. Далее порядок действий точно такой же, как во вкладке «Действия».
10. Переходим к самому вкусному — наличию встроенного менеджера шрифтов. Он позволяет в оспользоваться нашим Online Font Creator, чтобы добавить неограниченное количество шрифтов на сайт. Также вы можете сделать ваш сайт многоязычным, что позволит посещать его пользователям со всего мира.
SEO-специалисты, следующие два абзаца специально для вас! Много лет бытовало мнение о том, что сайты, созданные с помощью флеш-технологий, невозможно продвигать в поисковых системах. Благодаря MotoCMS вы увидите, что при продвижении флеш-сайта можно успешно использовать инструменты SEO, и он будет проиндексирован всеми основными поисковыми системами.
В настройках веб-сайта вы можете установить уникальные метатеги сайта для каждой страницы и применить такие SEO-инструменты, как Google analytics и Google Webmaster Tools, которые позволят продвигать проект в поисковых системах более эффективно.
Пожалуй, для одного обзора хватит:). Мы рассмотрели основные шаги при создании профессионального и красивого флеш-сайта на базе шаблона из магазина templates.motocms.ru. Поверьте, это только вершина айсберга тех возможностей, которые открываются при использовании Moto CMS и шаблонов, выполненных на ее основе.
Попробуйте самостоятельно реализовать любые, даже самые смелые, идеи при создании сайтов.
Мы всегда рады помочь вам и ответить любые вопросы, касающиеся работы системы Moto flash CMS. На нашем сайте вы можете ознакомиться с разделом FAQ, написать заявку в справочную службу или поделиться опытом на форуме веб-разработчиков.
P. S. Редко какой шаблон на основе Moto CMS стоит дороже $250. Мы иногда сами в шоке от таких цен.
