هل ترغب في معرفة كيفية تخصيص وحدة "Countdown Timer" الخاصة بـ Divi مع GIF؟
في البرنامج التعليمي اليوم ، سنوضح لك كيفية استخدام فيديو الخلفية بملء الشاشة في الدورة التدريبية الخاصة بك. "العد التنازلي". يمكن استخدامه "لخلق التشويق" بطريقة مرحة ورائعة.
دعونا نبدأ!
مسح
قبل الغوص في هذا البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة التي نريد تحقيقها.
تصميم العد التنازلي مع Divi
تحضير عناصر التصميم
يستخدم العد التنازلي الذي سنقوم بتصميمه مقطع فيديو في الخلفية. هناك العديد من الأماكن للعثور على لقطات مجانية أو ممتازة. ولكن في هذا البرنامج التعليمي ، سوف نستفيد من بعض مقاطع الفيديو المجانية من فيديزي.
هذا هو الرابط المباشر للفيديو الذي سنستخدمه: الجسيمات الطائرة.
تنفيذ التصميم مع Divi
يمكنك استخدام صفحة موجودة. لكن من أجل البساطة ، سنعمل في صفحة جديدة.
لذلك قم بإنشاء صفحة جديدة وإضافة صف بهيكل العمود التالي.
أدخل الوحدة " العد التنازلي ".
ضبط معلمات الوحدة
أولاً ، اختر تاريخًا حتى العد التنازلي ، ثم عدّل:
- استخدام لون الخلفية: NO
الآن انقر فوق علامة التبويب "تصميم" وقم بتغيير الإعدادات أدناه.
- حجم نص الأرقام: 85 بكسل
- حجم نص التسمية: 15 بكسل
تعليق : سيبدو أنه لا يوجد عد تنازلي على الإطلاق ، لأننا أزلنا لون الخلفية. بمجرد أن نضيف فيديو الخلفية الخاص بنا في التعليمات أدناه ، سنتمكن من رؤية العد التنازلي.
ضبط معلمات القسم
الآن نحن بحاجة إلى إجراء بعض التغييرات الطفيفة على القسم. قم بالمرور فوق القسم وافتح الإعدادات.
في علامة التبويب وصف المنتج، اذهب للاعدادات " خلفية فيديو »ثم خلفيّة فيديو 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 Now !!!
وفي الختام
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريعك القادمة. Divi. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
انظر أيضا دليلنا إلى وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
