آموزش ساخت هدر با المنتور؛ صفر تا صد طراحی سربرگ سایت

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

آموزش گام به گام طراحی هدر با المنتور

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

• گام اول) نصب المنتور و افزودن قالب هدر جدید

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

• اسم قالب هدر المنتور (Elementor header templates) را سربرگ یا هر نام دیگری قرار دهید و بر روی ایجاد قالب کلیک کنید.

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

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

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

• گام سوم) طراحی هدر با المنتور

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

✔️ طراحی لوگو هدر با المنتور

برای نمایش لوگو در هدر در پیشخوان وردپرس مسیر نمایش > سفارشی سازی > هویت سایت > گزینش نشان را دنبال کنید. سپس لوگو مورد نظر خود را بارگزاری کنید، به ویرایشگر المنتور برگردید و ذخیره را بزنید و با یکبار رفرش تغییرات لوگو را مانند تصویر زیر ببینید.

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

برای نمایش فهرست در هدر المنتور به پپیشخوان وردپرس برگردید و در قسمت نمایش > فهرست ها، فهرست مورد نظر خود را ایجاد کنید.

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

✔️ طراحی آیکن هدر با المنتور

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

❗️ نکته: اگر بخواهید در ساخت هدر ریسپانسیو با المنتور آیکن دیگری اضافه کنید می‌توانید از آیکن قبلی یک کپی بگیرید و بر روی آیکن جدید کلیک راست و پیست استایل را بزنید، تمام استایل های آیکن قبلی بر روی آن اعمال می‌شود.

✔️ طراحی دکمه هدر با المنتور

برای ویرایش دکمه در طراحی هدر با المنتور هم با کلیک بر روی آن محتوا و استایل آن را تغییر دهید.

✔️ طراحی فرم جستجو هدر با المنتور

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

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

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

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

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

چطور هدر را در المنتور ویرایش کنیم؟

1. به داشبورد وردپرس بروید.
2. از بخش قالب‌ها به سازنده پوسته بروید.
3. در قسمت سمت راست، روی هدری که می‌خواهید ویرایش کنید کلیک کنید.
4. برای ویرایش محتویات هدر، روی ویرایش کلیک کنید و هر بخشی که می‌خواهید را تغییر دهید.
5. برای تغییر صفحاتی که هدر ظاهر می شود، روی ویرایش شرایط کلیک کنید.

و در پایان

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