Scroll

Объекты

1. Вкладка «Свойства»
  1.1 Общие параметры
  1.2. Вкладка «Стиль»
  1.3. Вкладка «Действия»

2. Простые элементы
  2.1. «Блок»
  2.2. «Текст»
  2.3. «Фото» 
  2.4. «Фигура»
  2.5. «Видео»

   

Объекты делятся на два типа — простые элементы (блок, текст, фото, фигура, видео) и виджеты (контактная форма, виджеты галерей, карта, меню и др.). У них всех есть общие и индивидуальные параметры.

1. Вкладка «Свойства»

1.1. Общие параметры

Параметры «Всегда сверху» и «Всегда снизу» позволяют размещать конкретные объекты всегда сверху или снизу определенной страницы.
0009.jpg

Функция «Прилипание объекта» предоставляет возможность жестко закрепить положение объекта на определенном расстоянии от любой из сторон экрана. Также при помощи параметров «Тянуть по ширине» и «Тянуть по высоте» можно зафиксировать объект относительно горизонтального или вертикального размеров экрана.
0010.jpg

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

Параметр «Прозрачность» позволяет редактировать прозрачность кнопки в процентном соотношении.
0012.jpg 

1.2. Вкладка «Стиль»
0000.jpg

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

Параметр «Тип заливки фона» позволяет выбрать оформление фона. Доступно три варианта - «Без фона», «Сплошная», «Градиент».

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

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

«Заполнение» регулирует логику заполнения изображением тех габаритов, которые указаны для объекта. Доступно для выбора четыре варианта - «Исходный размер», «Повторять», «Повторять по вертикали» и «Повторять по горизонтали».
0001.jpg

«Положение» позволяет регулировать поведение изображения на фоне. Говоря проще, можно задать положение изображения относительно сторон экрана или центра.
0002.jpg 

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

Параметр «Цвет» регулирует цвет обводки.

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

Тоже самое касается и параметра «Углы». Вы можете регулировать скругление углов обводки на свое усмотрение — для каждого угла индивидуально или для всех сразу, в зависимости от состояния кнопки в виде скрепки.

Параметр «Отступ» регулирует расстояние между внутренним краем обводки и внешним краем объекта, т.е. другими словами существует возможность сделать отступ между обводкой и краем объекта. Как и в случае с двумя другими параметрами «Ширина» и «Угол», доступна кнопка в виде скрепки.

1.3. Вкладка «Действия»
0003.jpg

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

1) Перейти к странице
2) Открыть всплывающее окно
3) Открыть URL
4) Открыть файл
5) Отправить к
6) Открыть в лайтбоксе

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

1) выделить объект
2) в панели свойств виджета справа выбрать вкладку «Действия»
3) поставить галочку рядом с параметром «Включить»
4) выбрать необходимое действие из списка
5) в зависимости от выбранного варианта указать страницу, всплывающее окно, URL или др.
6) сохранить действие в настройках панели управления шаблоном.

Следует обратить внимание, что если выбран вариант «Открыть URL», то после ввода URL обязательно следует нажать кнопку в виде стрелочки, чтобы подтвердить действие и оно успешно сохранилось.
0004.jpg

2. Простые элементы

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

2.1. «Блок»

Инструмент «Блок» предоставляет возможность создать дополнительный холдер и задать его поведение (эффект появления и исчезновения объекта на нем). Разместить объект на блоке можно двумя способами — указав его в выпадающем списке «Расположение» или перетащив объект на него.
0026.jpg

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

Параметр «Название» позволяет задать название для блока и его отображение.

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

В качестве «Эффект исчезания» могут быть применены «Постепенное исчезание», «Свернуть», «Спрятать влево», «Спрятать вправо», «Прокрутить вверх» и «Прокрутить вниз».

«Горизонтальное выравнивание» необходимо только в том случае, если справа или слева есть пустая область, сделанная путем увеличения горизонтального размера изображения. При выборе выравнивания по одному из краев, само изображение сместится к нему. При выборе варианта «По центру» - изображение будет строго по середине.
0008.jpg  

«Вертикальное выравнивание» является параметром аналогичным «Горизонтальному выравниванию» с той лишь разницей, что горизонтальные размеры меняются на вертикальные.
0009.jpg 

Также есть возможность удалить блок, нажав на соответствующую кнопку «Удалить».

2.2. «Текст»
0010.jpg 

Инструмент «Текст» позволяет размещать на страницах сайта текстовые надписи. Для данного объекта активны две вкладки «Свойства» и «Стиль».

Во вкладке «Свойства» можно редактировать следующие параметры:

1) шрифт (список шрифтов доступных при работе с текстовой надпись можно отредактировать в менеджере шрифтов)
0014.jpg

2) размер шрифта (можно выбрать вариант из выпадающего списка, а можно задать нужный размер вручную, прописав необходимый размер)

3) цвет шрифта

4) выбрать форматирование шрифта — жирный, курсив, подчеркивание
0015.jpg 

5) применить к части текста действие из стандартного списка, выделив необходимую часть шрифта и нажав на кнопку в виде скрепки (функция работает по аналогии со вкладкой «Действия»)
0011.jpg

6) настроить заполнение текстом строки («Выровнять по левому краю», «Выровнять по правому краю», «Центрировать» и «Растянуть»)
0012.jpg 

7) сделать отступ для всего текстового блока или для абзаца
0013.jpg 

8) сжать текст по вертикальному или горизонтальному размеру
0016.jpg

9) сделать строчный текст заглавным и наоборот
0017.jpg

10) привести форматирование текста к изначальному состоянию
0018.jpg

11) настроить параметр «Авторазмер поля» (высота текстового блока автоматически будет подгоняться под объем текста и количество его строк)
0019.jpg 

12) выбрать теги для текста, доступны теги от h1 до h6
0020.jpg

2.3. «Фото»
676.png

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

Внимание: панель управления MotoCMS поддерживает форматы .*gif,*.png и *.jpg, размер изображений не должен превышать 2880х2880 пикселей.

Чтобы добавить изображение на страницу следует:

1) в панели инструментов слева выбрать «Фото»

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

3) если необходимое изображение отсутствует в медиатеке, то нажимаем на кнопку «Добавить медиа» слева вверху, ищем необходимое изображение на ПК, выбираем его и добавляем, нажав на кнопку «Открыть» (обратите внимание, что из данного интерфейса есть возможность добавлять только изображения, если необходимо добавить любой другой формат файла, то медиатеку лучше открыть через «Настройки» или же верхнее горизонтальное меню)

4) обнаружив необходимое изображение, следует нажать снизу на кнопку «Выбрать»

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

6) при необходимости в панели свойств справа изменить нужные настройки

7) сохранить действие, нажав на кнопку «Сохранить»

Также можно загружать изображения из учетных записей сервисов Flickr, Picasa, Facebook.

Для данного объекта активны все три вкладки «Свойства», «Стиль» и «Действия».
676.png 

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

В «Источнике» в любой момент можно выбрать другое изображение.

«Режим масштабирования» позволяет выбрать логику вписывания изображения в те размеры, которые у него указаны. Существует пять типов режимов - «Заполнить», «Обрезать», «Подогнать», «Изменить размер» и «Не масштабировать».
0007.jpg 

«Горизонтальное выравнивание» необходимо только в том случае, если справа или слева есть пустая область, сделанная путем увеличения горизонтального размера изображения. При выборе выравнивания по одному из краев, само изображение сместится к нему. При выборе варианта «По центру» - изображение будет строго по середине.
0008.jpg

«Вертикальное выравнивание» является параметром аналогичным «Горизонтальному выравниванию» с той лишь разницей, что горизонтальные размеры меняются на вертикальные.
0009.jpg

2.4. «Фигура»

Инструмент «Фигура» дает пользователю возможность разместить фигуру. Изначально фигура имеет форму прямоугольника, но из него можно сделать при помощи вкладки «Стиль» круг, овал или линию. Для данного объекта активны все три вкладки «Свойства», «Стиль» и «Действия». 

Цвет фигуры можно задать во вкладке «Стиль» при помощи параметра «Цвет заполнения». Данный параметр есть только у данного простого элемента.

2.5. «Видео»

Инструмент «Видео» позволяет разместить на страницах сайта видео из сервисов YouTube и Vimeo.
0021.jpg

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

Vimeo Видео

Данный инструмент позволяет размещать на странице видео из сервиса Vimeo.
0038.jpg

В поле «Ссылка на видео» указывается непосредственно видео.

Параметр «Автовоспроизведение» позволяет запустить видео автоматически при загрузке страницы.

Параметр «Цвет элементов управления» предоставляет возможность выбора цвета для кнопок управления видео.

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

YouTube Видео

Данный инструмент позволяет размещать на странице видео из сервиса YouTube.

Чтобы добавить видео объект из YouTube на страницу следует:

1) в панели инструментов слева выбрать «Видео», а затем вариант «YouTube»

2) откроется медиатека с включенным по умолчанию фильтром для просмотра исключительно видео

3) если необходимое видео отсутствует в медиатеке, то нажимаем на кнопку «YouTube» справа вверху
0022.jpg

4) откроется окно поиска по сервису
0023.jpg

5) вводим название или ID видео и нажимаем «Поиск»

6) в открывшемся окне результатов находим нужный, выделяем его и нажимаем снизу на кнопку «Добавить», наблюдаем появление текстового сообщения о том, что элемент добавлен в билиотеку, а затем «Вернуться в библиотеку»
0024.jpg

7) находим необходимое видео уже в медиатеке, выбираем его и добавляем на страницу.
0025.jpg

Для данного объекта активны все две вкладки «Свойства» и «Стиль».

Во вкладке «Свойства» можно редактировать три параметра.

Параметр «Источник» указывает на id видео, которое используется в данном объекте.

Параметр «Автоматически воспроизводить» позволяет проигрывать видео при загрузке страницы.

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

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

Комментарии