войти

Дизайнерам и разработчикам

База знаний

Скрытый слой

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

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

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

Добавляем контейнер в скрытый слой
Отступы внутри контейнера
Теперь добавить меню и настроить его.
Добавляем меню
Меню на скрытом слое

Теперь ниже добавим блок с телефонами и установим:

  • Рамку выше блока
  • Внешний отступ сверху до меню
  • Внутренний отступ до рамки
  • Диапазон видимости 550 и ниже
Настройка блока контактов
Скрытый слой готов

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

  1. Добавьте в нужное место шапки скрытый слой;
  2. Откройте содержимое скрытого слоя, добавьте в него последовательно все нужные в нем блоки, настройте их отображение и видимость;
  3. Проверьте корректность отображения на нужном диапазоне ширины экрана;
  4. Установите иконке скрытого слоя диапазон видимости в зависимости от ширины экрана - только после того, как закончите сборку содержимого скрытого слоя.