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

Содержание:
Скрытие блока
Скрытие глобальной шапки сайта

Скрытие блока

Чтобы скрыть определенный блок, вам нужно нажать на три точки в его правом верхнем углу и выбрать один из вариантов: скрыть блок на всех устройствах, только на компьютере или только на смартфоне/планшете:



После этого вы увидите в редакторе иконку, обозначающую, для каких устройств скрыт блок:


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

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

Скрытие глобальной шапки сайта

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

Примечание: этот код необходимо добавить в настройках сайта в разделе “Сторонний код” во вкладке “CSS ”, чтобы он применился для всего сайта. Или же можно добавить блок “Встроенный код” и добавить код внутри него во вкладку CSS, чтобы этот код использовался только на 1 странице.
Подсказка: неглобальную шапку сайта, то есть добавленную только на 1 странице, вы можете скрыть так же, как обычный блок согласно инструкции из предыдущего раздела.

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


Подсказка: если с начала создания сайта у вас была только 1 шапка сайта, её якорь будет иметь название "header" и соответственно приведенный ниже код не потребует изменений.

Скрытие шапки сайта только на смартфонах:

/* Скрытие шапки сайта только на смартфонах */
@media (max-width: 767px) {
    #header ~ header {
        display: none;
    }
}

Скрытие шапки сайта только на планшетах:

/* Скрытие шапки сайта только на планшетах */
@media (min-width: 768px) and (max-width: 991px) {
    #header ~ header {
        display: none;
    }
}

Скрытие шапки сайта только на компьютерах:

/* Скрытие шапки сайта только на компьютерах */
@media (min-width: 992px) {
    #header ~ header {
        display: none;
    }
}

Скрытие шапки сайта на всех устройствах:

/* Скрытие шапки сайта на всех устройствах */
#header ~ header {
    display: none;
}

Обновлено на: 05/12/2023