← Назад
Видео
Обзор функций
FAQ

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

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

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

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

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

0₽

0₽

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

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

+4

+4

месяца

месяца

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

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

+12.000₽

+12.000₽

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

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

+3

+3

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

0₽

0₽

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

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

0₽

0₽

месяца

месяца

/год

/год

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

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

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

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

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

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

  • Для создания свободной секции, нажмите на "+" между любыми двумя секциями:
  • Выберите категорию "Пустые", добавьте "Свободную секцию":
  • Блочные секции могут быть переведены в свободные. Наведите курсор на левый верхний угол секции, кликните по кнопке "•••" и выберите "Сделать свободной секцией".
Перед трансформацией в свободную секцию, система уточнит, хотите ли вы сделать скрытую копию оригинальной секции, чтобы была возможность вернуться к первоначальному виду в любой момент.

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

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

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

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

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

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

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

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

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

Выбранная секция отмечается галочкой в списке:
  • Выберите нужный блок, кликнув по нему в редакторе или в списке слоев:
  • И перетащите в списке этот блок над блоком "Картинка":
Готово, текст встал над картинкой:
Тот же самый инструмент перемещения блоков по оси Z относительно друг друга доступен и в управлении самим блоком:

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

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

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

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

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

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

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

VII. Фигура

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

  • Добавить "Фигуру" можно так:
Вы можете настроить:

- Форму;
- Скругление углов;
- Тип обводки;
- Цвет;
- Прозрачность и дополнительные эффекты для нее;
- Действия при клике на блок.
Обратите внимание!
В настройках цвета и в настройках самого блока можно увидеть 2 параметра "Прозрачность":
На первый взгляд они действуют одинаково, но разница все же есть.

"Прозрачность" в настройках цвета (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х случаях:

Первый:

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

Когда вы работаете с динамической секцией. В отличие от блочных, их в конвертировать в свободную не получится.
2. Как обойти автоматическое примагничивание блоков в свободной секции? Не получается сдвинуть элемент на пару пикселей.
Вы можете отключить эту опцию в инструментах редактора:
Тогда блоки будут свободно перемещаться в секции.

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

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

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

Откройте меню "Слои" с помощью клавиши "L" или этой кнопки в меню секции:
Проверьте, нет ли в списке скрытых блоков, выделенных такими отметками:
Если они есть — отобразите их в редакторе и передвиньте в центр секции, а потом скройте снова.

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

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

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

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

Ищете конструктор чтобы собрать сайт или интернет-магазин?
Попробуйте mottor бесплатно
шаблон сайта доставки еды
шаблон интернет-магазина
шаблон интернет-магазина
шаблон-квиз строительство
шаблон сайта по ремонтуо
450+ шаблонов
ждут вас
Бесплатный конструктор сайта
Все шаблоны
Шаблон онлайн курс
Шаблон курс инвестиций
Шаблон доставка еды
Шаблон онлайн школа
Шаблон для портфолио
Шаблон лендинг вебинара
Шаблон интернет-магазин мебели
Одностраничный сайт
Многостраничный сайт
Создать сайт онлайн бесплатно самому
Создать квиз
Создать сайт бесплатно конструктор
Создать бесплатно интернет магазин
Создать сайт конструктор
Конструктор сайта онлайн
Онлайн конструктор сайта бесплатно
Конструктор интернет магазинов
Конструктор страниц
Сайт конструктор бесплатно
Конструктор создания сайтов
бесплатный конструктор сайтов, лендингов и квизов
Документы:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
Шаблоны:
Популярные запросы:
support@lpmotor.ru
О компании и сервисе
Тур по сервису
Блог
Инструкции
Договор-оферта
Партнёрская программа
Шаблоны
Видеоинструкции
Согласие
Тарифы и услуги
Обновления
Политика конфиденциальности
Сделано на mottor
Техподдержка
Платная поддержка
Инструкция по установке