← Назад

Видео

Обзор функций

FAQ

Как работать в свободной секции (zero block)

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

Сложность ∙ Легко

Аудит вашего сайта или консультация по редактору

0₽

подключенного тарифа для конструктор сайтов

+4

месяца

промокод на продвижение в сетях Яндекс

+12.000₽

тарифа чат-ботов, автоворонок и мобильных приложений

+3

Бесплатный домен в зоне .ru/.рф

0₽

Бесплатный шаблон сайта под вашу сферу бизнеса

0₽

месяца

/год

Забронировать предложение

Получите подарки от mottor при подключении тарифа

спецпредложение

Содержание:

Выбор секции для начала работы
Расположение блоков в свободной секции
Наложение блоков друг на друга
Поворот блоков
Изменения размеров блоков
Прозрачность для кликов
Фигура
Дополнительные функции
Управление мобильной версией сайта
Какие шрифты НЕ рекомендуется использовать в свободной секции
Часто задаваемые вопросы

Видео-инструкция:

I. Выбор секции для начала работы

Для создания свободной секции, нажмите на "+" между любыми двумя секциями:

Выберите категорию "Пустые", добавьте "Свободную секцию":

Выбор категории секции в редакторе mottor

Блочные секции могут быть переведены в свободные. Наведите курсор на левый верхний угол секции, кликните по кнопке "•••" и выберите "Сделать свободной секцией".

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

Рекомендуем оставить переключатель активным, как на скриншоте ниже. Нажмите "Конвертировать", чтобы подтвердить операцию.

Создание копии секции перед её конвертацией

Готово! Секция добавлена, ниже вы увидите ее скрытую копию в "блочном" формате, а теперь можно приступить и к редактированию. И вот тут начинаются уже интересные возможности!

II. Расположение блоков

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

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

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

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

Инструменты выравнивания в zero block: Примагничивание

Направляющие и сетки при перетаскивании какого-либо объекта и его приближении к границам сетки или направляющей притягивают к себе блоки за счет опции "Примагничивание".

III. Наложение блоков друг на друга

Вы можете не только располагать блоки по "полотну" секции, но и накладывать их друг на друга в нужном порядке. Получается некий аналог 3D построения сайта.
Например, вам нужно расположить текст поверх картинки. Для этого:

Расположите картинку, используя блок "Картинка", в нужном месте.
Перетащите блок с текстом, или добавьте новый блок "Текст", поверх ранее установленной картинки.

Наложение блоков друг на друга (zero block)

Далее может случиться следующая ситуация:

По оси Z блоки обычно расположены по мере их добавления в секцию. Если случилось так, что текст оказался ПОД картинкой, можно изменить порядок слоев секции.

Нажмите кнопку L на клавиатуре или на опцию "Слои" в меню секции:

Откроется такой экран структуры страницы:

В поле "Секции" (1) вы сможете увидеть список всех секций, имеющихся в редакторе.

В поле "Блоки" (2) отображается список блоков выбранной секции.

Выбранная секция отмечается галочкой в списке:

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

И перетащите в списке этот блок над блоком "Картинка":

Изменение положения блока в слоях zero block

Готово, текст встал над картинкой:

Тот же самый инструмент перемещения блоков по оси Z относительно друг друга доступен и в управлении самим блоком:

Изменение положения блока в его настройках

IV. Поворот блоков

Вы можете повернуть блок под любым углом вокруг своей оси — для этого наведите курсор к одному из углов блока. Вместо него появится такая стрелка:

Потянув за нее, можно выбрать нужный вам угол поворота.

Вы можете поворачивать блоки на 15 градусов, если зажмете кнопку Shift клавиатуре.

V. Изменения размеров блоков

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

VI. Прозрачность для кликов

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

Блок перекрывает другой блок в zero block

Чтобы исправить это, активируйте опцию "Включить прозрачность для кликов" на блоке, который накрывает кнопку:

Прозрачность блока для кликов в zero block

Важно!
Не включайте эту опцию на самих кнопках, иначе посетители сайта не смогут на них нажать.

VII. Фигура

С помощью "Фигуры" можно добавлять новые объекты разных форм

Добавить "Фигуру" можно так:

Вы можете настроить:

- Форму;
- Скругление углов;
- Тип обводки;
- Цвет;
- Прозрачность и дополнительные эффекты для нее;
- Действия при клике на блок.

Обратите внимание!
В настройках цвета и в настройках самого блока можно увидеть 2 параметра "Прозрачность":

Настройка прозрачности фигуры в zero block

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

"Прозрачность" в настройках цвета (1) работает только на цвет внутри блока.

А "Прозрачность" в настройках самого блока (2) работает на весь блок в целом и требуется для настройки дополнительных эффектов.

VIII. Дополнительные функции

1. Горячие клавиши

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

Сочетания клавиш отличаются для Windows:

2. Группировка

Чтобы не "разбирать" сложную конструкцию, если вам нужно куда-то ее передвинуть — выделите левой кнопкой мыши все нужные вам блоки (для этого можно прокликать блоки с зажатой клавишей CTRL или потянув курсором с зажатой левой кнопкой мышки, чтобы выделить все блоки рамкой), после чего вверху слева у рамки выделенных блоков нажмите "Сгруппировать" (или CTRL+G на клавиатуре).

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

3. Переименование блоков в панели слоёв

Вы можете назвать каждый блок по-своему, чтобы не запутаться. Сделать это можно так:

4. Расширенное управление блоком

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

Функция "Настроить CSS" Для добавления собственных стилей.

Функция "Клонировать" позволяет сделать точную копию данного блока, которая

появится рядом с ним.

Функция "Видимость на устройствах" скрывает из виду блок, который вам мешает, или который вы хотите оставить на потом — но пока не удалять.

Вы можете скрыть элемент везде или же только в выбранной версии редактора (скрыть только в мобильной версии или только в ПК):

Функция "Заморозить" накрепко привязывает блок или группу блоков к месту, не позволяя случайно передвинуть блок в сторону.

Ну и функция "Удалить" говорит сама за себя. Полностью удаляет выбранный блок из редактора.

IX. Управление мобильной версией сайта

Свободная секция также остается свободной и в мобильном редакторе, подробнее о котором, можно посмотреть в инструкции здесь.

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

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

ВАЖНО:
Перед конвертацией секции в свободную, сначала немного подправьте секцию в мобильной версии, расположите колонки друг под другом или несколько в ряд — как вам необходимо. И только после этого вернитесь в редактор ПК-версии и конвертируйте секцию. Так получится намного проще и быстрее! :)

X. Какие шрифты НЕ рекомендуется использовать в свободной секции

Arial
Comic Sans MS
Courier New
Georgia
Tahoma
Times New Roman
Trebuchet MS
Verdana
System*

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

Вышеперечисленные шрифты лучше использовать для коротких надписей, но не для элементов оформления или длинных текстов.

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

* шрифт System — этот шрифт будет отличаться на различных устройствах. В каждом случае будет использоваться встроенный системный шрифт операционной системы, на которой пользователь смотрит сайт. Например, на Windows это Segoe UI, на Android — Roboto, на Mac и iOS — San Francisco.

Часто задаваемые вопросы:

1. Не могу конвертировать секцию в свободную. Нет кнопки конвертации

Так бывает в 2х случаях:

Первый:

Если вы пытаетесь конвертировать секцию "Мобильное меню". Такую секцию действительно не получится конвертировать. Определить эту секцию можно по названию в панели настроек:

Конвертация мобильного меню в zero block

Второй:

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

2. Как обойти автоматическое примагничивание блоков в свободной секции? Не получается сдвинуть элемент на пару пикселей.

Вы можете отключить эту опцию в инструментах редактора:

Тогда блоки будут свободно перемещаться в секции.

3. Как перенести секцию на другой сайт/страницу?

Это можно сделать с помощью нашей инструкции.

4. Почему не уменьшается высота свободной секции? При изменении границы появляется пометка "1px", и секция больше не уменьшается.

Откройте меню "Слои" с помощью клавиши "L" или этой кнопки в меню секции:

Проверьте, нет ли в списке скрытых блоков, выделенных такими отметками:

Если они есть — отобразите их в редакторе и передвиньте в центр секции, а потом скройте снова.

Если скрытых блоков нет:

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

Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat