ساختن بخش قهرمان وب سایت از ابتدا یا استفاده از ماژول Divi Fullwidth Header هر دو روشی است که می توانید یک طراحی جذاب برای سایت خود ایجاد کنید. در این پست، ما به مزایا و معایب استفاده از ماژول هدر تمام عرض در مقابل ساخت بخش کاراکتر خود با Divi خواهیم پرداخت.
بیا مشغول شویم!
اهمیت بخش قهرمان وب سایت
تب hero اولین برگه ای است که بازدیدکنندگان شما هنگام ورود به وب سایت شما می بینند. این اغلب یک بنر با عرض کامل است و ممکن است عنوان قهرمان نامیده شود. در وب سایت شما برجسته است زیرا این قدرت را دارد که اولین تأثیر ماندگاری را به جا بگذارد، بنابراین مهم است که به گونه ای طراحی شده باشد که خواندن آن آسان باشد و در عین حال چشم نواز و جذاب باشد. بخش‌های اصلی یک وب‌سایت مهم هستند، زیرا می‌توانند توجه مشتریان بالقوه را جلب کنند، به سرعت یک صفحه را توصیف کنند و منجر به تعامل و سرنخ بیشتر شوند. بخش‌های سر باید دارای علامت تجاری باشند، شامل عنوان h1 و دعوت به اقدام باشند.
ساخت بخش قهرمان از ابتدا
ساخت بخش قهرمان از ابتدا به شما این امکان را می دهد که کنترل کاملی بر طراحی و محتوا داشته باشید. بسته به شرایط و نیازهای شما، این می تواند یک راه حل عالی برای وب سایت شما باشد. بیایید به مزایا و معایب این روش نگاه کنیم.
مزایای این رویکرد
ابتدا، بیایید به مزایای ایجاد بخش قهرمان وب سایت از ابتدا با استفاده از Divi نگاه کنیم.
1. کنترل کامل طراحی
ساختن بخش قهرمان از ابتدا به شما کنترل کاملی بر ظاهر طراحی می دهد. هیچ سبک طراحی از پیش تعیین شده ای وجود ندارد و می توانید با Divi آن را مطابق با نیازهای خود سفارشی کنید. شما می توانید آن را دقیقا همانطور که می خواهید به نظر برسانید.
2. از هر ماژول Divi استفاده کنید
از آنجایی که بخش را از ابتدا می سازید، می توانید هر ماژول Divi را به هدر اضافه کنید. این بدان معنی است که می توانید یک گزینه ایمیل، فرم تماس، دکمه، ماژول متن، گالری و غیره اضافه کنید. گزینه های سفارشی سازی بی پایان هستند!
معایب این رویکرد
حال بیایید به معایب ساخت یک بخش کاراکتر از ابتدا نگاه کنیم.
1. شما باید از ابتدا بسازید
اگر می خواهید در عرض چند دقیقه یک تب قهرمان ایجاد کنید، ممکن است برای طراحی یک تب قهرمان از ابتدا کمی تنظیمات بیشتری لازم باشد. هیچ طرح از پیش تعیین شده ای وجود ندارد، بنابراین شما کنترل کامل را خواهید داشت، اما ممکن است زمان بیشتری را صرف دستکاری کنید تا همه چیز را درست کنید.
2. به چندین ماژول نیاز دارد
ساختن یک بخش کاراکتر از ابتدا به این معنی است که از چندین ماژول به طور همزمان استفاده خواهید کرد. در حالی که این امکان گزینه‌های سفارشی‌سازی عالی را فراهم می‌کند، به این معنی است که محتوای شما به جای اینکه همه با هم در یک ماژول باشند، در چندین ماژول پراکنده می‌شوند.
ساخت بخش قهرمان با ماژول هدر Divi Fullwidth
ساخت بخش قهرمان با استفاده از ماژول Divi Fullwidth Header ساخت یک طراحی چشم نواز و پاسخگو به موبایل را در عرض چند دقیقه آسان می کند. بیایید به مزایا و معایب این روش نگاه کنیم.
مزایای این رویکرد
بیایید به مزایای ساخت بخش قهرمان با ماژول Divi Fullwidth Header نگاه کنیم.
1. تمام مطالب خود را در یک ماژول
ماژول Divi Fullwidth Header همه چیز را دارد – تصاویر، نماد، متن سرصفحه، متن زیرنویس، متن بدنه و دو دکمه، همه در ماژول. این بدان معناست که برای انجام کار به چندین ماژول نیاز نخواهید داشت، و تمام محتوای شما در یک ماژول قرار دارد و به راحتی می توانید هر جنبه از بخش کاراکتر خود را در یک مکان سفارشی کنید.
2. اکنون طرح بهینه شده است
ماژول Fullwidth Header طوری طراحی شده است که از قبل برای دستگاه های تلفن همراه بهینه شده است. این بدان معنی است که عناصر موجود در ماژول به طور خودکار به روشی چشم نواز مرتب می شوند زمانی که بازدید کننده شما وب سایت شما را در دستگاه تلفن همراه مشاهده می کند.
معایب این رویکرد
حال اجازه دهید معایب ساخت بخش قهرمان با ماژول Divi Fullwidth Header را ارزیابی کنیم.
1. انعطاف کمتر با طراحی
ماژول Divi Fullwidth Header با گزینه های محتوای از پیش تعریف شده ارائه می شود، اگرچه اگر بخواهید محتوایی را که در ماژول موجود نیست اضافه کنید، بسیاری از آنها می توانند محدود کننده باشند. این بدان معناست که شما با طراحی کلی انعطاف کمتری خواهید داشت.
ساخت دو بخش قهرمان مرحله به مرحله
اکنون که مزایا و معایب هر دو رویکرد را درک کردید، بیایید هر شخصیت را بسازیم تا بتوانید دقیقاً نحوه عملکرد هر رویکرد را ببینید.
آنچه برای شروع نیاز دارید
برای شروع، باید موارد زیر را انجام دهید:
- Divi را در وب سایت وردپرس خود نصب کنید.
- یک صفحه اضافه کنید و به آن عنوان بدهید.
- Visual Builder را فعال کنید
تب قهرمان خود را از ابتدا ایجاد کنید
اکنون که صفحه خود را راه اندازی کردیم، بیایید با ایجاد یک بخش کاراکتر از ابتدا شروع کنیم.
Visual Builder را فعال کنید
برای استفاده از کشیدن و رها کردن سازنده Divi، باید Visual Builder را با کلیک بر روی دکمه “Use Divi Builder” فعال کنیم. این صفحه را با استفاده از Divi Visual Builder دوباره بارگیری می کند.
انتخاب کنید: از ابتدا بسازید
هنگامی که صفحه شما با فعال سازی سازنده تصویری بارگیری مجدد شد، روی گزینه های “ساخت از ابتدا” کلیک کنید تا هنگام ایجاد مجدد طرح خود، صفحه خالی داشته باشیم.
ردیف اضافه کنید و ستون ها را تنظیم کنید
یک ردیف اضافه کنید و سه ستون را انتخاب کنید.
اضافه کردن ماژول ها
حال بیایید ماژول های محتوای مورد نیاز خود را اضافه کنیم.
- ستون سمت چپ: 2 ماژول متن، جداکننده، یک دکمه
- ستون وسط: تصویر
- ستون سمت راست: تصویر
بخش سبک
حالا بیایید تنظیمات بخش را تنظیم کنیم.
یک بخش اضافه کنید و سپس تنظیمات زیر را پیکربندی کنید:
- رنگ پس زمینه: #1d1d25
سبک متن سرصفحه
متن سرصفحه را قالب بندی کنید:
- وزن قلم عنوان: نیمه پررنگ
- رنگ متن عنوان: #ffffff
- اندازه متن عنوان: 90 پیکسل
- ارتفاع هدر: 1.1 em
جداکننده سبک
تنظیمات جداکننده را پیکربندی کنید:
- رنگ: rgba (255,255,255,0.3)
- وزن جداکننده: 10 پیکسل
- حداکثر عرض: 260 پیکسل
متن بدنه سبک
سبک متن بدنه:
- رنگ متن بدنه: rgba (255,255,255,0.7)
- اندازه متن: 13 پیکسل
- ارتفاع خط متن: 1.8 میلی متر
دکمه سبک
حالا بیایید دکمه را استایل کنیم.
در تب دکمه ها:
- استفاده از سبک های سفارشی برای دکمه: بله
- اندازه متن دکمه: 14 پیکسل
- رنگ متن دکمه: #ffffff
- پس زمینه دکمه:
- عرض قاب دکمه: 0 پیکسل
- شعاع حاشیه دکمه: 0 پیکسل
در تب فاصله:
- بالا و پایین: 40 پیکسل
- چپ و راست: 20 پیکسل
تصاویر را اضافه کنید
تصاویر را به ماژول های تصویر اضافه کنید.
تنظیمات ردیف را تنظیم کنید
در تنظیمات سفارش:
- 15vw را به فیلد سمت چپ اضافه کنید.
ستون 2 را تصحیح کنید
در ستون دوم، این تنظیمات را پیکربندی کنید:
CSS سفارشی
کد زیر را در قسمت کد عنصر اصلی قرار دهید:
margin-right: -15vw!important; z-index: 100!important;
فاصله
یک پد بالای 100 پیکسل اضافه کنید.
اینجا! اکنون یک بخش کاراکتر سفارشی کاملاً طراحی شده دارید.
ایجاد بخش قهرمان خود با ماژول هدر تمام عرض Divi
حالا بیایید نحوه بازسازی این بخش قهرمان را با استفاده از ماژول Fullwidth Header بررسی کنیم.
یک صفحه اضافه کنید و ساختن از ابتدا را انتخاب کنید
یک صفحه جدید اضافه کنید، به آن عنوان بدهید و سپس روی «Use Divi Builder» کلیک کنید و سپس Build From Scratch را انتخاب کنید.
یک بخش با عرض کامل و یک هدر با عرض کامل اضافه کنید
یک بخش با عرض کامل اضافه کنید و سپس Full-Width Header را از کتابخانه ماژول انتخاب کنید.
محتوا اضافه کنید
محتوای متن را به ماژول در تب Text اضافه کنید.
تصاویر را اضافه کنید
تصاویر را در قسمت تصاویر اضافه کنید.
رنگ پس زمینه را تغییر دهید
در تب پس زمینه، تنظیمات زیر را پیکربندی کنید:
- رنگ پس زمینه: #1D1D25
سبک متن سرصفحه
تنظیمات متن سرصفحه را پیکربندی کنید:
- وزن قلم عنوان: پررنگ
- اندازه متن عنوان: 90 پیکسل
متن بدنه سبک
تنظیمات متن بدنه را پیکربندی کنید:
- رنگ متن: rgba (255,255,255,0.55)
سبک متن زیرنویس
تنظیمات متن زیرنویس را پیکربندی کنید:
- وزن قلم زیرنویس: پررنگ
- رنگ متن زیرنویس: #4C594C
- فاصله بین حروف زیرنویس: 3 پیکسل
دکمه های سبک
حالا بیایید دو دکمه را استایل کنیم.
دکمه یک
در تب Button One، تنظیمات زیر را پیکربندی کنید:
- از سبک های سفارشی برای دکمه یک استفاده کنید: بله
- پس زمینه دکمه یک: #4c594c
- عرض حاشیه تک دکمه: 0 پیکسل
- شعاع حاشیه یک دکمه: 0 پیکسل
- نمایش نماد دکمه یک: بله
- نمایش نماد فقط در حالت شناور برای دکمه اول: خیر
- دکمه ONE Padding: 25px بالا و پایین. 25 پیکسل سمت چپ، 50 پیکسل سمت راست.
دکمه دو
در تب Button Two، تنظیمات زیر را پیکربندی کنید:
- از سبک های سفارشی برای دکمه دو استفاده کنید: بله
- عرض هر دو حاشیه دکمه: 0 پیکسل
- شعاع هر دو حاشیه دکمه: 0 پیکسل
- دکمه دو لایه: 25px بالا و پایین. 25 پیکسل چپ و راست.
- Button Box Shadow: گزینه 4 را انتخاب کنید
- موقعیت افقی سایه جعبه: 0px
- موقعیت عمودی سایه جعبه: 2 پیکسل
- رنگ سایه: #ffffff
اینجا! اکنون یک بخش کاراکتر کاملاً طراحی شده با استفاده از ماژول Divi Fullwidth Header دارید.
افکار نهایی
ساخت بخش قهرمان با Divi آسان است، چه از ابتدا بسازید یا از ماژول Fullwidth Header استفاده کنید. هر دو گزینه به شما این امکان را می‌دهند که طرح‌های هدر خیره‌کننده‌ای ایجاد کنید که علاقه بازدیدکنندگان شما را جلب کند. بسته به نیازهای منحصر به فرد شما، هر یک از گزینه ها گزینه بسیار خوبی برای طراحی بخش شخصیت خود است. پس از خواندن جوانب مثبت و منفی هر دو، بخش شخصیت خود را چگونه طراحی می کنید؟