Как сделать нижний колонтитул Divi липким

В этом уроке мы покажем вам, как именно сделать нижний колонтитул на вашем сайте Divi липким. Использование липкого нижнего колонтитула может быть одним из запросов, которые вы получаете при разработке веб-сайта для клиента, или потребностью, которая возникает у вас при создании собственного веб-сайта. Мы покажем вам две возможности, которые сделают ваш нижний колонтитул липким. Первый способ - через код CSS, а второй - через код jQuery. Оба способа работают, но все зависит от того, какой из них вы предпочитаете использовать для создания эффекта липкости на своем веб-сайте.

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

Зачем использовать липкий нижний колонтитул?

Липкий нижний колонтитул обычно используется по одной основной причине; если у вас есть одна страница или несколько страниц на вашем веб-сайте, на которых недостаточно контента для заполнения всего экрана. Вы можете, конечно, убедиться, что у вас достаточно контента на странице, но если это не приносит дополнительной ценности странице; в этом нет необходимости.

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

Вот изображение короткой страницы без липкого нижнего колонтитула:

А вот то же изображение этой страницы после добавления липкого нижнего колонтитула:

Разница между прикрепленным и фиксированным нижним колонтитулом

Не все решают использовать нижний колонтитул на своем веб-сайте, но когда они это делают; есть много способов стилизовать его. Все зависит от структуры вашего веб-сайта и от того, хотите ли вы включить «ручной» нижний колонтитул в другом стиле, созданный с помощью конструктора Divi.

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

При сравнении липкого и фиксированного нижнего колонтитула друг с другом; на первый взгляд они могут выглядеть одинаково, но на самом деле это не так. Фиксированный нижний колонтитул всегда виден при прокрутке страницы на вашем веб-сайте, тогда как липкий нижний колонтитул специально обрабатывает страницы, содержание которых недостаточно длинное, чтобы достичь нижней части экрана. В том конкретном случае, когда содержание недостаточно длинное; он будет вести себя как фиксированный нижний колонтитул и останется в нижней части страницы; создавая тот «эффект фиксированного нижнего колонтитула».

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

Создайте липкий нижний колонтитул на своем сайте Divi с помощью CSS

Без каких-либо дополнительных затрат, давайте начнем создавать липкий нижний колонтитул для вашего сайта. Код, который мы будем использовать, действительно прост, но выполняет свою работу. Вы быстро перейдете от плавающего нижнего колонтитула на странице к странице, где нижний колонтитул будет сдвинут вниз, если содержание недостаточно длинное.

Добавить код CSS через настройки страницы (в частности, для одной страницы)

В некоторых случаях, вы хотите сделать колонтитул прилипнет только одной конкретной страницы. В этой части поста мы покажем вам, как именно это сделать, добавив код CSS в поле Custom CSS на одной странице. Таким образом вы убедитесь, что код CSS применяется только к этой странице вашего веб-сайта. Это также означает, что код CSS будет загружен только тогда, когда кто-то откроет эту конкретную страницу. Этот метод обычно используется в тех случаях, когда на веб-сайте есть только несколько более коротких страниц, к которым вы хотите прикрепить нижний колонтитул.

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

Продолжая, добавьте следующий код в поле Custom CSS в только что открывшемся окне:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

С момента предварительного просмотра страницы должен применяться код CSS, и нижний колонтитул становится липким.

Добавление кода CSS через настройщик темы (просмотр в реальном времени)

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

Чтобы добавить код CSS в настройщик тем, нажмите «Настройщик тем» в задней части вашего веб-сайта WordPress. Затем прокрутите страницу вниз и откройте опцию Additional CSS. Вы увидите весь пользовательский код CSS, который вы использовали до сих пор. Идите вперед и добавьте к нему следующий код:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Добавить код CSS с помощью параметров темы Divi

И последнее, но не менее важное: вы также можете добавить код с помощью параметров темы Divi. Это наиболее часто используемый способ добавления кода на веб-сайт, где вы хотите, чтобы весь веб-сайт извлекал выгоду из кода.

Перейдите в Divi> Параметры темы> Прокрутите страницу вниз> Добавьте следующий код CSS в поле Custom CSS:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Создайте липкий нижний колонтитул на своем сайте Divi с помощью JQuery

Добавить код jQuery через модуль кода (в частности, для одной страницы)

Вы можете добавить код jQuery с помощью модуля кода в конструкторе Divi. Это, опять же, в основном используется, когда не так много страниц с коротким контентом, и если вы не хотите загружать код jQuery для всего веб-сайта.

Добавьте на страницу, над которой вы работаете, раздел со строкой в ​​полную ширину.

Продолжите, добавив модуль кода в эту полноразмерную строку и вставьте в него следующий код:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Добавить код jQuery с помощью параметров темы Divi

Другая возможность добавить код jQuery - через параметры темы Divi. При добавлении кода jQuery для всего веб-сайта есть одно конкретное место в параметрах темы Divi, где мы можем это сделать; в <head & gt; поле вкладки Интеграция. Это именно то место, куда мы собираемся добавить код прямо сейчас.

Откройте свой веб-сайт WordPress> перейдите в Divi> откройте параметры темы> перейдите на вкладку интеграции и добавьте следующий код jQuery в <head> вашего веб-сайта:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Последние мысли

Добавление липкого нижнего колонтитула обычно необходимо в тех случаях, когда у вас есть страница с небольшим содержанием на ней. Вы хотите избавиться от плавающего нижнего колонтитула, чтобы структура страницы выглядела более естественной. Если у вас есть какие-либо комментарии или предложения для будущих публикаций в нашем разделе блога; обязательно оставьте комментарий в разделе комментариев ниже, чтобы мы могли связаться!

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Лучшее изображение: Vintagio / shutterstock.com