Scroll

Welcome to our LiveChat! Please press "Start Chat" button to proceed

Start Chat

Виджеты: Структура

1. Общие параметры
2. Ряд
3. Контейнер

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

Общие параметры доступны для большинства виджетов в Контрольной Панели управления. Следующие параметры являются общими: "Отступы", "Устройства", "Выравнивание", "Отображать На", "Ссылка", "Фоновое Изображение", "Якорь", "Анимация", "Пресет".

1. "Отступы" - это параметр который позволяет Вам задать отступы вокруг контента (увеличить/уменьшить расстояние между виджетом и его границей с 4 сторон: слева, справа, сверху, снизу). Изменение расстояния происходит путем выбора нужного размера из четырех выпадающих список. Доступны следующие размеры - "Авто", "0", "Малый", "Средний", "Большой". Размер "Авто" выставлен по умолчанию.
scommon1.jpg

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

2. "Устройства" - этот параметр позволяет Вам задать настройки отображения виджета на различных устройствах: на компьютере, на планшете, на телефоне (горизонтальная и портретная ориентации).
scommon3.jpg

На данный момент для различных устройств индивидуально наследуется параметр "Выравнивание".

Например, при переключении на планшетный вид, Вы увидите иконку (два квадрата), которая означает что выравнивание которое есть на данный момент наследуется от разрешения для компьютера.
scommon4.jpg

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

3. "Выравнивание" - это параметр который позволяет изменить позицию виджета в зависимости стороны выравнивания: влево, по середине, либо вправо. Также, как упоминалось в пункте 2), эта функция наследуется для всех устройств и может быть задана индивидуально.
scommon6.jpg

4. "Отображать На" - этот параметр позволяет отключить отображение виджета на планшете и телефоне. Отображение виджета на компьютере установлено по умолчанию и не может быть отключено.
scommon7.jpg

5. "Ссылка" - это параметр, который позволяет задать определенное действие после клика для виджета. Доступны следующие действия: "Не выбрано", "Перейти на главную", "Открыть страницу", "Открыть всплывающее окно", "Открыть блог", "Открыть запись блога", "Открыть категорию блога", "Открыть тег блога", "Открыть URL", "Отправить email", "Позвонить", "Открыть в лайтбоксе", "Открыть файл".
scommon8.jpg

"Не выбрано" - определенное действие после клика отключено.
"Перейти на главную" - этот параметр позволяет Вам открыть главную страницу Вашего сайта. Если Вы используете MotoCMS 3 шаблон с магазином, в шаблоне магазина есть две главные страницы - одна обычная, вторая - главная страница магазина. Чтобы ее включить необходимо перейти в Магазин - Настройки - Общие.
"Открыть страницу" - этот параметр позволяет Вам открыть нужную страницу сайта. Вы можете выбрать любую созданную страницу из списка.
"Открыть всплывающее окно" - этот параметр позволяет Вам открыть всплывающее окно.
"Открыть Блог" - этот параметр позволяет Вам открыть страницу Блога Вашего сайта. 
"Открыть запись блога" - этот параметр позволяет Вам открыть нужную запись блога на Вашем сайте.
"Открыть категорию блога" - этот параметр позволяет Вам открыть нужную категорию блога на Вашем сайте.
"Открыть тег блога" - этот параметр позволяет Вам открыть нужный тег блога на Вашем сайте.
"Перейти в магазин" - этот параметр позволяет Вам открыть страницу магазина на Вашем сайте (если плагин магазина был приобретен).
"Открыть категорию" - этот параметр позволяет Вам открыть нужную страницу категории Вашего магазина.
"Открыть продукт" - этот параметр позволяет Вам открыть нужную страницу продукта Вашего магазина.
"Открыть URL" - этот параметр позволяет открыть внешнюю ссылку на Вашем сайте. Вы можете указать нужную ссылку в одноименном поле. 
"Отправить email" - этот параметр позволяет задать почту при клике на которую посетители сайта смогут с Вами связаться.
"Позвонить" - этот параметр позволяет задать номер на который можно позвонить. 

"Открыть в лайтбоксе" - этот параметр позволяет открыть изображение в лайтбоксе полном размере.
"Открыть файл" - этот параметр позволяет открыть файл из Медиатеки. Вы можете включить "Принудительное скачивание" для параметра "Открыть файл" (этот функционал не поддерживается браузером Internet Explorer).
scommon9.jpg

Вам также нужно указать имя файла с его расширением (например test.pdf).
scommon10.jpg

6. "Фоновое изображение" - этот параметр позволяет Вам добавить/заменить фоновое изображение для виджета. Фоновые изображения доступны в Блоках, Контейнерах и Рядах. Если Вы еще не задали фоновое изображение, чтобы это сделать нажмите на "+".
scommon11.jpg

Как результат, Вы будете перенаправлены в Медиатеку, пожалуйста выберите нужное изображение и нажмите "Применить".
scommon_remake00.jpg

Ваше фоновое изображение поменяет вид, появятся иконки редактировать (иконка карандаша) и удалить (иконка корзины). Опция редактировать позволяет заменить фоновое изображение на другое изображение из Медиатеки.
scommon16.jpg

Также будут доступны дополнительные параметры изображения такие как "Размер изображения", "Расположение", "Повтор изображения", "Зафиксировать" и "Параллакс".
scommon17.jpg

Параметры Video (.mp4) и Video (.webm) позволяют Вам добавить фоновое видео для Блока, Контейнера либо Ряда.
scommon18.jpg

7. "Цвет" - этот параметр позволяет Вам изменять фоновый цвет Вашего виджета.
scommon12.jpg

Доступны 25 готовых цветов и 5 дополнительных независимых цветов. Если Вы хотите задать цвет которого нет в цветовой палитре - пожалуйста нажмите на "Больше цветов" и выберите нужный цвет.
scommon13.jpg

В режиме подбора цвета Вы можете выбрать любой цвет. Поле "Текущий" показывает Ваш нынешний цвет, поле "Новый" показывает новый цвет который заменит нынешний цвет. Чтобы сохранить изменения нажмите кнопку "Ок". Если Вы хотите отменить изменения, нажмите кнопку "Отмена".
scommon14.jpg

8. "Размер изображения" - этот параметр доступен только для фоновых изображений, можно выбрать три разных опции: "Не масштабировать" (размер по умолчанию), "Заполнять", "Вписывать".
scommon20.jpg

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

"Заполнять" - параметр, который растягивает изображение на весь экран, при этом сохраняя оригинальные пропорции изображения.

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

9. "Расположение" - параметр, который позволяет изменить позицию изображения согласно выбранному направлению (левая верхняя стрелка используется по умолчанию).
scommon21.jpg

10. "Повтор изображения" - параметр, который позволяет повторить фоновое изображение внутри Блока/Ряда/Контейнера.
scommon22.jpg

"Не повторять" - это параметр который используется по умолчанию и позволяет Вам увидеть фоновое изображение без повторения внутри Блока/Ряда/Контейнера.

"Повторять" - это параметр который позволяет повторить фоновое изображение на странице.
scommon23.jpg

"Повторять горизонтально" - это параметр который позволяет повторить фоновое изображение относительно ширины секции.
scommon24.jpg

"Повторять вертикально" - это параметр который позволяет повторить изображение относительно высоты секции.
scommon25.jpg

11. "Параллакс" - это параметр который позволяет включить эффект параллакса для фоновых изображений в Вашем виджете. Если "Параллакс" включен, то параметр "Зафиксировать" будет выключен и наоборот. Вы можете увидеть эффект параллакса только при просмотре сайта.
scommon26.jpg

12. "Зафиксировать" - это параметр который включен по умолчанию для фонового изображения. Он позволяет использовать фиксированное положение для изображения. Если этот параметр выключен, фоновое изображение при просмотре сайта будет двигаться одновременное вместе с остальным контентом.
scommon27.jpg

13. "Якорь" - это параметр, который позволяет мгновенно перейти к определенной части страницы.
scommon28.jpg

Вы можете использовать функцию Якорь двумя способами: 1) через элементы главного меню / подменю; 2) через объекты у которых функция Якорь (такими как ТекстИзображениеКнопка).

Пожалуйста, ознакомьтесь с руководством как создать якорь в MotoCMS 3

14. "Анимация" - это блок который позволяет задавать анимацию для Вашего виджета.
scommon29.jpg

Эффекты анимации могут быть просмотрены непосредственно на сайте либо в контрольной панели в поле "Предварительный просмотр".

15. "Пресет" - это заранее готовый дизайн, параметр который позволяет изменить вид виджета.
scommon30.jpg

Каждый шаблон имеет различное количество уникальных пресетов. Каждый виджет имеет разное количество пресетов. Редактировать вид пресета виджета можно в секции "Дизайн".

2. Ряд

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

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

Этот виджет реализован в двух вариантах: 1) на всю ширину экрана; 2) фиксированного размера.
row2.jpg

По умолчанию ширина экрана растянута на всю ширину элемента структуры.

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

Одна колонка используется по умолчанию. Максимальное количество колонок составляет 6 штук.
row3.jpg

Каждая из колонок занимает одинаковое пространство, если ширина страницы задана как 100%.

Если выбрана фиксированная ширина, то левая и правая колонки будут значительно больше остальных колонок.

"Равная ширина колонок" - эта функция позволяет использовать все колонки с одинаковой шириной.
row4.jpg

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

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

Для увеличения ширины колонки Вы можете потянуть за пунктирную линию на границе колонки, тем самым расширив её и сузив остальные колонки.

При уменьшении количества столбцов в меньшую сторону (например, было 6, а стало 5) будет выводится сообщение о том, что часть контента будет удалена. Действие также необходимо будет подтвердить в появившемся окне. В случае подтверждения действия, система начнет удаление справа налево. Это действие необратимое.
Например, было 6 колонок с контентом. Если в настройках справа уменьшить количество колонок до 1, то 5 колонок справа будут удалены.

"Верхний Отступ" и "Нижний Отступ" позволяют задать отступы от виджета Ряд с соответствующих сторон.
row5.jpg

"Убрать отступ между колонками" - эта функция позволяет Вам отключить видимые отступы между колонками виджета Ряд.
row6.jpg

"Выровнять по высоте экрана" - эта функция позволяет Вам сделать высоту ряда равной высоте экрана пользователя.
row7.jpg

"Вертикальное выравнивание" - эта функция позволяет настроить расположение контекста в вертикальном режиме.
row8.jpg

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

"Якорь" - эта функция позволяет Вам задать уникальный идентификатор, который будет использоваться для перехода к выбранному объекту при нажатии на другой объект перенаправления (к примеру, меню или кнопка), в котором есть данное поле с таким же уникальным идентификатором.
row10.jpg

3. Контейнер

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

Свойства виджета "Изображение" делятся на два раздела - "Настройки" и "Дизайн".

"Отступ в контейнере" регулирует расстояние между краями контейнера и объекта внутри него. В то же время "Отступ вне контейнера" регулирует расстояние между самим контейнером и другими объектами. По умолчанию используется значение равное 0.
container2.jpg

"Якорь" - эта функция позволяет Вам задать уникальный идентификатор, который будет использоваться для перехода к выбранному объекту при нажатии на другой объект перенаправления (к примеру, меню или кнопка), в котором есть данное поле с таким же уникальным идентификатором.
container3.jpg

"Прилипающий" - эта функция позволяет видеть виджеты в Контейнере даже в ходе прокрутки сайта (они будут находиться в верхней области при прокрутке страницы).
container4.jpg

"Выровнять по высоте экрана" - эта функция позволяет Вам сделать высоту ряда равной высоте экрана пользователя.
container5.jpg

Дизайн
"Цвет" - данная функция позволяет Вам поменять цвет фона для виджета Ряд. Для этого нужно нажать на квадратик напротив цвета и выбрать необходимый цвет из цветовой палитры.
row19.jpg

"Изображение" - данная функция позволяет Вам выбрать изображение в качестве фона для виджета Ряд.
row12.jpg

"Видео" - данная функция позволяет Вам выбрать видео файл в качестве фона для виджета Ряд. Рекомендуется использовать формат .mp4 и .webm.
row13.jpg

"Размер изображения" и "Повтор изображения" позволяют Вам изменить размер видимого изображения в области Ряда и повлиять на количество его повторений на фоне.
row14.jpg

"Расположение" - данная функция позволяет Вам выбрать какую часть изображения Вы хотели бы видеть на фоне Ряда.
row15.jpg

"Зафиксировать" - данная функция позволяет Вам зафиксировать изображение при прокрутке страницы сайта.
row16.jpg

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

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

 

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

Комментарии