Пропустить

Как создать анимированные ящики на Divi

Divi: самая простая тема WordPress для использования

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Ящики нижнего колонтитула - полезное дополнение к любому веб-сайту, поскольку они хранят дополнительный контент, который легко доступен для пользователей. Ящики нижнего колонтитула - это контейнеры веб-контента (например, раздел Divi), которые можно открывать и закрывать, нажимая кнопку или наведя на нее курсор. Это как иметь небольшой запас премиум-контента.

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

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

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

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

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

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

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

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

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

Импортировать модель divi

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

Сохраните изменения макета divi

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

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

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

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

Выбор редактора Divi

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

Добавить нижний колонтитул модели Divi

Добавить предопределенный макет в глобальный макет нижнего колонтитула

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

Выберите готовую модель divi

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

Используйте модель divi

Удалить нежелательный контент из готового макета

После загрузки макета в редактор разверните всплывающее окно «Слои», щелкнув значок слоев в меню настроек. Затем удалите все разделы макета, кроме двух последних.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Удалить ненужный раздел

Переместите и пометьте два раздела

После удаления разделов у вас должно получиться два раздела, один под названием «Нижний колонтитул», а другой - «Как это работает». Переместите раздел «Нижний колонтитул» в верхнюю часть макета.

Нижний колонтитул Divi

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

Изменить метку нижнего колонтитула divi

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

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

Создание кнопки ящика нижнего колонтитула

Добавить новую строку

В нижней части нижнего колонтитула добавьте новую строку в столбец.

фиксированный ножной ящик

Назовите новую строку «Кнопка ящика», потому что это строка, которая будет содержать кнопку, используемую для переключения открытия и закрытия ящика. Затем переместите линию в верхнюю часть раздела.

Выбор макета divi

Row padding

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

  • Обивка: 0px высокий, 0px низкий
Конфигурация divi spacing

Секция заполнения

Затем откройте настройки в разделе «Ящик нижнего колонтитула» и обновите заполнение следующим образом:

Конфигурация расстояния между секциями Divi

Чтобы создать интерактивную кнопку, которая переключает ящик нижнего колонтитула, мы собираемся использовать модуль рекламного сообщения со значком. И мы собираемся придать ему уникальную форму капли, объединив квадратную форму контейнера модуля Blurb со значком круга.

Вот как.

Добавить модуль Blurb

Добавьте текстовый модуль презентации в строку «Кнопка ящика» в верхней части раздела.

Нижний колонтитул divi
Размытие контента / значок

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

Выберите значок ящика нижнего колонтитула divi
Дизайн рекламы

Затем дайте текст презентации следующим образом:

  • Цвет фона: # 081540
Изменить фон divi

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

  • Цвет значка: #eeeeee
  • Значок круга: ДА
  • Цвет круга: # 081540
  • Использовать размер шрифта значка: ДА
  • Размер шрифта иконки: 17 пикселей
Настроить кнопку рекламного сообщения divi
Размер текста презентации

Теперь дайте модулю высоту и ширину следующим образом:

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 701.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

  • Ширина: 30px
  • Высота: 30px

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

Редактировать дизайн кнопки divi
Положение размытия

Затем разместите текст презентации в верхнем центре раздела.

  • Позиция: Абсолют
  • Расположение: Топ Центр
Изменить положение кнопки divi
Настройки преобразования Blurb

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

Обновите следующие пункты:

  • Преобразовать преобразовать ось X: -50%
  • Преобразование перемещения оси Y: -250%
  • Преобразование вращения оси Z: -45 градусов

Затем удалите анимацию значка по умолчанию:

  • Анимация изображения / иконки: без анимации
Кнопка возврата divi

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

  • Класс CSS: целевой ящик
Определите селектор divi

Настройки секции ящика нижнего колонтитула

Теперь мы собираемся скрыть раздел «Footer Drawer», используя опцию преобразования translate. Откройте настройки раздела и обновите следующее:

  • Преобразовать преобразовать ось Y: 100%

Преимущество использования преобразования здесь в том, что процентные значения основаны на фактическом размере элемента. Таким образом, 100% по оси Y будет прямо относительно высоты секции (независимо от того, какой она есть в любой момент времени). Другими словами, элемент будет перемещен вниз на точное расстояние, равное его собственной высоте.

Преобразовать раздел divi

Чтобы вернуть «ящик нижнего колонтитула» в поле зрения, нам нужно будет отменить преобразование преобразования, которое мы только что добавили в раздел. Для этого нам нужно нацелить элемент с помощью класса CSS и отключить преобразование перевода, щелкнув значок (верните весь раздел в исходное положение).

Добавьте класс CSS в секцию нижнего колонтитула

На расширенной вкладке добавьте следующий класс CSS:

  • Класс CSS: has-transform
Добавить класс имеет преобразование divi

Секция нижнего ящика Фиксированное положение

На последнем шаге нам нужно зафиксировать нижний колонтитул так, чтобы он (со значком) плавал в нижней части окна браузера.

Обновите положение раздела «Нижний колонтитул» следующим образом:

  • Положение: исправлено
  • Расположение: внизу слева
  • Индекс Z: 13
Изменить положение в углу divi

Отключить мобильный контент

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

Скрыть раздел на мобильном

Откройте настройки со второй до последней строки в разделе «Нижний колонтитул». На вкладке «Дополнительно» обновите параметр видимости, чтобы отключить линию на телефоне и планшете.

Раздел управления видимостью divi

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

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

Добавить код модуля

Затем вставьте следующий код в область кода:

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

.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.

Переведено с: Элегантные темы

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация