مقالات مفید دیگر

آموزش بکاپ گیری از سایت وردپرس

آخرین بروزرسانی: 12 شهریور 1403

ساخت لودینگ با المنتور

آخرین بروزرسانی: 3 دی 1403

هزینه طراحی سایت وردپرسی چه قدر است؟

آخرین بروزرسانی: 25 تیر 1403

مقالات پیشنهادی

آخرین به‌روزرسانی: 16 تیر 1404
آخرین به‌روزرسانی: 9 تیر 1404
آخرین به‌روزرسانی: 2 تیر 1404

فهرست مطالب

0
(0)

آموزش ساخت هدر با المنتور این امکان را به شما می‌دهد که بدون استفاده از دانش کدنویسی و افزونه‌های جانبی، هدرهای حرفه‌ای و کاربرپسند طراحی کنید. یک هدر یا سربرگ خوب، نه تنها باید زیبا باشد، بلکه باید باعث بهبود تجربه‌کاربری و افرایش نرخ‌کلیک در سایت شود. افزونه المنتور با وجود انواع المان‌های کاربردی و به‌روزرسانی‌های مداوم خود این امکان را به شما می‌دهد هرنوع هدر(header) یا سربرگی را باتوجه به موضوع سایت خود بسازید.

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

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

آموزش ساخت هدر با المنتور پرو در وردپرس

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

با به‌روزرسانی‌های اخیر المنتور و اضافه‌شدن المان‌هایی مثل off canvas، مگامنو، شرط‌گذاری المان‌ها، کانتینر و خاصیت فلکس باکس ساخت هدرهای حرفه‌ای و جذاب خیلی آسان‌تر از قبل شده‌است.

آموزش ساخت هدر با المنتور به‌طور خلاصه شامل مراحل زیر می‌شود:

  • نصب المنتور و المنتور پرو
  • فعال‌سازی ویژگی‌های مورد نیاز مثل: مگامنو، off canvas و…
  • ایجاد قالب هدر برای شروع طراحی هدر
  • استفاده از قالب‌های آماده هدر(اختیاری)
  • ساخت جزئیات هدر با المنتور
  • استایل و زیبا‌سازی هدر
  • ایجاد شرط برای نمایش هدر در سایت
  • انتشار هدر در سایت

اولین مرحله ساخت هدر با المنتور در سایت

برای شروع طراحی هدر در سایت، ابتدا باید افزونه المنتور و المنتور پرو در سایت نصب باشد. برای این‌کار از پیشخوان وردپرس>افزونه‌ها>افزودن افزونه تازه، نسخه رایگان المنتور را نصب و فعال‌سازی کنید.

جهت نصب المنتورپرو نیز وارد یک سایت مطمئن و معتبر مثل ابزاروردپرس شوید و بعداز دانلود فایل zip افزونه، آن را از طریق پیشخوان یا هاست آپلود، نصب و فعال‌سازی کنید.

دلیل نصب نسخه پرو افزونه المنتور، دسترسی به ویژگی‌ها و امکانات پیشرفته‌ این افزونه است.

فعال‌سازی امکانات پیشرفته در المنتور برای ساخت هدر

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

از جمله امکاناتی که می‌توانید در المنتور فعال کنید عبارت است از:

  • عناصرتودرتو و کانتینر فلکس باکس

جهت ساخت بهینه هدر با المنتور و رفع 90% مشکلات ریسپانسیو سربرگ سایت.

  • فعال‌سازی display conditions

امکان شرطی کردن عناصر موجود در هدر در زمان ورود یا عدم ورود کاربران در سایت

  • ویژگی فهرست یا menu

جهت ساخت انواع مگامنوهای جذاب در هدر، استفاده به‌جای المان فهرست پیش‌فرض وردپرس

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

مرحله سوم آموزش ساخت هدر با المنتور، ایجاد قالب هدرسایت

برای ساخت قالب هدر در وردپرس و شروع طراحی سربرگ با المنتور، وارد پیشخوان وردپرس شوید. از طریق منوی “قالب‌ها” روی دکمه “افزودن جدید” کلیک کنید.

در صفحه قالب‌ساز المنتور، نوع قالب را “هدر” یا “سربرگ” انتخاب کنید و یک نام برای آن قراردهید. روی دکمه ایجاد قالب کلیک کنید تا وارد صفحه ویرایشگر المنتور برای ساخت هدر شوید.

 

تعیین قالب در آموزش ساخت هدر با المنتور

 

دانلود قالب هدر المنتور

بعداز ایجاد قالب هدر، بلافاصله وارد صفحه کتابخانه المنتور می‌شوید. این کتابخانه شامل تعدادی قالب هدر آماده است که می‌توانید یکی از آن‌ها را دانلود، درج و شخصی‌سازی کنید. همچنین اگر قالبی را از قبل خریداری کردید می‌توانید از قسمت “درون‌ریزی قالب” اضافه کنید و هدر خود را ویرایش کنید.

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

 

کتابخانه المنتور و دانلود قالب المنتور برای ساخت هدرسایت

 

نحوه ساخت هدر با المنتور، شروع طراحی

در ابتدا برای شروع طراحی در المنتور باید تعیین کنید که چه ساختار و چیدمانی را می‌خواهید برای هدرسایت خود درنظر بگیرید. ما قصدداریم یک هدر با عرض محتوای جعبه‌ای(1200 پیکسل)، پس زمینه سفید و شامل یک کانتینراصلی و 3 کانتینر داخلی بسازیم.

نکته: در این مقاله، ما نحوه ساخت یک هدر ساده را به شما آموزش خواهیم داد و درآینده علاوه بر آموزش ساخت هدر حرفه‌ای، آموزش ویدئویی طراحی هدر با المنتور را نیز اضافه خواهیم کرد.

خب، برای ساخت هدر در المنتور ابتدا از دکمه + که در مرکز صفحه قرار دارد، نوع چیدمان را “فلکس باکس” و ساختار شماره 2 را انتخاب می‌کنیم (به عنوان سکشن اصلی). از بخش تنظیمات سکشن، حاشیه خارجی را 30 پیکسل از بالا فاصله می‌دهیم(اختیاری).

 

انتخاب ساختار برای ساخت هدرسایت در وردپرس

 

سپس از بخش المان‌های المنتور، المان کانتینر را به ساختار خود اضافه می‌کنیم(کانتینرشماره1). عرض محتوا را روی حالت “جعبه”، مقدارش را  1200 پیکسل و جهت‌یابی را از راست به چپ(همان افقی) قرار می‌دهیم.

 

ساخت کانتینراصلی هدرسایت با المنتور

 

سپس از بخش استایل رنگ پس‌زمینه را سفید قرارمی‌دهیم و در آخر از بخش پیشرفته، حاشیه خارجی و فاصله داخلی را 0 تعیین می‌کنیم. همچنین برای جذابیت بیشتر، از بخش استایل>حاشیه، انحنای حاشیه را 10 پیکسل و یک سایه‌ی بســـیار کم‌رنگ به کانتینرخود می‌دهیم.

 

تعیین رنگ، حاشیه و سایه کانتینراصلی هدرسایت

 

در ادامه آموزش طراحی ساخت هدر با المنتور، دوباره از طریق المان‌های المنتور، المان کانتینر را به کانتینراصلی(شماره1) اضافه و 2 بار آن‌را تکثیر می‌کنیم. (برای تکثیر کانتینر کافیه روی آن کلیک راست کرده و گزینه “تکثیر” را انتخاب کنید.)

 

طراحی ساختارکلی هدرسایت

 

تا اینجای کار، ساختار اصل هدر را باهم ساختیم. (یک سکشن اصلی، یک کانتینراصلی(شماره1) و سه کانتینر درون آن برای قرارگیری اجزای هدر)

نکته: ما در این طراحی، پس زمینه سایت را به صورت رنگی قرار دادیم. برای این‌کار کافیه از سه خط بالای صفحه(کنار نام elementor)  وارد “تنظیمات سایت” شوید و از طریق بخش “پس‌زمینه”، رنگ زمینه سایت را تعیین کنید.

اضافه‌کردن اجزای هدر به ساختاراصلی

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

مهم‌ترین اجزای هدر در هر سایت وردپرسی عبارت‌است از:

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

اضافه کردن لوگو به هدر سایت

برای اضافه کردن لوگو به هدر سایت می‌توانید از بخش المان‌های المنتور، المان “لوگوی سایت” را انتخاب کنید. لوگوی سایت را در کانتینر سمت راست(شماره 2) با کشیدن و رها کردن قرار دهید.

 

اضافه کردن لوگو به هدر در آموزش ساخت هدر با المنتور

 

نکته: پیشنهاد می‌کنیم قبل از شروع ساخت هدر با المنتور، لوگوی سایت را از طریق پیشخوان>منوی نمایش>سفارشی‌سازی>هویت سایت>نشان انتخاب کنید. با این‌کار با رهاکردن المان لوگوی سایت در هر نقطه از سایت، لوگوی سایت به‌صورت اتوماتیک نمایش داده‌می‌شود.

آموزش ساخت فهرست(منو) هدر با المنتور

برای ساخت منو یا فهرست در هدرسایت دو راه وجود دارد، که براساس نیاز از هرکدام می‌توانید استفاده کنید.

  1. ساخت فهرست از طریق پیشخوان>نمایش>فهرست‌ها و فراخوانی آن از طریق المان “منوی وردپرس” در هدر.
  2. استفاده از المان “فهرست یا menu” برای ساخت منو و مگامنوهای جذاب در هدر.

اگر از روش اول استفاده می‌کنید و نیاز به طراحی مگامنو ندارید، بعداز ساخت فهرست از مسیری که گفته‌شد، دوباره وارد صفحه ویرایش هدر با المنتور شوید و صفحه را رفرش کنید. سپس المان “منوی وردپرس” را در کانتینروسط(شماره3) قراردهید. فهرستی که ساختید را انتخاب کنید و به آن استایل دلخواه دهید.

اگر از روش دوم برای ساخت فهرست هدر در المنتور استفاده می‌کنید، دیگر نیازی به ساخت فهرست از قبل ندارید. از بخش المان‌های المنتور، المان “فهرست” را انتخاب کنید و در کانتینروسط(شماره3) رها کنید.

 

اضافه کردن ویجت فهرست برای ساخت منوی هدر

 

با استفاده از این منو، به‌راحتی می‌توانید انواع فهرست‌ها با مگامنوهای جذاب را طراحی کنید. آیتم‌های منوی خود را تعیین کنید، به آن‌ها لینک دهید، آیکن انتخاب کنید و با سلیقه خود استایل دهید. اگر با مگامنو و نحوه ساخت آن آشنایی ندارید، از آموزش ساخت مگامنو با المنتور استفاده کنید.

 

اضافه کردن فهرست به سربرگ سایت

 

ساخت فرم جست‌وجو هدر با المنتور

یکی از مهم‌ترین عناصر موجود در هدرسایت، فرم جست‌وجو است. این فرم باید در هدر سایت، خصوصاً سایت‌های فروشگاهی وجود داشته باشد.

برای اضافه کردن آن کافیه از قسمت ویجت‌های المنتور، ویجت “فرم جستجو” را انتخاب و در کانتینرسمت‌چپ(شماره4) رها کنید. برای این‌که این المان، فضای کمتری از هدر را اشغال کند، نوع پوسته آن را به‌صورت “تمام صفحه” قرار دهید. استایل دلخواه را ایجاد کنید و از طریق تنظیمات کانتینرشماره4، محل قرارگیری و جهت فرم جستجو را مشخص کنید.

 

 

اضافه کردن آیکن جستجو به هدر سایت
اضافه کردن فرم جست‌وجو به هدرسایت

 

اضافه کردن دکمه به سربرگ سایت

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

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

 

اضافه کردن دکمه به هدرسایت در ویرایشگر المنتور

 

نکته: اگر بعداز اضافه‌کردن دکمه درکنار آیکن فرم جست‌وجو، المان‌ها زیر یکدیگر قرار گرفتند، تنها کاری که باید انجام دهید از طریق تنظیمات کانتینر شماره4 جهت‌یابی را به‌صورت افقی تعیین کنید. همچنین به عرض هر کانتینر و المان توجه کنید.

ساخت هدر ریسپانسیو با المنتور

همان‌طور که می‌دانید، ریسپانسیو بودن یا درست ‌نمایش‌دادن محتوای سایت برای کاربرانی که از طریق موبایل وارد وبسایت شما می‌شوند از اهمیت بسیار زیادی برخوردار است. از آنجایی که هدرسایت اولین بخشی است که کاربران مشاهده می‌کنند، بحث ریسپانسیو بودن آن نیز بسیار مهم است.

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

 

بررسی ریسپانسیو هدر

 

از طریق دکمه‌های بالای صفحه می‌توانید هدرسایت را در حالت موبایل، تبلیت و دسکتاپ بررسی کنید.

نکته‌ای که در بحث ریسپانسیوبودن هدر اهمیت دارد عرض هر کانتینر و المان داخل آن است. ممکن است بعداز مشاهده هدر در حالت موبایل بعضی از المان‌ها نمایش داده نشوند، در این زمان باید عرض کانتینرها را کوچک‌تر کنید.

 

مشاهده سربرگ سایت در حالت موبایل
مشاهده هدر در حالت موبایل

 

همچنین برای این‌که المانی را درحالت موبایل غیرفعال کنید کافیه از تنظیمات کانتینر یا المان مربوطه وارد بخش پیشرفته>واکنشگرا شوید و گزینه مخفی‌سازی در حالت عمودی موبایل یا تبلت را فعال کنید.

 

مسیرمخفی سازی عناصر در المنتور

 

نکته1: اگر در هنگام ساخت هدر با المنتور درحالت دسکتاپ، عرض هر المان و کانتینر را رعایت کنید، به‌خودی خود در حالت تبلت یا موبایل ریسپانسیو خواهدبود.

نکته2: هر کانتینر و المان برای نسخه موبایل یا تبلت تنظیمات مخصوصی دارد که می‌توانید با اعمال تغییرات دلخواه، به آن چیزی که در ذهن دارید برسید.

نکته3: تاحد امکان سعی کنید در حالت موبایل هدر خود را با ارتفاع کم، و تعداد المان‌های کمتر نمایش دهید تا فضای کمتری از موبایل را اشغال کند.

آموزش ساخت هدر موبایل با المنتور

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

اگر همچین قصدی دارید طبق آموزش زیر یک هدر متفاوت برای موبایل طراحی کنید.

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

 

ساخت هدرجدید برای موبایل

 

  • حالا همه المان‌های داخل سکشن دوم(هدر دوم) را به‌غیر از لوگو حذف کنید.( به‌طورکلی این هدر باید شامل یک سکشن اصلی، کانتینراصلی(شماره1)، و دوکانتینر داخل کانتینر اصلی باشد. در کانتینر سمت راست لوگو و در کانتینر سمت چپ منو را قرار می‌دهیم)
  • برای اضافه کردن آیکن منو به هدرجدید، می‌توانید از المان “منوی وردپرس” یا “فهرست” استفاده کنید.
  • در انتها برای این‌که این هدر تنها برای حالت موبایل نمایش داده شود، وارد تنظیمات پیشرفته در سکشن اصلی شوید، و گزینه واکنشگرایی را برای حالت دسکتاپ و تبلت غیرفعال کنید.

 

ساخت منوی موبایل برای هدرسایت

 

ساخت منوی هدر موبایل با off canvas المنتور

المان off canvas المنتور یکی از امکاناتی است که در آپدیت‌های اخیر این افزونه اضافه شده‌است. کاربرد اصلی این المان برای ساخت منوی موبایل در هدرسایت است. برای مثال زمانی که بخواهید آیتم‌های منوی سایت مثل اکثر سایت‌های فروشگاهی در سایدبار صفحه نمایش داده‌شود می‌توانید از این المان استفاده کنید.

برای استفاده از این المان در هدرسایت طبق آموزش زیر عمل کنید.

  • طبق روش قبلی، وارد صفحه نمایش هدرسایت درحالت موبایل شوید.
  • المان منویی که در کانتینرسمت چپ اضافه کرده‌بودید را پاک کنید.
  • المان off canvas را درهرجایی از صفحه که توانستید، رها کنید.
  • بعداز رها کردن المان، یک سایدبار سفید رنگ با تنظیمات این المان نمایش داده می‌شود.

 

ویرایش المان off canvas برای ساخت منوی موبایل

 

  • عرض سایدبار و استایل آن را مشخص کنید.(ما عرض را  300 پیکسل تعیین کردیم)
  • شما می‌توانید در این سایدبار هرنوع محتوایی که می‌خواهید قراردهید.(مانند تصویر زیر)

 

ساخت منوی موبایل در المنتور با off canvas

 

  • بعداز ساخت محتویات off canvas، گزینه editing mode را در تنظیمات این المان غیرفعال کنید.
  • المان “آیکن” را به هدر خود اضافه کنید و یک آیکن مناسب برای منوی سایت انتخاب کنید.

 

اضافه کردن آیکن به هدر موبایل

 

  • سپس برای اتصال این آیکن به off canvas باید در تنظیمات آیکن، در قسمت مربوط به پیوند، روی علامت برچسب پویا کلیک کنید. از میان گزینه‌های موجود، off-canvas را انتخاب کنید.

استفاده از برچسب پویا برای اتصال آیکن به off canvas

 

  • روی علامت آچار کنار عبارت off-canvas کلیک کنید، و ویجت off canvas1 را انتخاب کنید.
  • با این‌کار ویجت off canvas با موفقیت به آیکن متصل می‌شود و زمانی که کاربر روی آیکن کلیک کند محتوای موجود در off canvas نمایش داده‌می‌شود.

ساخت سربرگ چسبان در المنتور

یکی از اقدامات جذاب و مفیدی که می‌توان در ساخت هدرسایت انجام داد، ایجاد حالت چسبان هدر در بالای صفحه سایت هنگام اسکرول است. اگر شما هم می‌خواهید زمانی که کاربران در سایت شما اسکرول می‌کنند، هدرسایت در بالای صفحه به‌صورت چسبان نمایش داده‌شود. طبق آموزش زیر عمل کنید:

  • وارد تنظیمات کانتینر یا سکشن هدر خود شوید.
  • از بخش تنظیمات پیشرفته، وارد موشن افکت شوید.
  • سپس گزینه “چسبان” را فعال کنید. شما می‌توانید تعیین کنید که سکشن انتخاب شده در بالا یا پایین صفحه نمایش داده شود.
  • همچنین می‌توانید تعیین کنید که این حالت چسبان در کدام حالت نمایش سایت ایجاد شود.(موبایل، تبلت و دسکتاپ)
  • اگر هنگام اسکرول به پایین، هدر به بالای صفحه خیلی نزدیک بود، می‌توانید از طریق تنظیمات “انحراف(offset) فاصله هدر از بالا را تنظیم کنید.

آموزش ساخت هدر شفاف با المنتور

یکی از مواردی که باعث جذابیت دوچندان وبسایت شما می‌شود، استفاده از هدرهای شفاف به‌جای هدر ساده و معمولی است. شما به‌راحتی می‌توانید با تغییرات جزئی در تنظیمات هدرسایت، هدر خود را شفاف کنید.

زمانی که هدر شفاف باشد، به راحتی می‌توانید از تصاویر و بکگراندهای جذاب در بالی صفحه سایت استفاده کنید. همچنین می‌توانید این هدر شفاف را تنها برای صفحه اصلی سایت درنظر بگیرید و برای باقی صفحات یک هدر معمولی طراحی کنید.(مانند شاه وردپرس)

  • برای شفاف‌کردن هدر وارد تنظیمات سکشن اصلی شوید. ارتفاع را 100 پیکسل قراردهید.
  • وارد تنظیمات استایل شوید و رنگ زمینه را سفید و میزان شفافیت را در پایین‌ترین حد قراردهید. rgba(255,255,255,0)
  • وارد تنظیمات پیشرفته شوید و مقدار حاشیه خارجی را از پایین روی -100 قرار دهید.(دقت کنید، اگر ارتفاع هدر مثلاً 90 پیکسل بود، مقدار حاشیه خارجی از پایین -90 پیکسل باید باشد)
  • از همان تنظیمات پیشرفته، مقدار z ایندکس را روی 999 قراردهید.
  • در قسمت شناسه css ، عبارت header-stick را قرار دهید.
  • از تنظیمات پیشرفته وارد بخش موشن افکت شوید، حالت چسبان را بالا و مقدار افکت افست را 100 تعیین کنید.
  • وارد css سفارشی شوید و کد زیر را قراردهید.

elementor-sticky–effects {background-color: rgba(0,0,0,0.5 )  !important}.

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

انتشار هدر ساخته‌شده در سایت

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

در صفحه جدید، ویرایشگر المنتور از شما می‌خواهد که برای انتشار این قالب شرط تعیین کنید. روی گزینه add condition کلیک کنید.

با استفاده از گزینه‌های موجود در صفحه می‌توانید تعیین کنید که این هدر در تمام سایت منتشر شود یا تنها برای صفحات خاص. در آخر روی گزینه save کلیک کنید.

 

ایجاد شرط برای انتشار قالب هدر در سایت

 

سوال: آیا می‌توانم برای صفحات مختلف هدرهای متفاوت بسازم؟

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

 

رفتن به بخش تنظیمات display conditions

 

نتیجه گیری

به انتهای مقاله آموزش ساخت هدر با المنتور رسیدیم. در این آموزش به‌طور کامل با نحوه ساخت هدر با المنتور، طراحی هدر شفاف در المنتور، قراردادن هدر به‌صورت چسبان در صفحات سایت و به‌طور خاص به ساخت هدر موبایل با استفاده از قابلیت off canvas المنتور آشنا شدیم. امیدواریم بعداز مطالعه این آموزش مشکلی بابت ساخت هدر با المنتورپرو در وردپرس نداشته‌باشید.

به‌زودی ویدئوهای آموزشی مرتبط با این موضوع در همین صفحه منتشر می‌شود.

سوالات و مشکلاتتان را از طریق بخش دیدگاه‌ها با ما درمیان بگذارید.

نظرت در مورد مقاله شاه چیه؟

میانگین امتیاز 0 / 5. تعداد آراء 0

در تولید این محتوا از ابزار هوش‌مصنوعی کمک‌ گرفته‌شده است.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


آموزش ساخت هدر با المنتور

کامل ترین آموزش ساخت هدر با المنتور

آخرین به‌روزرسانی: 10 مرداد 1403

شاه وردپرس

«ندای یار وردپرسی در باد میپیچد»

ای اهل وردپرس، ای دلدادگان دنیای وب! منم، شاه وردپرس، خادم شما در این سرزمین پهناور

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

مشاوره رایگان

درخواست پشتیبانی

ارسال پیامک

09119362023/09055973819

درصورت ارسال پیامک، نام‌ونام‌خانوادگی و پلن انتخابی را حتماً ذکر کنید.