Divi: نحوه ایجاد انتقال پس‌زمینه بین عناصر

آیا می خواهید انتقال پس زمینه بین عناصر ایجاد کنید؟ DIVI ?

انتقال بدون درز طراحی پس زمینه بین عناصر ایجاد کنید DIVI یک راه عالی برای بهبود طراحی شما است وب سایت DIVI.

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

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

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

بیایید شروع.

بررسی

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

در اینجا چند طرح نمونه دیگر وجود دارد که تنها با چند تغییر ساده در ماسک ها و الگوهای پس زمینه امکان پذیر است.

یک صفحه جدید با Divi Builder ایجاد کنید

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

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

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

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

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

ایجاد یک انتقال بدون درز در پس زمینه بین یک بخش Divi و یک خط

ایجاد هدر به عنوان محتوای جایگیر

دفعات بازدید: Divi: نحوه ایجاد برگه ها با افکت شناور از خطوط

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

سپس یک ماژول Text به خط اضافه کنید.

متن سایز H1 را اضافه کنید.

زیر زبانه طرح، طراحی متن هدر را به دلخواه به روز کنید.

• فونت: Roboto Condensed
• وزن قلم: پررنگ
• سبک: TT
• تراز متن: در مرکز
• رنگ متن: #000000
• اندازه متن عنوان: 4vw
• فاصله حروف: 0.1em
• ارتفاع خط: 1.3 میلی متر

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

بالشتک به بخش اضافه شد

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

• بالشتک (بالا و پایین): 15vw

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

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

• توقف های گرادیان:
  • 0٪: #4f0f75 (در 0٪)
  • 25%: #2843c9 (در 25%)
  • 50%: #4ae2e0 (در 50%)
  • 75%: #3881ff (در 75%)
  • 100٪: #4f0f75 (در 100٪)

افزودن الگوی پس زمینه به بخش

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

• الگو: راه راه مورب
• رنگ الگو: rgba(79,15,117,0.23)
• تبدیل: چرخش
• اندازه الگو: اندازه سفارشی
• عرض: 7vw
• ارتفاع: 5vw
• مبدا تکرار الگو: مرکز

توجه داشته باشید: حتما از واحد طول VW برای عرض و ارتفاع الگو استفاده کنید. و همچنین مطمئن شوید که مبدا تکراری را روی "مرکز" تنظیم کنید. با این کار، الگوی پس‌زمینه در همان محل الگوی پس‌زمینه که بعداً به ردیف اضافه می‌کنیم، باقی می‌ماند.

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

زیر زبانه ماسک زمینه، موارد زیر را اضافه کنید:

• ماسک پس زمینه: لکه لایه
• رنگ ماسک: rgba(0,0,0,0.7)
• عرض ماسک: 100 ولت وات
• موقعیت: مرکز

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

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

پس‌زمینه بخش را در پس‌زمینه ردیف کپی و جای‌گذاری کنید

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

سپس پس زمینه را روی خط موجود قرار دهید.

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

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

اندازه ردیف و بالشتک را با استفاده از VW تنظیم کنید

در مرحله بعد، باید با استفاده از واحد طول VW، یک عرض سفارشی به ردیف خود بدهیم. موارد زیر را به روز کنید:

• عرض: 75vw
• حداکثر عرض: 75 ولت وات

• بالشتک (بالا، پایین، چپ و راست): 10vw

توقف های گرادیان را در خط تنظیم کنید

در مرحله بعد، ما باید استاپ های گرادیان را در پس زمینه خط برای انتقال یکپارچه به گرادیان پس زمینه بخش تنظیم کنیم.

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

سپس اولین توقف را روی 0% و توقف سوم را روی 100% قرار دهید. پس از اتمام، باید شیب های زیر را داشته باشید.

• گرادیان متوقف می شود
  • 0%: #2843c9
  • 50%: #4ae2e0
  • 100٪: #3881ff

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

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

• Box Shadow: اسکرین شات را ببینید
• موقعیت عمودی: 0px
• Box Shadow Blur قدرت: 4vw
• رنگ سایه: rgba(0,0,0,0.5)

رنگ الگوی پس‌زمینه خط را تنظیم کنید

اکنون که همه عناصر پس‌زمینه را آماده کرده‌ایم، می‌توانیم رنگ‌ها را برای طراحی خلاقانه‌تر تنظیم کنیم.

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

• رنگ الگو: rgba(255,255,255,0.23)

رنگ ماسک پس‌زمینه خط را تنظیم کنید

همچنین می‌توانیم رنگ ماسک را برای خط به‌روزرسانی کنیم تا طرح واقعاً برجسته شود.

زیر زبانه ماسک زمینه، موارد زیر را به روز کنید:

• رنگ ماسک: #ffffff
• تبدیل ماسک: معکوس

نتیجه نهایی

بیایید نتیجه نهایی را ببینیم.

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

امکانات بیشتر

در اینجا چند طرح نمونه دیگر وجود دارد که تنها با چند تغییر ساده در ماسک ها و الگوهای پس زمینه امکان پذیر است.

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

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

نتیجه

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

ابتدا باید یک طرح پس‌زمینه بخش متناسب با عرض نمای مرورگر ایجاد کنیم (از یک موقعیت مرکزی در صفحه). پس از اتمام، می توانیم از همان طرح پس زمینه یک خطی استفاده کنیم. پس از آن، ما فقط تغییراتی در شیب و رنگ برای طراحی شگفت انگیز داریم.

امیدواریم این تکنیک مهارت طراحی مفید دیگری را برای پروژه های آینده اضافه کند.

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

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

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

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

...