Секции

Как работать с секциями — основными структурными блоками страницы в Framix

Секции

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

Зачем нужны секции

Секции помогают организовать страницу:

  • Разделить контент — первая секция для шапки, вторая для основного содержимого, третья для подвала
  • Задать фон — у каждой секции свой цвет фона или фоновое изображение
  • Управлять высотой — каждая секция имеет свою высоту, которую можно менять

Как добавить секцию

Нажмите кнопку «Добавить секцию» внизу последней секции. Новая секция появится под существующими.

  • Первая секция создаётся с высотой 800px — обычно это экран приветствия
  • Последующие секции создаются с высотой 400px

Настройки секции

Кликните на секцию (не на блок внутри неё), чтобы открыть её настройки:

Фон

  • Цвет фона — выберите цвет или задайте его вручную
  • Фоновое изображение — загрузите картинку или укажите URL
  • Позиция фона — как расположить изображение (по центру, сверху и т.д.)
  • Размер фона — заполнение (cover), вписать (contain) или другие варианты
  • Повтор фона — повторять изображение или нет

Размер

  • Высота — перетащите нижнюю границу секции или задайте точное значение

Сетка

Каждая секция имеет настройки сетки для выравнивания блоков:

  • Максимальная ширина — ограничивает ширину содержимого (например, 1200px для удобной читаемости)
  • Количество колонок — сетка из колонок для точного размещения элементов
  • Отступы между колонками — расстояние между колонками сетки
  • Предпросмотр сетки — показать или скрыть направляющие колонок

Управление секциями

  • Дублировать — создать копию секции со всеми её блоками
  • Удалить — удалить секцию (нельзя удалить единственную секцию на странице)
  • Изменить порядок — секции располагаются сверху вниз в том порядке, в котором были созданы

Советы

  • Используйте первую секцию как «экран приветствия» — сделайте её высотой в полный экран (800–900px)
  • Чередуйте цвета фона секций, чтобы визуально разделить блоки информации
  • Включите предпросмотр сетки, чтобы точнее выравнивать блоки по колонкам

На этой странице