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. Ряд

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

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

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

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

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

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

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

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

Контур пустого ряда будет серым, а середина - прозрачная.

Контур выбранного ряда будет голубого цвета.

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

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

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

Функция "Якорь" позволяет Вам перейти в любую часть страницы, кликнув на объект, в котором активирована функция "Якорь".

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

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

3. Контейнер

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

Свойства виджета "Изображение" делятся на два раздела - "Настройки" и "Дизайн".
Раздел "Настройки" содержит такие парметры: "Отступ вне контейнера" и "Отступ в контейнере", а также "Якорь".

"Отступ в контейнере" регулирует расстояние между краями контейнера и объекта внутри него. В то же время "Отступ вне контейнера" регулирует расстояние между самим контейнером и другими объектами. По умолчанию используется значение равное 0.
Настройки отступов: Используются только символы от 0 до 9, другие символы использовать некорректно. Минимальное значение составляет 0, а максимальное - 999 пикселей.
____3.png

Принципиальная схема того, как это работает, изображена ниже.____4.png

Чтобы изменить значение отступов можно использовать переключатели со стрелочками или числовой шаговый инструмент.
____5.png

Функция "Якорь" позволяет Вам перейти в любую часть страницы, кликнув на объект, в котором активирована функция "Якорь".

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

Раздел "Дизайн" состоит из трех блоков - "Фон", "Рамка" и "Скругления".

Блок "Фон" содержит настройки, которые влияют на внешний вид фона контейнера. По умолчанию контейнер прозрачный.

"Цвет" - определяет цвет фона.

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

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

"Фон" - позволяет использовать изображение в качестве фона. Чтобы добавить его, нужно нажать на кнопку  "+".

Для того, чтобы изменить фоновое изображение, необходимо нажать на кнопку "Редактировать". Для удаления изображения необходимо нажать на кноку "Удалить".

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

"Размер" - определяет логику использования изображения. На выбор доступно 3 варианта - "Не масштабировать", "Вписать по ширине" и "Вписать по высоте".
____14.png

Вариант "Не масштабировать" позволяет использовать изображение в оригинальном размере.

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

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

При помощи параметра "Расположение" можно задать положение изображение относительно одного из краев экрана или угла. Также есть возможность разместить изображение относительно центра экрана.

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

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

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

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

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

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

Раздел "Рамка" содержит настройки, от которых зависят границы виджета "Контейнер". Состоит из трех параметров - "Стиль", "Цвет" и "Ширина".

"Стиль" - позволяет редактировать внешний вид границ контейнера. На выбор доступны 3 варианта - "Слошная", "Пунктир" и "Штриховка".

"Цвет" - определяет цвет линий границ контейнера.

"Ширина" - регулирует ширину линий границ контейнера. По умолчанию используется значение равное 0. При помощи стрелочек или путем ввода точного значения толщину линий можно редактировать. Для ввода могут быть использованы цифры от 0 до 9. Минимальное допустимое значение 0, максимальное - 999 пикселей.

"Скругления" - позволяет изменять внешний вид углов контейнера, делая их более круглыми. По умолчанию используется значение равное 0. При помощи стрелочек или путем ввода необходимого значения можно вносить изменения. Для ввода могут быть использованы цифры от 0 до 9. Минимальное допустимое значение 0, максимальное - 999 пикселей.

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

Комментарии