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

Документация по шаблону Fabrica

Ключи для конструкторов (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]. Для просмотра перейдите в "Каталог > Товары"

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

Согласен