Конструктор главной страницы (v.1.2) — Документация

Каждый виджет содержит в себе настройки – ключи, внимательно изучите их в соответствующем разделе документации, мы подробно описали каждый из них

Чтобы посмотреть процесс настройки главной страницы и адаптивности наглядно, мы рекомендуем следующие видео:

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

Вы можете комбинировать несколько виджетов, чтобы на сайте они выглядели как единое целое

Мы будем приводить для примера некоторые заполненные ключи, но ключи, присущие любому виджету на главной странице (content_width_100, background_color, box_shadow, margin, padding) мы описывать не будем

Баннеры

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

Ключ	Значение
cat_id	4
height	250
color_content	rgba(var(--color_white), 1)
img_size_name	1000x250

Бренды

Список всех брендов, то есть производителей, которые существуют у вас на сайте. Отображаются в виде плиток с логотипами, можно поменять их количество как суммарное, так и в одной строке, а также включить/выключить черно-белое отображение с помощью ключа grayscale

Ключ	Значение
count	20
count_horizontal	10
grayscale	да

Дизайнерское меню

Меню с фотографиями и надписями, расположенными в определенном порядке, их взаимное расположение на момент обновления 1.2.06 менять нельзя

Спецификой загрузки изображений в данный видджет является то, что вы загружаете квадратные изображения (например, 740х740) для всех частей виджета, а отображаются они 1 к 1, то есть для вертикальной от исходной "обрежутся" поля слева и справа, а для квадратной картинки будет вырезана центральная часть, покажем наглядно, как выглядит меню на сайте и как выглядят картинки для этого меню при загрузке

Ключ	Значение
menu_id	9
height	650
color_title	да
font_size_title
img_size_name

Вид изображений в виджете на сайте

Светло-серым фоном обозначены загружаемые картинки

Дизайнерское меню 2

Ключ	Значение
menu_id	9
height	650
color_title	да
font_size_title
img_size_name

Заголовок

Надпись, выравнивание которой можно менять по горизонтали, по умолчанию заголовок имеет разоре заголовка H2

Ключ	Значение
name
color
h_size
align_horizontal

Заголовок с кнопкой

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

Ключ	Значение
align_horizontal
h_size
name
link
name_link
btn_type
two_rows

[Группа] - Бренды + Новости

Блок, где слева находится список брендов, а справа – список новостей

Ключ	Значение
count
count_horizontal
img_size_name
widget_style

Категории

Вывод категорий первого уровня вашего интернет-магазина

Меню с заголовками

Информация пока не заполнена

Ключ	Значение
menu_id
count_horizontal
grid-gap
img_size_name
widget_style

Меню с каруселью

Информация пока не заполнена

Ключ	Значение
menu_id
count_horizontal
color_title
color_description
font_size_title
font_size_description
img_size_name
title_strong

Меню с табами

Меню, переключение между которыми можно осуществить через "табы", то есть кнопки. Выводятся как меню, при наведении появляются подпункты меню, если они есть

Ключ	Значение
padding_inner	20px
menu_id	12
color_title	rgba(var(--color_white), 1)
font_size_title	1.25rem
color_text	rgba(var(--color_white), 1)
color_hover	rgba(var(--color_white), .5)
font_size_text
count_horizontal	4
btn_type
btn_active_type
img_size_name	small
height	250px

Меню с фоном

Ключ	Значение
padding_inner	0px
menu_id	13
name_link
text_align_horizontal	left
count	3
count_horizontal	3
border_radius	5px
img_size_name	menu_250
block_type
title_strong	Да

Информация пока не заполнена

Настраиваемый блок с картинкой и кнопками

Ключ	Значение
block_id	0px
btn_type [_2]
btn_name [_2]
btn_link [_2]
btn_font_size [_2]
btn_line_height [_2]
btn_color [_2]
btn_new_tab [_2]
albom_id
text_align_vertical
text_align_horizontal
img_align_horizontal
img_size_name
video_url
reverse
img_width_100
btn_two_rows

Информация пока не заполнена

Новости

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

Ключ	Значение
count
count_horizontal
content_alignHorizontal
img_size_name
widget_style
site_id
title_strong

Отзывы

Информация пока не заполнена

Ключ	Значение
count
count_horizontal

Преимущества

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

Ключ	Значение
padding_inner
align_horizontal
cat_id
count
count_horizontal
color_title
color_description
font_size_title
line_height_title
font_size_description
img_size_name
title_strong
block_type

Стандартное меню

Список всех категорий вашего интернет-магазина в виде сплошного списка в несколько столбцов

Ключ	Значение
menu_id
count_horizontal
block_type
grid-gap

Статьи

Список статей, располагающихся по горизонтали. Выглядит аналогично новостям

Ключ	Значение
count
count_horizontal
img_size_name
widget_style

Своя кнопка

Вывод кнопки, по которой можно перейти

Ключ	Значение
title
btn_style
link
align_horizontal
target_blank

Собственный блок с картинкой слева

Информационный блок для заголовка и текста, можно выводить с картинкой слева. На момент обновления 1.2.06 вывод картинки в левой части не предусмотрен

Ключ	Значение
block_id	16

Слайдер с текстом

Выглядит как текст и изображение, размер которого соответствует выбранному в ключе img_size_name параметру. Если ключ count имеет значение больше 1, то автоматически появляются стрелки для переключения между несколькими табами. Можно использовать в качестве демонстрации своих работ

Ключ	Значение
padding_inner
cat_id
font_size_title
color_title
count
border_radius
align_horizontal
align_vertical
img_size_name
reverse
two_rows

Слайдер

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

Ключ	Значение
cat_id
count
border_radius
img_size_name

Слайдер с баннерами 1

Информация пока не заполнена

Ключ	Значение
cat_id
cat_id_2
img_size_name
img_size_name_2

Двойной слайдер 1

Информация пока не заполнена

Ключ	Значение
border_radius
cat_id
cat_id_2
img_size_name
img_size_name_2
width_img

Слайдер с формой обратной связи

Информация пока не заполнена

Ключ	Значение
site_id
opacity
btn_name
block_id
cat_id
count
top
left
width
img_size_name

Собственный блок

Информация пока не заполнена

Ключ	Значение
align_horizontal
h_size
neme
link
name_link
btn_type
btn_two_rows

Товары

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

Ключ	Значение
count	6
product_ids_or_type	скидка
good_template	2

Товары с баннером

Информация пока не заполнена

Ключ	Значение
count	6
product_ids_or_type	скидка
product_cat_id
cat_id
img_size_name
border_radius
good_template
font_size_title
color_title
font_size_description
color_description
title_strong

Форма обратной связи

Форма обратной связи. Например, для получения заявок

Ключ	Значение
align_horizontal	6
site_id	скидка
block_id
width
btn_type
name_link

Форма обратной связи с текстовыми блоками

Информация пока не заполнена

Ключ	Значение
align_horizontal	6
site_id	скидка
block_id
cat_id
count
count_horizontal
title_font_size
title_line_height
title_color
title_strong
btn_style	btn-1
btn_name
btn_font_size
btn_line_height
btn_color
img_size_name
block_type
two_rows

Яндекс карта

Вывод карты, подробнее о ее настройке смотрите в документации