به جلسه بیست و سوم بخش طراحی سایت با المنتور از آموزش طراحی سایت با وردپرس خوش آمدید. آماده‌اید یک صفحه زیبا را با هم طراحی کنیم؟ صفحه اصلی سایت مهم‌ترین صفحه شما است. البته به این معنی نیست که سایر صفحات شما مهم نیستند. شما باید روی طراحی همه صفحات خود وقت بگذارید و تناسب طراحی، بهینه سازی و سرعت را به بهترین شکل ممکن در نظر بگیرید.
برای صفحه اصلی خود نیز انرژی ویژه‌ای بگذارید چون در همان قدم اول، دیده خواهد شد. در این مقاله از آژانس نوآوری رسام می‌خواهیم طراحی صفحه اصلی با المنتور را از طریق یک طرح UI پیاده سازی کنیم. پس از شما دعوت می‌کنیم تا پایان این جلسه ما را همراهی کنید.
مقدمات پیاده‌سازی طرح UI صفحه اصلی در فیگما
پیاده‌سازی طرح UI می‌تواند به سهولت در طراحی سایت با المنتور کمک کند. البته این موضوع نیازمند تسلط به وردپرس و المنتور است. مزیت طرح UI در این است که شما تکلیف رنگ‌ها، آیکن‌ها، تایپوگرافی، تصاویر و خیلی از کامپوننت‌های پروژه مشخص است. بدین صورت، پیاده‌سازی طرح در المنتور بسیار آسان‌تر می‌شود. البته اگر طرح UI هم نداشتید نگران نباشید. برای تمرین می‌توانید به طرح کامل این پروژه در کامیونیتی فیگما دسترسی داشته باشید. دقت کنید که قبل از استفاده از فایل زیر باید در فیگما اکانت بسازید.
دانلود طرح پروژه آژانس خلاقیت پویا در فیگما
حتی اگر طرح UI هم نداشته باشید، می‌توانید با المنتور وب‌سایت طراحی کنید. اما وجود طرح UI کار را حرفه‌ای‌تر می‌کند. دقت کنید که تخصص طراحی UI/UX موضوعی مجزا از پیاده‌سازی و طراحی سایت با وردپرس است. این که بلد باشید بسیار کمک‌کننده و ارزشمند است اما به هرحال وردپرس و UI/UX دو شغل مجزا هستند. در صورتی که تمایل داشتید یاد بگیرید دوره رایگان طراحی رابط و تجربه کاربری از آژانس نوآوری رسام را ببینید.
ساخت صفحه اصلی با المنتور، شروع طراحی نمونه‌کار
یک وب‌سایت صفحات مختلفی دارد اما اگر بتوانید دست‌کم صفحات اصلی چندین طرح را بسازید، برای خود موفق شدید نمونه‌کار ایجاد کنید. این کار را شروع کنید و در گذر زمان نمونه‌کارهای خود را قوی‌تر کرده و در سایت خود بگذارید. حتماً تجربیات و سوالات خود را در مورد ساخت صفحه اصلی با المنتور را با متخصصین آژانس نوآوری رسام در میان بگذارید.
24 پاسخ
درود بر شما
من به دوتا چالش برخوردم 1. اینکه وقتی هدر رو تغییر میدم با اینکه روی حالت عمودی موبایل هست اما تغییرات روی دسکتاپ هم اجرا میشه و کلن بهم میریزه 2. بریک پوینت عمودی تبلت رو تنظیم کردم همونطور که توی فیلم اول گفتین اما توی تبلت که چک میکنم حالت عمودی موبایل رو نشون میده
درود بر شما. وقت شما بخیر
مقادیری که در یک breakpoint دادیم ممکن است لازم باشد در breakpoint دیگر هم تغییر بدهیم. اینکه از کلمه “ممکن” استفاده میکنم به این دلیل است که همیشه این اتفاق رخ نمی‌دهد. مثلا گاهی 10 پیکسل پدینگ دادیم که در هر حالتی از نمایش ممکن است خوب باشد و نیاز به تغییر نداشته باشد. خود تبلت‌ها اسکرین رزولوشن و سایزهای مختلفی دارند و برخی بزرگتر و برخی کوچکتر هستند.
موفق باشید.
اخه من مقادیری رو توی حالت موبایل میزارم ولی اون مقادیر روی حالت دسکتاپ هم اجرا میشه و طراح بهم میخوره، انگار این دو هدر رو نمیشه تکفیک کرد
درود بر شما. وقت شما بخیر
همان مقادیر را برای حالت دستکتاپ طوری باید درج کرد که بهم نخورد. مثل فواصل، پدینگ، مارجین و…
موفق باشید.
سلام و درود بر شما مهندس حمداللهی واقعا ویدیوها هم از لحاظ کیفیت و هم محتوا عالی و هر چه رو به جلو پیش میره فوق العاده میشه مباحث و تشویق کننده است برای دیدن پارت های بعدی سپاس از شما برای همچین دوره عالی ارادتمندم
درود بر شما جناب شفیعی. وقت شما بخیر
سپاس از لطف و همراهی و مهربانی شما. می‌بینم که با سرعت دارید جلو می‌روید 😎 تبریک به شما. همین‌طوری ادامه بدید یک هفته دیگر تقریبا تمام میشه. خیلی خوبه.
موفق باشید.
سلام وقتتون بخیر خسته نباشید من چندتا نوشته رندوم ایجاد کردم و هرکاری کردم طبق ویدیو شما نشون نمیده حتی بخش Query هم نشون نمیده میتونید راهنمایی کنید؟ ممنون
درود بر شما دوست گرامی. وقت بخیر
برخی از نسخه‌های المنتور ممکن است ترجمه نشده باشند و یا با کلمات متفاوتی ترجمه شده باشند. بنابراین ممکن است برخی عبارات، تفاوت‌هایی داشته باشد که البته معمولا به آسانی درک می‌شوند بیشتر که با المنتور کار کنیم. در بخش کوئری (اگر درست فهمیده باشم و قصد دارید تمپلیت مربوط به آرشیو نوشته رو ایجاد کرده باشید)، بایستی گزینه Current Query یا همان کوئری فعلی (و در برخی نسخه‌ها، پرس و جوی فعلی) را انتخاب کنید. برای صفحات داخلی نوشته هم که همان Single Post هست که موقع ساخت تمپلیت نیازی به انتخاب کوئری نداریم. اگر هم در حال طراحی صفحه اصلی هستید، در بخش کوئری در واقع باید آن دسته بندی مدنظر خودتان را که می‌خواهید نشان بدهد را انتخاب کنید.
موفق باشید.
سلام و وقت بخیر
چحوری میتونم برای کاروسل محصول فیلتر بزارم. میخوام بالای کاروسل دوتا دکمه باشه که روی یکی نوشته باشه زنانه و اون یکی مردانه.
یه ویجت پیدا کردم ولی توی کوئری ها چون محصولات با هم دسته مشترک دارن با شرط گزاشتن هیچ کودوم نشون داده نمیشه
درود بر شما، وقت بخیر
یک ویجت جدید در المنتور به اسم taxonomy filter اومده که در جلسه 34 آموزشش دادیم. البته برای کروسل نیست و عمدتا لوپ گرید گزینه بهتری برای آن هست. در واقع کروسل و عناصر اسلایدشو را بهتر است زیاد فیلتر نسازیم ازش.
موفق باشید.
سلام و خداقوت
وقتی میخوام عکس هایم رو توی صفحه استفاده کنم نوی فیگما یا گالری سیستم کیفیتشون خوبه اما وقتی توی وردپرس آپلود میکنم کیفیتشون پائین میاد.
لطفا راهنمایی کنید
درود بر شما. وقت بخیر
موقع درج تصاویر در المنتور (در رسانه وردپرس) فایل چندین کیفیت مختلف دارد. آنجا می‌توان کیفیت را روی اندازه کامل گذاشت. ویجت‌های مربوط به تصاویر در المنتور هم چنین تنظیمی را دارند. همچنین اگر افزونه‌ای مختص بهینه‌ساز تصاویر در سایت نصب باشد (مانند اسماش و…) ممکن است تاثیراتی روی تصاویر سایت بگذارند که باید تنظیمات آنها را نیز بررسی کرد.
موفق باشید.
استاد خسته نباشید چرا طرح های آژانس با ویدئو مطابقت نداره؟ اگه میشه طرح های قبلی بزارید الان همش جدیده
درود بر شما. وقت بخیر
همان طرح رو اجرا کردیم مهندس. در واقع طرح UI که در دوره UI/UX اجرا کرده بودیم را اینجا پیاده سازی کردیم. نهایتا یک سری تغییرات بسیار جزئی دارد. متوجه نشدم که منظور از طرح قبلی کدام طرح است. البته بعدا بنده بازم طرح میزنم و آموزش به هر دو دوره تهیه شده خودم اضافه خواهم کرد.
موفق باشید.
سلام من وقتی میخام از عکس خروجی بگیرم به مشکل بر میخورم
درود بر شما. وقت بخیر
بخشی را که می‌خواهید ازش خروجی بگیرید ممکن است چندین لایه داشته باشد. مثلا اگر یک لایه روی یک فریم افتاده باشد در خروجی دیده نمی‌شود (باید آنرا داخل فریم بیاندازیم).
موفق باشید.
سلام آقای حمداللهی خداقوت. یه سایت فروشگاهی دارم میزنم ایده ندارم نمونه طرح های ui جایی هست من بتونم ببینم و پیاده کنم در سایتم. سایت dribbble رفتم ولی چیزی پیدا نکردم
درود بر شما. وقت بخیر
توی سایت‌هایی مثل ui8 و behance و pinterest و instagram و حتی تصاویر گوگل هم می‌توان نمونه‌های زیادی را مشاهده کرد.
موفق باشید.
سلام
برای export فایل لاگین از فیگما میشه از webp استفاده کرد؟
درود بر شما. وقت شما بخیر.
خروجی گرفتن webp منظور هست؟ شما با پلاگین webp exporter می‌توانید از هر چیزی داخل فیگما خروجی webp بگیرید.
موفق باشید.
ممنون استاد البته بقیه svg هارو نصب کرد فقط عکس تیم طراحی رو این خطارو داد
چیزی که گفتین رو انجام میدم نتیجشو میگم‌خدمتتون
ممنون از ویدیو های عالیتون
بزرگوارید. در خدمت هستم.
موفق باشید.
سلام استاد وقت بخیر عکس تیم طراحی رو وقتی میخوام اپلود کنم میزنه این فایل به دلایل امنیتی مجاز نیست
درود بر شما. وقت شما بخیر
احتمالا فرمت عکس svg هست. البته که فرمت بسیار خوبی هم هست و اتفاقا باید تلاش کنیم اگر فایل وکتوری هست آنرا به png و jpg تبدیل نکنیم. اگر هم وکتوری نیست که از فرمت webp استفاده کنیم. اما موقع آپلود فایل svg یک پیغام از طرف المنتور به شما می‌دهد و بعد از زدن گزینه فعال‌سازی، اجازه آپلود فایل را می‌دهد. اگر به هردلیل به آپلود فایل svg گیر می‌دهد، افزونه safe svg را نصب بفرمایید و بعدش فایل svg خودتون رو آپلود کنید. نصب این افزونه تنظیم خاصی ندارد و صرفا باید نصب و فعال شود.
موفق باشید.