به جلسه بیست و یکم بخش آموزش المنتور پروژه محور از دوره رایگان وردپرس خوش آمدید. در نگاه اول به سایت چه چیزی نظر کاربر را به خود جلب میکند؟ هدر یا Header (که البته به آن سربرگ هم گفته میشود) بخش مهمی از سایت شما است. هدر سایت اولین چیزی است که هر کاربری با باز کردن سایت شما، با آن مواجه خواهد شد. مثلاً لوگو، منو، دکمه و اگر سایت فروشگاهی باشد حساب کاربری و سبد خرید در آن قرار میگیرد.
همچنین در نسخه موبایل نیز اغلب منوی همبرگری نیز برای مدیریت ساختار مورد استفاده قرار میگیرد. در این مقاله از آژانس نوآوری رسام میخواهیم آموزش طراحی هدر با المنتور را در اختیارتان قرار دهیم. پس از شما دعوت میکنیم تا پایان مقاله ما را همراهی کنید.
بخش Theme Builder یا سازنده قالب در المنتور
برای اینکه بتوانید قالبهای تکرار شونده مانند هدر، فوتر، صفحات آرشیو، صفحات داخلی برگه و نوشته، لوپ، نتایج جستجو و صفحه 404 را بسازید، میتوانید به دو شکل عمل کنید. یک روش رفتن به پیشخوان وردپرس و منوی قالبها و افزودن قالب جدید است و دیگری رفتن به پیشخوان وردپرس و منوی قالبها، در نهایت کلیک روی Theme Builder است (اگر فارسی باشد ممکن است نام آن سازنده قالب باشد). با کلیک روی آن با صفحه زیر مواجه میشوید و از اینجا هر مدل قالب تکرارشوندهای مشابه هدر را میتوانید بسازید.
طراحی هدر با المنتور در بخش قالب
استفاده از قالبهای المنتوری فرآیند طراحی سایت را سادهتر میکند. برای مثال با استفاده از قالبها به سادگی میتوانید طراحی هدر در المنتور را انجام دهید.
برای اینکه هدر سایت در تمامی صفحات تکرار شود، باید به پیشخوان وردپرس و منوی قالبها در المنتور رفته و از بالای صفحه روی “افزودن قالب جدید” کلیک کنید. حالا با تنوعی از قالبهای المنتور مواجه خواهید شد. در این بخش هدر (سربرگ) یا Header را انتخاب کنید. یک نام نیز برای آن در نظر بگیرید.
بعد از انتخاب نام، روی ایجاد قالب کلیک کنید. اتفاق خاصی رخ نداده و همان برگهساز المنتور را خواهید دید. با این تفاوت که هرچه اینجا طراحی کنید، به عنوان هدر یا سربرگ سایت شما شناخته شده و در تمام صفحات سایت شما دیده میشود. البته المنتور موقع ذخیره کردن، از شما سوال خواهد پرسید که در چه صفحاتی قصد نمایش این هدر را دارید (شاید چند هدر داشته باشید و بخواهید هدر برخی صفحات متفاوت باشد). موقع ذخیره با صفحهای مواجه خواهید شد که اصطلاحاً به آن Display Condition گفته میشود. به تصویر زیر دقت کنید.
به طور کلی با این صفحه زمانهایی مواجه میشوید که در حال تهیه یک قالب المنتوری هستید. کنار دکمه بروزرسانی المنتور یک فلش وجود دارد. روی آن بزنید به Display Conditions دسترسی خواهید داشت. البته موقع ذخیره نیز در دفعه اول، خود به خود ظاهر خواهد شد. منظور از “شامل” همان include است. یعنی در چه صفحات، دستهبندیها و ساختارهایی این هدر نشان داده شود. همچنین “بهغیر از” همان exclude اشت. یعنی در چه صفحات، دستهبندیها و ساختارهایی این هدر را نشان ندهد. این شرطها میتواند ترکیبی باشد. مثلاً در همه برگهها به جز فلان برگه. برای طراحی فوتر با المنتور نیز باید فرآیند بالا انجام شود البته با کمی تغییرات که در جلسه بعدی به طور کامل توضیح خواهیم داد.
طراحی هدر در المنتور، بِ بسمالله سایت شما!
به این موضوع دقت کنید که هدر بالای سایت شما است و در همه صفحات وجود دارد. جلوی چشم مخاطبان و کارفرمایان است. لطفاً به بهترین شکل آن را طراحی کنید. لوگو، منو و موضوعات مهمی داخل آن هستند که تاثیر قابل توجهی در سئو سایت دارند. پس آن را سبک و بهینه طراحی کنید و صرفاً اطلاعاتی که نیاز هست را در آن درج کنید. حتماً طراحی هدر سایت با المنتور را انجام دهید و تجربیات و سوالات خود را در این بخش از دوره جامع آموزش طراحی سایت بدون کدنویسی با المنتور، با متخصصین آژانس نوآوری رسام در میان بگذارید.
20 پاسخ
سلام استاد عرض ادب
ممنون بابت اموزش های خوبتون
من سوالم اینه که زمانی که میخواهیم هدر بسازیم باید قبلش یه قالب بسازیم مثلا Hello که بشه باهاش هدر ساخت یا نه از بدو ورود وردپرس ما میتونیم هدر بسازیم
درود بر شما دوست گرامی. وقت شما بخیر
چون هدر در تمامی صفحات باید تکرار بشود، بنابراین باید در بخش قالبهای المنتور، یک قالب هدر بسازیم.
موفق باشید.
خیلی ممنون استاد.
اگر در هنگام افزودن فایل قالب هدر نبود و فقط صفحه و سکشن موجود بود مشکل از کجاست?
درود بر شما دوست گرامی، وقت شما بخیر
داخل پیشخوان > قالبهای المنتور را میفرمائید؟ اون گوشه نوشته “همه”. روی اون یکبار کلیک کنید مطمئن بشید همه را داره نشان میده.
موفق باشید.
امکانش هست که فایل فیگما رو در اختیارمون قرار بدهی تا تمرین کنیم
درود بر شما. وقت شما بخیر.
فایل پروژه را در لندینگ اصلی دوره لینک کردهایم. از آنجا کلیک کنید وارد کامیونیتی فیگما میشود. بعد اضافه اش کنید به فیگما.
موفق باشید.
با سلام خدمت شما استاد گرامی
ببخشید استاد برای ریسپانسیو کردن همان اندازههای المنتور برای سخت افزارهای مختلف که بصورت پیش فرض ارائه میده اوکی هست یا باید اندازه های دیگری لحاظ کنیم. واقعا سر در گم شدم.
یعنی:
لب تاپ 1366 پیکسل
تبلت افقی 1200 پیکسل
تبلت عمودی 1024 پیکسل
موبایل افقی 880 پیکسل
موبایل عمودی 768 پیکسل
ممنون میشم راهنمایی کنین
درود بر شما. وقت شما بخیر.
ما هم به این اندازهها دست نزدیم زیاد در این دوره. خیلی وقتها همان موارد درج شده جواب کار را میدهند. کلا میشود سایر اندازهها را اضافه کرد که طراحی دقیقتر بشود.
موفق باشید.
سلام و درود مهندس حمداللهی ممنون برای ویدیو عالیتون این آموزش یکی از کاملترین و کاربردیترین ویدیوهایی بود که درباره طراحی هدر با المنتور دیدم. هم توضیحات دقیق بودن، هم روند اجرا توی رسام خیلی روان و حرفهای پیش رفت. واقعاً برای هر کسی که میخواد یه هدر زیبا و واکنشگرا طراحی کنه، فوقالعادهست! 👏🔥
درود بر شما جناب شفیعی عزیز. وقت شما بخیر
سپاس از لطف شما. عالی دارید جلو میروید. ادامه بدید. تبریک به شما 😍
موفق باشید.
سلام استاد
دو تا سوال دارم
1-شما کی منو ایجاد کردید؟ وتی در حال آموزش نوشته و برگه بودید؟
2- من وقتی هدر ایجاد می کنم تو بعضی صفحات دو تا ایجاد میشه (دوتا هدر) . راه حلش چیه؟
درود بر شما آقا امیر. وقت بحیر
چون در جلسات قبلتر من بخش فهرستهای وردپرس رو آموزش داده بودم، آن موقع فهرست ساخته بودیم. به طور کلی در المنتور (اگر افزونه خاص دیگری نصب نکنیم) دو حالت میشه هدر بسازیم. یک حالت همان استفاده از ویجت فهرست وردپرس هست که اگر المنتور خوب ترجمه نشده باشه نوشته WordPress Menu. در این حالت شما حتما باید در پیشخوان وردپرس > نمایش > فهرستها، تشریف ببرید و یک فهرست (یا همان منو) بسازید که وقتی ویجت مذکور را در هدر انداختید، مشاهده بشود. حالت دوم که جدیدتر هست دیگر از فهرستها پیروی نمیکند و شما میتوانید دستی لینک بدهید. خوبی این روش این هست که شما میتوانید با آن، مگامنو هم بسازید (این روش را نیز در دوره آموزش و البته در جلسه مربوط به مگامنو، آموزش دادهایم). اینکه فرمودید هدر در برخی صفحات دو تا میشود: بروید قالبهای المنتور را مشاهده بفرمائید. شاید چند قالب برای هدر ساخته شده و فراخوانی شده. شاید در آن صفحه که هستید، دو بار هدر لود شده. شاید در آن صفحه هدر، به عنوان بخشی از خود محتوای صفحه طراحی شده و یک بار دیگر هم قالب مجزا برای هدر در آن صفحه لود شده. یکی از این موارد ممکن است رخ داده باشد.
موفق باشید.
مشکل دیگه اینه که وردپرس فرمت svg رو قبول نمیکنه و ارور میده بخاطر همین برای لوگو به مشکل میخورم
درود بر شما. وقت بخیر
میتوانید افزونه safe svg رو نصب و فعال کنید.
موفق باشید.
سلام و عرض ادب
من میخواستم هدر سایت رو مثل سایت رسام درست کنم از بالا و سمت راست مارجین دادم اما نمیتونم از سما چپ مارجین بدم یعنی وقتی از چپ مارجین رو زیاد میکنم هیچ نغییری ایجاد نمیشه
درود بر شما. وقت بخیر
یک کانتینر داخلی هم باید بندازیم که بتوانیم به آن بکگراند بدهیم (که داخل کانتینر باشد و کل عرض صفحه را نگیرد). بعد به آن مارجین میدهیم.
موفق باشید.
سلام. اگر بخواهیم یه استایل متفاوت در دسکتاپ و موبایل داشته باشیم باید چی کار کنیم؟ چون انگار وقتی یه قسمت تعغیر میدی در همه موارد دسکتاپ، تبلت و موبایل باهم تغییر می کنن.
درود بر شما. وقت بخیر.
حتما دوره را ادامه بدهید و جلسه مربوط به پاپآپ و Offcanvas را نیز مشاهده بفرمائید. آنجا نیز در خصوص هدر مواردی را بیان کردیم که کمک کننده خواهند بود.
موفق باشید.
جناب حمداللهی به یک مشکلی خوردم ممکن راهنمایی کنید.
نرم افزار xampp ماژول mysql با خطا مواجه شد برای فعال سازی
طبق سرچی که داشتم توی اینترنت نوشته بود برای رفع این خطا باید حذف و مجدد نصب کنی
منم انجام دادم اما از پوشه وبسایتی که روی لوکال هاست ساختم کپی گرفتم
الان مشکل ارور رفع شد اما نمیتونم وارد وبسایت بشم برای ادامه کارها
Error: MySQL shutdown unexpectedly.
5:28:26 PM [mysql] This may be due to a blocked port, missing dependencies,
5:28:26 PM [mysql] improper privileges, a crash, or a shutdown by another method.
5:28:26 PM [mysql] Press the Logs button to view error logs and check
5:28:26 PM [mysql] the Windows Event Viewer for more clues
5:28:26 PM [mysql] If you need more help, copy and post this
5:28:26 PM [mysql] entire log window on the forums
همچنان با قطع و وصل کردن ارتباط MYSQL این ارور میده و متاسفانه رفع نشده
درود بر شما. وقت شما بخیر
داخل خطا نوشته شده که پورت mysql بلاک شده. احتمالا دارید از نرمافزار لوکال استفاده میکنید. مانند زمپ یا ومپ. بنابراین برای حل مشکل، پورت خود را تغییر بدهید. احتمالا نرم افزار دیگری روی سیستم دارید که پورت را در اختیار گرفته.
این نکته را بگویم که به طور کل بهتر است حتی برای تمرین هاست و دامنه تهیه کنید و روی یک هاست واقعی تمرین هارو جلو ببرید. البته مشکل بالا با تغییر پورت برطرف می شود اما کلا یادگیری در هاست واقعی کمی بهتر است. سایت همیشه روی ابر اینترنت قرار دارد و عملا در گذر زمان میتوانید آنرا به بیزنس خود تبدیل کنید.
موفق باشید.