Scroll

Редактор Мобильной версии

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

Пожалуйста, обратите внимание! Ваше устройство должно поддерживать JavaScript  для корректного отображения мобильной версии.

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

Все шаблоны Flash MotoCMS имеют одинаковую мобильную версию со стандартным дизайном, но Вы можете с лёгкостью отредактировать её в Редакторе Мобильной Версии и сделать её похожей на основную версию сайта. Стандартная Мобильная версия шаблона Flash MotoCMS имеет ширину 620 пикселей и содержит одну страницу и одно всплывающее окно. Редактор мобильной версии похож на редактор основной версии шаблона Flash MotoCMS за исключением некоторых функций, которые могут работать некорректно при просмотре мобильной версии при помощи мобильного устройства. Также, Вы можете установить разрешение страниц Мобильной версии (как высоту, так и ширину) так, чтобы она была наиболее близкой к разрешению экрана большинства мобильных устройств.

Для того, чтобы перенаправлять мобильные устройства с не установленным Flash Player на мобильную версию автоматически, необходимо пройти в Панель Управления Вашего Flash MotoCMS шаблона, нажать Настройки > Настройки сайта и затем включить функцию "Перенаправлять мобильные устройства на альтернативную версию сайта".
1.png

2.png

Мобильная версия вебсайта, построенного при помощи шаблона MotoCMS, доступна по ссылке URL типа: http://ваш-домен.рф/m/и может быть отредактирована по ссылке типа http://ваш-домен.рф/m/admin/.

Пример стандартной страницы мобильной версии без внесённых в неё изменений показан на скриншоте ниже.
4.png

Для перехода в Редактор Мобильной Версии и создания версии сайта, предназначенной для мобильных устройста, пожалуйста, нажмите "Редактор мобильной версии".3.png
Настройки Мобильной версии
Настройки сайта
Настройки, внесённые в Настройки Редактора мобильной версии касаются лишь Редактира мобильной версии. Для изменения разрешения мобильной версии вебсайта, пожалуйста, пройдите в Настройки сайта Редактора мобильной версии (показано ниже).
5.png

Ширина и минимальная высота страниц устанавливается для всех страниц мобильной версии. Так как страницы мобильной версии шаблона Flash MotoCMS являются "тянущимися", высота каждой страницы по отдельности устанавливается в Пашели свойств страницы.
6.png

Прелоадер
Вы можете изменить изображение или анимацию, отображаемую на экране при закрузке мобильной версии сайта или при переходе между страницами в Настройках сайта. Поддерживаются следующие форматы файлов: .GIF, .JPG, .JPEG и .PNG.
7.png

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

Фон сайта

Вы можете выбрать фон Вашего сайта, который будет отображаться на всех страницах мобильной версии Вашего сайта, при условии что ниодин объект не будет его перекрывать. Для того, чтобы установить изображение в качестве фона, пожалуйста, выберите Тип заливки: Без заливки, после чего выберите желаемое изображение фона из Медиатеки.
8.png

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

Для  установки цвета фона мобильной версии сайта, пожалуйста, выберите соответствующую опцию в Настройки сайта > Стиль фона сайта > Тип заливки > Сплошной, после чего Вам предоставится возможность выбора цвета Пипеткой либо введением # цвета в сответствующее поле.
9.png

Значок веб-сайта

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

Ниже предоставлен список поддерживаемых разрешений значка веб-сайта:

  • 16х16 пикселей
  • 32х32 пикселя
  • 64х64 пикселя.

SEO&Analytics

Мобильная версия шаблона Flash MotoCMS недоступна для поисковых роботов в соответствии  с настройками файла robots.txt. Это сделано с целью избежания доблирования содержимого и двойной индексации страниц сайта поисковыми роботами.

Однако, сервис Google Analytics считает посещения мобильной версии сайта, добавляя их к общему количеству посещений. Вы можете также добавить отдельную учётную запись Google Anaytics для мобильной версии сайта. Таким образом, посещения мобильной версии будут анализироваться отдельно от посещений основной версии сайта.
10.png

Режим "В процессе разработки" и Защита паролем также доступны для мобильной версии сайта.
11.png

Медиатека

Мобильная версия шаблона Flash MotoCMS использует общую с основной версией шаблона Медиатеку. Все объекты Медиатеки доступны для обеих версий, и Вы можете использовать любой объект Медиатеки основной версии шаблона в мобильной версии шаблона, и наоборот.

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

Медиатека содержит папку Mobile. Вы можете использовать её для менеджмента объектов Медиатеки мобильной версии Вашего сайта или же создать, переименовать нужные папки для объектов Медиатеки для удобного оперирования ними при создании или редактировании сайта.
12.png

Кроме того, Вы можете удалить неиспользуемые папки из Медиатеки.
13.png

Шрифты

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

Обращаем Ваше внимание, что мы не можем гарантировать 100% работоспособность шрифтов Google Fonts  в мобильной версии Вашего сайта по причинам некоторых характеристик шрифтов Google Fonts, который не зависят от нас. Некоторые, очень редкие исключения могут иметь место.
14.png

Редактор мобильной версии шаблона Flash MotoCMS. Виджеты. Особенности и ключевые отличия от редактора основной версии.

Ниже приведён список главных отличительных черт мобильного редактора от редактора основной версии шаблона.
Блок

15.png

Этот виджет предназначен для добавления специальной анимации появления для различных объектов.
16.png

Доступные эффекты появления (Show Effect):

  • Fade In (плавное появление)
  • Expand (растягивание)
  • Enter Left (скольжение слева)
  • Enter Right (скольжение справа)
  • Scroll Up (скольжение сверху)
  • Scroll Down (скольжение снизу)

Доступные эффекты исчезания (Hide Effect):

  • Fade Out (плавное исчезание)
  • Collapse (исчезание)
  • Hide Left (ускальзываение влево)
  • Hide Right (ускальзывание вправо)
  • Scroll Up (съезжание вверх)
  • Scroll Down (съезжание вниз)

Обратите внимание! Если объект находится в блоке, ему присваивается другое Расположение.  Кроме того, этот объект не может быть помещён в несколько блоков одновременно.

Фигура

Основная версия шаблона MotoCMS имеет несколько видов фигур. В связи со структурой HTML сайта, в мобильной версии доступна лишь прямоугольная фигура.

Обращаем Ваше внимание, что этот виджет имеет большинство настроек во вкладке "Стиль".
45.png

Видео

Кнопка "Видео" позволяет добавить на страницу(-ы) сайта видео объект. При нажатии на эту кнопку левой панели инструментов, Вы сможете добавить видеоролик сервиса YouTube - автоматически открывается Медиатека, которая позволяет выбрать уже добавленный ролик YouTube либо добавить новый и выбрать его. После выбора ролика следует разместить виджет Видео на странице.
18.png

Панель свойств виджета "Видео" даёт возможность воспроизвести видео напрямую в Панели Управления при редактировании мобильной версии сайта или щаменить видеоролик другим. Доступны функции автоматического воспроизведения ролика при загрузке страницы и повторения.
19.png

Контактная форма

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

Как и другие модули, контактная форма отображает редактируемые параметры с правой стороны экрана, а Панели Свойств.
36.png

  • Input Text Format - редактирование внешнего вида текста вводимых сообщений
  • Message Text Format - редактирование внешнего вида текста сообщений, которые по умолчанию фигурируют в форме
  • Submit Button Label - редактирование текста кнопки "Отправить"
  • Reset Button Label - редактирование текста кнопки "Сбросить"

37.png

  • Line Thickness  - редактирование толщины полей для ввода, от 1 до 100
  • Line Color - редактирование цвета контуров полей для ввода
  • Line Alpha - редактирование прозрачности контуров полей для ввода, от 0 до 100%
  • Line Corner Radius - редактирование скруглений полей для ввода
  • Top Fill Color и Bottom Fill Color - используются для создания эффекта градиента заливки полей для ввода (верхний и нижний цвет соответственно)
  • Fill Alpha - редактирование прозрачности фона полей для ввода
  • Add Shadow - добавление тени к полю ввода
  • Inner Shadow - добавление внутренней тени в поля для ввода (становится доступным к использованию при активации Add Shadow)
  • Shadow Color - редактирование цвета тени 
  • Shadow Alpha - редактирование прозрачности тени
  • Shadow Distance - редактирование положения тени, от -100 до 100 пикселей
  • Shadow Blur - редактирование размытости тени, от -100 до 100
  • Shadow Strength - редактирование "грубости" линии, от -100 до 100.

38.png

Имеет аналогичный набор параметров, как и у раздела "Item Style".

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

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

Доступны следующие опции:
22.png

  • Параметр «Идентификатор» - это уникальный номер элемента формы. Данные номера не обязательно должны идти по порядку, т.е. вполне возможен вариант формы, где параметр с идентификатором 2 будет быть первым. Важно лишь, чтобы данные идентификаторы были уникальными и число элементов формы было равно наибольшему идентификатору. Другими словами, если в форме 4 идентификатора, то их нумерация должна быть от 1 до 4.
  • Параметр «Имя»- это название элемента формы. Если данное поле будет обязательным для заполнения, но при отправке останется пустым, то в поле состояния оно будет отображаться.
  • Параметр «Поле требуется» может принимать значения «Да» или «Нет». Он определяет необходимость обязательного заполнения данного поля для отправки сообщения. По умолчанию используется значение «Нет».
  • Параметр «Текст для показа» - то, что увидит посетитель мобильной версии сайта.
  • Параметр «Несколько строк» можно активировать, если есть необходимость вводить текст в несколько строк.
  • Параметр «Максимальная длина» - максимальное количество символов, которые можно ввести в это поле
  • Параметр «Отображать как пароль» - заменять ли все введённые символы звёздами (******)
  • Проверка.
  • Параметр «Проверка» бывает 4 типов:

1) Строка
2) E-mail
3) Число
4) Дата.

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

1. Строка

«Минимальное число символов» — минимальное количество символов, которое должно быть введено.

«Регулярное выражение» — регулярное выражение и значение полей должны совпадать. Используется только вместе с параметром «Флаги регулярного выржения».
«Флаги регулярного выражения» — параметр регулярного выражения. Используется только вместе с параметром «Регулярное выражение».
39.png

2. E-mail

«Минимум букв после точки» - минимальное количество символов после точки.
«Максимум букв после точки» - максимальное количество символов после точки.
«Минимум букв перед @» - минимальное количество символов перед символом «@».
«Максимум букв перед @» - максимальное количество символов перед симвлом «@».
40.png

3. Число
«Максимальное значение» - максимальное задаваемое значение.
«Минимальное значение» - минимальное задаваемое значение.
«Разрешить отрицательное значение» - определяет возможность использования отрицательных чисел.
41.png

4. Дата
Маска — это маска, которая позволяет провести проверку. По умолчанию ее формат имеет вид «mm/dd/yyyy». Разделители не имеют значения. Если день, месяц и год не могут быть определны, то используется маска.
42.png

Для раскрывающегося списка доступны аналогичные параметры, но, помимо них, еще есть:
43.png

Параметр «Опции» - это выпадающий список вариантов, которые будут отображаться при попытке его развернуть.

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

Для флажка (переключателя) и радиокнопки доступны аналогичные параметры, но, помимо них, еще есть:

Параметр «Расположение текста» позволяет взаимозаменять текст и сам переключатель местами.

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

Настройки

Кроме редактирования полей контактной формы, модуль контактной формы имеет свои параметры. Для того, чтобы получить к ним доступ, необходимо нажать кнопку "Настройки".
23.png

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

  • В поле параметра «Отправлять от:» вводится либо идентификатор поля, в которое отправитель будет вводить свой почтовый ящик, либо конкретный почтовый ящик.
  • В поле параметра «Отправлять к:» следует указать один или несколько почтовых ящиков (через запятую), на которые будет отправлено письмо из данной формы.
  • В поле параметра «Форма обрабатывается» есть возможность редактировать текст сообщения, которое будет выводится в поле состояния на сайте пока сервер будет обрабатывать данный запрос.
  • В поле параметра «Отправка не удалась» возможно отредактировать сообщение, которое будет выводится в случае неудачной отправки сообщения из формы на сайте.
  • В поле параметра «Сообщение отправлено» возможно отредактировать сообщение, которое будет выводится в случае удачной отправки сообщения из формы на сайте.
  • В поле параметра «Тема» можно указать заголовок, который будет отображаться у сообщения при получении в почте.
  • Параметр «Обычный текст» позволяет отправить сообщение как обычный текст (если выбрать вариант «Да») или как HTML-код (если выбрать вариант «Нет»).
  • Параметр «Требуется только проверка» позволяет установить проверку для обязательных полей. По умолчанию установлено значение «Да», т.е. поля контактной формы, которые не требуют проверки, проверяться не будут.
  • В качестве имени файла процессора сервера должно быть указано «widget_contact.php».
  • При активации параметра «Использовать SMTP-сервер»возможно указать данные своего SMTP-сервера, чтобы использовать его для отправки сообщений.

«Сообщения об ошибках проверки» отображаются пользователю, когда не получается проверить содержимое формы. Форма поддерживает разные виды проверки. Поэтому в этом разделе есть возможность отредактировать все текстовые сообщения, которые выводятся при проверке. Вы можете использовать ключевое слово {LABEL} в этих сообщениях. Это приведет к выводу значения поля, в котором возникает ошибка.

Виджет галереи

Редактор мобильной версии имеет лишь один виджет, но он имеет множество настроек, что позволяет его настроить для удовлетворения высоких требований. Этот виджет позволяет создавать галерею в несколько рядов/столбцов изображений. Режим слайдшоу также доступен. По клику изображения открываются в лайтбоксе.
25.png

26.png

Ниже представлен пример отображения виджета галереи на сайте:

27.png

Изображение по клику открывается в лайтбоксе на весь экран (полноэкранный режим может не поддреживаться устройством, используемым для отображения):28.png

Для виджета галереи доступны такие опции:
29.png

  • Rows number - количество строк (до 16)
  • Columns number - количество столбцов (up to 16)
  • Controls Background - цвет фона (устанавливается инструментом "Пипетка" либо вводом # цвета)
  • Lightbox Background - фон лайтбокса (устанавливается инструментом "Пипетка" либо вводом # цвета)
  • Overlay Color - фон наложения (устанавливается инструментом "Пипетка" либо вводом # цвета)
  • Description Background - фон блока описания (устанавливается инструментом "Пипетка" либо вводом # цвета)
  • Description Alpha - прозрачность блока описания
  • Slideshow mode - режим слайдшоу (включить/выключить)
  • Slideshow Speed- скорость смены изображений слайдшоу (мс)
  • выбор Controls Icons иконок управления (Description - описания, Previous/Next - предыдущей/следующей, Start Slideshow - старт слайдшоу, Close Lightbox - закрытия лайтбокса).

HTML виджет
30.png

HTML виджет - один из наиболее восребованных виджетов среди пользователей. Он позволяет добавить и запустить любой HTML, JavaScript или iframe уод с границах виджета. Код должен быть вставлен в специальную зону виджета (содержимое):
31.png

Рекомендуется вставлять код в пределах тэга body (вместо строки <!-- paste code here --> ).

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

Вертикальное и Горизонтальное меню

Редактор мобильной версии содержит два виджета меню - вертикальное и горизонтальное. Они отличаются ориентацией элементов. К сожалению, эти виджеты используют разное содержимое, и содержимое Вертикального меню нельзя использовать для Горизонтального меню, и наоборот.
32.png

В качестве примера создано такое содержимое виджетов меню:

33.png

Пункт меню MENU LABEL 1 является Parent Item для подпунктов MENU LABEL 2 и MENU LABEL 3.

Ниже показано отображение данного содержимого на мобильной версии сайта (при стандартных настройках):
а) горизонтальный;.
34.png

б) вертикальный
 35.png

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0
Еще есть вопросы? Отправить запрос

Комментарии

На базе технологии Zendesk