Как создать фиксированную панель нижнего колонтитула с Divi

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

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

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

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

Возможный результат

Вот обзор фиксированной строки нижнего колонтитула, которую мы собираемся разработать.

Как добавить шаблон фиксированного нижнего колонтитула для загрузки на свой сайт Divi

ВНИМАНИЕ!: Добавление этой модели заменит шаблон сайта по умолчанию (если он у вас есть) на вашем сайте Divi. Мы предлагаем добавить его на тестовый сайт, чтобы ничего не испортить на работающем сайте.

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

Затем перейдите в панель управления WordPress и перейдите в Divi> Theme Builder.

Затем щелкните значок переносимости в правом верхнем углу страницы.

В окне переносимости выберите файл JSON, который вы только что разархивировали, и выберите опцию «Загрузить резервную копию перед импортом» на тот случай, если ранее у вас было что-то в шаблон сайта default, который вы не хотели переопределять.

Затем нажмите на кнопку «Импорт».

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

А теперь перейдем к руководству, хорошо?

Часть 1. Добавление глобального нижнего колонтитула

Конструктор тем Divi позволяет заменить нижний колонтитул по умолчанию на новый, обновив шаблон сайта По умолчанию.

Чтобы создать глобальный нижний колонтитул, перейдите на панель управления WordPress и выберите Divi> Theme Builder. Затем щелкните пространство «Добавить глобальный нижний колонтитул» внутри шаблона веб-сайта по умолчанию.

Затем выберите в раскрывающемся списке вариант «Создать собственный нижний колонтитул».

Это развернет редактор макета модели, где вам сразу же предложат три варианта, как вы хотите начать строительство. Выберите «Создать с нуля».

Часть 2. Создание фиксированной строки нижнего колонтитула

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

Добавьте трехстрочный макет в строку

Сначала добавьте в строку макет из трех столбцов.

Высота секции

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

Чтобы установить высоту и отступы, откройте раздел настроек и обновите следующее:

• Высота: 85px
• Обивка: 0px высокий, 0px низкий

Настройки линии

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

контекст

• Цвет фона: # 1a1e36

Размер и расстояние

• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%
• Отступы: 0px вверх, 0px вниз, 3% слева, 3% справа

Пользовательский CSS

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

офис

высота: наследовать! важно; дисплей: гибкий; выровнять элементы: центр;

телефон

высота: наследовать! важно; дисплей: блок;

Исправлено позиционирование

Чтобы сделать линию фиксированной, чтобы она плавала в нижней части экрана, нам нужно придать ей фиксированное положение в нижней центральной части следующим образом:

• Положение: исправлено
• Расположение: нижний центр

Часть 2. Создание содержимого фиксированной строки нижнего колонтитула

На данный момент у нас есть панель нижнего колонтитула с фиксированным положением, готовая для размещения содержимого. Мы можем добавить любой контент в каждый из трех столбцов. Но поскольку это «полоса» нижнего колонтитула, высота которой ограничена 85 пикселями, нам нужно ограничить количество содержимого. По этой причине мы добавим небольшое меню с динамическим логотипом и 4 пункта меню в столбце 1. В столбце 2 мы добавим текст об авторских правах с динамическим текущим годом. В столбце 3 мы добавим три значка отслеживания социальных сетей.

Добавить меню в столбец 1

В столбце 1 добавьте модуль меню.

Выберите меню

Затем выберите одно из меню, которое вы уже создали на своем Веб-сайт. Убедитесь, что количество пунктов меню не превышает 4.

Добавить логотип сайта в качестве динамического контента

Для меню логотипа мы динамически добавим логотип сайта. Щелкните значок «Использовать динамический контент» при наведении курсора на область предварительного просмотра логотипа. Затем выберите логотип сайта из раскрывающегося списка.

Удалить фон

Затем удалите фон меню по умолчанию, чтобы он стал прозрачным.

Дизайн меню

На этом этапе мы готовы добавить дизайн в меню. Для этого дизайна мы сделаем его простым и маленьким. Обновите следующие параметры конструкции:

• Меню шрифтов: Эстакада
• Цвет текста меню: # b59c61
• Сепия изображение: 100%
• Максимальная высота логотипа: 50 пикселей

Добавить текст об авторских правах в столбец 2

Как только меню будет создано, перейдите к столбцу 2, чтобы добавить текст об авторских правах.

Добавить текстовый модуль

Добавьте новый текстовый модуль в столбец 2.

Динамически добавлять текущую дату с текстом до и после

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

Для этого щелкните значок «Использовать динамическое содержимое» и выберите «Текущая дата» из списка.

Во всплывающем окне «Текущая дата» обновите следующее:

• перед тем:
• 01Copyright ©

• Апр:
• 01| Tous Droits Reservés

• Формат даты : обычай
• Пользовательский формат даты : 20 лет

Форматирование текста

Обновите текстовый дизайн и поля следующим образом:

• Шрифт текста: Эстакада
• Цвет текста: # b59c61
• Выравнивание текста: центр
• Маржа (только для телефона): 10 пикселей вверху, 10 пикселей внизу

Это поддерживает авторские права на текст.

Добавьте значки отслеживания в социальных сетях в столбец 3

В столбце 3 добавьте модуль отслеживания в социальных сетях.

Добавить социальные сети

На вкладке Content добавьте на сайт необходимые социальные сети. Для этой конструкции мы используем три из них.

Настройки отслеживания в социальных сетях

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

• Выравнивание модуля: прямой (рабочий стол и планшет), центр (телефон)
• Цвет значка: # 1a1e36
• Использовать нестандартный размер значка: ДА
• Размер шрифта значка: 16 пикселей (компьютер и планшет), 14 пикселей (телефон)

Обновите настройки социальных сетей

Чтобы обновить дизайн отдельного значка социальной сети, откройте настройки для первой сети и обновите следующее:

• Цвет фона: #ffffff
• Заполнение: 8 пикселей справа, 8 пикселей слева
• Закругленные углы: 8px

Расширить настройки социальных сетей для всех

Затем откройте меню дополнительных настроек для первой сети и выберите « Расширить стили предметов " в списке. Во всплывающем окне "Расширить стили" выберите "Расширить стили в" Этот столбец "И нажмите простираться .

Это расширит дизайн до остальных значков в столбце.

Заключительные мысли

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

Для этого дизайна пространство внизу страницы создается путем установки фиксированной высоты для раздела, а затем позволяет фиксированной линии наследовать высоту раздела (хотя она фиксирована). 

Другие источники

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

• Как создать пользовательскую страницу входа в Divi
• Как добавить полноразмерный модуль навигации в Divi
• Как создать полноэкранный слайдер на Divi
• Как добавить круговой счетчик на Диви