Искате ли да знаете как да персонализирате модула „Таймер за обратно отброяване“ на Divi с GIF?
В днешния урок ще ви покажем как да използвате фоново видео на цял екран във вашия курс. "Таймер за обратно броене". Може да се използва за „създаване на напрежение“ по забавен и забележителен начин.
Нека да започнем!
изследване
Преди да се потопим в този урок, нека да разгледаме резултата, който искаме да постигнем.
Дизайн за обратно броене с Divi
Подготовка на елементите на дизайна
Обратното броене, което ще проектираме, използва видеоклип във фонов режим. Има много места за намиране на безплатни или премиум кадри. Но за този урок ще се възползваме от някои безплатни видеоклипове от Видези.
Ето директната връзка към видеото, което ще използваме: Летящи частици.
Изпълнение на дизайна с Divi
Можете да използвате съществуваща страница. Но за по-голяма простота ще работим в нова страница.
Затова създайте нова страница и добавете ред със следната структура на колоните.
Поставете модула " Таймер за обратно броене ".
Настройка на параметрите на модула
Първо изберете дата до обратното броене, след което редактирайте:
- Използвайте цвят на фона: НЕ
Сега щракнете върху раздела "Дизайн" и променете настройките по-долу.
- Числа Размер на текста: 85px
- Размер на текста на етикета: 15px
ЗАБЕЛЕЖКА : ще изглежда, че изобщо няма обратно броене, защото премахнахме цвета на фона. След като добавим нашия фонов видеоклип в инструкциите по-долу, ще можем да видим обратното броене.
Настройка на параметрите на секциите
Сега трябва да направим някои малки промени в секцията. Задръжте курсора на мишката над секцията и отворете настройките.
В раздела съдържание, отидете на настройките " Заден план Видео », след това История Видео MP4.
Кликнете върху « Добавяне на фон Видео » и добавете видеоклипа, от който изтеглихме по-рано Видези. Сега трябва да видите фоновото видео, което се възпроизвежда зад нашето обратно броене.
Сега трябва да направим само една малка корекция в раздела Подробно параметри на раздел модул. Добавете персонализирания 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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...