Divi: نحوه تغییر گرادیان پس‌زمینه در شناور

آیا می خواهید یک گرادیان پس زمینه در آن داشته باشید DIVI در هنگام شناور بودن تغییر می کند؟

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

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

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

بیایید برویم

بررسی

قبل از فرو رفتن در آموزش، اجازه دهید نگاهی به نتیجه نهایی بیندازیم.

بیایید طراحی را با Divi شروع کنیم

همچنین ببینید: Divi: نحوه ایجاد یک نوار لغزنده آکاردئون پاسخگو

بخش شماره 1 را اضافه کنید

فاصله

اولین کاری که باید انجام دهید این است که یک صفحه جدید ایجاد کنید یا یک صفحه موجود را باز کنید و یک بخش معمولی جدید به آن اضافه کنید. تنظیمات را باز کنید و حاشیه های بالا و پایین سفارشی را اضافه کنید.

• بالشتک (بالا و پایین): 100 پیکسل

خط 1 را اضافه کنید

ساختار ستون

با افزودن یک ردیف جدید با استفاده از ساختار ستون زیر ادامه دهید:

رنگ پس‌زمینه پیش‌فرض (رومیزی) ستون 1

بدون افزودن ماژول، تنظیمات ردیف را باز کنید و رنگ پس‌زمینه پیش‌فرض زیر را به ستون 1 اضافه کنید:

• پس زمینه (رومیزی): #e7ffa0

رنگ پس‌زمینه ستون 1 روی شناور

این رنگ پس‌زمینه را در حالت شناور تغییر دهید.

• پس زمینه: #00020c

گرادیان پس زمینه ستون 1

همچنین یک رنگ پس‌زمینه گرادیان به ستون 1 اضافه کنید. توجه کنید که ما از یک رنگ کاملا شفاف استفاده می‌کنیم. این رنگ به رنگ پس‌زمینه اجازه نمایش می‌دهد که به نوبه خود با شناور تغییر می‌کند.

• رنگ 1 (20%): rgba (255,255,255,0)
• رنگ 2 (100%): rgba (16,0,201,0.8)
• نوع گرادیان: خطی
• جهت گرادیان: 50 درجه

رنگ زمینه ستون 2

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

• زمینه: #ffffff

اندازه

سپس به برگه بروید طرح و تنظیمات اندازه را در گزینه تغییر دهید اندازه گیری.

• از عرض ناودان سفارشی استفاده کنید: بله
• عرض ناودان: 1
• عرض: 2000 پیکسل

فاصله

با افزودن مقادیر padding سفارشی در تنظیمات فاصله، ادامه دهید.

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

فاصله (ستون 2)

• پد (بالا و پایین): 6vw (رومیزی)، 120px (تبلت و تلفن)
• پد (چپ و راست): 5vw (رومیزی)، 80 پیکسل (تبلت)، 50 پیکسل (تلفن)

سایه جعبه

و همچنین به ردیف یک سایه باکس ظریف بدهید.

• قدرت تاری سایه جعبه: 100 پیکسل
• قدرت پخش سایه جعبه: -10 پیکسل

گذار

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

• مدت زمان انتقال: 1100 میلی‌ثانیه

یک ماژول Image به ستون 1 اضافه کنید

تصویری را بارگذاری کنید

وقت آن است که اضافه کردن ماژول ها را شروع کنیم! یک ماژول Image به ستون اول اضافه کنید.

پیشینه شیب

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

• رنگ 1 (57%): rgba (50,217,255,0.66)
• رنگ 2 (100%): rgba (255,255,255,0)
• نوع گرادیان: دایره ای
• موقعیت گرادیان: بالا

فاصله

در مرحله بعد، بالشتک بالایی سفارشی را به ماژول اضافه کنید.

• بالشتک (بالا): 14vw

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

اضافه کردن محتوا

بریم سراغ ستون دوم! اولین ماژول مورد نیاز ما یک ماژول متنی برای عنوان است. ادامه دهید و a را اضافه کنید محتویات عنوان انتخاب

تنظیمات متن سرصفحه

سپس به تنظیمات متن سرصفحه بروید و تغییراتی را اعمال کنید.

• فونت: Abril Fatface
• رنگ متن: #000000
• اندازه متن: 4 vw (رومیزی)، 60 پیکسل (تبلت)، 40 پیکسل (تلفن)

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

اضافه کردن محتوا

ماژول دومی که به آن نیاز داریم ماژول Text دیگری است. مقداری اضافه کنید محتویات انتخاب.

تنظیمات متن

سپس به تنظیمات متن بروید و تراز متن را تغییر دهید.

• تراز متن: موجه

اندازه

همچنین عرض را در تنظیمات اندازه تنظیم کنید.

• عرض: 73% (رومیزی)، 100% (تبلت و تلفن)

فاصله

در نهایت، حاشیه های بالا و پایین سفارشی را به ماژول اضافه کنید تا فضا ایجاد شود.

• حاشیه (بالا و پایین): 2,5 vw (رومیزی)، 50 پیکسل (تبلت و تلفن)

ماژول Button را به ستون 2 اضافه کنید

یک توضیح اضافه کنید

سومین و آخرین ماژول مورد نیاز ما در ستون دوم یک ماژول Button است. یک کپی به انتخاب خود اضافه کنید.

تنظیمات دکمه

سپس تنظیمات دکمه را تغییر دهید.

• استفاده از سبک های سفارشی برای دکمه: بله
• اندازه متن دکمه: 1,2 vw (رومیزی)، 14 پیکسل (تبلت و تلفن)
• رنگ متن دکمه: #ffffff

• Gradient Stops 1 (0%): #9ea6ff
• Gradient Stops 2 (100%): rgba(16,0,201,0.8)
• فرمان: 78 درجه

• پهنای حاشیه دکمه: 0 پیکسل
• شعاع حاشیه: 30 پیکسل
• فاصله حروف: -1 پیکسل
• وزن قلم: فوق العاده پررنگ
• سبک قلم: TT - (بزرگ)

فاصله

مقادیر پر کردن سفارشی را نیز اضافه کنید.

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

سایه جعبه

و یک سایه باکس ظریف روی دکمه اعمال کنید.

• قدرت تاری سایه جعبه: 40 پیکسل

دفعات بازدید: نحوه سفارشی سازی ماژول "Countdown Timer" با یک GIF

بخش شماره 2 را اضافه کنید

فاصله

اکنون که بخش اول را کامل کردیم، به سراغ قسمت بعدی می رویم. یک بخش معمولی جدید با استفاده از مقادیر padding سفارشی زیر اضافه کنید:

• بالشتک (بالا و پایین): 100 پیکسل

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

ساختار ستون

با افزودن یک ردیف جدید به بخش با استفاده از ساختار ستون زیر ، ادامه دهید:

پس زمینه ستون 1

بدون افزودن ماژول، تنظیمات ردیف را باز کنید و رنگ پس‌زمینه زیر را به ستون 1 اضافه کنید:

• زمینه: #ffffff

پس زمینه ستون 2 (رومیزی)

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

• پس زمینه (رومیزی): #ffffff

رنگ پس زمینه ستون 2 روی شناور

و این رنگ پس زمینه را در حالت شناور تغییر دهید.

• پس زمینه (Hover): #3d02ff

پس زمینه 2 ستونی شیب

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

• Gradient Stops 1 (20%): rgba(255,255,255,0)
• Gradient Stops 2 (100%): #ff7700

اندازه

در مرحله بعد، به تنظیمات اندازه بروید و تغییراتی ایجاد کنید.

• از عرض ناودان سفارشی استفاده کنید: بله
• عرض ناودان: 1
• عرض: 2000 پیکسل

فاصله (خط)

با افزودن مقادیر padding سفارشی در تنظیمات فاصله، ادامه دهید.

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

فاصله (ستون 1)

تنظیمات فاصله ستون 1 را تغییر دهید

• پد (بالا و پایین): 6vw (رومیزی)، 120px (تبلت و تلفن)
• پد (چپ و راست): 5vw (رومیزی)، 80 پیکسل (تبلت)، 50 پیکسل (تلفن)

سایه جعبه

و همچنین یک سایه باکس ظریف به این ردیف اضافه کنید.

• قدرت تاری سایه جعبه: 100 پیکسل
• قدرت پخش سایه جعبه: -10 پیکسل

گذار

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

• مدت زمان انتقال: 1100 میلی ثانیه

ماژول های خط 1 تکراری

از آنجایی که ما از قبل تمام ماژول های مورد نیاز خود را در بخش قبل داریم، با شبیه سازی آنها در زمان صرفه جویی خواهیم کرد.

موارد تکراری را در ردیف 2 ستون قرار دهید

و موارد تکراری را به صورت زیر در خط جدید قرار دهید:

ویرایش محتوا

حتما عوض کنید محتویات از ماژول های شما

تغییر پس زمینه گرادیان دکمه

همچنین گرادیان پس زمینه دکمه را تغییر دهید.

• گرادیان توقف 0٪: #ff653f
• گرادیان 100٪ متوقف می شود: #0066ff
• جهت: 39 درجه

تغییر تصویر

تصویر را جایگزین کنید.

تغییر گرادیان پس زمینه

در نهایت، گرادیان پس‌زمینه ماژول Image را تغییر دهید.

• گرادیان توقف 0٪: rgba (0,2,12,0.66،XNUMX،XNUMX،XNUMX)
• گرادیان توقف 57٪: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)

بررسی

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

دانلود DIVI در حال حاضر!!!

نتیجه

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

شما آزاد هستید که از طراحی و آثار هنری برای هر نوع وب سایتی که ایجاد می کنید استفاده کنید. 

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

همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...