تنظیمات استایل‌ها و UIKit در المنتور

در این جلسه قصد داریم استایل‌های کلی المنتور مانند رنگ، تایپوگرافی، دکمه، فرم و... را به المنتور اضافه کنیم.

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

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

تنظیمات المنتور، برای ساخت استایل‌ها در سایت

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

تنظیمات سایت در المنتور، برای ساخت استایل‌ها

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

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

UI Kit ها را از کجا بیاوریم؟

قاعدتاً شما باید برای اجرای هر وب‌سایتی یک طرح UI داشته باشید. مثلاً در نرم‌افزار فیگما که ما در دوره رایگان UI/UX آموزش دادیم. البته این را نیز در نظر بگیرید که تخصص UI/UX شغل دیگری است و شما وظیفه‌ای ندارید هر دو را انجام دهید (البته اگر بلد باشید بسیار مفید است). اگر پروژه شما طرح UI دارد که کار آسان‌تر است. اما اگر چنین طرحی وجود ندارد، دست کم می‌توانید با گرفتن لوگو، ترکیب رنگی و سند هویت بصری (برندبوک) آن پروژه، کار را ساده‌تر کنید. این موارد را از کارفرمای محترم پروژه می‌توانید دریافت کنید.

دیزاین سیستم و uikit

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

انجام تنظیمات عمومی المنتور، سرعت بالای طراحی

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

5/5 - (2 امتیاز)

4 پاسخ

  1. سلام ممنونم از اموزش خیلی خوبتون
    برای ویرایش برگه با المنتور این‌بار که میخاستم ویرایش کنم و برگه رو با المنتور باز کنم صفحه المنتور اصلا برام باز نمیشه.
    همه ی پلاگین ها رو هم غیرفعال کردم قالب هم عوض کردم ولی مشکل حل نشد. شما میدونید ممکنه مشکل از کجا باشه؟

    ممنونم

    1. درود بر شما. وقت بخیر
      اگر روی لوکال نصب نکردید اگر خواستید آدرس سایت رو بدید منم چک کنم. البته میشه به روش‌های دیگری هم بررسی کرد. مثلا یک برگه دیگر را بررسی کنید. ببینید آیا همه برگه‌ها این مشکل را دارد و یا فقط آن یک مورد هست؟
      اگر صرفا همان یک مورد هست و اگر محتوای خاصی نداشت میشه مثلا آن برگه را حذف کرد و مجدد بسازید. (محتواش رو هم میشه ابتدا برگه رو باز کرد که دیده بشود و بعد از روی آن مجدد بسازیم).

      یک نکته مهم. دقت کنید که مقدار Memory Limit در هاست هم حداقل روی 1024 مگابایت باشد. داخل سی پنل و دایرکت ادمین می‌توان آنرا تنظیم کرد. حتی به هاستینگ هم تیکت بزنید براتون انجام می‌دهند.
      مقدار فعلی Memory Limit رو هم می‌توان از بخش سلامت سایت مشاهده کرد.

      موفق باشید.

  2. سوال بعدیم اینه که اگر ما برای یه ویجت مثل عنوان، تگ رو H2 بذاریم مثلا، اگر در تب استایل قسمت تایپوگرافی بریم و همون وزن رو مثلا700 رو انتخاب کنیم، تغییر میکنه؟
    مشکل من اینه که وقتی تگ رو H2 میذارم و در تب استایل در قسمت تایپوگرافی همه چی پیش فرض هست، انگار که پیش فرض ها رو متوجه نمیشه و فراخوانی نمیکنه!

    1. درود بر شما. وقت شما بخیر
      استایل‌های کلی المنتور در واقع یک آش هست که برای کل سایت پخته می‌شود. مثلا اگر شما به H2 سایز بدهید، این سایز را برای کل H2 های شما اعمال می‌کند. اما به هرحال، ممکن است جایی پیش بیاید که بخواهیم سایز H2 را متناسب با آن صفحه به صورت کاستوم تغییر بدهیم. این اصلا اشکالی ندارد و این رخ خواهد داد. فقط باید H1 تا H6 را طوری سایز بدهیم که در اغلب جاها بتوانیم از آنها استفاده کنیم و کمتر لازم باشد که آن را کاستوم کنیم. اینکه فرمودید برخی جاها از استایل اصلی تبعیت نمی‌کند به این دلیل است که آنجا به آن H2 استایلی کاستوم و مختص خودش اعمال شده است.

      موفق باشید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

متخصصین آژانس نوآوری رسام
فرم درخواست پروژه و مشاوره
تماس با کارشناسان رسام: 09351436045