Divi: چگونه یک بخش Fluid Hero ایجاد کنیم

آیا می خواهید یک بخش Hero در آن ایجاد کنید DIVI کدام سیال به جای پاسخگوی سنتی است؟

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

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

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

بررسی

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

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

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

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

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

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

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

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

دفعات بازدید: Divi: نحوه ایجاد یک بخش Hero با ماژول Fullwidth Header

نحوه طراحی بخش Fluid Hero در Divi

تنظیمات بخش

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

• توقف های گرادیان:
  • 30٪: #ff2000
  • 30%: #121212
• جهت گرادیان: 45 درجه

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

• بالشتک: 0px بالا، 0px پایین

یک خط ایجاد کنید

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

تنظیمات خط

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

• عرض ناودان: 1
• عرض: 100%
• حداکثر عرض: 1 پیکسل
• حداقل ارتفاع: 100 ولت ساعت (رومیزی)، هیچ (تبلت و تلفن)
• بالشتک: 0 پیکسل (بالا و پایین)

متن هدر روان با حاشیه ایجاد کنید

اکنون که بخش و خط کامل شده است، می‌توانیم متن هدر جاری را به بخش Hero اضافه کنیم. همچنین یک حاشیه سیال به ماژول Text برای یک عنصر طراحی خلاقانه اضافه می کنیم.

یک ماژول متن اضافه کنید

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

تنظیمات متن

زیر زبانه محتوا، آن را به روز کنید محتویات بدنه با کد HTML زیر:

<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>

برای سیال کردن عناصر طراحی، ابتدا باید با استفاده از تابع CSS Clamp() یک اندازه فونت ریشه سیال به ماژول اضافه کنیم. 

زیر زبانه فناوری، قطعه CSS زیر را جایگذاری کنید:

font-size: clamp(32px, 4.1vw, 70px);

زیر زبانه طرح، تنظیمات طراحی متن سرصفحه زیر را به روز کنید:

• متن سرفصل:
  • نوع: H1
  • فونت: مونتسرات
  • وزن قلم: سنگین
  • رنگ: #ffffff
  • سایز: 1em
  • فاصله حروف: 0,1em
  • ارتفاع خط: 1,2 em

همچنین padding را به صورت زیر به روز کنید:

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

برای ایجاد طرح حاشیه سیال، موارد زیر را به روز کنید:

• عرض حاشیه: 1 میلی متر
• رنگ حاشیه: #ffffff
• رنگ حاشیه پایین: شفاف
• رنگ حاشیه سمت چپ: روشن

ایجاد مرز لهجه

برای ایجاد حاشیه تاکیدی، می‌توانیم ماژول Text موجود را کپی کنیم.

آن را حذف کنید محتویات از بدنه موجود و به روز رسانی پارامترهای طراحی به شرح زیر:

• حداکثر عرض: 6,5 سانتی متر
• قد: 3,25 em
• عرض حاشیه: 0,5em
• رنگ حاشیه: #ff2000

برای قرار دادن مرز تاکیدی، یک موقعیت مطلق با افست برابر با عرض حاشیه در ماژول Heading Text (1em) اضافه کنید. 

زیر زبانه فناوری، گزینه های Position زیر را به روز کنید:

• موقعیت: مطلق
• مکان: بالا سمت راست
• افست عمودی: 1em
• افست افقی: 1em

ایجاد متن زیرنویس

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

یک ماژول متن جدید اضافه کنید

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

می توانید چند جمله متن پرکننده را به صورت زیر اضافه کنید:

• مطلب: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

در مرحله بعد، باید یک اندازه فونت سیال جدید اضافه کنیم که برای متون کوچک مناسب تر است. در زبانه Advanced، قطعه CSS زیر را در زیر عنصر اصلی قرار دهید:

font-size: clamp(14px, 1.4vw, 24px);

تنظیمات طراحی متن

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

• متن:
  • وزن قلم: نیمه پررنگ
  • رنگ: #ffffff
  • سایز: 1em
  • قد: 1,6 em

سپس اندازه و فاصله را به صورت زیر به روز کنید:

• حداکثر عرض: 19 سانتی متر
• حاشیه: 2 em (پایین)، خودکار (چپ)، 5 em (راست)

دکمه مایع را ایجاد کنید

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

در مرحله بعد، متن دکمه را برای خواندن "7 روز ترال رایگان" به روز کنید.

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

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

زیر زبانه فناوری، قطعه CSS زیر را در زیر عنصر اصلی قرار دهید:

font-size: clamp(20px, 2.35vw, 40px);

تنظیمات طراحی دکمه

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

• تراز دکمه: راست

• استفاده از اندازه سفارشی برای دکمه: بله
• رنگ متن دکمه: #ff2000
• توقف های گرادیان:
  • رنگ 1 25%: شفاف
  • رنگ 2 25%: #ffffff
• جهت گرادیان: 45 درجه

• دکمه :
• عرض حاشیه: 0 پیکسل
• شعاع حاشیه: 0 پیکسل
• فونت: مونتسرات
• وزن قلم: ضخیم
• سبک: مورب
• نمایش نماد دکمه: بله
• نماد: فلش مثلثی شکل به سمت راست (نگاه کنید به تصویر)
• محل قرارگیری نماد: سمت راست

• حاشیه: 8em (راست)
• بالشتک: 0,2em (بالا و پایین)، 1,5em (چپ)، 1em (راست)

یک تصویر برای بخش Hero ایجاد کنید

با تمام محتویات از قسمت Hero به اندازه صحیح صفحه، ما آماده ایم تصویر قسمت Hero را در سمت چپ اضافه کنیم. برای این کار ابتدا یک ماژول Image زیر دکمه اضافه کنید.

تنظیمات تصویر را باز کنید و یک تصویر آپلود کنید.

تنظیمات طراحی تصویر

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

• تراز تصویر: چپ (رومیزی و رایانه لوحی)، مرکز (تلفن)
• حداکثر عرض: 48% (رومیزی و تبلت)، 70% (تلفن)
• بالشتک: 4% (سمت چپ)

در نهایت با استفاده از واحد طول vmin به شکل زیر به تصویر یک موقعیت مطلق با یک افست بدهید:

• موقعیت: مطلق (رومیزی و تبلت)، نسبی (تلفن)
• مکان: بالا سمت چپ (رومیزی و تبلت)
• افست عمودی: 30vmin (رومیزی و تبلت)، 0px (تلفن)

نتیجه نهایی

در اینجا نتیجه نهایی در یک صفحه زنده است.

همچنین ببینید: Divi: نحوه استفاده از ماسک ها و الگوهای پس زمینه برای یک بخش قهرمان

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

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

نتیجه

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

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

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

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

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

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

...