Хотите узнать, как настроить модуль «Таймер обратного отсчета» Divi с гифкой?
В сегодняшнем уроке мы покажем вам, как использовать полноэкранное фоновое видео в своем курсе. "Таймер обратного отсчета". Его можно использовать для «создания неизвестности» веселым и замечательным способом.
Давайте начнем!
обследование
Прежде чем погрузиться в этот урок, давайте взглянем на результат, которого мы хотим достичь.
Дизайн обратного отсчета с Divi
Подготовка элементов дизайна
Обратный отсчет, который мы собираемся разработать, использует видео в качестве фона. Есть много мест, где можно найти бесплатные или премиальные стоковые видеоматериалы. Но для этого урока мы воспользуемся некоторыми бесплатными видеоклипами с Видеози.
Вот прямая ссылка на видео, которое мы будем использовать: Летающие частицы.
Реализация дизайна с Divi
Вы можете использовать существующую страницу. Но для простоты мы будем работать на новой странице.
Поэтому создайте новую страницу и добавьте строку со следующей структурой столбцов.
Вставьте модуль " Таймер обратного отсчета ".
Настройка параметров модуля
Сначала выберите дату до обратного отсчета, затем отредактируйте:
- Использовать цвет фона: НЕТ
Теперь нажмите на вкладку "Дизайн" и измените настройки ниже.
- Размер текста чисел: 85px
- Размер текста этикетки: 15 пикселей
НОТА : это будет выглядеть так, будто обратного отсчета нет вообще, потому что мы удалили цвет фона. Как только мы добавим наше фоновое видео в инструкции ниже, мы сможем увидеть обратный отсчет.
Настройка параметров раздела
Теперь нам нужно внести небольшие изменения в раздел. Наведите курсор на раздел и откройте настройки.
Во вкладке Содержание, перейти к настройкам " Фон Видео »А потом проверка данных Видео MP4.
Cliquez-сюр- « Добавить фон Видео » и добавьте видео, которое мы скачали ранее с Видеози. Теперь вы должны увидеть фоновое видео, воспроизводимое после нашего обратного отсчета.
Теперь нам нужно сделать всего одну небольшую настройку на вкладке Фильтр параметры модуля раздела. Добавьте пользовательский CSS ниже в Главный элемент.
height: 100vh; 
Вот что вы должны увидеть до сих пор.
Добавлен пользовательский CSS
Последнее, что нам нужно сделать, это добавить пользовательский CSS, чтобы пройти весь путь.
Итак, открываем настройки модуля, нажимаем на вкладку "Передовой" и добавьте класс CSS
- Класс CSS: обычай-обратный отсчет-5
Теперь, когда наш пользовательский класс добавлен, мы готовы добавить наш пользовательский CSS.
Для этого перейдите в настройки страницы.
Перейти на вкладку Фильтр и добавьте пользовательский CSS ниже.
.custom-countdown-5.et_pb_countdown_timer .sep {
display: none;
}
.custom-countdown-5.et_pb_countdown_timer .section.values {
border-left: 1px solid #808080;
}
.custom-countdown-5 .days {
border-left: none !important;
margin-right: 16px;
}
Затем сохраните изменения и любуйтесь своим творением!
БОНУС: дополнительная настройка
Мы можем комбинировать анимированный градиент с нашим фоновым видео для еще более уникального вида. Просто добавьте CSS ниже (после CSS выше).
.et_pb_section:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-o-animation: colorcycle 20s ease infinite;
-moz-animation:
colorcycle 20s ease infinite;
-webkit-animation: colorcycle 20s ease infinite; animation: colorcycle 20s ease infinite;
background: linear-gradient(270deg, #a253e0, #f15b4f, #2ea3f2);
background-size: 600% 600%;
}
@-webkit-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.et_pb_section_video_bg { opacity: .9; }Вот как это будет выглядеть:
Скачайте DIVI прямо сейчас!!!
Заключение
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты. Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Также смотрите наше руководство по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
