Нижние ящики являются полезным дополнением к любому Веб-сайт, так как они хранят дополнительный контент, легко доступный пользователям. Ящики нижнего колонтитула — это контейнеры веб-контента (например, раздел Divi), которые можно открывать и закрывать, нажав кнопку или наведя на них курсор. Это как иметь небольшой тайник для премиум-контента.
В этом уроке мы создадим плавающий ящик нижнего колонтитула в Divi. Мы добавим ящик нижнего колонтитула в глобальную область нижнего колонтитула шаблон сайта чтобы ящик нижнего колонтитула был доступен для всего сайта с обычным содержимым нижнего колонтитула.
С помощью процесса, который мы собираемся использовать, любой раздел Divi (и его содержимое) можно преобразовать в ящик нижнего колонтитула за считанные минуты.
Как добавить шаблон нижнего колонтитула на свой сайт Divi
Добавление этой модели заменит шаблон сайта по умолчанию (если он у вас есть) на вашем сайте Divi. Мы предлагаем добавить его на тестовый сайт, чтобы ничего не испортить на работающем сайте.
Чтобы импортировать фиксированный шаблон ящика нижнего колонтитула самостоятельно Веб-сайт, разархивируйте загруженный zip-файл, чтобы получить доступ к файлу JSON.
Затем перейдите в панель управления WordPress и перейдите в Divi> Theme Builder.
Затем щелкните значок переносимости в правом верхнем углу страницы.
В окне переносимости выберите файл JSON, который вы только что разархивировали, и выберите опцию «Загрузить резервную копию перед импортом» на тот случай, если ранее у вас было что-то в шаблон сайта default, который вы не хотели переопределять.
Затем нажмите на кнопку «Импорт».
Наконец, сохраните изменения в генераторе тем и отобразите живую страницу, чтобы увидеть фиксированную панель нижнего колонтитула.
А теперь перейдем к руководству, хорошо?
Часть 1. Добавление глобального нижнего колонтитула
Генератор тем Divi позволяет заменить нижний колонтитул по умолчанию новым, обновив шаблон веб-сайта по умолчанию.
Чтобы создать глобальный нижний колонтитул, перейдите на панель управления WordPress и выберите Divi> Theme Builder. Затем щелкните пространство «Добавить глобальный нижний колонтитул» внутри шаблона веб-сайта по умолчанию.
Затем выберите вариант «Создать глобальный нижний колонтитул» из раскрывающегося списка.
Добавить предопределенный макет в глобальный макет нижнего колонтитула
Это развернет редактор макета модели, где вам сразу же предложат три варианта, как вы хотите начать строительство. Выберите вариант «Выбрать предопределенный макет».
Во всплывающем окне «Загрузить из библиотеки» найдите макет целевой страницы канцелярских принадлежностей. Затем нажмите «Использовать этот макет».
Удалить нежелательный контент из готового макета
После загрузки макета в редактор разверните всплывающее окно «Слои», щелкнув значок слоев в меню настроек. Затем удалите все разделы макета, кроме двух последних.
Переместите и пометьте два раздела
После удаления разделов у вас должно получиться два раздела, один под названием «Нижний колонтитул», а другой - «Как это работает». Переместите раздел «Нижний колонтитул» в верхнюю часть макета.
Измените формулировку в нижней части на «Нижний колонтитул». Это будет раздел, который мы будем использовать в качестве содержимого нашего нижнего колонтитула.
Часть 2. Создание фиксированного ящика нижнего колонтитула
Теперь, когда мы назначили один из разделов нижним колонтитулом, а другой - ящиком нижнего колонтитула, мы готовы приступить к созданию фиксированного ящика нижнего колонтитула. Начнем с создания значка рекламного сообщения, который мы будем использовать для переключения ящика нижнего колонтитула.
Создание кнопки ящика нижнего колонтитула
Добавить новую строку
В нижней части нижнего колонтитула добавьте новую строку в столбец.
Назовите новую строку «Кнопка ящика», потому что это строка, которая будет содержать кнопку, используемую для переключения открытия и закрытия ящика. Затем переместите линию в верхнюю часть раздела.
Row padding
Перед добавлением модуля откройте настройки строки и обновите отступы следующим образом:
- Обивка: 0px высокий, 0px низкий
Секция заполнения
Затем откройте настройки в разделе «Ящик нижнего колонтитула» и обновите заполнение следующим образом:
Чтобы создать интерактивную кнопку, которая переключает ящик нижнего колонтитула, мы собираемся использовать модуль рекламного сообщения со значком. И мы собираемся придать ему уникальную форму капли, объединив квадратную форму контейнера модуля Blurb со значком круга.
Вот как.
Добавить модуль Blurb
Добавьте текстовый модуль презентации в строку «Кнопка ящика» в верхней части раздела.
Размытие контента / значок
Затем удалите заголовок и основной текст по умолчанию и выберите значок стрелки, указывающий в верхний левый угол (см. Снимок экрана). Мы используем частично повернутый значок, потому что мы собираемся повернуть его позже.
Дизайн рекламы
Затем дайте текст презентации следующим образом:
- Цвет фона: # 081540
Затем обновите параметры проекта следующим образом:
- Цвет значка: #eeeeee
- Значок круга: ДА
- Цвет круга: # 081540
- Использовать размер шрифта значка: ДА
- Размер шрифта иконки: 17 пикселей
Размер текста презентации
Теперь дайте модулю высоту и ширину следующим образом:
- Ширина: 30px
- Высота: 30px
Это приведет к тому, что значок круга перейдет в текстовый контейнер, чтобы создать форму капли воды.
Положение размытия
Затем разместите текст презентации в верхнем центре раздела.
- Позиция: Абсолют
- Расположение: Топ Центр
Настройки преобразования Blurb
Теперь мы можем использовать параметры преобразования, чтобы повернуть рекламное объявление / значок вверх и расположить его прямо над контейнером раздела. Теперь, когда мы скроем раздел под окном браузера, значок останется видимым / кликабельным.
Обновите следующие пункты:
- Преобразовать преобразовать ось X: -50%
- Преобразование перемещения оси Y: -250%
- Преобразование вращения оси Z: -45 градусов
Затем удалите анимацию значка по умолчанию:
- Анимация изображения / иконки: без анимации
Мы собираемся использовать JQuery для переключения ящика, поэтому нам нужно настроить таргетинг на текст / значок как на интерактивный элемент с помощью класса CSS, который мы будем использовать позже в коде. Добавьте следующий класс CSS:
- Класс CSS: целевой ящик
Настройки секции ящика нижнего колонтитула
Теперь мы собираемся скрыть раздел «Footer Drawer», используя опцию преобразования translate. Откройте настройки раздела и обновите следующее:
- Преобразовать преобразовать ось Y: 100%
Преимущество использования преобразования здесь в том, что процентные значения основаны на фактическом размере элемента. Таким образом, 100% по оси Y будет прямо относительно высоты секции (независимо от того, какой она есть в любой момент времени). Другими словами, элемент будет перемещен вниз на точное расстояние, равное его собственной высоте.
Чтобы вернуть «ящик нижнего колонтитула» в поле зрения, нам нужно будет отменить преобразование преобразования, которое мы только что добавили в раздел. Для этого нам нужно нацелить элемент с помощью класса CSS и отключить преобразование перевода, щелкнув значок (верните весь раздел в исходное положение).
Добавьте класс CSS в секцию нижнего колонтитула
На расширенной вкладке добавьте следующий класс CSS:
- Класс CSS: has-transform
Секция нижнего ящика Фиксированное положение
На последнем шаге нам нужно зафиксировать нижний колонтитул так, чтобы он (со значком) плавал в нижней части окна браузера.
Обновите положение раздела «Нижний колонтитул» следующим образом:
- Положение: исправлено
- Расположение: внизу слева
- Индекс Z: 13
Отключить мобильный контент
Поскольку у вас будет ограниченное количество содержимого ящика нижнего колонтитула, которое поместится на планшете и телефоне (из-за ограниченной высоты экранов), вам нужно будет отключить / скрыть несущественные элементы с дисплея. В этом примере мы собираемся скрыть среднюю строку макета раздела.
Откройте настройки со второй до последней строки в разделе «Нижний колонтитул». На вкладке «Дополнительно» обновите параметр видимости, чтобы отключить линию на телефоне и планшете.
Добавление пользовательского кода
Чтобы добавить функцию щелчка и переключения в ящике нижнего колонтитула, нам нужно добавить на страницу собственный CSS и JQuery. Для этого создайте новый модуль кода под модулем Blurb, используемым для кнопки.
Затем вставьте следующий код в область кода:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
Сохранить изменения
Не забудьте сохранить макет перед выходом из редактора.
Также сохраните изменения в генераторе тем.
Конечный результат
Теперь мы можем перейти на любую страницу вашего Веб-сайт чтобы увидеть конечный результат.
Заключительные мысли
Надеюсь, плавающий ящик в нижнем колонтитуле вам поможет. содействовать содержание в увлекательной и доступной форме. Как и любой другой ящик, вы можете заполнить его чем угодно.
Другие Ресурсы
Вот список учебных пособий, которые помогут вам добиться большего с помощью внутренних функций Divi.
- Как создать панель инструментов темы на Divi
- Как создать анимированный рекламный раздел на Divi
- Как настроить сетки на Divi
Переведено с: Элегантные темы
