Divi: نحوه ایجاد ماسک ها و الگوهای پس زمینه متحرک هنگام اسکرول

آیا می خواهید پس زمینه طراحی کنید DIVI به لطف ماسک ها و الگوها هنگام پیمایش صفحه متحرک می شود؟ این آموزش برای شماست...

افزودن یک انیمیشن اسکرول به DIVI و ماسک ها و الگوهای پس زمینه آن یک نکته طراحی مفید است که می تواند جان تازه ای به طرح های پس زمینه شما بدهد. وب سایت. 

در این آموزش، ما به شما نشان خواهیم داد که چگونه با استفاده از گزینه های اسکرول، ماسک ها و الگوهای پس زمینه را ایجاد و متحرک کنید. DIVI (بدون نیاز به کد سفارشی). 

برای این کار یک لایه پس زمینه شناور با استفاده از یک خط ایجاد می کنیم DIVI هنگامی که کاربر در بخشی از آن اسکرول می کند، از آن برای متحرک سازی ماسک ها و الگوهای پس زمینه استفاده می کنیم محتویات. 

ما فکر می کنیم که شما نتیجه را دوست خواهید داشت.

بیایید شروع کنیم!

بررسی

در اینجا یک تصویر سریع از این است که انیمیشن اسکرول پس‌زمینه برای این آموزش چگونه خواهد بود.

مفهوم

درک مفهوم این طرح نباید خیلی سخت باشد. ما با بخشی شروع می کنیم که دارای پس زمینه گرادیان است.

سپس خطی ایجاد می کنیم که در موقعیت (مطلق) قرار می گیرد تا کاملاً قسمت را بپوشاند (مانند روکش). می توانیم یک الگوی پس زمینه به ردیف اضافه کنیم.

در مرحله بعد می توانیم یک ماسک پس زمینه به ستون اضافه کنیم.

سپس اضافه می کنیم جلوه های اسکرول به ردیف و ستون (مانند مقیاس و چرخش) که الگو و ماسک را به طور جداگانه در پس‌زمینه بخش متحرک می‌کند.

وقتی سرریز بخش را پنهان می کنیم، تنها چیزی که می بینیم انیمیشن موجود در بخش است.

بیایید با ایجاد یک صفحه با Divi Builder شروع کنیم

برای شروع، باید موارد زیر را انجام دهید:

از داشبورد وردپرس، به صفحات> افزودن جدید برای ایجاد یک صفحه جدید

عنوانی به آن بدهید که برای شما منطقی باشد و کلیک کنید استفاده کنید DIVI سازنده

سپس روی کلیک کنید شروع به ساختن کنید (از خراش بسازید)

پس از آن یک بوم خالی برای شروع طراحی در دیوی خواهید داشت.

دفعات بازدید: Divi: چگونه از "Gradient Builder" برای زیباسازی تصاویر خود استفاده کنیم

نحوه ایجاد ماسک ها و الگوهای پس زمینه اسکرول متحرک با Divi

طراحی پس زمینه بخش

ابتدا از ایجاد یک خط صرفنظر می کنیم و مستقیماً به ویرایش بخش پیش فرض موجود در تم ساز می پریم. 

برای اینکه طراحی پس زمینه ما مرورگر را پر کند، باید یک ارتفاع عمودی به بخش اضافه کنیم. یک راه ساده برای انجام این کار اضافه کردن حداقل ارتفاع به بخش است.

تنظیمات بخش را باز کنید. زیر زبانه طرح، حداقل ارتفاع را به روز کنید و بالشتک را به صورت زیر بردارید:

• حاشیه: 80 ولت ساعت (بالا و پایین)
• بالشتک: 0 پیکسل (بالا و پایین)

طراحی یک گرادیان پس زمینه برای بخش

اکنون می توانیم یک گرادیان پس زمینه سفارشی به بخش اضافه کنیم.

برای اضافه کردن اولین ایستگاه های گرادیان، مطمئن شوید که تنظیمات بخش در زیر برگه باز است محتوا. سپس تب را انتخاب کنید گرادیان زمینه و برای افزودن یک گرادیان جدید کلیک کنید. با این کار دو رنگ گرادیان پیش فرض اضافه می شود. Gradient Stops زیر را با رنگ و موقعیت به صورت زیر اضافه کنید:

• توقف های گرادیان:
  • 0%: #4158d0
  • 50%: #c850c0
  • 100٪: #ffcc70

سپس جهت گرادیان خطی را تغییر دهید:

• جهت گرادیان: 270 درجه

سطرها را به بخش اضافه کنید

اکنون که بخش ما در جای خود قرار دارد، یک ردیف تک ستونی به بخش اضافه کنید. این خط برای ماسک پس‌زمینه و انیمیشن اسکرول الگوی ما استفاده خواهد شد.

بعد، خطی را که ایجاد کردید کپی کنید. این خط دوم (کپی شده) برای ما استفاده خواهد شد محتویات همانطور که شما معمولا انجام می دهید. 

اکنون باید یک خط بالا برای انیمیشن اسکرول پس‌زمینه و یک خط برای آن داشته باشید محتویات طبیعی است.

سفارشی کردن خط

اکنون که گرادیان پس‌زمینه بخش خود را آماده کرده‌ایم، می‌توانیم توجه خود را به خطی که برای انیمیشن پس‌زمینه روی اسکرول استفاده می‌کنیم معطوف کنیم. 

تنظیمات خط را باز کنید. زیر زبانه فناوری، موارد زیر را به روز کنید:

• موقعیت: مطلق

این به خط اجازه می دهد تا بدون اشغال فضای واقعی در سند روی بخش همپوشانی داشته باشد. 

اکنون تنها کاری که باید انجام دهیم این است که ارتفاع و عرض را به‌روزرسانی کنیم تا تمام عرض و ارتفاع بخش را در بر گیرند. با این کار همپوشانی مورد نیاز ما و دومین لایه طراحی پس زمینه ما ایجاد می شود.

زیر زبانه طرح، گزینه های اندازه را به صورت زیر به روز کنید:

• ارتفاع ستون Aquasize: بله
• عرض: 100%
• حداکثر عرض: 100٪
• قد: 100%
• بالشتک: 0 پیکسل (بالا و پایین)

اکنون ممکن است نتوانید خط را ببینید، اما اکنون کاملاً پس‌زمینه کل بخش را پوشش می‌دهد.

یک الگوی پس زمینه برای خط ایجاد کنید

در این مثال ما الگو را اضافه می کنیم شیرینی به عنوان پس زمینه خط

تنظیمات خط را باز کنید. زیر گزینه زمینه، برگه را انتخاب کنید الگوی پیش زمینه و موارد زیر را به روز کنید:

• الگوی پس زمینه: آبنبات
• الگو :
  • رنگ: #f6bef7
  • اندازه: اندازه سفارشی
  • عرض: 35 vw
  • تکرار مبدا: مرکز

توجه : استفاده از واحد طول VW تضمین می کند که الگو با مرورگر مقیاس می شود و طرح را سازگار و پاسخگو نگه می دارد.

افکت های اسکرول را به خط اضافه کنید

اکنون که الگوی پس زمینه ما در جای خود قرار دارد، می توانیم افکت های اسکرول را به خط اضافه کنیم.

به برگه بروید فناوری. زیر گزینه جلوه های پیمایش کنید، موارد زیر را به روز کنید:

برگه را انتخاب کنید حرکت افقی و موارد زیر را به روز کنید:

• فعال کردن حرکت افقی: بله
• آفست شروع: 0,5 (در 0٪)
• افست متوسط: 0 (از 40٪ تا 60٪)
• پایان افست: -0,5 (در 100٪)

با این کار، الگوی پس‌زمینه خط از 50 پیکسل به چپ و 50 پیکسل به سمت راست ختم می‌شود.

تب "Scale Up and Down" را انتخاب کنید و موارد زیر را به روز کنید:

• فعال کردن مقیاس بالا و پایین: بله
• مقیاس شروع: 150٪ (در 0٪)
• مقیاس متوسط: 100٪ (از 40٪ تا 60٪)
• مقیاس پایانی: 150٪ (در 100٪)

با این کار الگوی پس‌زمینه ردیف در هنگام پیمایش مقیاس‌بندی می‌شود.

برگه را انتخاب کنید « چرخشی  » و موارد زیر را به روز کنید:

• فعال کردن چرخش: بله
• چرخش شروع: 10 درجه (در 0٪)
• چرخش میانه: 0 درجه (از 40٪ تا 60٪)
• چرخش پایانی: -10 درجه (در 100٪)

نکته کلیدی: شما باید چرخش را به حداقل برسانید در غیر این صورت خطر نشان دادن شکاف هایی را دارید که در آن خط از بخش گذشته نیست. یک قانون کلی خوب این است که اگر می خواهید چرخش را افزایش دهید، مقیاس را افزایش دهید. این به خط اجازه می‌دهد تا بدون آشکار کردن لبه‌ها روی بخش بچرخد.

ماسک پس‌زمینه با افکت‌های اسکرول را به ستون اضافه کنید

هنگامی که ردیف ما کامل شد، ما آماده هستیم تا یک ماسک پس زمینه با افکت های اسکرول را به ستون همان ردیف اضافه کنیم. برای شروع، اجازه دهید یک ماسک پس زمینه اضافه کنیم.

برای انجام این کار، تنظیمات ستون را باز کنید. زیر زبانه ماسک زمینه، موارد زیر را به روز کنید:

• ماسک: لایه لایه
• رنگ: #ffffff
• تبدیل ماسک: تلنگر افقی، وارونگی

افکت های اسکرول را به ستون اضافه کنید

اکنون که ماسک پس زمینه ما در جای خود قرار دارد، می توانیم افکت های اسکرول را به ستون اضافه کنیم. به خاطر داشته باشید که ستون قبلاً دارای اثرات پیمایشی است که از ردیف والد به ارث رسیده است. 

تنها کاری که می‌خواهیم انجام دهیم این است که ستون را در جهت مخالف ردیف بچرخانیم تا به جدایی بیشتر ماسک و الگو در طول مدت اسکرول برسیم.

به برگه بروید فناوری. زیر گزینه ها جلوه های پیمایش کنید، برگه را انتخاب کنید روتاتیng و موارد زیر را به روز کنید:

• فعال کردن چرخش: بله
• چرخش شروع: -15 درجه (در 0٪)
• چرخش میانه: 0 درجه (از 40٪ تا 60٪)
• چرخش پایانی: 15 درجه (در 100٪)

پنهان کردن سرریز بخش

در حال حاضر، هر زمان که پیمایش باعث شود تا فراتر از بخش گسترش یابد، خط قابل مشاهده است.

برای پاک کردن این موضوع، باید سرریز بخش را پنهان کنیم. برای این کار تنظیمات بخش را باز کنید. زیر زبانه فناوری، گزینه های دید را به صورت زیر به روز کنید:

• سرریز افقی: پنهان
• سرریز عمودی: پنهان

حالا بهتر به نظر می رسد.

همچنین ببینید: Divi: 12 ترکیب از ماسک ها و الگوهای پس زمینه

افزودن محتوا به خط ایجاد شده برای این منظور

در این مرحله، ماسک پس‌زمینه و انیمیشن اسکرول الگو کامل می‌شوند. تنها کاری که باید انجام دهیم این است که محتوای مورد نظر خود را به خطی که قبلا برای محتوا ایجاد کرده بودیم اضافه کنیم.

برای این مثال، ما یک عنوان ساختگی اضافه کرده‌ایم تا بتوانیم ببینیم انیمیشن پس‌زمینه با متن ایستا چگونه خواهد بود.

نتیجه نهایی

بیایید نگاهی به نتیجه نهایی طراحی خود بیندازیم.

اکنون DIVI را دانلود کنید!!!

نتیجه

ایجاد چنین پس زمینه های زیبایی با گزینه های پس زمینه Divi شگفت انگیز است. به علاوه، افزودن انیمیشن با افکت‌های اسکرول Divi جان تازه‌ای به این طرح‌ها می‌بخشد.

برای ظاهری متفاوت، می‌توانید ماسک‌ها و الگوهای مختلفی را روی هر لایه امتحان کنید. اگر می خواهید الهام بیشتری در مورد نحوه استفاده از آن داشته باشید ماسک ها و الگوها پس زمینه، اینها را بررسی کنید 12 ترکیب ماسک و الگوی پس زمینه

امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.

دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...