آیا می خواهید بدانید چگونه می توان یک بخش Hero را با ماژول Fullwidth Header Divi ایجاد کرد؟
ساخت بخش قهرمان راهی عالی برای جلب توجه به آن است محتویات برای صفحه شما مهم است این یک است محتویات اندازه بزرگی که می توانید برای گفتن داستان خود، به اشتراک گذاری اطلاعات در مورد کار خود، یا برجسته کردن یک محصول یا خدمات استفاده کنید.
با ماژول Fullwidth Header Divi، می توانید عنوان، زیرنویس، دو دکمه، متن بدنه، تصویر لوگو و تصویر هدر را اضافه کنید. البته می‌توانید از گزینه‌های پس‌زمینه برای افزودن و ترکیب تصاویر، شیب‌ها، رنگ‌ها، الگوها و ماسک‌ها نیز استفاده کنید.
می‌توانید همه این تنظیمات را در تنظیمات ماژول به‌جای جابجایی بین چندین تصویر، متن و ماژول دکمه تغییر دهید.
در این آموزش به شما نشان خواهیم داد که چگونه با استفاده از ماژول Fullwidth Header Divi یک بخش Hero جذاب و چشم نواز ایجاد کنید.
بیا بریم !
بررسی
در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است.
آنچه شما باید برای شروع کار
قبل از شروع، مطمئن شوید که آخرین نسخه Divi را در خود دارید وب سایت.
اکنون شما آماده شروع هستید!
نحوه ایجاد یک بخش قهرمان با ماژول هدر کامل Divi
همچنین بخوانید: Divi: چگونه از "Gradient Builder" برای زیباسازی تصاویر خود استفاده کنیم
یک صفحه جدید با یک طرح از پیش تعریف شده ایجاد کنید
بیایید با استفاده از یک طرح از پیش تعریف شده از کتابخانه Divi شروع کنیم. برای این طراحی از صفحه اصلی استفاده خواهیم کرد بسته طرح دامپزشکی.
از داشبورد Worpress، یک صفحه جدید به صفحه خود اضافه کنید وب سایت
به آن عنوان بدهید، سپس گزینه را انتخاب کنید از Divi Builder استفاده کنید.
ما قصد داریم از یک طرح از پیش تعریف شده از کتابخانه Divi برای این مثال استفاده کنیم. پس انتخاب کنید طرح بندی ها را مرور کنید.
طرح بندی را پیدا کرده و انتخاب کنید پرورش دهنده سگ.
Sélectionnez از این طرح بندی استفاده کنید تا طرح بندی را به صفحه خود اضافه کنید.
اکنون آماده طراحی هستیم.
ماژول Fullwidth Header را اضافه کنید
ما بخش hero را با استفاده از ماژول Fullwidth Header دوباره ایجاد می کنیم. یک بخش جدید با عرض کامل به صفحه، زیر هدر موجود اضافه کنید.
ماژول Fullwidth Header را به بخش اضافه کنید.
در مرحله بعد، قسمت هدر اصلی را حذف کنید.
ماژول 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)
- نوع گرادیان: بیضوی
- موقعیت گرادیان: سمت راست
سپس تب را انتخاب کنید ماسک زمینه و یک ماسک پس زمینه اضافه کنید.
- پس زمینه ماسک: حباب گوشه
- رنگ ماسک: #FFFFFF
- تبدیل: عمودی
سفارشی کردن متن
به تب تغییر دهید طرح و تنظیمات عنوان را تغییر دهید
- قلم عنوان: Nunito
- عنوان قلم وزن: فوق العاده پررنگ
- سبک قلم: TT (حروف بزرگ)
- رنگ متن عنوان: #a9cb6b
- اندازه متن: 14 پیکسل
- فاصله حروف عنوان: 2 پیکسل
برو به بخش متن بدنه و فونت را سفارشی کنید
- رنگ متن: #000000
- اندازه متن بدنه:
- دسکتاپ: 18 پیکسل
- تلفن: 14 پیکسل
- ارتفاع خط بدن: 1.8 میلی متر
همچنین ببینید: Divi: نحوه سفارشی سازی نمادهای سبد و جستجوی ماژول "Fullwidth Menu".
سپس تنظیمات زیرنویس را باز کرده و فونت را سفارشی کنید.
- قلم زیرنویس: Nunito
- وزن قلم زیرنویس: پررنگ
- رنگ متن: #000000
در نهایت اندازه متن را تغییر دهید
- اندازه متن زیرنویس:
- دسکتاپ: 56 پیکسل
- متحرک: 32 پیکسل
- ارتفاع خط زیرنویس: 1.2em
سفارشی کردن دکمه شماره 1
در مرحله بعد، سبک دکمه ها را سفارشی می کنیم. با فعال کردن سبک های سفارشی برای دکمه یک شروع کنید، سپس اندازه متن را تنظیم کنید.
- استفاده از سبک های سفارشی برای دکمه: بله
- دکمه یک اندازه متن: 14 پیکسل
یک گرادیان پس زمینه به دکمه اضافه کنید. مقادیر گرادیان به شرح زیر است:
- 58٪: #316EFF
- 100٪: #1D2B60
- جهت گرادیان: 90 درجه
بعد، تنظیمات حاشیه و تنظیمات فونت را سفارشی کنید.
- دکمه یک:
- عرض حاشیه: 0 پیکسل
- شعاع حاشیه: 80 پیکسل
- فاصله حروف: 2 پیکسل
- فونت: Nunito
- وزن قلم: فوق العاده پررنگ
- سبک: TT (با حروف بزرگ)
- نمایش دکمه یک نماد: خیر
سپس، تنظیمات حاشیه و padding را برای طراحی دسکتاپ سفارشی کنید و یک کادر سایه اضافه کنید.
- دکمه یک حاشیه
- بالا: 200 پیکسل
- پایین: 0px
- پد یک دکمه:
- بالا: 16 پیکسل
- پایین: 16 پیکسل
- سمت چپ: 2 ساعت
- سمت راست: 50 ساعت
- Box Shadow: View Capture
از تنظیمات پاسخگو برای تنظیم مقادیر مختلف حاشیه و بالشتک در دستگاه های تلفن همراه استفاده کنید.
- Button One Margin-Top-Mobile: 25px
- دکمه یک پدینگ-راست-موبایل: 10em
سفارشی کردن دکمه شماره 2
ابتدا روی دکمه شماره 1 کلیک راست کرده و کلیک کنید سبک های یک دکمه کپی.
در مرحله بعد، روی دکمه دو کلیک راست کرده و استایل ها را از دکمه شماره 1 قرار دهید.
اکنون می توانیم دکمه دو را سفارشی کنیم. رنگ متن را تغییر دهید
- دکمه دو رنگ متن: #121F60
شیب پس‌زمینه را برای دکمه دو سفارشی کنید.
- 30٪: rgba (0,229,198,0)
- 100٪: #00e5c6
از تنظیمات پاسخگو برای تنظیم گرادیان پس زمینه برای دستگاه های تلفن همراه استفاده کنید.
- 0٪: rgba (0,229,198,0)
- 100٪: #00e5c6
بعد، حاشیه و بالشتک را برای طراحی دسکتاپ تنظیم کنید.
- حاشیه دکمه دو:
- بالا: 0px
- پایین: 0px
- سمت چپ: 30%
- لایه بندی دکمه دو:
- بالا: 16 پیکسل
- پایین: 16px
- سمت چپ: 48 ساعت
- سمت راست: 2 ساعت
از تنظیمات responsifq برای تنظیم مقادیر مختلف حاشیه و padding برای طراحی موبایل استفاده کنید.
- دکمه دو حاشیه-چپ-موبایل: 5%
- لایه بندی دکمه دو:
- چپ-موبایل: 35%
- راست-موبایل: 5%
CSS سفارشی
در نهایت، بخش عمده ای از کار طراحی انجام می شود. حالا باید CSS سفارشی اضافه کنیم تا طراحی کامل شود. به تب تغییر دهید فناوری و بخش را باز کنید 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: چگونه یک بخش اعضای تیم را به عنوان چرخ فلک ایجاد کنیم
دانلود DIVI در حال حاضر!!!
نتیجه
ماژول Fullwidth Header به شما این امکان را می دهد که به راحتی یک بخش Hero زیبا ایجاد کنید تا خدمات خود را تبلیغ کنید و به شما بگویید آخرین بازدید در مورد چه چیزی صحبت می کنید وب سایت.
تنظیمات داخلی سفارشی کردن هر جنبه از هدر را آسان می کند و همه آن در یک مکان است، بنابراین برای ساخت بخش Hero نیازی به جابجایی بین چندین ماژول نیست.
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
