ادغام چندین تصویر می تواند برای ایجاد پس زمینه حرفه ای برای شما مفید باشد وب سایت. ایده این است که دو یا سه تصویر جداگانه بگیرید و آنها را روی هم قرار دهید. سپس از یک حالت ترکیبی برای ترکیب لایه ها با هم استفاده کنید تا یک طرح یکپارچه و یکپارچه ایجاد کنید.
هر عنصر در Divi Builder دارای حالت ادغام داخلی و گزینه های فیلتر است که ادغام عناصر را در سازنده Divi آسان می کند. البته ، شما می توانید تصاویر را در فتوشاپ (یا ویرایشگر عکس دیگری) مخلوط کنید ، اما برای کسانی که به دنبال یک راه حل عملی Divi هستند ، این آموزش باید به شما کمک کند ، زیرا با Divi بسیار آسان است. هنگامی که تصاویر را در مکان مناسب قرار دادید ، می توانید آنها را فقط با چند کلیک مخلوط کنید. و مطمئناً شما زرادخانه ای از گزینه های Divi را دارید تا جلوه های نهایی را به شما بدهد و بعد خلاقیت جدیدی به طراحی ببخشد.
بیایید شروع.
بررسی
در اینجا مروری بر طرحی که می خواهیم با هم بسازیم ارائه شده است.
آنچه شما باید برای شروع کار
برای شروع ، باید موارد زیر را انجام دهید:
- اگر قبلاً این کار را نکرده اید، آن را نصب و فعال کنید تم دیوی نصب شده است (یا اگر از افزونه Divi Builder استفاده نمی کنید تم دیوی).
- یک صفحه جدید در وردپرس ایجاد کنید و از Divi Builder برای ویرایش صفحه در قسمت جلویی (سازنده بصری) استفاده کنید.
- چند تصویر ساختگی را در کتابخانه رسانه بارگذاری کنید تا برای آموزش استفاده کنید. من از تصاویر موجود در بسته چیدمان دکتر چشم .
پس از آن یک بوم خالی برای شروع طراحی در دیوی خواهید داشت.
نحوه مخلوط کردن چندین تصویر برای ایجاد طرح زمینه پس زمینه در Divi
بیایید با بخش و خط شروع کنیم
برای انجام کارها ، یک ردیف ستون را به بخش معمولی اضافه کنید.
افزودن تصاویر با ماژول تصویر
تصویر n ° 1
پس از تعریف ردیف و ستون ، ماژول تصویر را به خط اضافه کنید.
تصویری را بارگذاری کنید که تقریباً 500 پیکسل در 700 پیکسل است. من از یک بسته چیدمان چشم پزشک استفاده می کنم.
پس از بارگذاری تصویر ، با استفاده از واحد طول vw حداکثر عرض تصویر را ایجاد کنید تا با تصاویر دیگری که قرار است ادغام شوند کاملاً متناسب باشد و سپس چپ را به صورت زیر تراز کنید:
- حداکثر عرض: 33vw
- ترازبندی ماژول: سمت چپ
ما می خواهیم تصویر بعدی که اضافه می کنیم در سمت راست آن تصویر تراز شود. بنابراین باید این تصویر را به سمت چپ شناور کنیم. برای انجام این کار ، CSS زیر را به عنصر اصلی اضافه کنید:
شناور: سمت چپ.
تصویر n ° 2
سپس یک ماژول تصویر جدید در زیر تصویر فعلی اضافه کنید.
پس از آن ، تصویر جدیدی را بگیرید که ابعاد آن نزدیک به پیکسل های 1000 با پیکسل های 667 است.
سپس به تصویر عرض جدید و حداکثر تراز بندی جدید دهید.
- حداکثر عرض: 40vw
- تراز ماژول: درست است
از آنجا که تصویر اول در سمت چپ شناور است ، تصویر دوم اکنون باید در مجاورت سمت راست باشد.
ما برمی گردیم تا چند تصویر نهایی را روی این تصاویر بگذاریم ، اما اکنون اجازه دهید به قسمت تنظیمات برویم.
تنظیمات بخش
تنظیمات بخش را باز کرده و تصویر پس زمینه و شیب را به شرح زیر اضافه کنید:
- تصویر پس زمینه: [بارگیری تصویر تقریباً 1920 پیکسل در 1280 پیکسل]
- شیب پس زمینه سمت چپ رنگ: rgba (1,16,63,0.64)
- رنگ شیب پس زمینه سمت راست: rgba (12,113,195,0.82)
- شیب را بالای تصویر پس زمینه قرار دهید: بله
سپس بالشتک را کمی تنظیم کنید.
- اثاثه یا لوازم داخلی (دفتر): 0px در بالا ، 0px در پایین
- بالشتک (تلفن): 0px در بالا ، 10vw در پایین
تنظیمات خط
پس از پایان بخش ، تنظیمات خط را باز کرده و موارد زیر را به روز کنید:
- عرض: 100٪؛
- حداکثر عرض: 100٪؛
- اثاثه یا لوازم داخلی: 0px در بالا ، 0px در پایین
حالت ادغام را به خط اضافه کنید
اکنون خط باید کل قسمت پایین قسمت را پوشش دهد. این به ما امکان می دهد برای ادغام دو تصویر با پس زمینه بخش ، حالت ادغام را به خط اضافه کنیم. برای این کار ، حالت ترکیبی زیر را اضافه کنید.
- حالت فیوژن: ضرب کنید
چرا ضرب می کنیم؟
حالت blend multiply لایه / ردیف فعلی (از جمله تصاویر موجود در آن) را در لایه زیر آن (پس زمینه بخش) ضرب می کند. یک روش آسان برای فکر کردن در مورد اثر ، تصور کردن دو اسلاید در یک پروژکتور اسلاید است که پشت سر هم قرار گرفته اند. اگر دو تصویر را روی صفحه نمایش دهید ، مخلوط کمی تاریک تر از این دو تصویر به دست می آید.
تصاویر مرکز را به صورت عمودی قرار دهید
نیازی به این کار نیست ، اما اگر می خواهید مطمئن شوید که هر دو عکس در ردیف به صورت عمودی در مرکز قرار دارند ، می توانید یک قطعه CSS به ستون اضافه کنید. برای این کار ، تنظیمات ردیف را باز کنید و سپس روی تنظیمات ستون کلیک کنید. سپس کد CSS زیر را به عنصر اصلی اضافه کنید.
نمایش: flex؛ تراز وسایل: مرکز؛
لمس نهایی به دو بهترین عکس
در حال حاضر دو تصویر برتر ما به خوبی جفت می شوند ، اما آنها می توانند از چند تغییر در طراحی استفاده کنند تا کمی حرفه ای تر به نظر برسد. می توانیم با استفاده از سایه جعبه سفید لبه های تصاویر را نرم کنیم و با استفاده از دستور Transform آنها را دقیقاً در محلی که می خواهیم بمانند قرار دهیم.
کلیدهای نهایی تصویر # 1
تنظیمات ماژول تصویر را در سمت چپ باز کرده و موارد زیر را به روز کنید:
- Box Shadow: تصویر را ببینید
- کادر Shadow Blur Force: 6vw
- ضخامت سایه جعبه: 6vw
- رنگ سایه: #ffffff
- ترانسفورماتور ترجمه: 5vw (محور X) ، 11vw (محور Y)
کلیدهای نهایی تصویر # 2
پس از اتمام دستکاری تصویر شماره 1 در سمت چپ ، تنظیمات مربوط به تصویر شماره 2 را در سمت راست باز کرده و تغییرات زیر را انجام دهید:
- Box Shadow: تصویر را ببینید
- کادر Shadow Blur Force: 3vw
- Box Shadow Force Spread: 3vw
- رنگ سایه: #ffffff
حتی می توانیم بعضی از فیلترها را اضافه کنیم تا تصویر واضح تر شود.
- اشباع: 30٪
- کدورت: 60٪
محتوای متن را اضافه کنید
اکنون که بخش ما با سه تصویر ترکیب شده کامل شده است، می توانیم تصویر خود را اضافه کنیم محتویات در بالای بخش برای انجام این کار، یک بخش جدید در زیر بخش فعلی اضافه کنید.
سپس یک ردیف یک ستون را به بخش معمولی اضافه کنید.
سپس ماژول متن را به خط اضافه کنید.
محتوای بدن
را به روز کنید محتویات از ماژول متن با محتویات از بدن زیر:
امتحان چشم را رزرو کنید محتوای شما به اینجا می رود. این متن را به صورت درون ریز یا در تنظیمات محتوای ماژول ویرایش یا حذف کنید. همچنین می توانید هر جنبه از این محتوا را در تنظیمات ماژول طراحی کنید و حتی CSS سفارشی را برای این متن در ماژول تنظیمات پیشرفته اعمال کنید
قالب بندی متن
پس از نصب محتویات بدن ، پارامترهای طراحی را به شرح زیر به روز کنید:
- رنگ متنی متن: #ffffff
- فونت: Poppins
- رنگ متن عنوان: #ffffff
- عنوان متن اندازه: 5vw
- عرض: 60vw (دسک تاپ) ، 100٪ (تلفن)
- حاشیه (دسک تاپ): -35٪ به بالا ، 35٪ پایین
- حاشیه (تلفن): -70٪ به بالا ، 70٪ پایین
طراحی نهایی
در اینجا طرح نهایی است.
آخرین افکار
گزینه های ترکیبی حالت و فیلتر Divi هر آنچه برای ایجاد تصاویر برای ایجاد پس زمینه های حرفه ای نیاز دارید را فراهم می کند. ترفند این است که تصاویر را با استفاده از واحدهای طول vw قرار دهید تا طراحی پس زمینه در تلفن همراه نیز پاسخگو باشد. اما هنگامی که تصاویر در موقعیت قرار گرفتند ، می توانیم انواع حالتهای ترکیبی و تعداد بیشماری از گزینه های طراحی را برای ایجاد طراحی های کاملاً هماهنگ آزمایش کنیم.
امیدوارم که این مقاله الهام بخشی برای شما ایجاد کرده باشد و امیدوارم در مورد نظرات از شما بشنوم.
به سلامتی شما!
بسیار ضعیف با سایر تصاویر قابل اجرا سازگار است اما به هر حال از شما متشکرم
متشکرم !! 🙂