Під час створення сайту може виникнути потреба не відображати певні блоки на комп’ютерній або мобільній версії сайту, або ж зовсім тимчасово приховати певний блок. У цій статті ви дізнаєтеся, як повністю приховати блок на вашому сайті або ж лише на його десктопній (комп’ютерній) чи мобільній версії.

Зміст:
Приховування блоку
Приховування глобальної шапки сайту

Приховування блоку

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


Після цього ви побачите у редакторі іконку, що позначатиме, для яких пристроїв приховано блок:


Підказка: якщо ви приховали блок на комп'ютерній версії сайту, ви можете далі редагувати його в мобільному редакторі.
Примітка: приховання блоку на компʼютері наразі також приховує його й на планшетах.

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

Приховування глобальної шапки сайту

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

Примітка: цей код необхідно додати у налаштуваннях сайту у розділі “Сторонній код” у вкладці “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