به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد ایجاد کنید به راحتی و رایگان هر طراحی وب سایت یا وبلاگ با ظاهری حرفه ای. از پرداخت هزینه زیاد برای وب سایتی که خودتان می توانید انجام دهید خودداری کنید.

آیا می خواهید با ماژول منوی تمام صفحه در Divi یک هدر سراسری ایجاد کنید؟

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

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

گزینه های Divi's Theme Builder به شما این امکان را می دهد که یک هدر جهانی سفارشی ایجاد کنید و ظاهر هدر و ماژول های منو را در کل وب سایت خود سفارشی کنید. 

در این آموزش، ما به شما نشان می دهیم که چگونه با استفاده از ماژول منوی تمام صفحه Divi، یک هدر سراسری ایجاد کنید.

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

بررسی

در اینجا پیش نمایشی از هدر جهانی است که می خواهیم طراحی کنیم.

سازنده تم را باز کنید

از آنجایی که در این مثال در حال ساخت یک هدر سراسری هستیم، بیایید به «Theme Builder» بروید، که می‌توانید آن را در منوی WordPress Divi پیدا کنید. Add Global Header را انتخاب کنید و سپس Create Global Header را انتخاب کنید.

Divi: نحوه ایجاد هدر سراسری با ماژول منوی تمام صفحه

نوار منوی ثانویه را ایجاد کنید

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

  • پس زمینه: #92A8A1

بعد، حاشیه بخش.

Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62.

  • راس حاشیه داخلی: 0 پیکسل
  • حاشیه داخلی پایین: 0 پیکسل
Divi: نحوه ایجاد هدر سراسری با ماژول منوی تمام صفحه

حالا یک ردیف وارد کنید. برای این مثال، از چیدمان زیر استفاده خواهیم کرد.

در تنظیمات ردیف، در زبانه Sizing of Style، ارتفاع ستون ها را هماهنگ کنید.

  • هماهنگ کردن ارتفاع ستون: بله

سپس حاشیه های بالا و پایین را به صورت زیر تنظیم کنید:

  • حاشیه داخلی بالا: 5 پیکسل
  • حاشیه داخلی پایین: 5 پیکسل

از آنجایی که می خواهیم عناصر هدر ثانویه ما به صورت عمودی تراز شوند، مقداری CSS سفارشی را به عنصر ردیف اصلی اضافه می کنیم.

1. align-items:center;

Divi: نحوه ایجاد هدر سراسری با ماژول منوی تمام صفحه

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

ویرایش محتوای متنی این مکان عالی برای گنجاندن یک تماس برای اقدام یا تبلیغ یک پیشنهاد است.

  • متن: "به لیست پستی ما بپیوندید تا 10٪ تخفیف سفارش خود را دریافت کنید!" »

به تب Style ماژول Text دسترسی پیدا کنید و پارامترها را به صورت زیر تغییر دهید:

  • فونت "متن": Poppins
  • "متن" کم نور: متوسط
  • رنگ متن "متن": #FFFFFF

بعد، ماژول Button را در سمت راست اضافه کنید.

اضافه کردن متن دکمه

  • متن: "دریافت یک پیشنهاد رایگان"

در تب Style، دکمه را در مرکز تراز کنید.

  • تراز دکمه: مرکز

آیا می خواهید محصولات خود را در اینترنت بفروشید؟

WooCommerce را به صورت رایگان دانلود کنید، بهترین افزونه های تجارت الکترونیک برای فروش محصولات فیزیکی و دیجیتالی خود در وردپرس و به راحتی فروشگاه آنلاین خود را ایجاد کنید. ایده آل برای مبتدیان.

حالا بیایید ظاهر دکمه را سفارشی کنیم.

  • استفاده از سبک های سفارشی برای "دکمه": بله
  • اندازه متن دکمه: 14 پیکسل
  • رنگ متن دکمه: #FFFFFF
  • دکمه پس زمینه: #2F5349
  • پهنای حاشیه دکمه: 0 پیکسل
  • دکمه Border Radius: 50px
  • فاصله حروف دکمه ها: 1px
  • فونت دکمه: Poppins

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

اکنون که منوی ثانویه طراحی شده است، می توانیم به منوی اصلی برویم. ما منو را با استفاده از ماژول Full Screen Menu می سازیم. یک بخش تمام صفحه جدید به سربرگ جهانی اضافه کنید.

ماژول منوی تمام صفحه را انتخاب و درج کنید

در مرحله بعد، تنظیمات منوی تمام صفحه را سفارشی می کنیم.

  • رنگ پیوند فعال: #2F5349
  • منوی قلم: Poppins
  • منوی کم نور: نیمه پررنگ
  • منوی سبک کپی: TT
  • رنگ متن منو: #000000
  • رنگ متن منوی شناور: #2F5349
  • اندازه متن منو: 15 پیکسل
  • فاصله حروف منو: 2 پیکسل

رنگ نماد منوی همبرگر را به سیاه تغییر دهید.

  • رنگ نماد منوی همبرگر: #000000
Divi: نحوه ایجاد هدر سراسری با ماژول منوی تمام صفحه

قبل از اینکه لوگو را به منوی خود اضافه کنیم، بیایید گزینه های اندازه را تغییر دهیم. ما از گزینه های پاسخگو داخلی Divi برای تعیین حداکثر ارتفاع متفاوت برای رایانه شخصی و موبایل استفاده خواهیم کرد.

  • حداکثر ارتفاع لوگو در رایانه شخصی: 3vw
Divi: نحوه ایجاد هدر سراسری با ماژول منوی تمام صفحه
  • حداکثر ارتفاع لوگو در موبایل: 6vw

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

در نهایت، می‌خواهیم وقتی کاربر در وب‌سایت پیمایش می‌کند، منوی اصلی در بالای صفحه باقی بماند، بنابراین از تنظیمات چسبنده داخلی Divi برای این کار استفاده می‌کنیم.

  • موقعیت چسبنده: در بالا بچسبانید

با آن، طراحی هدر جهانی ما کامل شد.

یک صفحه جدید با یک طرح از پیش تعریف شده ایجاد کنید

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

یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه Use Divi Builder را انتخاب کنید.

ما از یک طرح‌بندی از پیش ساخته شده از کتابخانه Divi برای این مثال استفاده می‌کنیم، بنابراین Choose Layout را انتخاب کنید.

طرح بندی "Flooring Home Page" را پیدا کرده و انتخاب کنید.

"انتخاب طرح بندی" را انتخاب کنید تا طرح بندی را به صفحه خود اضافه کنید.

اکنون طراحی کامل شده است!

نتیجه نهایی

نتیجه

همانطور که در بالا گفتیم، هدر و منوی پیمایش در قلب تجربه کاربری وب سایت شما قرار دارند. اکنون مشاهده کرده اید که طراحی یک هدر کلی خیره کننده با ماژول "Full Screen Menu" Divi چقدر آسان است. 

خوشبختانه، تم ساز Divi به شما اجازه می دهد تا تمام جنبه های منو و هدر وب سایت خود را کنترل کنید و می توانید طرح های کاملاً سفارشی و منحصر به فرد را تنها با چند کلیک ایجاد کنید.

آیا از گزینه های هدر جهانی Divi برای سفارشی کردن هدر و منوی ناوبری خود استفاده کرده اید؟ در کامنتها به ما بگویید که چه فکر میکنید!

0 سهام
سهم
صدای جیر جیر
ثبات