Настройки — Документация — 4eo.ru

Настройки

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

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

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

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

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


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

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

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

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

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

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

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

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

И внешние, и внутренние отступы имеют по 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 значений:

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

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

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

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

  1. 3 3 10 5 rgba(var(—color_black), 0.5)

  2. 0 0 5 −2 rgba(var(—color_black), 0.5), 0 5 20 −10 rgba(var(—color_black), 0.5)

  3. inset 0 10 20 10 rgba(var(—color_brand), 0.25)

  4. 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 категории баннеров)

Ссылка

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

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

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

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

Текст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Название размера картинки

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

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

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


Настройки секций

Текст


Настройки групп и подгрупп

Текст


Настройка мегаменю

Текст

Группа настроек Pro

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

Существенные изменения Pro настройки делают в секциях. До обновления 1.3.02 в шаблоне можно было применять только механизм работы сетки, размеры клеточек которых равномерно изменялись при сжатии экрана. Однако что, если нам нужно добавить такую группу, размеры которой, например, фиксированные (к примеру, 300 пикселей в ширину) или вообще, растягиваются относительно ширины контента, который располагается в группе?

Для такого случая мы предусмотрели возможность изменять используемую для секции, группы или подгруппы технологию — со стандартной Grid на Flex.

Напомним, что технология Grid (что буквально означает «сетка)», разбивает ширину сайта на некоторое количество N (оно зависит от конкретного конструктора — главной, подвала, страниц и т.д) ячеек, и уже в их рамках можно располагать виджеты, которые будут занимать ширину, равную = (количество занимаемых виджетом ячеек * ширина сайта / суммарное количество ячеек конструктора).

Технология Flex в свою очередь позволяет сделать ширину групп зависимыми от ширины виджетов, содержащихся в ней, и, соответственно, не зависит от ширины каждой ячейки. Также ширину группе можно задать фиксированной, например, 300px (в частности это актуально для области мегаменю, в которой располагаются категории первого уровня). То есть можно сделать несколько групп с фиксированной шириной или зависимой от виджетов. И теперь, чтобы заполнить всю оставшуюся ширину (например, в шапке ширина поиска принципиальной роли не играет, будь она 600px или 300px) можно заполнить содержимым одной группы, для этого в настройках группы нажмите «Максимальная ширина». Этот функционал позволяет делать большое количество вариантов дизайна как шапки и подвала, так и статичных страниц

Настройки Pro для секций, групп и подгрупп

  • «Нет» — использование технологии Grid (остальные относятся к Flex’у)
  • «Слева» — выравнивает элементы по левому краю
  • «По центру» — выравнивает элементы по центру
  • «Справа» — выравнивает элементы по правому краю
  • «Распределить по всей ширине» — равномерно распределяет элементы по всей доступной ширине
  • «В колонку по центру» — располагает все элементы друг под другом в колонку по центру
  • «В колонку распределить по всей высоте» — равномерно распределяет элементы по всей доступной высоте, располагая их в колонку

Здесь стоит отметить, что в случае, если в секции применяется технология Grid, то каждая группа занимает одинаковую ширину, а Flex-настройки групп виджетов остаются работоспособными, кроме настроек максимальной и фиксированной ширины, по понятным причинам. Например, если у нас 4 группы, то в левой группе с помощью flex-настройки «Справа» можно сделать так, чтобы элементы располагались в правой части левой четверти сайта виджеты выравнивались по правому краю

Настройки Pro для групп

  • «Максимальная ширина» — растягивает содержимое текущей группы на все место, оставшееся от групп, занимающих фиксированную ширину или ширину, зависимую от содержимого
  • «Максимальная высота» — в некоторых моментах позволяет расположить виджеты по максимальной высоте
  • «Фиксированная ширина» — задаёт конкретную ширину группе

Этот сайт использует cookie для хранения данных. Продолжая работу с сайтом, вы даете свое согласие на работу с этими файлами.

Согласен