Ключи настроек — Документация

Настройки — это набор параметров, которые вы можете изменять в правой части конструктора. Они появляются при нажатии соответствующей кнопки у какого-либо элемента конструктора. Более подробное описание каждого параметра будет открыто, если навести на иконку (i) около него, там будет описано, за что отвечает этот параметр.

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

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

Для некоторых настроек мы предусмотрели удобный визуальный редактор, который позволит вам менять параметр не прибегая к особым знаниям стилей CSS. Например, параметром, который обладает визуальным редактором, является «Тень». В CSS он принимает примерно следующий вид: [0 10px 20px −5px rgba(var(—color_shadow),.2)]. Согласитесь, для человека, не углубляющегося в CSS, выглядит устрашающе. Поэтому около такого параметра есть кнопка с ползунками , по нажатию на которую, вы попадете в визуальный редактор, и там сможете в удобном виде, с предпросмотром, настроить всё, что вам нужно.

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

Настройки виджетов

Выравнивание по вертикали (горизонтали)

Выравнивает виджет по вертикали (горизонтали) относительно пространства, которое он занимает, или же какого-либо элемента виджета относительно самого виджета

Выравнивание по горизонтали может принимать три значения: слева (по левому краю), по центру, справа (по правому краю)

Выравнивание по вертикали может принимать три значения: сверху (по верхнему краю), по центру, снизу (по нижнему краю)

Внешний и внутренний отступ

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

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

И внешние, и внутренние отступы имеют по 4 параметра: слева, сверху, справа, снизу и имеют размерность пикселей (px). В поле ввода значения писать «px» не обязательно, достаточно просто самого значения. В некоторых случаях вы можете использовать отрицательные внешние отступы (со знаком минус). Если, например, у верхнего виджета нижний внешний отступ равен 10px, а у нижнего виджета верхний отступ равен 20px, то они суммируются, расстояние между этими виджетами будет 30px.

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

Отступы между элементами

Элемент представляет собой множество элементов, которые выстроены как сетка (можно провести аналогию с таблицей Excel). Чтобы задать отступы между внутренними элементами по вертикали (горизонтали), задайте им соответствующее значение в px (например: 10)

Значение по вертикали и по горизонтали задается единожды.

Разделитель

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

Положение (чего-либо)

Положение элемента относительно чего-либо, более конкретную информацию в отдельно взятых случаях вы можете посмотреть, наведя на иконку (i) справа от поля ключа. Можно написать значение в пикселях, в том числе и отрицательные, например «-10px»

Расположение (чего-либо)

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

Количество элементов

Просто «Количество» отвечает за суммарное количество элементов в виджете. Напишите количество числом, например «25».

«Количество по горизонтали» ограничивает количество элементов в горизонтальной полоске. Таким образом формируется сетка из элементов виджета. Введите количество числом, например «6». Чтобы расположить элементы в 1 столбец, в поле ключа напишите значение «1».

Радиус закругления

Показывает размер закругления блока. В поле ввода ключа вы можете написать одно значение (например, «10px») и тогда все четыре угла прямоугольника будут иметь радиус 10 пикселей. Или же напишите 4 значения (например, «10px 20px 30px 40px»), тогда первое будет означать левый верхний угол, второе — правый верхний, третье — правый нижний, четвертое — левый нижний

Цвет и прозрачность

Один из самых распространенных ключей. Может принимать одно из значений списка цветов, настроенных в админ панели (админ панель > Template Fabrica > Настройте сайт > Цветовое оформление). Цвет может относиться как к тексту и иконкам, так и к тени и блоку (фону).

Прозрачность регулирует «насыщенность» цвета. Чем меньше процент прозрачности, тем более прозрачный цвет. 0% — цвет не будет виден, 100% — цвет полностью виден. При наложении цвета с некоторой прозрачностью на другой объект, нижний объект будет просвечиваться.

Пример записи в поле значений: 0.00 = 0%, 0.25 = 25%, 1.00 = 100%

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

Градиент

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

Тень

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

Тень имеет 5 значений:

Смещение по горизонтали — показывает, на сколько пикселей тень смещена влево, если значение отрицательное, и вправо, если значение положительное. Измеряется в пикселях
Смещение по вертикали — показывает, на сколько пикселей тень смещена вверх, если значение отрицательное и вниз, если значение положительное. Измеряется в пикселях
Радиус размытия — показывает, насколько тень плавная. Принимает значение в пикселях от 0 (резкая тень). Чем больше значение, тем более плавная тень
Размах — показывает, на сколько пикселей тень больше элемента, от которого она отбрасывается. Положительное значение растягивает тень, а отрицательное — ужимает. Измеряется в пикселях (например: «-10», «0» или «25»)
Цвет и его прозрачность. Пишется в формате «rgba(var(—color_black), 0.5)» — если вы хотите задать цвет через переменную конструктора (см. ключ цвет и прозрачность) или же «rgba(0,0,0,0.6)», где цвет указан в формате RGB

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

Также вы можете написать несколько теней в одно поле ключа, для этого перечисляйте тени через запятую: «тень1, тень2, тень3»

В качестве примера, тени с изображения:

3 3 10 5 rgba(var(—color_black), 0.5)
0 0 5 −2 rgba(var(—color_black), 0.5), 0 5 20 −10 rgba(var(—color_black), 0.5)
inset 0 10 20 10 rgba(var(—color_brand), 0.25)
inset 0 10 20 10 rgba(var(—color_black), 0.08), 0 2 10 −5 rgba(var(—color_black), 1)

Стиль (чего-либо)

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

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

ID

ID — уникальный идентификатор какого-либо элемента (например, товара, баннера, меню, категории баннеров и т.д.). Чтобы узнать ID элемента, перейдите в админ-панель, зайдите в соответствующий модуль (например, баннеры), в скобках около названия элемента будет записан его идентификатор (ID: 392), запишите цифру (в нашем примере 392) в поле ключа. Для перечисления нескольких ID, напишите их через запятую, например «392, 129, 12, 170»

Выводить / использовать / показывать (что-либо)

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

Ссылка

Ссылка, которая откроется по нажатию на соответствующий элемент.

В случае ссылки на видео нужно указать ссылку на видео, которое загружено на ваш хостинг.

Открывать ссылку в новой вкладке

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

Текст

Введите сюда текст, который должен отображаться в виджете. Например, «Пример текста».

Вариант текста

Это готовые шаблоны с использованием автоматических счетчиков, которые описаны выше в ключе "Текст". Если вы хотите использовать свой текст счетчика, то в выпадающем списке выберите "Свой вариант"

Текст счетчика

Например, в тексте виджета «Избранное» в шапке сайта можно написать «@count тов. в избранном» и система автоматически подставит количество товаров, которое посетитель добавил в избранное, вместо счетчика @count, и получится строка «24 тов. в избранном».

Размер текста / иконки

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

Вы можете указать значение в пикселях, например, «20px» или в единицах измерения rem (значение 1 rem в пикселях устанавливается в настройках шаблона в админ-панели), например, если 1rem=16px, то при введении «1.5rem» в поле ключа, высота шрифта будет 24px.

Название иконки

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

Высота строки текста

Этот параметр отвечает за высоту одной строки шрифта, вне зависимости от размера шрифта, в CSS этой свойство называется lineheight. Значение ключа задается аналогично размеру текста

На всю ширину / высоту

Элемент (картинка или контент виджета) будут растянуты на всю доступную ширину / высоту

Жирное начертание текста

Если установлена галочка, то шрифт соответствующего текста станет жирным.

Высота и ширина

Некоторые элементы могут принимать фиксированную ширину или высоту, заданную в конкретном значении — в пикселях, для этого напишите, например «300px» в поле ключа. Также ширине текста и изображения вы можете присвоить процентное значение, которое будет равно доле занимаемой ширины, например, напишите «0.05», чтобы обозначит 5% ширины.

Размер изображения

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

Файл изображения

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

Автопрокрутка слайдера

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