Ключи для конструкторов (v.1.2.09) — Документация

Вступление

Перед тем, как изучить этот блок документации, ознакомьтесь со предыдущими пунктами документации в разделе "конструкторы". Иначе, если вы не сделаете этого, у вас могут появится вопросы, ответы на которые мы уже дали в тех самых пунктах. Мы разбили ключи по категориям, чтобы вам было проще ориентироваться в них. Если вы не можете найти ключ нажмите ctrl+f, у вас появится окошко поиска по всей странице.

Если около ключа есть поле ввода, значит значение нужно писать туда. Если есть чекбокс (это окошко, в которое вы ставите галочку), то это означает, что у этой настройки есть только два параметра – да или нет

Если в названии ключа есть цифра, например btn и btn_2, это означает, что в виджете есть два одинаковых элемента и к каждому из них (в нашем случае к двум кнопкам) можно применить отдельные настройки

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

К некоторым ключам мы даем ссылку на страницу, где более подробно описаны свойства этих ключей

Обратите внимание, что многие значения для контента в виджете берется именно по параметру id (его ключи описаны ниже). Это могут быть как картинки, так и заголовки с описанием

Блок

Эти ключи относятся к внешнему виду блоков виджетов

Ключ	Описание
border_radius	Радиус закругления элемента. Например, если ввести значение 10px то углы блоков будут иметь закругление. Подробнее ознакомиться с этим параметром вы можете по ссылке
box_shadow	Тень от элемента, подробнее о параметре тени вы можете узнать по ссылке. Тень можно писать с переменными из шаблона, например [0 1px 5px rgba(var(--color_shadow), .1)], где .1 - это прозрачность 10%, а var(--color_shadow) -- это черный тени в шаблоне
grayscale	Если выбрано, то контент будет становиться черно-белым, при этом при наведении на блок он станет цветным

Всплывающие окна

Если вам нужно изменить что-либо во всплывающих окнах, например, которые появляются по нажатию на "Корзину" или на "Личный кабинет", то измените эти ключи

Ключ	Описание
reverse	Если выбрано, то всплывающий блок будет открываться в противоположную стороны

Выравнивание

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

Для ключей с _horizontal значение left -- выравнивает (то есть прилипляет) элемент по левому краю, center – по центру, right – по правому краю

Для ключей с _vertical значение top -- выравнивает (то есть прилипляет) элемент по верхнему краю, center – по центру, bottom – по нижнему краю

Ключ	Описание
align_horizontal [content_alignHorizontal]	Выравнивание всего виджета по горизонтали
text_align_horizontal	Выравнивание текста виджета по горизонтали
img_align_horizontal	Выравнивание картинки виджета по горизонтали
align_vertical	Выравнивание всего виджета по вертикали
text_align_vertical	Выравнивание текста по горизонтали

Иконки

Иконки – это пиктограммы, символизирующие некоторые образы

Ключ	Описание
no_icon	Если выбрано, то в виджете не будет отображаться иконка, которая видна по умолчанию
icon_id	Айди отображаемой иконки, подробнее – в документации

Отступы

Отступы от элементов виджетов. Идут по порядку: сверху, справа, снизу, слева. Писать цифрами, например 20px, 11px...

Ключ	Описание
margin	Отвечает за внешний отступ блока от соседних блоков. Писать в формате, например [20px 0px 20px 0] или [20px 0]. Чтобы поднять блок выше, можно написать отрицательный отступ сверху, например [-100px 0 0 0], тогда сверху будет отрицательны отступ и виджет будет залезать на вышестоящий. Подробнее со значениями свойства margin вы можете ознакомиться по ссылке
padding	Внутренний отступ контента внутри виджета от внешнего блока. Писать в формате, например [20px 0px 20px 0] или [20px 0]. Подробнее со значениями свойства padding вы можете ознакомиться по ссылке.
padding_inner	Аналогичен ключу выше, но отвечает за отступ внутреннего блока в основном блоке виджета
left	Отступ слева, нужно написать одно значение, например, 10px. В таком случае будет отступ в 10 пикселей слева
top	Отступ сверху, нужно написать одно значение, например 1px

Размер

Ширина и высота элементов виджета

Ключ	Описание
height	Высота элемента, указывать в пикселях, например [250px] сделает высоту равной 250 пикселям
img_size_name [img_size_name_2]	Отвечает за то, из какой папки генерации будет браться изображение. Относится к блокам, где выводятся изображения. Чтобы полностью понять то, как работает этот ключ, внимательно ознакомьтесь с тем, как работает обработка изображений
width	Ширина элемента, указывать в пикселях, например [200px] сделает ширину картинки равной 200 пикселям
width_img	Ширина картинки, аналогично предыдущему ключу
content_width_100	Если выбрано, то содержимое виджета растягивается на всю ширину сайта
img_width_100	Если выбрано, то картинка растягивается на всю ширину сайта

Сетка

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

Ключ	Описание
count	Суммарное количество выводимых элементов. Нужно написать число, например [11], тогда всего будет выведено 11 элементов в данном виджете
count_horizontal	Количество элементов по горизонтали. Если сount равно [12], аcount_horizontal равно [5], то элементы распределятся в 3 строки по 5, 5 и 2 элемента
grid-gap	Отступ между блоками сетки. Нужно писать в пикселях. Например, если значение равно [20px], то между каждым из блоков сетки будет отступ по 20 пикселей
btn_two_rows	Если выбрано, то кнопки будут отображаться в две строки
two_rows	Если выбрано, то элементы виджета будут отображаться в две строки

Ссылки

Изменяют сами ссылки или способ их открытия

Ключ	Описание
btn_link [link, btn_2_link]	Сама ссылка (например, https://4eo.ru/fabrica), которая будет открываться по нажатии на кнопку
video_url	Ссылка на видео, которое загружено на ваш сервер. Если вы хотите вставить видео из внешнего ресурса, например YouTube, то это нужно сделать через функционал "блоки"
btn_new_tab [target_blank, btn_2_new_tab]	Если выбрано, то по нажатию на ссылку в блоке она будет открываться в новой вкладке браузера

Стиль

Мы подготовили несколько видов отображения отдельных виджетов, чтобы переключать их между собой, нужно в поле виджета ввести соответствующую

Ключ	Описание
block_type	Стиль блока
btn_active_type	Стиль нажатой (выбранной) кнопки
btn_style [btn_type, btn_2_type]	Стиль кнопки по умолчанию, нужно ввести в формате [btn-1]
good_template	Тип вида блоков товара. 1 – крупные блоки, помещается 4 штуки по горизонтали на компьютере, 2 – маленькие блоки, помещается 6 штук по горизонтали на компьютере
widget_style	Стиль всего виджета

Текст (содержимое)

То, что вы напишите в поле этих ключей, отобразится в соответствующей части виджета

Ключ	Описание
btn_name [name_link, btn_2_name]	Текст, выводимый на кнопке. Например "Подробнее"
title [name]	Текст, выводимый в заголовке виджета. Например, "Почему стоит выбрать наш интернет-магазин"

Цвет

Изменяют цвет виджета или его отдельных частей

Информацию о том, как работают цвета шаблона (например, цвет бренда или цвет текста), вы можете посмотреть в соответствующем разделе документации по ссылке. Например, rgba(var(--color_black), .1) -- это черный цвет с прозрачностью 10%

Также можно писать в стандартном формате css rbga с конкретными значениями, например rgba(164, 111, 18, .1), подробнее о работе с цветом в html можно ознакомиться по ссылке

Ключ	Описание
background_color	Цвет фона виджета
btn_color [btn_2_color]	Цвет кнопки
color_content	Цвет содержимого виджета
color_hover	Цвет содержимого виджета при наведении на него
color_description [color_text]	Цвет текста (описания)
title_color [color_title]	Цвет заголовка
opacity	Прозрачность содержимого виджета, можно написать значения от 0 до (то есть от 0% до 100%). Меняет прозрачность элемента, например [0.64] равно 64% насыщенности элемента

Шрифт

Настраивают шрифт текста, то есть его внешний вид

Ключ	Описание
btn_font_size [btn_2_font_size]	Размер текста на кнопках, указывать в долях от rem (1rem=16px) по умолчанию, например [1.25rem]
font_size_description [font_size_text]	Размер текста описания, указывать в долях от rem (1rem=16px) по умолчанию, например [0.75rem]
h_size	Введите одно из значений – h1, h2, h3, чтобы текст принял размер соответствующего заголовка
btn_line_height [btn_2_line_height]	Размер области текста кнопки (можно сказать, что отвечает за межстрочный интервал)
line_height_title [title_line_height]	Размер области заголовка (можно сказать, что отвечает за межстрочный интервал)
title_strong	Если выбрано, то шрифт станет жирным, то есть толстым

id

Устанавливают связь между различными модулями системы Diafan CMS и виджетами. Соотвествующие идентификаторы (id) – это "ссылки" на контент, которые отобразится в виджете, они указаны после названия, например, [Название вашего альбом (ID:61)]

Ключ	Описание
albom_id	Айди выводимого альбома с фотографиями. Для просмотра перейдите в [Фотогалерея > Альбомы]
cat_id [cat_id_2]	Айди выводимой категории баннеров. Для просмотра перейдите в [Баннеры > Категории]
menu_id	Айди выводимой меню. Для просмотра перейдите в [Меню на сайте > Меню]
product_cat_id	Айди выводимой категории товаров. Для просмотра перейдите в [Каталог > Категории]
site_id	Айди выводимого меню. Для просмотра перейдите в [Меню на сайте > Меню]
block_id	Айди выводимого блока. Для просмотра перейдите в [Страницы на сайте > Блоки на сайте]
product_ids_or_type	Тип выводимых товаров, например, "скидка", "новинки", "акция"или "популярные". Или айди конкретных товаров через запятую, например [11,143,12,1,232]. Для просмотра перейдите в "Каталог > Товары"