Общая информация (1.2) — Документация

Прежде чем приступать к настройке конструкторов на своем сайте, внимательно изучите каждый раздел документации по конструкторам на шаблоне Fabrica

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

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

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

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

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

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

Все виджеты можно перетаскивать: для этого просто зажмите левой кнопкой мыши на любой его части и потяните, он автоматически расположится в сетке. Также виджеты можно настраивать: для этого нажмите на иконку шестеренки в правом верхнем углу виджета. После нажатия у вас появится окно настройки виджета, для их изменений у каждого виджета есть ключи – это названия параметров, которые меняют виджет (например, opacity – это прозрачность, и она принимает значения от 0 до 1, например для прозрачности 64% нужно написать 0.64). Все ключи перечислены в отдельном пункте документации, для их изменения не требуются знания верстки. Также виджеты можно копировать: для этого нажмите на иконку, правее иконки копирования, тогда создастся дубликат виджета, который на данный момент удалить нельзя

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

Для удобства редактирования сетки нажмите на кнопку "открыть на всю ширину сайта и наоборот"

Части конструктора

У каждого вида конструкторов существуют его части, в интерфейсе они выглядят как различные области, пределах которых можно расставлять виджеты. Например для шапки это: корзина элементов, верхняя, средняя, нижняя и закреплённая часть. Вы можете перемещать виджеты между этими частями. Для этого в настройках виджета поменяйте значение "Где должна располагаться". Таким образом продублированные элементы, которые вам оказались не нужны, можно просто перенести в часть нераспределённых виджетов.

Все изменения, которые вы вносите в виджет, применяются только после сохранения страницы админ-панели.

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

Механизм работы

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

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

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

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

Темы конструкторов

А что же будет загружаться для адаптивности? Наверняка именно этот вопрос у вас возник после прочтения механизма работы. Ответим и на него.

Темы конструкторов – это варианты одного и того же вида конструкторов.

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

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

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

Мы рекомендуем переименовывать темы так, чтобы вы в них не запутались. Например, для шапки для всех страниц, адаптированной для планшетов от 900 до 1100 пикселей, мы рекомендуем сделать название [Планшет 900 - 1100] - Для всех страниц. Или для главной: [Компьютер > 1250].