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

آیا می خواهید یک پس زمینه منحصر به فرد و خیره کننده با ماسک ها و الگوهای پس زمینه ایجاد کنید DIVI ?

ویژگی ماسک ها و الگوهای پس زمینه جدید DIVI بیشتر برای بخش هایی از یک صفحه استفاده می شود. اما ما همچنین می توانیم آنها را به هدرها اضافه کنیم!

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

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

بیایید شروع.

بررسی

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

به سازنده تم Divi بروید و شروع به ایجاد یک هدر سراسری کنید

از داشبورد وردپرس، به Divi > تم ساز

با کلیک بر روی "افزودن سربرگ جهانی"

Sélectionnez "ساخت سربرگ جهانی".

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

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

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

دفعات بازدید: Divi: نحوه ایجاد بخش Testimonials در قالب یک شبکه

برای شروع، تنظیمات بخش موجود را باز کنید.

زیر زبانه محتوا، گزینه های پس زمینه را با تنظیمات زیر به روز کنید:

رنگ پس زمینه:

پس زمینه: #262d3f

الگوی پس زمینه:

مدل: قرص

رنگ الگو: rgba(255,255,255,0.1)
اندازه الگو: اندازه سفارشی.
عرض الگو: 1px

لایه

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

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

این کار فضای عمودی هدر را کمی کاهش می دهد.

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

محتوای سرصفحه نگهدارنده مکان (یک منو و یک دکمه) اضافه شد

در ستون سمت چپ سطر، یک منوی جدید اضافه کنید.

یک منو انتخاب کنید.

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

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

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

گرادیان

تنظیمات ردیف حاوی منو و دکمه خود را باز کنید. سپس گزینه های پس زمینه را با تنظیمات پس زمینه زیر به روز کنید:

گرادیان پس زمینه:

گرادیان توقف 1 (50%): پاک
Gradient Stops 2 (75%): #ff4c00
فرمان: 90 درجه

الگو

مدل: قرص
رنگ الگو: rgba(38,45,63,0.48)
اندازه الگو: 1 پیکسل
افست عمودی: 20 پیکسل

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

ماسک زمینه

ماسک: شاه ماهی
رنگ ماسک: #262d3f

توجه: برای هدرها، بهتر است اندازه ماسک را روی «Extend to Fill» تنظیم کنید تا فضای افقی را بدون به خطر انداختن طراحی ماسک پوشش دهد.

لمس نهایی به خط

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

برای تکمیل طراحی، یک شعاع حاشیه و چند ویرایش دیگر به خط اضافه می کنیم.

شعاع، مرز و فاصله مرزی

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

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

سپس برای یک عنصر طراحی اضافی، یک گوشه گرد زیبا به ردیف بدهید.

گوشه های گرد: 50 پیکسل
عرض حاشیه سمت چپ: 50 پیکسل
رنگ حاشیه سمت چپ: #262d3f

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

نتیجه نهایی

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

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

و اینجا طراحی هدر دسکتاپ و موبایل است.

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

نتیجه

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

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

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

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

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

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

...