Что такое МотоCMS 3.0?

Если вы зашли в этот раздел, то наверняка заинтересовались нашим продуктом для создания сайтов. Мы с удовольствием подробно расскажем о нем. Наша компания шла к этому моменту очень давно. Все начиналось еще в те времена, когда создание сайтов было делом избранных и чтобы сделать хотя бы простую страничку в сети, нужно разбираться во многих технических вопросах. Начиная от HTML-разметки и заканчивая навыками в обработке картинок. Одним словом, сайты делали только «программисты» – именно так все и называли этих ребят.

Но время шло, появлялись новые инструменты и программы. Первыми ласточками, которые помогли упростить работу стали HTML-редакторы. Они позволяли просто набирать текст, не заботясь о проставлении тэгов — тэги ставились автоматически. Позже появились первые админки. В начале это были не очень удобные системы, работая с которыми вам все равно надо было разбираться с HTML.

Далее пришла эра систем для управления контентов — CMS. Появились системы, которые можно складывать как конструктор, добавляя разные функции. Но прогресс не стоит на месте и на замену громоздким и сложным админкам пришла MotoCMS. Система, предназначенная прежде всего для простых пользователей интернета, которые хотят сделать сайт себе или на заказ. MotoCMS постоянно развивалась, и вот сейчас мы представляем вам последнюю третью версию, которая стала более гибкой и мощной.

МотоCMS 3.0 состоит из шаблона дизайна и системы управления. Вы получаете и готовый сайт, и инструмент для его редактирования.

Итак, приступим! Мы приготовили понятные описания с картинками, чтобы вы могли разобраться во всех функциях МотоCMS 3.0!

Содержание:

  1. Знакомство с MotoCMS 3.0
  2. Установка MotoCMS 3.0
  3. Теперь настроим свой профиль
  4. Медиатека
  5. Дизайн
  6. Настройка виджетов
  7. Реальный пример

 

Знакомство с MotoCMS 3.0

Начинаем мы с посещения сайта MotoCMS 3. Тут мы видим множестов разных вариантов шаблонов, сгруппированных по категориям. Начинаем свой путь с выбора одного из них.

55

При наведении курсора на понравившийся шаблон видим, что у нас есть три варианта:

  1. посмотреть дизайн — вы можете полистать шаблон, увидеть, какие есть разделы и страницы
  2. посмотреть админку — зайти в административную панель для редактирования шаблона
  3. купить – перейти к системе оплаты за шаблон.

56

Нас сегодня будет интересовать второй пункт. Нажимаем на этот пункт любого шаблона и открываем админку.

Клиенты могут пользоваться любым шаблоном в течении 7 дней. Вам достаточно выбрать шаблон, нажать на кнопку «Бесплатно тестировать шаблон». После этого отрывается форма, где нужно указать всего лишь свой электронный адрес и телефон. Вам придет SMS с кодом подтверждения регистрации демо-шаблона. Проделав эту несложную процедуру, вы получите на свою почту письмо, со ссылкой на доступ в админку.

57

После регистации демо, вы получаете доступ в свой личный кабинет.

Кабинеты

Они предназначены для консолидации всех купленных шаблонов и загруженных демо. Зайдя в кабинет, пользователь может переходить между всеми загруженными ранее шаблонами.

Вы можете установить предпочтительный для себя язык интерфейса. В настройках личного профиля указываются ваши имя и пароль, а также телефон, для получения информационных сообщений. Кроме этого, телефон нужен для смены пароля.

4

Мои демо

Вы можете скачивать сколько угодно шаблонов для тестирования. Если вам понравились срезу несколько дизайнов — забирайте их все и изучайте. Каждый шаблон предоставляется бесплатно на 30 дней. В этом разделе вы видите сколько еще осталось дней до окончания срока тестирования. Возле каждого из шаблонов есть кнопки: «купить» и «редактировать». Если вы уже закончили работу с изменением шаблона и готовы его купить, можно перейти к оплате прямо из раздела с вашими демо.

5

Мои покупки

Все шаблоны, которые были вами куплены — собраны здесь. Вы можете переносить шаблон с одного домена на другой, но не больше 10 раз. Это сделано во избежание мошенничества, чтобы недобросовестные пользователи не смогли применять один и тот же шаблон для множества сайтов. Чтобы перепрописать доменное имя и IP, вам нужно деактивировать шаблон. При новой активации можно сменить домен и IP. Подчеркнем еще раз — такую операцию можно выполнить только 10 раз.

6

Моя техподдержка

Когда возникают любые вопросы по работе с шаблоном, вы можете обратиться в службу поддержки. При этом по каждому обращению будет сохранена история, чтобы можно было вернуться к вопросу. Вы можете:

  1. написать письмо

  2. позвонить по телефону

  3. написать в чат скайпа или позвонить

Тут есть разделы, которые помогут вам в работе, это:

  1. часто задаваемые вопросы

  2. руководства и советы

  3. сообщество

7

Какой хостинг выбрать для МотоCMS 3.0?

Чтобы система работала, вам нужно выбрать правильный хостинг. В данном случае на нем обязательно должны быть:

  • РНР 5.3 или 5.4
  • модуль Zend Guard Loader
  • поддержка баз данных MySQL

Проверяйте выбранный вами хостинг на наличие этих составляющих, обычно, на сайте хостинговой компании указано, что включен тот или иной пакет услуг.

Установка MotoCMS 3.0

После покупки шаблона следует установка его на хостинг. Вы получаете архив шаблона, в нем есть все необходимые файлы для работы вашего будущего сайта. Далее берем любой файловый менеджер, какой вам нравится. Из распакованного архива папки site нужно перенести файлы на сервер. В файловом менеджере нужно подключиться к серверу по FTP. В настройках нужно включить двоичный и активный режимы передачи файлов. Такой режим работы можно установить в настройках FileZilla, Cyberduck или WinSCP.
При загрузке на сервер переносите только файлы, а не саму папку в которой они находятся. Нельзя файлы переименовывать или менять регистры букв. Все должно оставаться таким, как мы вам прислали.

Далее переходим к базовым настройкам своей учетной записи.

Мы с вами сейчас проделаем несколько основных шагов для этого.

В адресной строке браузера (там где мы набираем адреса сайтов) указываем прямой путь к папке с шаблоном. Обычно, корневая папка (первая) соответствует доменному имени сайта. Например , домен www.domen.ru папка называется также. Если вы еще не регистрировали доменное имя, то корневая папка с файлами на сервере может называться public_html, htdocs или www.

Далее открывается первое окно для настройки языка. Указываем русский язык и нажимаем кнопку «Продолжить».

8

Системные требования

После этого наша система начнет проверку сервера, совпадают ли все требования. Нужно немного подождать. Сообщение об окончании проверки вы увидите на экране. Нажимаем кнопку «Продолжить….»

9

Переходим к важному этапу – заполнению всех полей базы данных.

10

Теперь заполняем все поля, начиная от верхнего:

  1. Хост — сюда вписываем адрес вашего сайта./li>
  2. Имя пользователя — сюда пишем ваш логин. Не придумывайте слишком сложное, admin – вполне подойдет.
  3. Название базы данных — сюда нужно написать название базы данных, такое как вы указали при ее создании на хостинге. Если при прочтении этого пункта , вы слегка (или не слегка) призадумались и , откровенно говоря, не знаете, что сюда писать — обратитесь в вашу хостинговую компанию. Спросите у них, как называется ваша база данных.
  4. Пароль – тут все понятно. Просто пароль. Учтите, что тут пароль чувствителен к регистру.
  5. Префикс таблицы — по умолчанию указывается moto_. Это поле можно оставить пустым.

Создаем нового пользователя.

Имя первого пользователя вы уже указали при установке. Теперь добавляем к нему адрес электронной почты и дважды в соответствующие поля вводим пароль.

Нажимаем кнопку «Продолжить» и переходим к следующему шагу!

Теперь можете смело налить себе кофейку и спокойненько выполнить два последних шага:

Нажимаем кнопку «Начать»

11

Система сама разворачивает установку шаблона на сервере. Потом появляется сообщение о том, что установка завершена. Опять жмем кнопку «Начать» и переходим к работе с Мото 3.0!

12

Активация Moto 3.0

Чтобы ваш продукт стал полностью работоспособным и «включился» нужно пройти процедуру активации. В ней есть особенность. Активация предполагает прописывание IP и доменного имени. Изменять эти данные можно не более 10 раз. Это связано с тем, что некоторые не очень честные люди пытаются с одним шаблоном сесть на кучу стульев, ну вы понимаете о чем мы?

Переходим к процессу активации:

Возле каждого шаблона есть кнопка «Активируйте, чтоб начать работу с сайтом»

Нажимаем на нее и видим такое окно:

13

Тут нужно указать IP-адрес и Доменное имя. Потом нажимаем «Активировать» и все готово! Если потом потребуется деактивировать, то проделайте такую же процедуру, но укажите другие данные IP и доменного имени.

Настройка Moto 3.0

После установки и активации нашей системы, переходим к ее настройке.

Переходим в раздел меню «Настройки» и нажимаем на первый раздел «Основные»

14

15

Перед нами открывается окно с настройками, тут мы можем написать заголовок своего сайта, адрес и указать язык для формы регистрации.

16

Еще вы можете несколько видоизменить внешний вид ссылок, чтобы они были короче и понятнее.

17

Тут есть два варианта:

“Использовать постоянные ссылки”- установив тут птичку, вы как раз и можете изменять вид ссылки. Например, ссылку http://yoursite.com/?url=my-products можно превратить в http://yoursite.com/my-products.

“Добавить суффикс ‘.html'”- можно добавить суффикс после ссылки. Например, ссылку http://yoursite.com/my-products можно видоизменить в http://yoursite.com/my-products.html.

Переходим к аналитике.

С помощью настроек, которые есть в данном разделе, можно синхронизировать Мото 3.0 с Google Analitycs и Google Webmaster Tools.
14

Открываем раздел Аналитика:

18

Тут у нас есть два блока – “Google Analytics” и “Google Webmaster”.

  • Блок “Google Analytics” поле “Следящий код” . Прописав его в этом поле, вы подключитесь к своей админке Google Analytics. Вам нужно зайти в свою учетную запись и скопировать там соответствующий код.
  • Блок “Google Webmaster”. Анологичный код из Google Webmaster Tools нужно прописать в этом поле – “HTML тэг”.

Не забывайте, что для этих настроек у вас должна быть учетная запись в Google!
19

И теперь обновления!

14

Переходим к разделу «Обновления»

20

Если наши специалисты сделают что-то новенькое, то вы увидите сообщение, что вышло обновление и нужно обновить систему. Выглядеть сообщение будет вот так:

21

Когда работает последняя версия продукта как нужно, то сообщение будет такое:

22

Если вы не хотите в данный момент заниматься обновлением системы, то можете нажать кнопку «Игнорировать» и отложить на 24 часа эту процедуру.

А мы переходим к самому процессу обновления:

23

Ничего сложно нет — вам нужно только немного подождать пока система скачает все нужные файлы и они установятся для вашей админки:

раз…

24

два…

25

и три!

26

Все! Обновление установлено!

Теперь настроим свой профиль.

27

Нажимаем на ник и открывается окно с настройками.

28

Тут можно указать язык для админки и сменить пароль. Для этого нужно ввести действующий, а потом дважды новый.

29

Если же вы забыли пароль, то нажмите «Восстановить пароль», вам на почту придет инструкция по восстановлению пароля.

30

Помните, что при наборе пароля учитывается регистр. Письмо, которое приходит на почту для смены пароля, действует 24 часа.

Адаптивный дизайн сайта.

Чтобы вашим клиентам было удобно заходить на сайт и со сматрфона, и со старионарного компьютера, нам нужно сделать адаптивный дизайн. Мото 3 позволяет сделать удобный дизайн для любого устройства:

  • для ПК
  • планшета
  • мобильного устройства (горизонтальный)
  • мобильного устройства (вертикальный)

Шаблон изначально адаптивный, т.е когда вы добавляете новую страницу, то система сразу создает вариант и для смартфона, и для планшета. Нажимая на соответствующую иконку вы переходите на страничку для определенного экрана.

31

Настройка страницы шаблона.

Начнем самостоятельно создавать новую станицу нашего сайта. Для этого переходим к свойсвам страницы:

32

Для начала нам нужно указать заголовок страницы и ссылку – URL страницы. Вы можете структурировать станицы, закрепив несколько из них за одной – родительской страницей. Изначально, тут проставлен корневой уровень. Вы можете установить какую-то из страниц «родительской» и тогда при работе с админкой вам будет удобнее ориентироваться в структуре всех страниц.

Пока вы редактируете и настраиваете страницу — у нее стоит статус «Черновик» и страница недоступна на сайте. Когда вы поменяете его на «Опубликована» – страница появится на сайте.

33

Переходим к SEO-настройкам.

34

Чтобы продвижение вашего сайта было успешным, нужно прописать ключевые слова и сделать описания страницы. Тут мы указываем:

  • Заголовок — то, что будет указано во вкладке браузера.
  • Описание — несколько слов о содержании страницы.
  • Ключевые слова — слова для поисковых роботов, по которым вы собираетесь продвигать свой сайт. Стоит потратить время и обязательно заполнить все эти реквизиты для каждой из страниц вашего сайта.

Есть еще два интересных реквизита,

  • “Не индексировать”- при установке флажка на этом реквизите, ваша страница не будет индексироваться поисковиками. Его нужно поставить, например, для лэндингов, страниц на которые даются прямые ссылки.
  • “Не следовать”- закрывает все ссылки на странице для поисковых роботов. Например, если на вашей странице стоят ссылки на сторонние ресурсы и вы не хотите, чтобы они учитывались поисковиками.

35

Дизайн страницы

Этот раздел страницы делится на два подраздела – структура и фон. Начнем со структуры:

36

Она может быть расширенная и стандартная. Стандартная система состоит из трех частей — хэдер, основная часть и футер. Если вы используете такой вариант структуры — то становится доступной для редактирования их настройка:

37

Таким образом можно менять настройки верхней и нижней части страницы. Вы можете для себя настроить несколько вариантов шаблонов страницы, с футером и хэдером разной ширины. Создавать шаблон и страницу – очень удобно.

Работа с фоном страницы

В качестве фона для страницы можно выбрать однотонную заливку или какую-то фотографию. Все варианты изменения фона нужно сохранять как отдельный шаблон со своим названием.

38

В шаблоне вы указываете все его свойства.

39

40

Изначально в админке представлены пять наборов цветов, каждый по 5 тонов. Ниже есть еще пять вариантов дополнительных цветов.

41

42

Когда вы нажимаете на любой из цветов, то открывается цветовая палитра и вы выбираете любой тон.

43

Если вам нужно установить вместо однотонного фона картинку, то ее предварительно нужно добавить в медиатеку. Для этого нажимаем кнопку «Загрузить» и выбираем картинку с жесткого диска. Изображение, конечно же, должно быть соответствующего размера и качества. Выбрали нужную картинку – нажимаем «Применить» и все готово!

44

Следует так же указать для изображения нужное размещение фона. Могут быть такие варианты:

  • не масштабировать
  • вписать по ширине
  • вписать по высоте.

Вариант – «Не масштабировать» предполагает использование картинки в ее оригинальном виде и размере.

45

Вариант – «Вписать по ширине» позволит растянуть картинку на весь экран в ширину, но при этом сохранятся все пропорции.

46

Вариант – «Вписать по высоте» растягивает изображение по высоте экрана, пропорции также остаются правильными.

47

Есть еще один полезный инструмент, который позволяет отцентрировать изображение или расположить его к одной из сторон.

48

Мы можем задать на странице повторение фона несколько раз. Для этого тоже есть несколько вариантов:

“Не повторять”- вариант, использующийся по умолчанию. Повторение не используется.
49

“Повторять” – вариант, который позволит повторить изображение несколько раз по всей странице (с использованием оригинальных размеров).
50

“Повторить горизонтально”- соответственно, повторяем горизонтально
51

“Повторить вертикально”- повторяем вертикально.
52

“Зафиксировать”- фиксирует фон. По умолчанию этот параметр включен, и если его отключить, то изображение будет перемещаться при прокрутке страницы.
53

Медиатека

Инструмент, позволяющий работать с медиафайлами — загружать на сайт изображения, видео и другой медиаконтент. Это очень удобная библиотека для хранения, а также для публикации файлов на страницах сайта. Сам функционал Медиатеки довольно прост и позволяет работать с файлами, структурируя их по папкам.

Работа с файлами Медиатеки

Медиатека — пространство, куда можно загружать и сохранять файлы для последующего их использования на сайте.

Чтобы загрузить аудио, видео или картинку в библиотеку, следует помнить, что максимальный размер загружаемого файла 50 МБ.

mediateka_1

Внимание! Для увеличения лимита загружаемых в Медиатеку файлов, необходимо обратиться к специалистам службы технической поддержки хостинг-провайдера для изменения значения параметра upload_max_filesize; post_max_size; memory_limit.

Для загрузки файлов имеется специальная кнопка Загрузить.

Чтобы добавить в Медиатеку файлы, можно просто перетащить их или же воспользоваться кнопкой Выбрать файлы. При успешном выполнении процесса загрузки, система уведомит пользователя такими сообщениями:

mediateka_2

mediateka_3

В случае если часть файлов по какой-то причине не загрузилась в панель управления, во всплывающем окне пользователь сможет увидеть следующую информацию:

mediateka_4

О причине, по которой не все файлы были загружены в Медиатеку, пользователь может узнать, нажав на Подробней.

Поддерживаемые форматы файлов:

  • *.jpeg, *.jpg, *.png, *.gif, *.ico;

  • *.mp3, *.mp4;

  • *.swf, *.avi, *.mp4;

  • *.zip, *.pdf.

Общие настройки Медиатеки

Каждый из файлов имеет свои свойства. Медиатека отображает полную информацию о загруженном файле — дату загрузки, размер, тип и т.д.

URL файла — путь, где лежит файл на сервере;

Имя файла — название файла;

Имя по умолчанию — название файла, которое влияет на SEO и может быть изменено в панели управления шаблоном.

Alt по умолчанию — при включении опции отключения отображения картинок на сайте, вместо них будет выводиться текст, который задан при помощи этого функционала.

mediateka_5

В Медиатеке можно использовать фильтры при поиске файлов:

  • отображение всех файлов;

  • отображение только изображений;

  • отображение только видео.

Корневая папка, которая содержит все добавленные в Медиатеку файлы и созданные папки, будет открываться по умолчанию.

Внимание! Можно создавать неограниченное количество файлов, однако количество подпапок не может превышать пять.

Для созданной папки можно задать свое имя. Количество символов в имени — 2-200. Имя папки можно редактировать и сохранять в настройках. При удалении папки и в случае, если внутри нее находятся файлы, система оповестит пользователя следующим сообщением:

mediateka_6

Дизайн

Популярность ресурса во многом зависит от его внешнего вида. Потому дизайн был и остается одной из важнейших составляющих при создании веб-проектов. Панель управления MotoCMS позволит сделать дизайн вашего сайта еще лучше и удобней для пользователя. Ведь, практически любой элемент на странице можно отредактировать.

Как изменить фон сайта?

Сайты с модным фоном всегда смотрятся более презентабельно. Панель управления MotoCMS позволяет менять фон веб-проекта.

Опция Стиль фона позволяет выбрать ранее созданный бэкграунд из выпадающего списка.

background_1

Чтобы создать новый шаблон, нужно воспользоваться кнопкой Фоны страниц. Базовые фоны, которые уже находятся в списке, удалить невозможно.

Набор настроек фона

Здесь находятся все существующие стили фона, каждый из которых имеет свое название. Стили можно удалять и редактировать, а также создавать новые. Базовый набор настроек удалить невозможно. Для создания нового стиля нужно воспользоваться кнопкой Добавить, а чтобы изменить фон, уже в существующем списке набора настроек фона также нажать на кнопку Добавить.

При сохранении нового фона и в случае если его имя уже существует, система выведет сообщение следующего содержания: «Настройки фона не сохранены».

Наборы настроек фона также можно дублировать.

Название — поле, куда можно ввести имя нового фона, которое в свою очередь должно быть уникальным. Длина имени — от 2 до 200 символов.

Свойства фона

При создании набора настроек фона пользователю станет доступен новый функционал — Свойства фона. Данный инструмент отвечает за внешний вид и отображение фона на сайте.

Цвет — инструмент для выбора или смены цвета фона.

background_2

При подборе нового цвета для фона сайта, пользователь будет иметь возможность сравнивать его с имеющимся. Для этого предусмотрено отображение двух полей для цвета — Текущий и Новый. Текущий — цвет фона, который используется на сайте в данный момент, Новый — цвет, который выбран в качестве альтернативы существующему.

Вместо однотонного фона сайта система также предлагает использовать всевозможные изображения и картинки.

Инструмент Изображение фона позволяет вставить на сайт в качестве бэкграунда картинку из Медиатеки.

background_3

При выборе изображения, которое будет использовано в качестве фона сайта, в блоке свойства фона появятся дополнительные опции для его настройки.

Изображение фона можно изменить или же удалить.

Размер — опция, которая позволяет управлять масштабом изображения фона и определять логику его отображения на сайте. Для пользователя доступно три варианта:

  • Не масштабировать (использование изображения в оригинальном размере);

  • Вписать по ширине (растягивание картинки по всей ширине экрана);

  • Вписать по высоте (растягивание картинки по высоте экрана с сохранением всех пропорций).

Расположение – опция, которая позволяет задать положение изображению относительно краев или центра экрана.

Выпадающий список Повторять. Здесь можно выбрать одну из логик использования повторений картинки. Доступно пять вариантов:

  1. Не повторять;
  2. Повторять (повторение используемого на странице сайта изображения фона);
  3. Повторить горизонтально (повторение изображения фона по горизонтали с сохранением его пропорций);
  4. Повторить вертикально (повторение изображения фона по вертикали с сохранением всех его пропорций);
  5. Зафиксировать (опция, которая позволяет при ее отключении изображению фона менять свое положение при процессе скроллинга. По умолчанию режим Зафиксировать включен).

Как управлять цветами сайта

Чтобы управлять цветами сайта в Свойствах дизайна имеется специальный инструментарий Цвета.

Всего в палитре имеется 25 предустановленных и 5 основных цветов. В зависимости от установленного основного цвета, дополнительно генерируется 5 дополнительных цветов для сайта, каждый из которых можно отредактировать.

color_1

Для открытия палитры цветов и смены оттенка, нужно нажать на любой из подобранных в автоматическом режиме цветов. Для удобства в окне можно видеть текущий цвет, который используется на сайте, и новый, который может быть использован в качестве альтернативы после нажатия на кнопку ОК.

Кнопка Сбросить может использоваться для обнуления всех внесенных изменений. Если все сделано верно, в панели управления появится сообщение: «Цвета были успешно сохранены».

Как работать со стилями текста на сайте

В специально созданном разделе Стили текста можно создать новый стиль или же отредактировать существующий.

style_1

Чтобы добавить новый стиль для текста, который используется на сайте, нужно воспользоваться кнопкой Добавить стиль.

При клике на стиль текста открываются новые настройки.

style_2

Имя стиля — поле для ввода имени стиля.Длина названия стиля может быть 2-200 символов.

Свойства стиля — опция, содержащая основные настройки текста.

Предпросмотр — предварительный просмотр всех внесенных изменений: шрифта, размера текста, цвета и т.д.

B (Bold) — жирный шрифт.
I (Italic) — курсив.
A (Font Color) – цвет шрифта.

Для изменения цвета текста необходимо нажать на A. После этого действия откроется окно, в котором можно воспользоваться предустановленными и дополнительными цветами или же при помощи палитры подобрать свой.

Чтобы видеть разницу между текущим цветом шрифта на сайте и выбранным в качестве альтернативы, в окне имеется два поля для их отображения: Текущий и Новый.

style_3

Высота строки — межстрочный текстовый интервал.

Межстрочный интервал — опция, которая регулирует размер текста.

Свойства ссылок — изменение внешнего вида ссылки. Инструменты Normal и Hover используются для настройки ссылок при наведении на них. По умолчанию используется режим Normal.

Все существующие в панели управления стили можно дублировать и удалять. После удаления стиля в Панели управления появится сообщение следующего содержания: «Стиль был удален», а при дублировании: «Стиль был скопирован».

Категория «Темы» для тонкой настройки сайта MotoCMS

Специальный раздел, в котором находятся настройки для редактирования внешнего вида сайта.

theme_1

Здесь находится набор самых различных настроек, при помощи которых можно изменить дизайн шрифтов, стилей текста, кнопок и т.д. Каждая из тем, которая содержится в данном разделе, имеет Имя, свою Миниатюру и Версию. Каждый из шаблонов уникален, более того, для каждой темы периодически выходят обновления. Тему сайта можно изменить самостоятельно в данном разделе панели управления.

Категория «Темы» включает в себя параметры для изменения цвета шаблона, шрифтов, стилей текста, списков, фона и виджетов.

Цвета

На выбор представлено 30 цветовых схем, 5 из которых являются основными, 20 дополнительными и еще 5 стандартными.

Шрифты

В данном разделе содержится коллекция нестандартных шрифтов из Google Fonts, которые можно использовать для настройки шаблона.

Стили текста

Здесь находится 15 предустановленных стилей.

theme_2

Списки

Чтобы использовать новые стили для списков, необходимо перейти в раздел Списки. Здесь можно управлять списками в текстовом редакторе.

Фоны

Выбрать фон для сайта можно из трех имеющихся фонов, два из которых являются дополнительными.

Виджеты

Данный раздел содержит четыре опции: Изображения, Кнопки, Меню, Разделители.

Изображения

Здесь находятся стили изображения (5 предустановленных).

theme_3

Кнопки

Можно легко изменять дизайн кнопок, которые будут отображаться на сайте. Есть пять основных вариантов выбора стиля кнопки, а также три дополнительных.

theme_4

Меню

Три типа меню:

theme_5

Здесь же имеется опция Разделитель. Представлено три варианта их отображения на сайте:

  • Сплошной;

  • Пунктир;

  • Штриховка.

Виджеты

Виджет представляет собой небольшую программу, которая выполняет определенную функцию и расширяет возможности сайта. Он никак не влияет на работу всей системы, выполняя только одну конкретную задачу.

Виджеты удобны тем, что обеспечивают быстрый доступ к одной из функций сайта и позволяют осуществлять ее настройки в одном месте.

Как вставить видео на сайт при помощи виджета Видео

Виджет Видео позволяет встроить на сайт абсолютно любое видео из популярных видеосервисов YouTube, Vimeo или загрузить с локального компьютера. Нет необходимости искать альтернативные способы добавления видео на сайт, виджет Видео имеет нужные опции для тонкой настройки: URL, отступы.

Видео URL

Опция, которая при наличии валидного URL позволит вставить на сайт любое видео с YouTube или Vimeo.

widget_1

В указанное поле необходимо просто вставить ссылку на видео. При указании неправильной или некорректной информации, будет выводится следующий текст: «Некорректный видео URL».

Отступы

Благодаря данному виджету можно регулировать и самостоятельно устанавливать отступы от блока видео на странице сайта.

widget_2

Для регулирования доступно пять вариантов регулирования отступов:

  • 0 (Нет);

  • Авто;

  • Маленький;

  • Средний;

  • Большой.

По умолчанию виджет использует режим Авто.

Виджет iFrame или как сделать возможным отображение на сайте другого сайта

Использование на сайте виджета iFrame позволит отобразить на сайте еще один или несколько веб-ресурсов. Сайты, которые подгружаются во фрейме, можно легко настроить для корректного отображения.

frame_1

Виджет iFrame позволяет настроить высоту и отступы блока, а также без каких-либо усложнений и корректировки исходного кода ввести в нужное поле URL сайта, который нужно отобразить на странице вашего ресурса.

URL

URL в предоставленное поле рекомендуется вводить в таком формате: http://www.motocms.ru

При неправильном вводе ссылки на сторонний ресурс, система выдаст ошибку с текстом: «Некорректный URL».

Высота

Размеры виджета можно менять. Это позволяет сделать опция «Высота», где минимальное значение составляет 100 пикселей, а максимальное — 1000 пикселей.

Отступы

Благодаря функции «Отступы» можно отредактировать расстояние между остальным контентом на странице сайта и блоком iFrame.

frame_2

Доступно пять вариантов настройки:

  1. 0 (Нет);
  2. Авто;
  3. Маленький;
  4. Средний;
  5. Большой.

По умолчанию виджет использует режим Авто.

Как добавить карту на сайт MotoCMS: виджет Google карта

Разместить карту Google на сайте при помощи встроенного виджета очень просто. С ее помощью можно запросто разместить схему проезда для клиентов, опубликовать панораму улицы и т.д.

Google-map_1

Карту Google можно легко редактировать, для этого доступно несколько опций: ввод адреса, изменение масштаба, высота, отступы.

Google-map_2

Адрес

В данном поле нужно указать адрес, а также страну и город. При вводе этих данных виджет в автоматическом режиме определит местонахождение на карте. Пример: https://www.google.ru/maps/place/Moscow/

Опция Масштаб

Размер и видимость карты внутри непосредственно виджета. Эти параметры можно задавать самостоятельно. Минимальное значение 0, максимальное — 20.

Высота

Данный функционал позволит задавать высоту виджета на странице сайта. Минимальное значение параметра 100 пикселей, максимальное — 5000 пикселей.

Отступы

При помощи этого функционала можно задать расстояние от виджета до остального контента на странице сайта.

Google-map_3

Отступы можно задать сразу с четырех сторон. Доступно пять вариантов настроек:

  1. 0 (Нет);

  2. Авто;

  3. Маленький;

  4. Средний;

  5. Большой.

По умолчанию виджет использует режим Авто. Для выбора другой опции достаточно просто кликнуть по ней.

Можно ли использовать на сайте MotoCMS кнопки социальных сетей?

Социальные кнопки служат в качестве бесплатной рекламы вашего ресурса или статьи. Сегодня люди охотно делятся понравившейся информацией на своих страницах в социальных сетях. Чем интересней будет контент на вашем сайте, тем большее количество пользователей будет ссылаться на него.

Виджет Социальные кнопки создан специально для того, чтобы владелец сайта MotoCMS потратил минимум своего личного времени на размещение его на своих страницах.

social_1

Каждая из кнопок будет вести на указанный в настройках ресурс. Однако сам виджет разместить на странице невозможно. Для начала следует установить на странице специальный контейнер, куда и нужно перетащить необходимые кнопки соцсетей.

Сам виджет разделен на два раздела: Настройки и Дизайн.

Настройки

В данном разделе можно задать ссылки на используемые социальные сети.

social_2

Например: Facebook, Google+, Twitter и др.

В созданном контейнере размещенные кнопки можно выравнять по правому краю, по левому краю или центрировать.

Отступы

Опция отступы нужна для того, чтобы регулировать расстояние другого контента относительно данного виджета.

social_3

Доступно пять вариантов настройки отступов:

  • 0 (Нет);

  • Авто;

  • Маленький;

  • Средний;

  • Большой.

По умолчанию виджет использует режим Авто. Чтобы выбрать любую другую функцию, необходимо просто кликнуть по ней.

Дизайн

Внешнее отображение виджета.

social_4

Есть возможность использования ранее созданных настроек.

Как создать меню на сайте MotoCMS при помощи виджета

Виджет Меню — еще один простейший функционал в панели управления MotoCMS, с помощью которого можно создавать различные виды меню на сайте. Данный виджет предназначен для того, чтобы как реализовывать меню, так и настраивать навигацию по сайту в целом.

Использование виджета Меню на сайте возможно только после создания Контейнера или Ряда. В них и следует после создания перетащить виджет.

Свойства виджета Меню делятся на две части: Настройки и Дизайн.

Раздел Настройки

Данный раздел содержит несколько параметров и опций: Название, Выравнивание, Отступы.

Название

Содержимое меню можно выбрать из выпадающего списка. Чтобы отредактировать меню, в настройках имеется специальная кнопка Редактировать.

Выравнивание

Все содержимое внутри созданного контейнера или ряда можно центрировать, располагать слева или справа. Для пользователя доступны все три варианта смены положения изображений внутри контейнера.

Отступы

Благодаря отступам можно регулировать расстояние другого контента на странице сайта относительно меню.

menu_1

Для пользователя доступно пять вариантов отступов:

  • 0 (Нет);

  • Авто;

  • Малый;

  • Средний;

  • Большой.

Чтобы выбрать нужный вариант отступа, достаточно просто кликнуть по нему.

Раздел Дизайн

Все настройки внешнего вида виджета содержатся здесь.

Можно воспользоваться ранее созданными и сохраненными настройками, а можно заново создать свои.

Для перехода к редактированию структуры меню, необходимо кликнуть по кнопке Редактировать. После совершения этого действия откроется так называемое окно Меню.

menu_2

Для создания нового меню внутри окна есть кнопка Создать новое меню. Здесь необходимо указать имя и нажать на Создать меню. Если все сделано правильно, система выведет сообщение следующего содержания: «Новое меню было успешно создано».

menu_3

Внимание! Стандартное меню удалить невозможно, его можно только дублировать.

Для его дублирования предусмотрен отдельный функционал и кнопка Дублировать. Если все сделано правильно, система выведет сообщение о том, что меню было продублировано. Для удаления меню также есть отдельная кнопка, она находится на панели.

Для добавления нового пункта меню, следует нажать на Добавить новый пункт меню. После чего откроется окно с новыми полями: Название, Действие.

menu_4

Название — имя пункта меню.

Действие — представляет собой выпадающий список. Выбрав определенное действие из него, оно будет незамедлительно выполняться.

Нет — отмена выбранных действий.

Открыть страницу — выбор данного пункта позволит переходить на страницу из списка ниже.

Открыть URL — выполнение перехода по указанной ссылке.

Отправить E-mail — открытие почтового клиента для отправки письма.

Для сохранения всех изменений следует нажать на Сохранить.

Внимание! Можно создавать неограниченное количество пунктов меню, однако не стоит забывать, что глубина подменю составляет два уровня. Пункты меню, которые не были сохранены, будут подсвечиваться синим, их дублировать нельзя. Функция дублирования доступна только для сохраненных пунктов меню.

menu_5

Все пункты меню можно перемещать при помощи курсора мыши. Для этого следует просто зажать и перетащить нужный пункт в нужное место.

menu_6

При перемещении отдельного пункта меню все его подменю также переместятся вместе с ним. Положение пунктов подменю в свою очередь также можно менять по тому же принципу — методом перетаскивания.

Для сохранения изменений, нужно нажать на Сохранить. Если система оповестила о том, что «Меню было сохранено успешно», значит все было сделано правильно.

  1. Каковы возможности виджета Меню?

  2. Какие у виджета меню есть параметры настроек и опции?

  3. Можно ли изменить внешний вид виджета Меню? Как это сделать?

Как работает виджет Разделитель

Горизонтальные и вертикальные линии на страницах сайта можно создать при помощи встроенного в админку MotoCMS виджета Разделитель. Данный функционал важен для более качественной разработки дизайна сайта и визуальной привлекательности его страниц.

div_1

Для редактирования виджета и его настройки доступно два раздела: Настройки, Дизайн.

div_2

Настройки

В данном разделе пользователь может воспользоваться настройками ширины виджета, параметрами выравнивания и отступов.

Ширина — опция, которая отвечает за ширину самого разделителя и выражается в процентах. По умолчанию стоит на отметке 100%.

Выравнивание — функционал, позволяющий выравнять разделитель по левому или правому краям, а также центрировать его относительно страницы, контейнера или ряда.

Отступы — расстояние другого контента относительно данного виджета. Регулируется с четырех сторон.

Пять вариантов настройки отступов виджета:

  • 0 (Нет);

  • Авто;

  • Маленький;

  • Средний;

  • Большой.

Дизайн

В данном разделе можно настроить внешний вид самого виджета. В поле «Набор настроек» может отображаться список ранее созданных и сохраненных настроек.

Создание кнопок на страницах сайта при помощи виджета Кнопка

Чтобы быстро и без труда создать любую кнопку для размещения на сайте, следует обратить свое внимание на специальный виджет, который так и называется Кнопка (Button).

В настройках виджета имеется две вкладки: Настройки, Дизайн.

button_1

Настройки

Здесь можно указать ссылку, на которую будет осуществляться переход после нажатия на кнопку, а также задать ее размер, выравнять и указать параметры отступов.

В выпадающем списке Действие есть возможность выбрать определенное действие, которое будет выполняться при клике на кнопку. Для пользователя доступны четыре варианта действий:

  • Не выбрано (при нажатии на кнопку ничего происходить не будет);

  • Открыть страницу (переход на другую страницу сайта, ее можно выбрать из выпадающего ниже списка);

  • Открыть URL (осуществление перехода по указанной ссылке);
  • Отправить E-mail (открытие почтового клиента для отправки письма).

Размер — данная опция позволяет задать размер кнопки. Доступно три варианта:

  • Большой;

  • Средний;

  • Маленький.

По умолчанию используется режим «Средний». Что касается шрифта, то он подбирается автоматически в зависимости от выбора размера кнопки.

button_2

Отступы — опция позволяет задать расстояние от данного виджета до текста или любого другого контента. Доступно пять вариантов настроек:

  • 0 (Нет);

  • Авто;

  • Маленький;

  • Средний;

  • Большой.

Выравнивание — положение виджета в контейнере и ряде. Доступно три варианта настроек:

  • Слева;

  • По центру;

  • Справа.

Дизайн

Здесь можно настроить внешний вид виджета и его отображение на сайте благодаря ранее сохраненным наборам настроек.

Использование виджета Изображения для размещения картинок на сайте

Для того, чтобы загрузить на страницу сайта MotoCMS изображение, достаточно просто использовать виджет Изображения в админке на внешней панели управления слева.

img_1

В настройках виджета доступны две вкладки: Настройки, Дизайн.

Настройки

Здесь содержатся все основные настройки, которые необходимы для успешного добавления изображения на сайт: URL, Ссылка, Заголовок, Alt текст, Выравнивание, Отступы.

URL файла — добавление изображение в автоматическом режиме из Медиатеки. Для того, чтобы изменить фото, которое добавляется на сайт автоматически, необходимо выбрать новое из Медиатеки и нажать на кнопку «Применить».

img_2

Также автоматически заполнятся поля Заголовок и Alt. Эти данные будут идентичны настройкам изображений в Медиатеке.

Ссылка — позволяет выбрать действие, которое будет выполняться после того, как пользователь кликнет по изображению. Доступно четыре варианта:

  • Не выбрано (никаких действий выполняться не будет);

  • Открыть страницу (переход на другую страницу сайта. Ее можно выбрать из выпадающего списка ниже);

  • Открыть URL (переход по ссылке на другой ресурс);
  • Отправить E-mail (открытие почтового клиента для отправки письма).

Заголовок — важный параметр для SEO-оптимизации — позволяет задать изображению имя. Является метатегом. Для изменения названия изображения, необходимо перейти в Медиатеку.

img_3

Alt — выполняет сразу несколько функций: является метатегом, а при отключении в браузере просмотра картинок, способен выводить текст заголовка изображения. Данный параметр подлежит индексации поисковыми роботами, а потому крайне важен.

Выравнивание — положение изображения в определенном блоке, контейнере или ряде. В полном доступе три варианта:

  • Слева;

  • По центру;

  • Справа.

Отступы — расстояние от картинки до других блоков с контентом. Доступно пять вариантов настройки:

  • 0 (Нет);

  • Авто;

  • Маленький;

  • Средний;

  • Большой.

Дизайн

В данном разделе отображаются списки созданных и сохраненных ранее настроек.

Виджет Текст и создание текстового блока на странице сайта

Иногда случается так, что базовой структуры недостаточно для размещения дополнительного контента именно в том месте сайта, где хочет сам его владелец. Благодаря виджету Текст и его функционалу теперь это можно сделать за несколько секунд.

Текстовый блок можно разместить в любом месте страницы сайта, его можно редактировать, а при необходимости удалить.

text_1

По умолчанию высота виджета Текст составляет 30 пикселей. Однако при вводе текста большого объема высота будет меняться автоматически внутри самого виджета. Для редактирования текста внутри блока используется редактор CKEditor.

text_2

С его помощью можно менять шрифт, цвет текста, его положение и т.д.

Стили текста — опция, позволяющая использовать в работе уже созданные стили текста.

Форматирование — использование в тексте стилей заголовков. Доступны следующие стили:

  • Нормальный;
  • Заголовок 1;
  • Заголовок 2;
  • Заголовок 3;
  • Моноширинный.

Размер шрифта — возможность выбрать размер шрифта, который будет использован в текстовом блоке.

Введенный текст можно выравнять по левому краю, по центру, по правому краю или же по ширине.

Для изменения цвета шрифта используется цветовая палитра.

text_3

Вставить/Редактировать ссылку — данная опция используется для того, чтобы залинковать определенный кусок текста. Ссылку также можно удалить.

Ссылка — функция позволяет задать определенное действие. Доступны:

  • URL (осуществление перехода по ссылке);
  • Якорь (переход в определенное место страницы);
  • E-mail (отправка письма).

Свойства

Отступы — расстояние до блока с текстом с разных сторон. Доступно пять вариантов:

  • 0 (Нет);

  • Авто;

  • Маленький;

  • Средний;

  • Большой.

Для чего нужен виджет Контейнер?

Это наиболее важный виджет, который способствует работе и размещению ряда других виджетов. Виджет Контейнер является незаменимым инструментом для редактирования страниц сайта.

conteiner_1

Сам виджет имеет две вкладки настроек: Настройки, Дизайн.

Настройки

Отступ вне контейнера — расстояние между контейнером и другими элементами страницы сайта.

Отступ в контейнере — расстояние между границами контейнера и содержимого.

conteiner_2

Для изменения расстояния между элементами и границами используется специальный переключатель или же числовой функционал (px).

Дизайн

Здесь расположены блоки для тонких настроек виджета.

conteiner_3

Фон — специальный функционал для изменения внешнего вида виджета Контейнер. Цвет фона по умолчанию — прозрачный. Для изменения цвета используется палитра цветов. Чтобы использовать в качестве фона изображение, необходимо нажать на «+». Для смены фонового изображения необходимо нажать на «Редактировать» после чего в Медиатеке выбрать новую картинку для фона.

conteiner_4

Использовать выбранное изображение можно в трех вариантах:

  • Не масшабируемое (оригинальный размер картинки);

conteiner_5

  • Вписанное по ширине (растягивание картинки по ширине экрана);

conteiner_6

  • Вписанное по высоте (растягивание картинки по высоте экрана).

47

Расположение — возможность задать изображению положение относительно краев экрана или его центра. В выпадающем списке можно выбрать: повторение изображения на странице или же использование только одного изображения (по умолчанию).

Режим «Повторять»

Здесь будет использоваться изображение оригинального размера с несколькими повторениями на странице.

conteiner_8

Повторить горизонтально – повторение оригинального изображения по горизонтали.

conteiner_9

Повторить вертикально — повторение оригинального изображения по вертикали.

conteiner_10

Границы — настройка границ виджета Контейнер. Здесь размещены такие параметры как: стиль, цвет, ширина.

Стиль — изменение внешнего вида границы контейнера:

  • Сплошной;

  • Пунктир;

  • Штриховка.

Цвет — выбор и изменение цвета границ контейнера.

Ширина — установка ширины границ контейнера. Минимальное значение — 0 пикселей, максимальное — 999 пикселей.

Границы — скругление углов контейнера. Минимальное значение — 0 пикселей, максимальное — 999 пикселей.

Как использовать виджет Ряд

Очень важный виджет для работы сайта. Он необходим для размещения ряда других виджетов на страницах сайта MotoCMS. Адаптивности сайта можно достичь именно благодаря виджету Ряд. Стили здесь недоступны.

row_1

В зависимости от виджетов, размещенных внутри виджета Ряд, его высота может быть разной. Его ширина соответствует ширине выбранного элемента структуры.

Виджет Ряд может быть реализован следующим образом:

  • на всю ширину экрана;

  • фиксированный размер.

Структура ряда может быть как одноколоночной, так и содержать сразу несколько колонок. Максимальное количество колонок — 6.

row_2

Каждая из колонок одинакова по ширине, за исключением режима с пятью колонками, где первые три колонки одинаковые и имеют одно значение по ширине, а последние две — имеют другое значение.

Разместить текст в виджете Ряд очень просто, достаточно просто перетащить мышкой нужный текстовый блок. Сами колонки между собой разделены пунктирными линиями. Для удаления ненужного ряда, следует выделить его и нажать на клавиатуре клавишу Delete. Удаление колонок в виджете Ряд — действие необратимое.

Используя все функции и инструменты MotoCMS 3.0 вы сможете самостоятельно созвать отличные сайты и поддерживать их, не привлекая к работе строронних специалистов.

Пример

Теперь перейдем к конкретному примеру – возьмем шаблон MotoCMS 3.0 и переделаем его под свои задачи.

Допустим нам нужно:

  1. изменить цвет фона
  2. добавить новый пункт меню

  3. добавить новую страницу с картинками и описанием.

Выбираем нужный шаблон и заходим в админку.

1

Меняем цвет фона нашего шаблона на более светлый:

2

Заходим в свойства фона и меняем цвет

3

Вот что было:

4

И вот что получилось:

5

Теперь нам показалось, что для этого фона шрифт слишком светлый, сделаем его более темным:

Идем в стили текста:

6

И меняем цвет шрифта на любой другой

7

Теперь переходим к созданию нового раздела:

Переходим в раздел «Страницы» и нажимаем на главное меню:

8

Выбираем нужный нам пункт, справа открываются его свойства:

9

Нажимаем на иконку рядом с «вид меню»

10

Перед нами структура главного меню, куда и добавляем новый пункт

11

Обязательно указываем куда будет вести этот пункт меню, на новую страницу или всплывающее окно

Создаем новую страницу:

Заходим в раздел «Страницы» и жмем кнопку «Добавить»

12

Указываем название новой страницы.

Теперь мы хотим добавить картинку и описание к ней:

13

Выбираем Виджет Image и просто перетаскиваем его на страницу

14

Переходим в Медиатеку. На этом этапе можно выбрать картинку из уже имеющихся или загрузить новую.

15

Мы выбрали картинку, нажали «Применить» и перенесли ее на страницу.

17

Далее просто перетаскивая, разместили в нужном месте страницы.

16

Как видите, все очень просто! Сайты создаются буквально за пару дней.

кнопка

 

На главную