Почему display:none предпочтительнее
visibility:hidden в Joomla
Оба свойства скрывают блок, но по-разному влияют на вёрстку. С 2009 года мы работаем с Joomla и знаем: на лендингах visibility:hidden оставляет «дырку». Разбираем разницу и показываем, как это реализуется в плагине Reemake Hide Component.
Разница
Чем отличаются свойства
display:none
Блок полностью убирается из потока. Ничего не занимает. Рекомендуем для скрытия компонента.
visibility:hidden
Блок невидим, но место занимает. Остаётся пустая полоса — не подходит для лендинга.
Для мобильных
display:none идеален — не оставляет дырок на узком экране.
Для анимаций
visibility нужен для плавных transition. Для статичного скрытия — не нужен.
Кейс · Симметрия
Мебельная компания: пустые полосы исчезли за час
Задача: «Симметрия» — мебельная компания из Перми. На главной странице сверху и снизу от модулей оставались пустые полосы. Разработчик использовал visibility:hidden для скрытия компонента — но место оставалось. Выглядело как ошибка вёрстки.
Что сделали: установили Reemake Hide Component. Настроили режим display:none вместо visibility. Блок компонента полностью убрался из потока. Пустые полосы исчезли.
Результат: главная выглядит цельно, без визуального мусора. Глубина просмотра выросла на 12 %. Отказы снизились на 8 %. Задача решена за час работы.
Вопросы и ответы
Про цены и сроки
Сколько стоит настройка?
Стоимость зависит от задач проекта — назовём после аудита. Считаем смету по составу работ: фиксируем в договоре.
Сколько времени занимает?
Отвечаем в течение рабочего дня. Замена visibility на display:none — 1 час. Если нужны разные режимы для разных страниц — пара часов.
Что SEO-безопасно?
Оба свойства безопасны — контент остаётся в HTML. Google не считает это клоакингом, если блок не мешает пользователям.
Что выбрать?
Для скрытия блоков — display:none. Для анимаций — visibility. В 95 % случаев в Joomla нужен именно display:none.
Уберём пустые полосы
Пришлите ссылку на страницу — покажем, что скрыть и каким свойством. Бесплатный аудит — без обязательств.
Пришлите ссылку →
Messenger Max