آیا می خواهید بدانید که چگونه ماژول "تایمر شمارش معکوس" را سفارشی کنید DIVI با گیف؟
در آموزش امروز، ما به شما نشان خواهیم داد که چگونه از یک ویدیوی پس زمینه تمام صفحه در دوره خود استفاده کنید. "تایمر شمارش معکوس". می توان از آن برای "ایجاد تعلیق" به روشی جالب و قابل توجه استفاده کرد.
بیایید شروع کنیم!
بررسی
قبل از ورود به این آموزش، بیایید نگاهی به نتیجه ای که می خواهیم به دست آوریم بیندازیم.
طراحی شمارش معکوس با Divi
آماده سازی عناصر طراحی
شمارش معکوس که می خواهیم طراحی کنیم از یک ویدیو در پس زمینه استفاده می کند. مکان‌های زیادی برای یافتن فیلم‌های استوک رایگان یا ممتاز وجود دارد. اما برای این آموزش از چند کلیپ ویدیویی رایگان استفاده خواهیم کرد ویدئویی.
این لینک مستقیم به ویدیویی است که از آن استفاده خواهیم کرد: ذرات پرنده.
پیاده سازی طراحی با Divi
می توانید از یک صفحه موجود استفاده کنید. اما برای سادگی، در صفحه جدیدی کار خواهیم کرد.
بنابراین یک صفحه جدید ایجاد کنید و یک ردیف با ساختار ستون زیر اضافه کنید.
درج ماژول " تایمر شمارش معکوس ».
تنظیم پارامترهای ماژول
ابتدا یک تاریخ تا شمارش معکوس انتخاب کنید، سپس ویرایش کنید:
- استفاده از رنگ پس زمینه: خیر
حالا روی تب کلیک کنید "طرح" و تنظیمات زیر را تغییر دهید.
- اندازه متن اعداد: 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 در حال حاضر!!!
نتیجه
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی باشد. DIVI. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.
همچنین راهنمای ما را ببینید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
