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

مثل همیشه با برگهساز المنتور و ویجتهای جذابش مواجه خواهید شد. البته این تفاوت وجود دارد که این بار فوتر شما (مشابه هدر) در همه صفحات تکرار میشود و شما بازهم مشابه هدر، باید فوتر را نیز در بخش Display Conditions تعریف کنیم. دلیل این کار، مشخص کردن نمایش فوتر در صفحات مدنظر ماست. به هر دلیلی ممکن است بخواهید چند فوتر درست کنید. مثلاً در برخی صفحات فوتر متفاوت باشد و یا لندینگ پیجی برای کمپین تبلیغاتی شب یلدا درست کرده باشید و بخواهید فوتر اصلی سایت در آن صفحه نباشد و یا فوتر دیگری را نشان بدهد.

فراموش نکنید که منوی Display Condition کنار دکمه بروزرسانی (فلش کنار آن) وجود دارد. البته دفعه اول که صفحه را دخیره کنید خود به خود با تصویر بالا مواجه خواهید شد. منظور از “شامل” همان include است. یعنی در چه صفحات، دستهبندیها و ساختارهایی این فوتر نشان داده شود. همچنین “بهغیر از” همان exclude اشت. یعنی در چه صفحات، دستهبندیها و ساختارهایی این فوتر را نشان ندهد. این شرطها میتواند ترکیبی باشد. مثلاً در همه برگهها به جز فلان برگه.
فوتر سایت، پائین مجلس اما تاثیرگذار!
دقت کنید که فوتر هم مانند هدر در تمامی صفحات شما وجود دارد. کاربران این را میدانند که ممکن است فوتر دارای اطلاعات تماس و پیوندهای مهم سایت باشد. بنابراین به این نکته توجه کنید که علیرغم پائین بودن فوتر، کاربران آن را مشاهده میکنند. پس یک فوتر جذاب برای خود درست کنید و تجربیات و سوالات خود را در این جلسه از بهترین آموزش وردپرس رایگان، با متخصصین آژانس نوآوری رسام در میان بگذارید.
11 پاسخ
آموزش ها عالی و بی نظیره
یه نکته جالب توجه که توی این ویدیو نظرم رو جلب کرد این بود که توی کد css برای چرخوندن ایکون یه نقطه پشت اسم ایکون که فراخوانی میشه باید قرار بگیره تا این عمل انجام بشه. آیا دلیل خاصی داره این نقطه؟
درود بر شما. وقت شما بخیر
سپاس از لطف و همراهی شما. در واقع داخل css اگر بخواهیم یک کلاس را فراخوانی کنیم و بهش استایل بدهیم از نقطه قبل از اسم آن کلاس استفاده میکنیم و اگر بخواهیم یک سلکتور آیدی را فراخوانی کنیم با علامت # قبل از اسم آن آیدی، آن را فراخوانی میکنیم و به آن استایل میدهیم. سلکتورها در css البته بیشتر هستند و هر کدام کاربرد و سلسله مراتب و اولویتهای متفاوتی دارند که یادگیری آنها چندان دشوار نیست. اگر خواستید بعدا یک دوره رایگان html/css هم ببینید.
موفق باشید.
ممنون از پاسخ شما
چه جالب. خیلی کنجکاو و مشتاقم ان شالله بعد از کسب مهارت مناسب در وردپرس حتما یک دوره html/css خواهم دید.
باتشکر
لازمه زیر هر پست جدا جدا تشکر کنم؟! استاد یدونه باشه
درود بر شما دوست گرامی. وقت شما بخیر
بنده از شما سپاسگزارم که خوب و پرتلاش دارید ادامه میدهید. امیدوارم نتایج جذاب و خوشایندی بگیرید.
موفق باشید.
سلام و عرض ادب، استاد ضمن تشکر از تدریس بسیار عالی و توضیح جزییات.
من متوجه نشدم وقتی در تنظیمات تصمیم به تغییراتی برای حالت موبایلی داریم صفحه ی جدیدی برای تنظیمات باز میشود؟ یا روی همان صفحه وب میبایست تغییرات رو بدهیم؟ اگر روی همان صفحه هستیم تنظیمات اولیه که مناسب وب بوده به هم نمیریزه؟ کامل متوجه نشدم.
درود بر شما. وقت بخیر
بله همان صفحه است خانم دکتر. در واقع اگر ما در نسخه دسکتاپ پدینگ 40 پیکسلی دادیم، ممکن است بخواهیم در موبایل آن مقدار را به 20 پیکسل تقلیل بدهیم. این کار باعث نمیشود که مقدار 40 در دستکتاپ بهم بخورد خوشبختانه.
موفق باشید.
سلام و وقت بخیر
نوار آبی بالای فوتر طرح ui آژانس پویا رو چجوری باید درست کنیم؟
ممنون از الطافتون
درود بر شما. وقت بخیر
میتوانید حاشیه یا همان border بدهید. (فقط از سمت بالا).
موفق باشید.
خسته نباشید استاد
بسیار عالی بود، سپاس
درود بر شما. وقت بخیر.
سپاس از لطف و همراهی شما.
موفق باشید.