ایجاد بخش قهرمان یک راه عالی برای جلب توجه به محتوای مهم در صفحه شما است. این یک محتوای فوق‌العاده است که می‌توانید برای گفتن داستان، اشتراک‌گذاری اطلاعات در مورد کارتان، یا برجسته کردن یک محصول یا خدمات از آن استفاده کنید. با ماژول Fullwidth Header Divi، می توانید یک هدر، زیر سرفصل، دو دکمه، متن بدنه، یک تصویر لوگو و یک تصویر هدر اضافه کنید. البته می توانید از گزینه های پس زمینه برای افزودن و ترکیب تصاویر، گرادیان ها، رنگ ها، الگوها و ماسک ها نیز استفاده کنید. می‌توانید همه این تنظیمات را در تنظیمات یک ماژول هدر با عرض کامل به‌جای جابجایی بین چندین تصویر، متن و ماژول دکمه ویرایش کنید.
در این آموزش، ما به شما نشان خواهیم داد که چگونه با استفاده از ماژول هدر تمام عرض Divi، یک بخش کاراکتر جذاب و چشم نواز بسازید.
بیا شروع کنیم!
یک نگاه یواشکی
در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است.
آنچه برای شروع نیاز دارید
قبل از شروع، مطمئن شوید که آخرین نسخه Divi را در وب سایت خود دارید.
حالا شما آماده رفتن هستید!
چگونه با ماژول هدر عرض کامل Divi یک بخش قهرمان بسازیم
یک صفحه جدید با یک طرح از پیش ساخته شده ایجاد کنید
بیایید با استفاده از یک طرح از پیش ساخته شده از کتابخانه Divi شروع کنیم. برای این طراحی از صفحه فرود دامپزشک از بسته طرح دامپزشک استفاده خواهیم کرد.
یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه Use Divi Builder را انتخاب کنید.
برای این مثال از یک طرح‌بندی از پیش ساخته شده از کتابخانه Divi استفاده می‌کنیم، بنابراین View Layouts را انتخاب کنید.
طرح بندی صفحه فرود دامپزشک را جستجو و انتخاب کنید.
گزینه Use this layout را برای افزودن طرح به صفحه خود انتخاب کنید.
اکنون ما آماده ساختن طرح خود هستیم.
ماژول Fullwidth Header را اضافه کنید
ما تب hero را با استفاده از ماژول هدر تمام عرض دوباره ایجاد می کنیم. یک بخش با عرض کامل جدید به صفحه زیر هدر موجود اضافه کنید.
یک ماژول هدر تمام عرض به بخش اضافه کنید.
سپس قسمت هدر اصلی را حذف کنید.
ماژول Fullwidth Header را سفارشی کنید
محتوا اضافه کنید
تنظیمات ماژول هدر تمام عرض را باز کنید و محتوای زیر را به ماژول اضافه کنید:
- عنوان: دامپزشک
- زیرنویس: DiviVet. خدمت به بهترین دوستانمان
- دکمه شماره 1: مشاهده همه خدمات
- دکمه شماره 2: قرار ملاقات بگذارید
- بدن: Praesent sapien massa، convallis a pellentesque nec، egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultrices ligula sed magna dictum porta.
سپس تصویر هدر دامپزشکان با حیوانات را اضافه کنید.
تنظیمات پس زمینه گرادیان
به تنظیمات پس زمینه بروید. رنگ پس زمینه اصلی را حذف کنید، سپس یک گرادیان پس زمینه اضافه کنید.
- 0٪: rgba (255,170,205,0.48)
- 40٪: rgba (110,66,255,0.24)
- 87٪: rgba (124,239,255,0.71)
- نوع گرادیان: بیضوی
- موقعیت گرادیان: سمت راست
سپس تب Background Mask را انتخاب کرده و یک پس زمینه ماسک به پس زمینه اضافه کنید.
- ماسک پس زمینه: نقطه گوشه
- رنگ ماسک: #FFFFFF
- تبدیل ماسک: عمودی
سفارشی کردن سبک های متن
با وجود محتوای هدر و پس‌زمینه، اجازه دهید به برگه طراحی برویم تا سبک‌های متن را سفارشی کنیم. ابتدا تنظیمات هدر را باز کنید و متن را به صورت زیر سفارشی کنید:
- قلم عنوان: Nunito
- وزن قلم عنوان: فوق العاده پررنگ
- سبک قلم عنوان: TT (Caps)
رنگ، اندازه و فاصله متن عنوان را تغییر دهید.
- رنگ متن عنوان: #a9cb6b
- اندازه متن عنوان: 14 پیکسل
- فاصله بین حروف بزرگ: 2 پیکسل
به بخش متن اصلی بروید و فونت را سفارشی کنید. از تنظیمات پاسخگو Divi برای اضافه کردن اندازه متن کوچکتر برای دستگاه های تلفن همراه استفاده کنید.
- رنگ متن: #000000
- اندازه متن اصلی: 18 پیکسل
- اندازه متن متن: موبایل: 14 پیکسل
- ارتفاع بدن: 1.8 em
سپس تنظیمات زیرنویس را باز کرده و فونت را سفارشی کنید.
- فونت زیرنویس: Nunito
- وزن قلم زیرنویس: پررنگ
- رنگ متن زیرنویس: #000000
در نهایت، اندازه متن را برای دسکتاپ و موبایل تغییر دهید (دوباره از تنظیمات تطبیق برای اضافه کردن اندازه متن کوچکتر در موبایل استفاده کنید) و ارتفاع خط را تنظیم کنید.
- اندازه متن زیرنویس – رومیزی: 56 پیکسل
- اندازه متن زیرنویس-موبایل: 32px
- ارتفاع خط زیرنویس: 1.2em
سفارشی کردن سبک دکمه ها با یک کلیک
در مرحله بعد، سبک دکمه ها را سفارشی می کنیم. با فعال کردن سبک های سفارشی برای دکمه یک شروع کنید، سپس اندازه متن را تنظیم کنید.
- از سبک های سفارشی برای دکمه یک استفاده کنید: بله
- اندازه متن دکمه اول: 14 پیکسل
یک گرادیان پس زمینه به دکمه اضافه کنید. مقادیر گرادیان به شرح زیر است:
- 58٪: #316EFF
- 100٪: #1D2B60
- جهت گرادیان: 90 درجه
سپس تنظیمات قاب و تنظیمات فونت را سفارشی کنید.
- عرض حاشیه تک دکمه: 0 پیکسل
- شعاع حاشیه یک دکمه: 80 پیکسل
- فاصله بین یک حرف دکمه: 2 پیکسل
- فونت دکمه یک: Nunito
- وزن قلم تک دکمه: فوق العاده پررنگ
- سبک فونت یک دکمه: TT (بزرگ)
نماد دکمه یک را غیرفعال کنید.
سپس تنظیمات حاشیه و پد را برای طراحی دسکتاپ سفارشی کنید و یک کادر سایه اضافه کنید.
- دکمه یک فیلد-بالا-رومیزی: 200 پیکسل
- دکمه یک فیلد-پایین-رومیزی: 0 پیکسل
- دکمه One Padding-Top-Desktop: 16px
- دکمه یک پدینگ-پایین-رومیزی: 16 پیکسل
- دکمه یک پدینگ-چپ-رومیزی: 2em
- دکمه یک پدینگ-راست-رومیزی: 50 دقیقه
- سایه جعبه دکمه: پایین
از تنظیمات پاسخگو برای تنظیم مقادیر مختلف حاشیه و padding در دستگاه های تلفن همراه استفاده کنید.
- دکمه تک فیلد بالای موبایل: 25 پیکسل
- دکمه یک پدینگ-راست-موبایل: 10em
برخی از مشکلات بسته بندی متن در دکمه ما وجود دارد که بعداً با CSS سفارشی برطرف خواهیم کرد.
سفارشی کردن دو سبک دکمه
دکمه دو دارای رنگ ها و فاصله های متفاوتی است، اما کاملاً شبیه دکمه یک است. برای ذخیره برخی از مراحل طراحی تکراری، بیایید سبک های ماژول دکمه یک را در ماژول دکمه دو کپی کنیم، سپس آنچه را که باید تغییر دهیم سفارشی کنیم.
ابتدا روی قسمت دکمه یک کلیک راست کرده و styles دکمه یک را کپی کنید.
سپس روی قسمت دکمه دو کلیک راست کرده و استایل ها را روی دکمه یک قرار دهید.
اکنون می توانیم دو استایل دکمه را سفارشی کنیم. تغییر رنگ متن
- دکمه دو رنگ متن: #121F60
شیب پس زمینه را برای دکمه دو سفارشی کنید.
- 30٪: rgba (0,229,198,0)
- 100٪: #00e5c6
از تنظیمات تطبیقی برای تنظیم گرادیان پس‌زمینه برای دستگاه‌های تلفن همراه استفاده کنید.
- 0٪: rgba (0,229,198,0)
- 100٪: #00e5c6
سپس حاشیه و پد را برای طراحی دسکتاپ تنظیم کنید.
- دکمه دو میدانی-بالا-رومیزی: 0px
- دکمه دوم margin-bottom-desktop: 0px
- دو دکمه سمت چپ دسکتاپ: 30%
- دکمه دو Padding-Top-Desktop: 16px
- دکمه دوم Padding-Bottom-Desktop: 16px
- دکمه دو صفحه دسکتاپ سمت چپ: 48em
- دکمه دو آستر-راست-رومیزی: 2em
از تنظیمات قابل تنظیم برای تنظیم مقادیر مختلف حاشیه و بالشتک برای طراحی موبایل استفاده کنید.
- دو دکمه فیلد-چپ-موبایل: 5%
- دکمه دو پد-چپ-موبایل: 35%
- دکمه دو پد-راست-موبایل: 5%
CSS سفارشی
در نهایت، بیشتر کار طراحی به پایان رسید. حالا باید CSS سفارشی اضافه کنیم تا طراحی کامل شود. به تب Advanced رفته و تب Custom CSS را باز کنید.
ابتدا اجازه دهید با CSS تصویر هدر شروع کنیم. این CSS اجازه می دهد تا تصویر هدر بالای دکمه نمایش داده شود.
z-index: 1; position:relative;
سپس CSS را به هدر سفارشی کنید. با استفاده از تنظیمات واکنشگرا مقادیر مختلفی را برای نمایش دسکتاپ و موبایل تنظیم می کنیم.
برای دسکتاپ:
padding-top:50px; padding-bottom:30px;
برای دستگاه های تلفن همراه:
padding-top:5px; padding-bottom:10px;
در نهایت CSS زیر را به دکمه یک و دکمه دو اضافه کنید.
white-space: nowrap;
نتیجه نهایی
در اینجا طرح نهایی برای بخش کاراکتر هدر تمام عرض ما است.
افکار نهایی
ماژول هدر تمام عرض به شما این امکان را می دهد که به راحتی یک بخش قهرمان زیبا ایجاد کنید تا خدمات خود را تبلیغ کنید و به بازدیدکنندگان خود بگویید که وب سایت شما چیست. تنظیمات داخلی سفارشی کردن طراحی هر جنبه از هدر را آسان می کند و همه آن در یک مکان است، بنابراین برای ساخت بخش قهرمان خود نیازی به جابجایی بین چندین ماژول نیست. برای طراحی منحصر به فرد بخش کاراکترها، این آموزش را بررسی کنید: نحوه استفاده از ماسک ها و الگوهای Divi برای پس زمینه بخش کاراکتر. آیا از ماژول هدر تمام عرض برای ساخت بخش های قهرمان خود استفاده می کنید؟ ما دوست داریم از شما در نظرات بشنویم!