Основные сведения о конструкторе сайта — Документация

Перед тем, как приступать к работе с конструкторами, давайте ознакомимся с их основными принципами работы, которые присущи каждому виду, будь то конструктор шапки сайта, подвала (футера) или статичных страниц, таких как, например, главная страница

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

Основные понятия в конструкторах

Чтобы приступить к работе с конструктором, в боковой панели CMS нажмите «Template Fabrica», а затем «Конструктор сайта»

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

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

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

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

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

Рассмотрим принцип работы сетки на примере сетки для шапки. Например, если ширина сайта 1300, то каждая из 72 ячеек занимает по 18 пикселей в ширину. До тех пор, пока ширина окна браузера больше сайта, ширина сетки постоянна, и лишь при достижении браузером ширины сайта, она уменьшается, а вместе с ней и ширина каждой ячейки. Для изменения стандартного принципа работы сетки, смотрите ниже раздел «Группа настроек Pro»

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

Секция виджетов – это объединение групп виджетов. Вы можете удалять, копировать и перемещать секции по вертикали, для этого при наведении на секцию нажмите на соответствующую кнопку (они появятся справа от кнопки настроек секции). Чтобы добавить новую секцию, под всеми секциями виджетов под надписью «Добавить новую секцию» выверте количество групп, которые должны размещаться в рамках секции. Новая секция будет добавлена внизу. В зависимости от конструктора и количества групп в секции, изменяется количество ячеек, располагаемых по горизонтали. Если вы добавите секцию, в которой всего одна группа, то отдельной пометки «Группа» не будет (хотя физически все виджеты будут находиться именно в группе, а не в секции)

Группа – это сетка виджетов, обладающая собственными настройками. В настройках группы виджета вы можете изменить фон и параметры расположения виджетов в группе

Группу виджетов можно разбить на две подгруппы, каждая из которых будет иметь свой фон. Подгруппы сделаны для гибкости расположения виджетов относительно соседних групп. Подгруппы отображаются в виде вертикальной полоски около виджетов, которые они объединяет. Чтобы настроить подгруппу, нажмите на саму вертикальную полоску (она находится в левой части группы виджетов)

Каждая секция, группа и подгруппа виджетов имеет свой уникальный идентификатор (ID), который является уникальным для вашего сайта и не может повторяться. Они добавляют общий фон, отступы и другие настройки виджетам, находящимся в них

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

Группа настроек 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 для групп

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

Работа с виджетами

В обновлении шаблона Fabrica 1.3 мы добавили долгожданную функцию – Drag-n-drop между группами виджетов. Она позволяет буквально «перетаскивать» виджеты между группами

Для перемещения виджетов как между группами, так и внутри групп по сетке, зажмите кнопку мышки на виджете и перетащите его

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

Чтобы удалить виджет, нажмите на него правой кнопкой мыши

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

Чтобы перейти к настройкам виджета, находящегося в сетке, нажмите на него, не перемещая и не изменяя его размер

Вы можете располагать виджеты в любом количестве столбцов и строк сетки. Если вы расположите несколько виджетов высотой в 3 ячейки в одну строку, то отображаться они будут так, как будто это элементы высоты одной ячейки. Если в строке сетки нет ни одного виджета, то она отображаться в виде пробела не будет

Типы конструкторов

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

Конструктор шапки и подвала

В данном случае сетка разбивает одну группу на 72 ячейки по горизонтали, на 6 по вертикали для шапки и на 15 – для подвала

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

Конструктор статичных страниц

В случае со статичными страницами по горизонтали группа разбита на 12 ячеек, а по вертикали – на 15

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

Механизм работы адаптивности

Конструктор – это простор для фантазии, поэтому мы, разработчики, не способны предусмотреть все сценарии использования конструкторах. Для этого была сделана специальная система адаптации конструкторов. Подробнее о том, как адаптировать конструкторы, описано ниже, а сейчас расскажем, почему это важно

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

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

Если коротко: загружаем на сайт только то, что нужно увидеть и ничего лишнего

Правила адаптивности

Чтобы ваш сайт смотрелся корректно на всех размерах мониторов, мы предусмотрели правила адаптивности конструкторов

В настройках правил адаптивности отображается список всех созданных правил. В каждом правиле в первую ячейку впишите начальное значение ширины окна браузера, а во вторую -- конечную, это будет интервал, в котором расположится редактируемый конструктор, при этом нельзя делать так, чтобы интервалы накладывались друг на друга, например: 0-100 и 100-200 создать нельзя, потому что у них есть общая точка – 100, в которой будет не определено, какой именно конструктор открывать. В данном случае было бы верно создать 0-100, 101-200

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

Чтобы вам было проще ориентироваться в ширинах окон браузеров, приведем ориентировочные границы ширины монитора (экрана) для различных типов устройств:

Телефон: 0-700
Планшет: 701-1050
Компьютер: 1051-* (* означает максимальное значение, так как потенциальная ширина мониторов не ограничена). Да, нужно написать именно звездочку и ничего больше. Она автоматически распознается системой

Однако по собственному желанию вы можете разбивать на любые интервалы

Конфигурации

Конфигурация – это набор настроек конструктора. Например, какой-либо статичной страницы, шапки или футера (подвала). Конфигурация хранит в себе настройки всех правил адаптивности, групп виджетов и самих виджетов

Отображаемая конфигурация – это конфигурация, которая видна у вас на сайте прямо сейчас

Редактируемая конфигурация – это конфигурация, настройки которой вы меняете прямо сейчас. Это сделано, чтобы вы могли экспериментировать с настройками. Редактируемая конфигурация не отображается на сайте (конечно, если она не выбрана как отображаемая). Вы можете скопировать, настроить или удалить выбранную и создать новые конфигурации

Предпросмотр

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

Автосохранение

Для вашего удобства мы предусмотрели автосохранение настроек каждый раз после того, как вы сделаете изменение в конструкторе, то есть поменяете расположение виджета или какую-либо настройку. Теперь нет необходимости каждый раз после какого-либо изменения нажимать кнопку «Сохранить», кроме случаев, где есть кнопка «Применить» или «Создать»

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

Узнать, когда было совершено последнее автосохранение, вы можете в левом нижнем углу окна конструктора

P.S. функция предпросмотра в обновлении 1.3.02 отстутствует, она будет введена в дальнейших обновлениях