Скрытие элемента из верстки

Содержание

• Зачем скрывать элемент из верстки

• Как настроить видимость элемента

• Чем отличаются параметры Видимость (Visibility) и Отображение (Display)

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

Зачем скрывать элемент из верстки

Полное скрытие элемента полезно в следующих случаях:

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

Тексты на сайте еще не доработаны, есть черновики, которые не должны попадать в поисковые системы.

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

Как настроить видимость элемента

Чтобы скрыть элемент:

Выберите элемент в редакторе дизайна.

В Настройках на правой панели найдите раздел Видимость (Visibility).

Раздел Видимость на вкладке Настройки

Выберите значение Скрыть (Hidden).

После скрытия элемента:

Элемент останется в списке слоев и у него появится иконка «глаз», перечеркнутой двумя линиями.

Сверху холста появится панель с кнопкой «Отображать элемент».

Иконка в слоях у скрытого элемента и панель над холстом

Чем отличаются параметры Видимость (Visibility) и Отображение (Display)

Отображение (Display: None) — элемент не отображается на странице, но остается в коде. Параметр можно установить на вкладке Дизайн в разделе Авто-лейаут.

учитывается при загрузке сайта

может попасть в индекс поисковых систем

скрипты продолжают выполняться

Параметр Отображение на вкладке Дизайн

На панели слоев элемент помечается иконкой «глаз», перечеркнутой линией.

Иконка у элемента с Display: None

Видимость (Visibility: Hidden) — элемент полностью удаляется из кода страницы. Параметр можно установить на вкладке Настройки в разделе Видимость.

не влияет на скорость загрузки

не индексируется поисковыми системами

не запускает добавленный в него код

Параметр Видимость на вкладке Настройки

На панели слоев элемент помечается иконкой «глаз», перечеркнутой двумя линиями.

Иконка у элемента с Visibility: Hidden

Чем полезна функция Видимость

Сайт работает быстрее за счет уменьшения веса страницы.

Поисковая оптимизация становится чище — скрытые заготовки не индексируются.

В процессе разработки можно оставлять черновики и незаконченные блоки — они не будут мешать.