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

آیا می خواهید یک بخش Hero Divi با ماژول Fullwidth Header ایجاد کنید یا خودتان آن را طراحی کنید؟

ساخت بخش قهرمان از وب سایت از ابتدا یا استفاده از ماژول Divi Fullwidth Header دو راه برای ایجاد یک طراحی چشم نواز برای شما هستند. سایت اینترنتی. 

در این مقاله، ما به مزایا و معایب استفاده از ماژول Fullwidth Header در مقابل ایجاد بخش Hero خود با Divi خواهیم پرداخت.

بیایید برویم

اهمیت بخش های قهرمان وب سایت

بخش قهرمان اولین قسمتی است که شما در آن حضور دارید آخرین بازدید ببینید کی به شما می رسند وب سایت. این اغلب یک بنر با عرض کامل است و ممکن است عنوان قهرمان نیز نامیده شود. این یک مکان برجسته در وب سایت شما است زیرا این قدرت را دارد که اولین تأثیر ماندگاری را به جا بگذارد.

دفعات بازدید: Divi: نحوه نمایش ماژول Fullwidth Header به صورت تمام صفحه

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

یک بخش Hero از ابتدا ایجاد کنید

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

بیایید نگاهی به مزایا و معایب این روش بیندازیم.

مزایای این رویکرد

ابتدا، بیایید به مزایای ساخت بخش Hero وب سایت از ابتدا با استفاده از Divi نگاه کنیم.

• کنترل کامل طراحی
• از هر ماژول Divi استفاده کنید

معایب این روش

حال بیایید به جنبه های منفی ایجاد یک بخش قهرمان از ابتدا نگاه کنیم.

• شما باید از ابتدا بسازید
• نیاز به مدهای متعدد

با ماژول Divi Fullwidth Header یک بخش Hero ایجاد کنید

ایجاد یک بخش قهرمان با استفاده از ماژول Divi Fullwidth Header ایجاد یک طراحی چشم نواز و پاسخگو برای موبایل را در عرض چند دقیقه آسان می کند. 

بیایید نگاهی به مزایا و معایب این روش بیندازیم.

مزایای این رویکرد

بیایید نگاهی به مزایای ساخت بخش Hero با ماژول Divi Fullwidth Header بیندازیم.

• همه شما محتویات در یک ماژول است
• طراحی قبلاً بهینه شده است

معایب این روش

حال اجازه دهید معایب طراحی بخش Hero را با ماژول Divi Fullwidth Header ارزیابی کنیم.

• انعطاف کمتر با طراحی

ماژول Divi Fullwidth Header دارای گزینه هایی برای محتویات از پیش تعریف شده است، در حالی که اگر به دنبال اضافه کردن محتوایی هستید که در ماژول موجود نیست، بسیاری از آنها می توانند محدود شوند. این بدان معناست که شما با طراحی کلی انعطاف کمتری خواهید داشت.

ساخت گام به گام دو بخش Hero

اکنون که مزایا و معایب هر دو رویکرد را فهمیدید، بیایید هر بخش Hero را بسازیم تا بتوانید دقیقاً نحوه عملکرد هر رویکرد را ببینید.

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

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

1. Divi را نصب کنید  در وب سایت وردپرس خود قرار دهید.
2. یک صفحه اضافه کنید و به آن عنوان بدهید.
3. سازنده بصری را فعال کنید

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

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

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

"Divi Builder" را فعال کنید

برای استفاده از کشیدن و رها کردن سازنده Divi، باید Visual Builder را با کلیک بر روی دکمه فعال کنیم. "استفاده از DiviBuilder". این صفحه را با استفاده از Divi Visual Builder دوباره بارگیری می کند.

انتخاب کنید: از ابتدا بسازید

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

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

یک ردیف با ساختار ستون زیر ایجاد کنید.

مودها را اضافه کنید

حال بیایید ماژول های محتوای مورد نیاز خود را اضافه کنیم.

• 2 ماژول متن، تقسیم کننده، یک دکمه در ستون سمت چپ
• 1 ماژول تصویر در ستون وسط
• 1 ماژول تصویر در ستون سمت راست

بخش سبک

حالا بیایید تنظیمات بخش را پیکربندی کنیم.

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

• پس زمینه: #1d1d25

سبک متن هدر

سفارشی کردن متن سرصفحه:

• سرفصل 1:
  • وزن قلم: نیمه پررنگ
  • رنگ متن: #ffffff
  • اندازه متن: 90 پیکسل
  • ارتفاع خط: 1,1 em

جدا ساز

تنظیمات تقسیم کننده را پیکربندی کنید:

• رنگ خط: rgba (255,255,255,0.3)
• وزن تقسیم کننده: 10 پیکسل
• حداکثر عرض: 260 پیکسل

متن بدنه

سفارشی کردن متن متن:

• رنگ متن: rgba(255,255,255,0.7)
• اندازه متن: 13 پیکسل
• ارتفاع خط: 1,8 em

دکمه

حالا بیایید دکمه را سفارشی کنیم.

در تب دکمه:

• استفاده از سبک های سفارشی برای دکمه: بله
• اندازه متن دکمه: 14 پیکسل
• رنگ متن: #ffffff
• پس زمینه دکمه:
• عرض حاشیه: 0 پیکسل
• شعاع حاشیه: 0 پیکسل

در تب Spacing:

• بالا و پایین: 40 پیکسل
• چپ و راست: 20 پیکسل

تصاویر را اضافه کنید

تصاویر را به ماژول های تصویر اضافه کنید.

تنظیمات خط را تنظیم کنید

پارامترهای خطی:

• حاشیه (سمت چپ): 15vw

ستون 2 را تنظیم کنید

در ستون دوم، این تنظیمات را پیکربندی کنید:

CSS سفارشی

کد زیر را در قسمت کد عنصر اصلی قرار دهید:

argin-right: -15vw!important;
z-index: 100!important;

فاصله

100 پیکسل از لایه بالایی اضافه کنید.

بنابراین ! اکنون یک بخش قهرمان سفارشی کاملاً طراحی شده دارید.

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

بخش Hero خود را با ماژول Fullwidth Header Divi ایجاد کنید

حال بیایید ببینیم که چگونه می توان این بخش Hero را با استفاده از ماژول Fullwidth Header Divi بازسازی کرد.

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

یک صفحه اضافه کنید و Build From Scratch را انتخاب کنید

یک صفحه جدید اضافه کنید، به آن عنوان بدهید، سپس روی “Use Divi Builder” کلیک کنید و سپس Build From Scratch را انتخاب کنید.

یک بخش با عرض کامل و یک هدر با عرض کامل درج کنید

درج بخش تمام عرض، سپس انتخاب کنید سربرگ Fullwidth در کتابخانه ماژول

محتویات

محتوای متنی را در تب Text به ماژول اضافه کنید.

تصاویر

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

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

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

• پس زمینه: #1D1D25

متن سرصفحه

تنظیمات متن سرصفحه را پیکربندی کنید:

• وزن قلم عنوان: پررنگ
• اندازه متن: 90 پیکسل

متن بدنه

تنظیمات متن بدنه را پیکربندی کنید:

• رنگ متن: rgba (255,255,255,0.55)

متن زیرنویس

تنظیمات متن عنوان را پیکربندی کنید:

• وزن قلم زیرنویس: پررنگ
• رنگ متن: #4C594C
• فاصله حروف: 3 پیکسل

دکمه های

حالا بیایید دو دکمه را سفارشی کنیم.

دکمه یک

در تب Button One، تنظیمات زیر را پیکربندی کنید:

• استفاده از سبک های سفارشی برای دکمه یک: بله
• دکمه یک
  • پس زمینه: #4c594c
  • عرض حاشیه: 0 پیکسل
  • شعاع حاشیه: 0 پیکسل
  • نمایش نماد: بله
  • فقط نمایش نماد در حالت شناور: خیر
  • بالشتک: 25 پیکسل (بالا و پایین)؛ 25 پیکسل (چپ)، 50 پیکسل (راست)

دکمه دو

در تب Button Two، تنظیمات زیر را انجام دهید:

• از سبک های سفارشی برای دکمه دو استفاده کنید: بله
• پهنای حاشیه دکمه دو: 0 پیکسل
• شعاع حاشیه: 0 پیکسل
• بالشتک: 25 پیکسل (بالا، پایین، چپ و راست)
• سایه جعبه دکمه: چهارمین را انتخاب کنید
• موقعیت افقی سایه جعبه: 0 پیکسل
• موقعیت عمودی سایه جعبه: 2 پیکسل
• رنگ سایه: #ffffff

بنابراین ! اکنون یک بخش Hero کاملاً طراحی شده با استفاده از ماژول Divi Fullwidth Header دارید.

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

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

نتیجه

ساخت بخش Hero با Divi آسان است، چه از ابتدا بسازید یا از ماژول Fullwidth Header استفاده کنید. هر دو گزینه به شما امکان می دهند طرح های هدر خیره کننده ای ایجاد کنید که علاقه شما را جلب می کند آخرین بازدید. 

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

پس از خواندن جوانب مثبت و منفی هر دو، بخش قهرمان خود را چگونه طراحی می کنید؟

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

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

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

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

...