ماژول Divi Fullwidth Header اضافه کردن بخش های قهرمان زیبا را به وب سایت شما آسان می کند. این ماژول دارای دو دکمه، متن عنوان، متن زیرنویس، متن متن، آرم و تصویر است که گزینه های سفارشی سازی را بی پایان می کند.
در پست امروز، نحوه بازآفرینی بخش‌های کاراکتر با استفاده از هدر Divi Fullwidth را نشان خواهیم داد. ما طراحی خود را با استفاده از 3 بسته چیدمان آماده شروع می کنیم و بخش های خود را با تمرکز بر تعادل دکمه های اولیه و ثانویه طراحی می کنیم. ما می‌خواهیم که دکمه اصلی برجسته باشد، زیرا دعوت به عمل اصلی ماست، در حالی که دکمه ثانویه را بدون سبقت گرفتن از دکمه اصلی قابل مشاهده و در دسترس نگه داریم.
اصول طراحی دکمه های اولیه و ثانویه
دکمه‌های اصلی و دکمه‌های ثانویه به راهنمایی بازدیدکنندگان وب‌سایت شما به اقدامات خاصی کمک می‌کنند. دکمه‌های اولیه معمولاً رایج‌ترین یا مطلوب‌ترین عملکرد هستند و دکمه‌های ثانویه عملکرد کمتری هستند. این به بازدیدکنندگان کمک می کند تا به جایی که می خواهند بروند حرکت کنند.
برای دستیابی به این هدف، دکمه های اصلی باید از نظر بصری خودنمایی کنند و دکمه های ثانویه نباید آنقدر برجسته باشند. به این معنی که دکمه های اصلی باید متمایزتر باشند و وزن بصری بیشتری داشته باشند تا توجه بیشتری را به خود جلب کنند.
حالا که متوجه شدیم دکمه های اولیه و ثانویه چگونه کار می کنند، بیایید به سراغ آموزش برویم!
پیش نمایش طراحی
در اینجا نگاهی به سه هدر تمام عرضی داریم که امروز طراحی خواهیم کرد.
هدر UX Fullwidth
هدر تمام عرض مرکز بازنشستگی Divi
سربرگ برنامه ریزی مالی با عرض کامل
طرح بندی ها را به صورت رایگان دانلود کنید
برای دستیابی به طرح های این آموزش، ابتدا باید آن را از طریق دکمه زیر دانلود کنید. برای دسترسی به دانلود، باید با استفاده از فرم زیر در خبرنامه ما مشترک شوید. به‌عنوان یک مشترک جدید، هر دوشنبه بیشتر Divi خوبی و بسته Divi Layout رایگان دریافت خواهید کرد! اگر قبلاً در لیست هستید، فقط آدرس ایمیل خود را در زیر وارد کنید و روی دانلود کلیک کنید. شما “دوباره مشترک” نخواهید شد یا ایمیل های اضافی دریافت نمی کنید.
برای وارد کردن قالب هدر به کتابخانه Divi خود، موارد زیر را انجام دهید:
- به Divi Theme Builder بروید.
- روی دکمه Import در گوشه سمت راست بالای صفحه کلیک کنید.
- در پنجره قابل حمل، تب import را انتخاب کنید
- فایل مورد نظر را برای دانلود از رایانه خود انتخاب کنید (مطمئن شوید که ابتدا فایل را از حالت فشرده خارج کرده و از فایل JSON استفاده کنید).
- سپس روی دکمه import کلیک کنید.
پس از انجام، طرح برگه در Divi Builder در دسترس خواهد بود.
بریم سراغ آموزش، درسته؟
آنچه برای شروع نیاز دارید
برای شروع، باید موارد زیر را انجام دهید:
- Divi را در وب سایت وردپرس خود نصب کنید.
- یک صفحه اضافه کنید و به آن عنوان بدهید.
- Visual Builder را فعال کنید
مراحل طراحی هدر Ux Full Width
اکنون که صفحه خود را راه اندازی کرده ایم، بیایید با هدر تمام عرض برای صفحه فرود UX شروع کنیم.
ایجاد صفحه ما
قبل از شروع استایل‌سازی، باید بسته طرح‌بندی آماده UX را از کتابخانه Divi بارگیری کنیم. هنگامی که Visual Builder را فعال می کنید، سه گزینه ظاهر می شود، گزینه Choose Premade Layout را انتخاب کنید.
بسته طرح بندی را بارگیری کنید
برای بارگیری بسته طرح‌بندی UX در صفحه خود:
- در تب Pre-Made Layouts، از تابع جستجو برای یافتن بسته طرح‌بندی UX استفاده کنید.
- هنگامی که آن را پیدا کردید، روی آن کلیک کنید. این جزئیات طرح بندی و صفحات موجود را نشان می دهد.
- روی طراحی صفحه فرود کلیک کنید، سپس روی «استفاده از این طرح‌بندی» کلیک کنید.
ما قسمت بالای طرح را به عنوان یک ماژول هدر تمام عرض دوباره ایجاد می کنیم.
قسمت اول را حذف کنید
از آنجایی که می‌خواهیم بخش اول را با استفاده از ماژول Fullwidth Header دوباره ایجاد کنیم، باید آن بخش را حذف کنیم. نشانگر را روی بخش نگه دارید و روی نماد سطل زباله کلیک کنید.
یک بخش با عرض کامل اضافه کنید
قبل از اینکه بتوانیم هدر تمام عرض را اضافه کنیم، باید یک بخش با عرض کامل اضافه کنیم.
روی پیکان “+” کلیک کنید تا بخش های Divi ظاهر شوند و سپس روی “full width” کلیک کنید. با این کار کتابخانه Divi Fullwidth Module به طور خودکار نمایش داده می شود.
یک هدر با عرض کامل اضافه کنید
در کتابخانه Divi Fullwidth Module، روی “Fullwidth Header” کلیک کنید.
محتوا اضافه کنید
قبل از شروع به طراحی ماژول، بیایید محتوای مورد نیاز برای این ماژول را اضافه کنیم.
محتوای متنی را اضافه کنید
در زیر تب Text، محتوای زیر را اضافه کنید:
- عنوان: دانش خود را در مورد طراحی UX بهبود بخشید
- زیرنویس: دوره طراحی UX
- دکمه شماره 1: نمای کلی دوره
- دکمه شماره 2: بیشتر بدانید
- متن متن: متن جایگزین
اضافه کردن تصاویر
اکنون که محتوای متنی خود را داریم، باید دو تصویر به طراحی خود اضافه کنیم.
- در تب Images، تصویر لوگو (ستاره ها) و تصویر هدر (تصویر شخصی که گوشی را در دست دارد) اضافه کنید.
رنگ پس زمینه را تغییر دهید
در تب Background، این تنظیمات را پیکربندی کنید:
- رنگ زمینه: #131517
طرح هدر با عرض کامل
اکنون که محتوای خود را تنظیم کردیم، بیایید از طریق تب Design مقداری سبک به آن اضافه کنیم.
اسکرول به پایین نماد
بیایید نماد اسکرول پایین، فلش رو به پایین را اضافه کنیم.
- این طرح از نماد اسکرول به پایین استفاده می کند، بنابراین این گزینه را روی بله تغییر دهید.
- نماد فلش رو به پایین را انتخاب کنید و سپس رنگ نماد را سفید قرار دهید.
تصویر
بیایید با گرد کردن گوشه ها، منحنی ها را به تصاویر خود اضافه کنیم.
در تب Image تنظیمات زیر را انجام دهید:
- تصویر گوشه های گرد: روی دکمه زنجیره پیوند کلیک کنید تا پیوند گوشه‌ها قطع شود، سپس 1000 پیکسل را در کادر ورودی پایین سمت چپ و پایین سمت راست وارد کنید. با این کار گوشه پایین سمت چپ و پایین سمت راست تصاویر ما گرد می شود.
متن عنوان
در اینجا اجازه دهید متن عنوان را برای این ماژول استایل کنیم. در تب Title Text، این تنظیمات را پیکربندی کنید:
- فونت عنوان: PT Sans
- وزن قلم عنوان: پررنگ
- اندازه متن سرصفحه: 5 رم
- ارتفاع خط عنوان: 1.2 سانتی متر
متن اصلی
اینجاست که به متن بدنه این ماژول استایل می دهیم. در تب Body text، این تنظیمات را پیکربندی کنید:
- فونت اصلی: Mukta
- اندازه متن متن: 18 پیکسل
متن زیرنویس
اینجاست که به متن زیرنویس این ماژول استایل می دهیم. در تب Subtitle Text، این تنظیمات را پیکربندی کنید:
- فونت زیرنویس: Mukta
- وزن قلم زیرنویس: پررنگ
- سبک قلم زیرنویس: حروف بزرگ
- رنگ متن زیرنویس: #13d678
- فاصله بین حروف زیرنویس: 3 پیکسل
دکمه یک
اینجاست که می‌توانیم استایل‌های سفارشی را برای دکمه یک، دکمه اصلی تنظیم کنیم. در تب Button One، این تنظیمات را پیکربندی کنید:
- از سبک های سفارشی برای دکمه یک استفاده کنید: بله
- رنگ یک دکمه: #ffffff
- پس زمینه دکمه یک: #13d678
- عرض حاشیه تک دکمه: 0 پیکسل
- شعاع حاشیه یک دکمه: 100 پیکسل
- فونت دکمه یک: Mukta
- وزن فونت دکمه یک: پررنگ
- نمایش نماد روی دکمه یک: بله
- نماد دکمه یک: فلش سمت راست
- نمایش نماد فقط در شناور برای دکمه اول: خیر
دکمه دو
حالا بیایید دکمه ثانویه، دکمه دوم را استایل کنیم. در تب Button Two، این تنظیمات را پیکربندی کنید:
- از سبک های سفارشی برای دکمه یک استفاده کنید: بله
- رنگ یک دکمه: #ffffff
- پس زمینه دکمه یک: #303030
- عرض حاشیه تک دکمه: 0 پیکسل
- شعاع حاشیه یک دکمه: 100 پیکسل
- فونت دکمه یک: Mukta
- وزن فونت دکمه یک: پررنگ
- نمایش نماد روی دکمه یک: بله
- نماد دکمه یک: فلش سمت راست
- نمایش نماد فقط در شناور برای دکمه اول: بله
پیوندها را به دکمه ها اضافه کنید
فراموش نکنید که پیوندهایی را به دکمه های خود اضافه کنید! در تب Connection تنظیمات زیر را انجام دهید:
- دکمه شماره 1 URL پیوند: URL مربوط به دکمه یک را در اینجا بچسبانید.
- دکمه شماره 2 URL پیوند: URL مربوط به دکمه دو را در اینجا بچسبانید.
طراحی خود را ذخیره کنید
اکنون که ما هدر تمام عرض کاملاً طراحی شده خود را داریم، حتماً طرح خود را ذخیره کنید!
- روی فلش سبز رنگ در گوشه سمت راست پایین پنجره ماژول کلیک کنید.
- سپس روی نماد ذخیره در نوار ابزار Divi کلیک کنید تا طراحی صفحه شما ذخیره شود.
- از Visual Builder خارج شوید.
از آزمایش کردن لذت ببرید
راه های استایل دادن به ماژول Divi Fullwidth Header بی پایان است. استفاده از دکمه اصلی و دکمه ثانویه می‌تواند به هدایت بازدیدکنندگان شما به صفحه‌ای که می‌خواهید آنها را ببینند یا اقدامی (مانند ارسال درخواست) که می‌خواهید انجام دهند، کمک کند.
بیایید به دو نمونه دیگر از Fullwidth Header که دارای یک دکمه اصلی برجسته هستند نگاه کنیم.
هدر تمام عرض مرکز بازنشستگی Divi
سبک دکمه ها
بیایید نگاهی به سبک های منحصر به فرد برای دکمه های اصلی و ثانویه بیاندازیم.
دکمه یک
در تب Button One، تنظیمات زیر را پیکربندی کنید:
- از سبک های سفارشی برای دکمه یک استفاده کنید: بله
- اندازه متن دکمه اول: 14 پیکسل
- رنگ یک دکمه: #ffffff
- پس زمینه دکمه یک: #0a0a0a
- عرض حاشیه تک دکمه: 0 پیکسل
- شعاع حاشیه یک دکمه: 10 پیکسل
- وزن فونت دکمه یک: پررنگ
دکمه دو
در تب Button Two، تنظیمات زیر را پیکربندی کنید:
- از سبک های سفارشی برای دکمه یک استفاده کنید: بله
- اندازه متن دکمه اول: 14 پیکسل
- رنگ یک دکمه: #ffffff
- پس زمینه دکمه یک: #0a0a0a
- عرض حاشیه تک دکمه: 0 پیکسل
- شعاع حاشیه یک دکمه: 10 پیکسل
- وزن فونت دکمه یک: پررنگ
و آنجاست! دو دکمه منحصر به فرد، یکی برجسته و دیگری که در جایگاه دوم قرار می گیرد.
سربرگ برنامه ریزی مالی با عرض کامل
سبک دکمه ها
بیایید نگاهی به سبک های منحصر به فرد برای دکمه های اصلی و ثانویه بیاندازیم.
دکمه یک
در تب Button One، تنظیمات زیر را پیکربندی کنید:
- از سبک های سفارشی برای دکمه یک استفاده کنید: بله
- اندازه متن دکمه اول: 18 پیکسل
- رنگ متن دکمه اول: #ffffff
- رنگ پس زمینه دکمه اول: #1b4ffe
- بالشتک تک دکمه: 15 پیکسل بالا و پایین. 25 پیکسل چپ و راست
دکمه دو
در تب Button Two، تنظیمات زیر را پیکربندی کنید:
- از سبک های سفارشی برای دکمه دو استفاده کنید: بله
- دکمه دو رنگ متن: #1b4ffe
- دکمه دو رنگ پس زمینه: شفاف
- نماد دکمه رنگ دو: #1b4ffe
افکار نهایی
Divi Fullwidth Header ایجاد بخش های قهرمان خیره کننده در وب سایت شما را آسان می کند. استفاده استراتژیک از دکمه های اصلی و ثانویه تجربه کاربری شما را بهبود می بخشد و به بازدیدکنندگان وب سایت کمک می کند تا اقدامات مورد نظر خود را انجام دهند. گزینه های سفارشی سازی با Fullwidth Header بی پایان هستند، بنابراین از آزمایش کردن لذت ببرید!