Знакомство с Moto HTML

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

Содержание:

  1. Загрузка демо
  2. Основные принципы настройки шаблона MotoCMS
  3. Общие сведения о работе MotoCMS
  4. Настройки системы
  5. Виджеты – Общая категория
  6. Виджеты – Меню и Форма обратной связи
  7. Виджеты — Галереи

Загрузка демо

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

Ну вот выбрали вы самый классный шаблон, теперь переходим с его настройке и редактированию под ваш индивидуальный сайт. Первый шаг — это получить демо.

1

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

2

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

3

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

Основные принципы настройки шаблона MotoCMS.

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

Если же вы уже уверенно работаете с шаблонами MotoCMS, то смело покупайте нужный шаблон и готовьте его к работе.

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

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

4

Все файлы нужно разархивировать и загрузить папку “site” на сервер. Откройте программу для работы с FTP (например, FileZilla) и загрузите содержимое папки “site” на сервер, используя двоичный и активный режимы передачи. Следует использовать одну из рекомендуемых программ: FileZilla, Cyberduck, WinSCP. Саму папку переносить не нужно, только ее содержимое.

Первый запуск MotoCMS:

Чтобы запустить первый раз админку нужно добавить после доменного имени вашего сайта /admin и заходим в панель управления. При первом запуске система сама протестирует сервер и если что-то будет не так, то вы увидите сообщение об ошибке.

Настройка панели управления

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

Шаг 1.

Нас приветствует админка MotoCMS. На первой вкладке мы просто видим приветственное текстовое сообщение. Переходим к следующему шагу.

5

Шаг 2.

Тут вы выбираем нужный язык из списка

6

Шаг 3.

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

7

Шаг 4.

Последняя закладка в этом разделе настройке позволяет указать заголовок вашего будущего сайта.

8

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

Активация

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

9

Все поля заполнены автоматически, вам остается только нажать кнопку «Активировать»

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

Общие сведения о работе MotoCMS

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

10

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

Вот так выглядит главная панель инструментов:

11

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

12

Страницы могут быть двух типов: двух или трехуровневые.

13

Создавая новую страницу вам нужно внести минимальные необходимые сведения:

  • название
  • заголовок
  • URL

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

14

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

15

Идем далее по главной панели инструментов системы.

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

16

Кнопка «Удалить» позволяет удалить страницу или всплывающее окно, на котором в данный момент вы находитесь.

17

Кнопка «Сбросить» позволяет отменить все внесенные изменения, точкой отсчета будет либо вход в панель управления, либо момент, когда была нажата кнопка «Сохранить»

18

>Кнопка «Настройки» позволяет открыть окно, в котором можно настроить многие параметры сайта.

19

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

20

Теперь переходим к панели редактирования.

21

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

Уже привычные стрелочки служат для отмены действий

22

точно также как и понятные всем пиктограммы, означающие «вырезать» «скопировать» и «вставить»

23

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

24

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

25

Кнопка «Сохранять пропорции» позволяет менять размер объекта, сохраняя при этом его пропорции. 26

Кнопки «Дублировать выбранный объект» и «Удалить выбранный объект» позволяют скопировать объект на странице и удалить его при необходимости.
27

Кнопка «Растеризировать выбранный объект» дает возможность сделать из выделенного объекта (текст, фигура) изображение. Следует помнить, что после данного действия изображения сразу переходят в режим «Не масштабировать», т.е. в нем размер менять не получится.
29

Кнопка «Закрепить объект» дает возможность заблокировать объект на странице. Это удобно при редактировании, чтобы данный объект оставался без изменений.
30

Кнопка «Скрыть объект» делает объект на странице невидимым.
31

Кнопка «Открепить все объекты» предоставляет возможность разблокировать объект на странице.

32

Кнопка «Привязка» позволяет включать или отключать режим появления линий связи. Это удобно при перемещении объекта по странице.34

Панель управления для MotoCMS

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

35

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

36

Как видите, для текста предусмотрены все функции для его центрирования и работы со шрифтами.

Верхнее горизонтальное меню админки.

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

37

Сейчас быстро пройдемся по каждому из пунктов.

Файл

38

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

Основное окно:

39

Редактировать содержимое сайта

40

Изменить структуру и макет веб-сайта

41

Изменить настройки сайта или панели управления

42

Оставшиеся инструменты просты и понятны: «Помощь и поддержка» откроет для вас в новой вкладке браузера раздел с технической поддержкой.

Кнопка «Посмотреть сайт» позволяет проверить сделанные изменения, открыв сайт в новой вкладке.

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

Правка

43

В этом разделе вы найдете уже знакомые инструменты:

  • отменить действие
  • расположить объект на заднем или переднем плане
  • дублировать
  • удалить

Содержимое

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

44

Меню

В этом разделе вы выбираете какой из разделов меню нужно редактировать.

45

Страницы

46

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

47

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

48

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

49

Виждеты

Более детально об этих объектах мы расскажем немного позже, пока вам просто достаточно знать что они есть. И что они бывают разные. Чтобы открыть какой-то из них, нажмите на значок лупы в углу соответствующей иконки.

50

51

Настройки

В этом разделе вы сможете выбрать для изменения параметров любой из разделов системы. Есть соответственно:

  • настройки сайта
  • настройки панели управления
  • медиатеки
  • менеджер шрифтов
  • настройки аккаунта.

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

Настройки системы

У MotoCMS, как и у любой другой системы, есть свои внутренние настройки, которые позволят вам максимально «подогнать» все под свои потребности. Все настройки делятся на 4 основных раздела:

  • веб-сайт
  • панель управления
  • медиатека
  • менеджер шрифтов

Начнем по-порядку:

Раздел Веб-сайт

53

В это разделе мы указываем все что нам нужно, чтобы сайт работал корректно. Весь раздел состоит из 4 подразделов: «Настройки сайта», «SEO & Analytics», «В процессе разработки» и «Защита паролем».

54

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

Указать заголовок сайта
1. Указать стартовую страницу, с которой начинается посещение сайта.
2. Указать ширину и минимальную высоту сайта
3. Выбрать анимацию, которую будет видеть пользователь при загрузке сайта.
4. Выбрать стиль фона сайта
5. Выбрать эффекты смены страниц
6. Редактировать стиль фоновой галереи
7. Указать значок для сайта, который виден на закладке бараузера
8. Изменить сообщение, которое будет выводиться, если будет отключен JavaScript
9. Указать необходимость отображения мобильной альтернативной версии сайта
В подразделе «Эффекты смены страниц» можно регулировать эффект появления страницы («Постепенно исчезать», «Выезжать слева» и «Выезжать справа»), эффект исчезновения («Постепенно исчезать», «Прятать влево» и «Прятать вправо»), а также указать длительность анимации (мс= 0,001 секунды). Все это настраивается для всех страниц сайта. Параметр можно менять в процессе работы.

55

Стиль фоновой галереи

Еще один большой раздел, где много всего можно настроить — это «Стиль фоновой галереи». Тут можно редактировать настройки отображения кнопок при наведении (возможен выбор среди вариантов «Всегда», «При наведении на определенную кнопку» и «Никогда»), область управления фоновой галереей (в т.ч. при наведении на нее), поведение иконки фоновой галереи при переключении и иконки загрузки фоновой галереи.

54

Стиль лайтбокса

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

57

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

58

Переходим к следующему разделу «SEO & Analytics».

59

Тут есть возможность подключить сервисы «Google Analytics» и «Google Webmaster Tools».

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

В процессе разработки

В данном разделе можно заблокировать возможность просмотра сайта пока он, к примеру, редактируется. Для этого нужно активировать режим «В процессе разработки», поставив галочку возле него. После этого появится возможность выбора текущей темы и текстового сообщения, которое будет отображаться посетителям сайта. Всего темы две – «Standart Black» и «Standart White».

60

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

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

61

Переходим к работе с медиатекой.

Медиатека

Это важный и интересный раздел админки – тут мы храним все фотографии и видеофайлы.

62

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

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

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

Менеджер шрифтов

В данном разделе можно сформировать или отредактировать список используемых для работы шрифтов. Все шрифты предоставляются сервисом «Google Fonts».

63

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

64
Работа с видео

На страницы вашего сайта можно добавить видео. Для этого берем инструмент «Видео» и размещаем ссылку на нужный видео файл из Vimeo или YouTube

65

или

66

Для каждого видеофайла можно назначить свойства:
1. Параметр «Источник»указывает на id видео, которое используется в данном объекте.
2. Параметр «Автоматически воспроизводить» позволяет проигрывать видео при загрузке страницы.
3. Параметр «Повторять» предоставляет возможность повторно включать тоже самое видео после его завершения.

Виджеты – Общая категория

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

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

Как работать с виджетом «Кнопка» в административной панели MotoCMS HTML

screenshot1

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

Виджет включает:

  • возможность создания уникального дизайна кнопки для сайта (вставка текста, управление размером, цветом, градиентом и фоновым изображением);

  • возможность присвоения к кнопке определенного действия из списка;

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

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

Надпись

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

Действие при нажатии

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

0001

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

«Подсветить на целевой странице» – данный параметр позволит изменять стиль кнопки при наведении на нее мышки.

«Стиль текста» – стилизация текстовой надписи на кнопке.

«Стиль текста при наведении» – стилизация текстовой надписи на кнопке при наведении на нее мышки.

«Стиль кнопки»/ «Стиль кнопки при наведении» – возможность редактирования стиля кнопки в специальном подразделе.

0007

Доступны:

  • тип заливки («Без фона», «Сплошная», «Градиент»);

  • возможность добавления изображения вместо фона;

  • цвет и логика заполнения изображения («Исходный», «Повторять», «Повторять по вертикали», «Повторять по горизонтали»);

  • выбор фонового изображения из Медиатеки;

  • регулирование обводки контуров — цвет, ширина, углы;

  • отступы.

Виджеты – Меню и Форма обратной связи

Меню

Навигацию по сайту проще всего осуществлять при наличии меню, потому в системе MotoCMS HTML есть специальный раздел виджетов Меню.

HTML Guide Menus_0000

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

HTML Guide Menus_0001

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

HTML Guide Menus_0002

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

Максимальное количество элементов/Максимальная глубина подэлементов — параметры, которые отвечают за количество пунктов в меню, их порядок, глубину и уровни.

Пример:

HTML Guide Menus_0004

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

HTML Guide Menus_0005

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

HTML Guide Menus_0006

Контакт-формы

Форма обратной связи

HTML Guide Maps & Contact Form_0007

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

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

  • Название;

  • Форматы текста и сообщений;

  • Редактирование надписей на кнопках;

  • Стили элементов и кнопок;

  • Редактирование положения виджета на странице сайта;

  • Размеры формы контактов;

  • Прилипание к стороне экрана и прозрачность;

  • Положение виджета относительно страницы сайта.

HTML Guide Maps & Contact Form_0008

Кнопка Редактировать виджет

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

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

HTML Guide Maps & Contact Form_0009

Для текстовых и многострочных текстовых полей также имеются свои опции:

HTML Guide Maps & Contact Form_0010_001

Идентификатор — ID (номер) элемента формы. Каждый из таких номеров должен быть уникальным и не дублироваться. Число элементов должно совпадать с количеством присвоенных номеров. Например, если форма содержит 5 идентификаторов, их нумерация должна варьироваться в пределах от 1 до 5.

Имя — название элемента.

Поле требуется — опция имеет два значения – «Да» и «Нет». «Да» используется в случае обязательного заполнения полей. По умолчанию используется «Нет».

Текст для показа — отображается при инициализации формы обратной связи.

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

Максимальная длина — значение, которое определяет количество символов, помещающихся в поле.

Отображать пароль — опция имеет два значения – «Да» и «Нет». «Да» используется при необходимости показа текста пароля. По умолчанию используется «Нет».

Проверка:

  • Строка

HTML Guide Maps & Contact Form_0012

где Регулярное выражение может использоваться только с параметром Флаги регулярного выражения, при этом значения всех полей с регулярным выражением должны совпадать.

Флаги регулярного выражения — без параметра Регулярное выражение использоваться не может.

  • E-mail

HTML Guide Maps & Contact Form_0013

где Минимум букв после точки/Максимум букв после точки — минимальное и максимальное количество символов после точки.

Минимум букв перед @/Максимум букв перед @ – минимальное и максимальное количество символов перед @.

  • Число

HTML Guide Maps & Contact Form_0014

где Максимальное значение/Минимальное значение — 9999-0.

Разрешить отрицательное значение — возможность использования отрицательных значений.

  • Дата

HTML Guide Maps & Contact Form_0015

где Маска — возможность осуществить проверку даты mm/dd/yyyy. В случае, когда год, месяц или день не определены, используется маска.

Раскрывающийся список также содержит ряд настроек:

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

Выбранное значение — является параметром по умолчанию и отображается при инициализации страницы.

Настройки для флажков и кнопок:

Расположение текста — смена положения текста и переключателя (флажка).

Выбран — позволяет сделать определенную опцию параметром по умолчанию.

Настройки Формы обратной связи

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

HTML Guide Maps & Contact Form_0017

Что можно сделать при помощи данных опций:

Отправлять от — ввод адреса e-mail или же идентификатора для отправки пользователем своих данных вам.

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

Форма обрабатывается — возможность редактирования введенного текста в момент обработки сервером запроса.

Отправка не удалась — возможность редактирования сообщения, которое не отправилось через Форму обратной связи.

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

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

Обычный текст – «Да» – отправка сообщения обычным текстом, «Нет» – HTML кодом.

Требуется только проверка — проверка всех обязательных полей. При установке параметра «Да», поля Формы контактов проверяться не будут.

Имя файла процессора сервера должно быть таким — widget_contact.php

Использовать SMTP-сервер — ввод SMTP-сервера для использования его при отправке сообщений.

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

HTML Guide Maps & Contact Form_0019

Виджеты — Галереи

Как воспользоваться Слайдером фона на сайте MotoCMS HTML?

screenshot1

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

Свойства виджета Слайдер фона:

screenshot2

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

Длительность слайдшоу (мс) — установка интервала смены слайдов;

Показывать элементы управления (выпадающий список):

  • Отсутствует (отключение всех дополнительных возможностей навигации);
  • Предыдущая/Следующая кнопки (установка дополнительных кнопок навигации со стрелочками; выравнивание, эффекты, ориентация и др.)
  • Пагинация (перемещение между фоновыми картинками при помощи миниатюр).

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

  • Добавить элементы — добавление новых изображений из Медиатеки.

  • Удалить выделенные — позволяет удалить выбранные картинки из содержимого в виджете.

Галерея Карусель: как настроить?

screenshot1_1

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

Свойства виджета Галереи карусель

screenshot1_2

Ширина/Высота главного изображения — настройка размера картинки для основного (центрального) изображения слайдера.

Передвигать автоматически — активация/деактивация эффекта карусели (вращения) слайдера.

Стиль изображения — настройка цвета и стиля фона картинки, добавленной в галерею.

Стиль изображения при наведении — настройка стиля картинок при наведении в галерее.

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

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

Добавить элементы — кнопка для добавления новых изображений из Медиатеки.

Удалить выделенные — удаление картинок из слайдера.

Как работать с виджетом Галерея Сетка изображений?

screenshot1_3

Для управления сеткой миниатюр (thumbnails) специально был создан данный виджет. Здесь можно установить количество строк, а также столбцов, редактировать эскизы, настроить стиль отображения, включать/выключать слайдшоу и т.д.

Свойства виджета Галерея Сетка изображений

screenshot1_32

Количество строк/столбцов — установка определенного количества строк или столбцов миниатюр в галерее.

Открыть в — отображение картинки в лайтбоксе или в качестве фона.

Элементы управления — настройка всех элементов управления — иконок и стилей зон управления.

Стиль (активной) миниатюры — смена стиля миниатюры (thumbnail) — цвет, фон и т.д.

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

Добавить элементы — добавление новых изображений в галерею из Медиатеки.

Удалить выделенные — удаление изображений из галереи.

Как работать с виджетом Галерея с отражением

screenshot4

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

screenshot4_1

Свойства виджета Галерея с отражением

screenshot4_2

Непрозрачность отражения — уменьшение или увеличение прозрачности, которая влияет на сам эффект отражения изображения.

Пример:

screenshot4_3

Отступ текста по вертикали — изменение положения текста, относящегося к изображению (описания). Описание может находиться вверху, внизу, располагаться по центру.

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

Принципы работы виджета Слайдер

screenshot5

Основная функция виджета Слайдер — управлять изображениями, добавленными в него из Медиатеки. Функционал виджета позволяет активировать/деактивировать слайдшоу, добавлять и редактировать кнопки для навигации, работать с пагинацией, добавлять и редактировать описания к картинкам, настраивать свойства изображений и т.д.

Свойства виджета Слайдер

screenshot5_1

Общие настройки включают: активация/деактивация слайдшоу, установка длительности показа картинок в Слайдере (мс), подключение кнопок для навигации и активация пагинации.

Предыдущая/Следующая кнопки — настройка стиля кнопок для навигации, их положение, выравнивание и т.д.

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

Описание к изображению — настройка положения текста, предназначенного для описания картинки, добавленной в Слайдер из Медиатеки: выравнивание (по вертикали, по горизонтали), редактирование стиля текста и стиля кнопки.

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

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

Добавить элементы — добавление новых картинок в Слайдер из Медиатеки.

Удалить выделенные — удаление изображений из Слайдера.

Как воспользоваться виджетом Слайдер с миниатюрами?

<center><img src=”screenshot6.jpeg”></center>screenshot6

При помощи виджета Слайдер с миниатюрами можно создать на сайте MotoCMS HTML функциональный слайдер с миниатюрами и набором самых разных свойств.

Выглядит такой слайдер на сайте так:

screenshot6_1

Свойства виджета Слайдер с миниатюрами

screenshot6_3

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

Миниатюры: изменение положения миниатюр (по горизонтали или по вертикали), их положения, высоты, а также настройка стилей миниатюр.

Описание к изображению — размещение информации об изображении (описания).

Параметры изображения: активация/деактивация анимационных эффектов при смене картинок в слайдере, установка временных отрезков при смене изображений.

Виджет Скользящая галерея с эффектом

screenshot7

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

Выглядеть на сайте такая галерея будет следующим образом:

screenshot7_1

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

screenshot7_3

Свойства виджета Скользящая галерея с эффектом

screenshot7_4

Управлять с помощью — выбор стиля навигации (стрелочки или курсор мышки).

Ориентация — отображение галереи горизонтально или вертикально на сайте.

Расстояние между изображениями — установка промежутка между картинками.

Увеличить минатюру при наведении — активация/деактивация масштабирования при наведении мышкой на изображение.

Стиль миниатюры/Стиль миниатюры при наведении — смена типа заливки, фона, цвета обводки миниатюр.

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

Виджет Скользящая галерея

screenshot8

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

Свойства виджета Скользящая галерея

screenshot8_2

Управлять с помощью — выбор необходимой навигации: при помощи мыши или стрелок.

Ориентация — горизонтальное или вертикальное расположение миниатюр в Скользящей галерее.

Расстояние между изображениями — расстояние между картинками (пикс.).

Увеличивать миниатюру при наведении — активация/деактивация эффекта масштабирования каждой миниатюры при наведении на них мышкой.

Открыть в — открытие изображения в лайтбоксе или использование картинки в качестве фона.

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

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

Добавить элементы — добавление новых картинок из Медиатеки.

Удалить выделенные — удаление картинок из Скользящей галереи.

Пример

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

Открываем админку.

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

1

выбираем из появившегося списка Страницу

2

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

Теперь можно добавить сюда :

  • картину
  • текст
  • виджет

Все эти объекты есть в меню слева

3

Добавляем Фото. Нажимаем на соответсвующий виджет

4

Выбираем из медиатеки картинку из загружаем туда новую, а затем выбираем ее:

5

Картинку устанавливаем в нужно место на странице просто перетягивая. Размер тоже можно изменить, потянув за угол картинки.

Добавляем текст. Нажимаем на виджет Текст. Затем просто нажимаем на любое место на странице и поле текст доступно для редактирования.

6

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

Теперь добавляем виджет, например, Галерею.

7

Нажимаем на нужный вид Галереи и затем на нашу страницу. Появляется поле виджета. Дважды кликаем мышкой и переходим в окно редактирования содержания галереи.

8

Выбираем «Создать новое» и добавляем сюда картинки из медиатеки.

Удерживая клавишу Shift можно выбрать сразу несколько картинок.

10

Выбранные картинки попадают в элементы галереи.

11

Вот так выглядит добавленный виждет на странице.

12

Как видите, все очень быстро и просто!

кнопка

На главную