← Назад

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

FAQ

Блочная секция

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

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

0₽

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

+4

месяца

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

+12.000₽

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

+3

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

0₽

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

0₽

месяца

/год

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

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

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

I. Общие принципы работы в секции

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

Разместить блок справа или слева от другого блока можно с помощью "Колонок":

Добавление блока "Колонки" в блочную секцию

Появится вот такой блок с тремя столбцами:

Отображение блока "Колонки" в блочную секцию

С помощью кнопок "+" можно создать до 10 столбцов:

Добавление новых колонок внутри блока "Колонки"

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

После настройки количества столбцов, поместите нужные блоки в них:

Добавление блоков в колонки внутри блока "Колонки"

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

Внутри столбцов можно размещать другие блоки "Колонки" для дополнительного разделения:

Размещение блока "Колонки" внутри другого блока "Колонки"

Нажав на кнопку шестеренки в меню блока, вы сможете зайти в его настройки:

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

В разделе "Список столбцов" можно быстро поменять порядок столбцов в колонках, не перенося блоки по одному:

Если нужно добавить отступ в определенном месте, это можно сделать с помощью блока "Разделитель":

Потяните за его нижнюю границу, чтобы настроить размер отступа:

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

Блок "Группа" позволит вам объединить несколько других блоков для более удобного переноса или создания однородной карточки с фоном:

Зайдите в настройки "Группы", здесь вы сможете задать цвет блока для выделения на общем фоне сайта:

C помощью опции "Сделать свободной" вы сможете конвертировать блочную секцию в свободную:

II. Настройки блочной секции

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

Здесь имеется 3 окна параметров, рассмотрим их по очереди:

1. Фон

Здесь вы сможете установить один из 6 типов фона секции и включить эффект наложения цвета поверх него:

Редактирование фона в настройках блочной секции

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

Редактирование цвета фона в настройках блочной секции

Картинка — здесь можно загрузить статичное изображение в качестве фона:

Редактирование картинки фона в настройках блочной секции

У этого типа заливки есть дополнительные параметры:

Фильтры для картинки — позволяет включить и настроить степень размытия фонового изображения.

Эффекты фона — позволяет включить один из трех эффектов:

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

Растянуть по ширине — растягивает картинку на всю секцию, основываясь на ширине экрана посетителя сайта.

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

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

Позиция — позволяет выбрать угол экрана, от которого начинает показ фона секции.

Видео — здесь можно установить в качестве фона секции видео-ролик, загруженный в сервис Youtube.

В поле "Видео с Youtube" вставьте ссылку на ролик, полученную с помощью кнопки "поделиться":

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

Слайдер изображений в фоне блочной секции

Карта — позволяет установить в качестве фона секции карту. Отлично подходит для секций в подвале сайта.

Укажите адрес в поле ниже и нажмите на кнопку "Поиск":

В самом низу окна настройки фона находится опция "Наложение цвета"

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

2. Границы

Опция позволяет настроить переходы между секциями:

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

Эффект "Наложение цвета" или фоновое изображение / видео / слайдер / карта при этом учтен быть не может.

3. Отступы

Этот параметр позволяет настроить отступ между верхней/нижней границей секции и контентом в ней.

Вы также можете изменить их, просто потянув за рамки сверху и снизу секции:

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

1. Как исправить положение блоков в мобильной версии?

Мы подробно описали процесс настройки мобильной версии в инструкции.

2. Почему видео на фоне секции отображается в таком низком качестве?

Видео на фоне секции отображается с разрешением 360p на данный момент. Изменить это качество пока не получится, но мы добавим такую возможность в будущем.

3. Почему видеофон запускается на сайте с задержкой?

Задержка загрузки зависит от длительности выбранного видео, скорости интернета и объема самого сайта.

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

Рекомендуется для этого использовать видео до 25 секунд - стандарт для видеофонов в интернете.

4. Как перенести готовую секцию на другую страницу или сайт?

На этот вопрос мы подробно ответили в инструкции.

5. Какой оптимальный размер изображения для фона "Слайдер"?

Загрузить картинку в фон "Слайдер" можно любого разрешения. Если она окажется большой, редактор сам ее уменьшит по ширине до 1920 пикселей.

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

Для ПК рекомендуем разрешение 1920*1080.
На мобильных фон "Слайдер" мы использовать не рекомендуем. Лучше создать копию секции и разместить на фоне одну статичную картинку.

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

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