هل ترغب في معرفة كيفية تخصيص وحدة "مؤقت العد التنازلي" في 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 التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
انظر أيضا دليلنا إلى وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...