Главная Web-разработка Как убрать отступ подвала в Elementor

Как убрать отступ подвала в Elementor

Автор: Юрий
227 просм.

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

Одна из таких штук, с которой столкнулся не только я – отступ подвала от самой нижней секции, построенной с помощью Elementor. Рассмотрим эту проблему подробнее, а затем пути её решения.

Отступ подвала в Elementor

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

Отступ подвала на странице Elementor.

Отступ подвала на странице Elementor.

Здесь мы видим секцию с картинкой на фоне, созданную в Elementor, а ниже стандартный подвал сайта. Их разделяет та самая белая полоска шириной 29 пикселов, которая портит весь вид. Убрать её путём настройки секции Elementor не получится.

Замечу, что этот отступ проявляется на самых разных темах, и это не проблема конструктора Elementor. Это просто отступ подвала от области контента, который есть во всех темах. Ширина его может быть разной, в зависимости от пожеланий дизайнера, который рисовал макет темы. Но суть одна – этот отступ нужно убрать.

В голову приходит мысль найти этот отступ в коде – это может быть отступ снизу контентной части или отступ сверху блока подвала. Или это просто пустой блок div с определённой высотой.

Ищем отступ в инспекторе кода

Если вы пользуетесь браузером Chrome, кликните правой кнопкой мыши по подвалу или тому самому промежутка и выберите «Просмотреть код». Откроется известный каждому разработчику «Инспектор кода», в котором можно покопаться или даже что-нибудь поменять. Не бойтесь здесь что-нибудь делать – вы поменяете только страницу в браузере, а не на самом сайте – после обновления страница снова станет прежней.

Итак, если там всё свёрнуто, кликаем по треугольниками и раскрываем ветки кода. Кликаем по блокам div и смотрим, какие выделяются на странице. Это бывает не очень просто, но проявив настойчивость, в итоге вы найдёте этот промежуток в коде.

Промежуток в инспекторе кода и его стили CSS.

Промежуток в коде и его стили CSS.

У меня он оказался отдельным пустым блоком div с именем clear-footer. Выбираем его и смотрим его стили. Видим у него свойство «отступ снизу» в 29 пикселов. Чтобы убедиться, что это он, можно отключить его, сняв галочку, или дважды кликнуть по числу и вписать другое, например, 0.

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

Заметьте, что в вашей теме этот блок может быть другим и называться по-другому. В любом случае вы таким способом найдёте блок, у которого задан отступ margin или padding. Отключая его, вы сможете убрать этот отступ.

Убираем отступ для всего сайта

Мы можем, конечно, влезть в файлы стилей темы, найти там обнаруженный блок clear-footer и убрать этот отступ, заменив 29px на 0px. Он исчезнет на всех страницах, и проблема будет решена. Но так делать не рекомендую – когда тема обновится, стили тоже заменятся, а отступ снова появится. Вам придётся снова вспоминать, что вы делали и опять лезть менять. Всё это муторно и непрактично.

Однако можно воспользоваться кастомайзером темы. Когда вы вошли в админку сайта, на его страницах вверху вы можете видеть кнопку «Настроить». Идите туда и там найдете раздел, где можно добавить пользовательские стили CSS.

Также вы можете получить верное направление, если перейдете в «Настройки»«Редактор тем». Сам WordPress вам покажет такое сообщение:

Сообщение в редакторе темы

Воспользуйтесь ссылкой в этом сообщении и тоже попадёте в кастомайзер, в раздел «Custom CSS». Это просто другой путь.

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

Сохраняем и всё. У меня, однако, получилась тонкая белая полоска толщиной в 1 пиксель. Её можно убрать, если отступ указать не 0px, а -1px. Видимо, ширина отступа всё-таки не 29, а 30 пикселов. Но я просто добавил в стили фон, как у подвала.

Добавляем свои стили, убирающие отступ подвала.

Добавляем свои стили, убирающие отступ.

Преимущество добавления стилей в этот раздел – они не исчезнут после обновления темы, так как хранятся в отдельном независимом файле.

Но у такого метода в нашем случае есть недостаток – отступ удалится по всему сайту, на всех страницах. Блок контента прижмётся ближе к подвалу, что может быть не очень красиво. Конечно, всё зависит от вашей темы, на некоторых может всё выглядеть вполне приемлемо и на этом можно остановиться.

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

Убираем отступ подвала только на странице Elementor

Этот метод будет работать, только если у вас установлен Elementor Pro. Обычная версия не позволяет добавлять собственные стили.

Итак, переходим в редактор страницы Elementor, кликаем внизу левой панели по значку в виде шестерёнки и попадаем в глобальные настройки нашей страницы. Здесь на интересует вкладка «Расширенные». Сюда как раз можно вставить код стилей, и они будут работать только для этой страницы.

Убираем отступ в настройках Elementor

1) Идём в настройки страницы. 2) Переходим в раздел «Расширенные». 3) Добавляем свои стили для страницы.

Добавляем, сохраняем и радуемся – отступ подвала на этой странице исчез, а на всех остальных страницах сайта он есть по-прежнему.

Вот и всё мы рассмотрели сразу два способа, как убрать отступ подвала в Elementor – для одной страницы и для всего сайта. Помните только, что название и способ реализации этого отступа у вас могут отличаться. Но метод поиска и исправления будет тот же самый. Кстати, так можно находить и менять и другие отступы в разных блоках.

Оставьте своё мнение

* Используя эту форму, вы соглашаетесь с хранением и обработкой ваших данных на этом сайте.

Мы используем технологию cookie для лучшего представления сайта. Продолжая пользование сайтом, Вы выражаете своё согласие. Ок Подробнее...