منو سایت

  • خانه
  • وبلاگ
  • استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

 تاریخ انتشار :
/
  وبلاگ
استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

بیا مشغول شویم!

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

تب hero اولین برگه ای است که بازدیدکنندگان شما هنگام ورود به وب سایت شما می بینند. این اغلب یک بنر با عرض کامل است و ممکن است عنوان قهرمان نامیده شود. در وب سایت شما برجسته است زیرا این قدرت را دارد که اولین تأثیر ماندگاری را به جا بگذارد، بنابراین مهم است که به گونه ای طراحی شده باشد که خواندن آن آسان باشد و در عین حال چشم نواز و جذاب باشد. بخش‌های اصلی یک وب‌سایت مهم هستند، زیرا می‌توانند توجه مشتریان بالقوه را جلب کنند، به سرعت یک صفحه را توصیف کنند و منجر به تعامل و سرنخ بیشتر شوند. بخش‌های سر باید دارای علامت تجاری باشند، شامل عنوان h1 و دعوت به اقدام باشند.

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

ساخت بخش قهرمان از ابتدا

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

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

1. کنترل کامل طراحی

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

2. از هر ماژول Divi استفاده کنید

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

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

حال بیایید به معایب ساخت یک بخش کاراکتر از ابتدا نگاه کنیم.

1. شما باید از ابتدا بسازید

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

2. به چندین ماژول نیاز دارد

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

ساخت بخش قهرمان با ماژول هدر Divi Fullwidth

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

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

1. تمام مطالب خود را در یک ماژول

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

2. اکنون طرح بهینه شده است

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

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

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

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

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

ساخت دو بخش قهرمان مرحله به مرحله

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

آنچه برای شروع نیاز دارید

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

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

تب قهرمان خود را از ابتدا ایجاد کنید

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

Visual Builder را فعال کنید

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

اضافه کردن ماژول ها

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

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

بخش سبک

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

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

  1. رنگ پس زمینه: #1d1d25

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

سبک متن سرصفحه

متن سرصفحه را قالب بندی کنید:

  1. وزن قلم عنوان: نیمه پررنگ
  2. رنگ متن عنوان: #ffffff
  3. اندازه متن عنوان: 90 پیکسل
  4. ارتفاع هدر: 1.1 em

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

جداکننده سبک

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

  1. رنگ: rgba (255,255,255,0.3)
  2. وزن جداکننده: 10 پیکسل
  3. حداکثر عرض: 260 پیکسل

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

متن بدنه سبک

سبک متن بدنه:

  1. رنگ متن بدنه: rgba (255,255,255,0.7)
  2. اندازه متن: 13 پیکسل
  3. ارتفاع خط متن: 1.8 میلی متر

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

دکمه سبک

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

در تب دکمه ها:

  1. استفاده از سبک های سفارشی برای دکمه: بله
  2. اندازه متن دکمه: 14 پیکسل
  3. رنگ متن دکمه: #ffffff
  4. پس زمینه دکمه:
  5. عرض قاب دکمه: 0 پیکسل
  6. شعاع حاشیه دکمه: 0 پیکسل

در تب فاصله:

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

تنظیمات ردیف را تنظیم کنید

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

  • 15vw را به فیلد سمت چپ اضافه کنید.

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

ستون 2 را تصحیح کنید

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

CSS سفارشی

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

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

فاصله

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

ایجاد بخش قهرمان خود با ماژول هدر تمام عرض Divi

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

یک بخش با عرض کامل اضافه کنید و سپس Full-Width Header را از کتابخانه ماژول انتخاب کنید.

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

تصاویر را در قسمت تصاویر اضافه کنید.

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

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

  1. رنگ پس زمینه: #1D1D25

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

سبک متن سرصفحه

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

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

متن بدنه سبک

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

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

سبک متن زیرنویس

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

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

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

دکمه های سبک

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

دکمه یک

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

  1. از سبک های سفارشی برای دکمه یک استفاده کنید: بله
  2. پس زمینه دکمه یک: #4c594c
  3. عرض حاشیه تک دکمه: 0 پیکسل
  4. شعاع حاشیه یک دکمه: 0 پیکسل
  5. نمایش نماد دکمه یک: بله
  6. نمایش نماد فقط در حالت شناور برای دکمه اول: خیر
  7. دکمه ONE Padding: 25px بالا و پایین. 25 پیکسل سمت چپ، 50 پیکسل سمت راست.

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

دکمه دو

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

  1. از سبک های سفارشی برای دکمه دو استفاده کنید: بله
  2. عرض هر دو حاشیه دکمه: 0 پیکسل
  3. شعاع هر دو حاشیه دکمه: 0 پیکسل
  4. دکمه دو لایه: 25px بالا و پایین. 25 پیکسل چپ و راست.
  5. Button Box Shadow: گزینه 4 را انتخاب کنید
  6. موقعیت افقی سایه جعبه: 0px
  7. موقعیت عمودی سایه جعبه: 2 پیکسل
  8. رنگ سایه: #ffffff

استفاده از ماژول هدر عرض کامل در مقابل ساخت بخش کاراکتر خود با Divi

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

افکار نهایی

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