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

المنتور از آن افزونه‌های محبوب و کاربردی وردپرس است که کار طراحی صفحات سایت وردپرسی را برای همه آسان کرده است؛ به خصوص کسانی که دستی در کدنویسی و مهارت آنچنانی در طراحی وب ندارند.

ساخت هدر با المنتور هم مثل طراحی صفحات اصلی سایت بسیار ساده است و می‌توانید آن‌ها را فقط با یک Drag & Drop ساده طراحی کنید!

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

منظور از هدر و فوتر در سایت چیست؟

هدر (Header) و فوتر (Footer) به ترتیب دو بخش ثابت بالایی و پایینی سایت شما هستند. بیایید هرکدام را به تفکیک بررسی کنیم.

هدر سایت

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

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

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

مهم‌ترین صفحات و گزینه‌های کاربردی سایت هم در هدر قرار می‌گیرند؛ از جمله جست‌وجو، دکمه‌های Call to Action، بلاگ و سبد خرید.

به عنوان مثال، هدر سایت لیموهاست را ببینید که شامل ۷ بخش اصلی سایت و ورود به ناحیۀ کاربری می‌شود و کاربران می‌توانند به راحتی صفحۀ دلخواه خود را پیدا کنند:

فوتر سایت

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

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

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

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

به اصل مطلب رسیدیم! در این بخش می‌خواهیم مراحل طراحی و ساخت هدر سایت با المنتور را در ۴ مرحله پیش ببریم و بدون نیاز به تخصص فنی، یک هدر اختصاصی و جذاب بسازیم.

مرحله اول) نصب المنتور و انتخاب هدر جدید

بعد از اینکه المنتور را نصب و در پیشخوان وردپرس فعال کردید، از قسمت منو به ترتیب گزینه‌های Templates و Add New و سپس Add New Header را انتخاب کنید.

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

هاست وردپرس لیموهاست

با بهترین عملکرد میزبان سایت وردپرسی شما هستیم. بهینه‌سازی شده برای بالاترین سطح سرعت!

شروع قیمت از
۱۹۸ هزار تومان

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

مرحله دوم) انتخاب نام و ایجاد قالب

حالا باید نوع قالب را مشخص کنید؛ اگر می‌خواهید هدر بسازید باید گزینه Header (یا سربرگ) و اگر می‌خواهید فوتر سایت‌تان را بسازید گزینه footer را انتخاب کنید. (بقیه مراحل در ساخت هدر و فوتر در المنتور تقریباً یکسان است.)

نوع قالب را که مشخص کردید، حالا باید برای آن اسم بگذارید که می‌تواند هرچیزی از جمله اسامی فارسی باشد. مثلاً در این تصویر، نام آن را Main Header گذاشته‌ایم. بعد روی Create Template کلیک کنید.

مرحله سوم) طراحی و شخصی‌سازی هدر

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

حالا وارد مرحلۀ طراحی می‌شوید! طراحی را طبق این مراحل پیش ببرید:

1. سه‌تا ستون انتخاب کنید که قرار است برای لوگو، نوار جست‌وجو و دکمه‌های ورود به صفحات مختلف استفاده شوند. این کار را باید از طریق بخش Elementor Widget Gallery انجام دهید.
2. در مرحلۀ بعد، باید محتویات هر بخش را در قسمت مخصوص به خود قرار دهید. وارد هرکدام از بخش‌ها که می‌شوید، محتوای آن را بارگذاری و ذخیره کنید. می‌توانید جزئیات مربوط به هر بخش را هم شخصی‌سازی کنید و تنظیمات آن را تغییر دهید.
3. دکمۀ Update را کلیک کنید تا از ذخیره شدن تغییرات محتوا مطمئن شوید.

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

لوگو

برای اضافه کردن لوگو به هدر، گزینۀ site logo را انتخاب و روی آیکون + کلیگ کنید.

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

نوار جست‌وجو

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

می‌توانید این بخش را هم شخصی‌سازی کنید و اندازه و ابعاد آن را تغییر دهید.

دکمه‌های ورود به صفحات

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

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

از طریق تنظیمات حاشیۀ صفحه، می‌توانید جزئیات مربوط به منوی اصلی سایت و دکمه‌های آن را طراحی کنید.

مرحله چهارم) ذخیره تغییرات و انتشار هدر

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

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

با المنتور در کمتر از ۵ دقیقه هدر بسازید!

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

اگر سؤال یا ابهامی دربارۀ ساخت هدر سایت با المنتور دارید، حتماً آن را در بخش نظرات این مقاله با ما مطرح کنید.