Как исправить нижний колонтитул Divi

Опубликовано: 2017-07-11

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

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

Вот пример того, как выглядит фиксированный нижний колонтитул при прокрутке:

Когда использовать фиксированный нижний колонтитул

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

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

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

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

Прежде чем мы начнем, мы объясним разницу между фиксированным нижним колонтитулом и липким.

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

Давайте начнем

Подпишитесь на наш канал Youtube

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

Добавить фиксированный нижний колонтитул с помощью CSS

Первый и самый простой способ создать фиксированный нижний колонтитул - добавить несколько строк CSS. С помощью Divi Builder и WordPress мы можем добавлять эти строки в разных местах. Посмотрим на них.

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

Первый способ добавить код CSS - это добавить его, в частности, на одну страницу. Хотя лучше сделать фиксированный нижний колонтитул одинаковым для каждой страницы вашего веб-сайта (чтобы обеспечить такую согласованность на вашем веб-сайте), вы можете разрешить его применение и к одной конкретной странице.

Откройте страницу, на которую хотите добавить строки кода CSS, и нажмите следующую кнопку в Divi Builder.

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

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

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

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

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

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

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

Последний способ добавить код CSS на ваш сайт - через параметры темы. Когда вы добавляете свой код в поле «Пользовательский CSS» в параметрах темы, он также применяется ко всему веб-сайту. Это наиболее часто используемый способ добавить собственный код CSS на весь ваш сайт Divi.

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

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

Добавить фиксированный нижний колонтитул через jQuery

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

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

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

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

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

Добавьте код jQuery через параметры темы

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

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

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

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

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

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

Рекомендуемое изображение Zeeker2526 / shutterstock.com