چگونگی کار با استایل های قالب در المنتور

چگونگی کار با استایل های قالب در المنتور

باکس دانلود افزونه و قالبهای موردنیاز آموزش زیر

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

معمولاً ، اگر می خواهید تنظیمات استایل کلی وب سایت خود را تغییر دهید ، باید صفحات استایل  (CSS) آنرا ویرایش کنید. یا با ابزارهای پیچیده سفارشی سازی قالب سر و کله بزنید. به علاوه ، اگر قالب خود را تغییر دهید ، احتمالاً باید بعد از تعویض همه کار ها را از ابتدا دوباره شروع کنید.

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

  • تصویر پس زمینه
  • سربرگ و آدرس های فایل استایل
  • فیلد های فرم
  • دکمه ها
  • تصاویر

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

نحوه دستیابی و تغییر تنظیمات استایل قالب در المنتور (در 6 مرحله)

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

مرحله 1: به پنل المنتور خود دسترسی پیدا کنید

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

استایل قالب
استایل قالب

قبل از انجام هرگونه تغییر ، المنتور به شما هشدار می دهد که باید تنظیمات پیش فرض رنگ و قلم آن را غیرفعال کنید. در غیر این صورت ، تغییر استایل قالب شما ایجاد نمی شود. برای غیرفعال کردن سریع آن تنظیمات ، روی پیوند تنظیمات المنتور کلیک کنید:

تصویر پس زمینه
تصویر پس زمینه

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

تنظیمات قلم در المنتور
تنظیمات قلم در المنتور

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

مرحله 2: استایل پس زمینه قالب خود را تغییر دهید

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

اگر برگه پس زمینه را باز کنید ، می توانید تصویر زمینه وب سایت خود را به صورت یک رنگ جامد یا گرادیان تنظیم کنید:

تنظیمات پس زمینه
تنظیمات پس زمینه

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

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

برای انجام این کار ، در هر صفحه از صفحه باز کلیک کنید و کلید commend یا کلید control به همراه E را فشار دهید.

گزینه صفحه مخاطبان
گزینه صفحه مخاطبان

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

تنظیمات استایل بدنه
تنظیمات استایل بدنه

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

مرحله 3: تایپوگرافی وب سایت خود را تعیین کنید

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

تنظیمات تایپوگرافی
تنظیمات تایپوگرافی

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

در مثال زیر ، ما رنگ پیوندهای خود را به رنگ قرمز تغییر داده ایم:

تنظیمات استایل عناوین
تنظیمات استایل عناوین

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

برای همه عناصر ذکر شده در این برگه ، می توانید قلم ها ، اندازه ها ، وزن ها و حتی فاصله آنها را بین هر حرف تنظیم کنید:

فواصل بین حروف در تایپوگرافی
فواصل بین حروف در تایپوگرافی

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

مرحله 4: استایل دکمه خود را تغییر دهید

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

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

استایل دکمه ها
استایل دکمه ها

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

مرحله 5: تنظیمات فیلد فرم خود را اصلاح کنید

اگر از فرمهایی در سایت خود استفاده می کنید ، می توانید با تنظیمات فرم و متن خود بازی کنید. برای شروع ، بیایید تایپوگرافی و رنگ فرم خود را تغییر دهیم:

استایل فیلد های فرم
استایل فیلد های فرم

با حرکت ، می توانیم استایل و رنگ مرز را نیز تغییر دهیم. به عنوان مثال ، ما آن را به رنگ قرمز تنظیم کرده ایم که با سایر عناصر صفحه ما مطابقت دارد:

تعیین رنگ مرز فرم
تعیین رنگ مرز فرم

یکی از جنبه های سرگرم کننده تنظیمات فرم این است که می توانید هنگامی که بازدید کنندگان روی یک قسمت از طریق تمرکز بر روی آن تمرکز می کنند ، سبک های مختلفی را تنظیم کنید. پس از کلیک بر روی زمینه ، می توانید یک اثر گذار نیز تنظیم کنید. در مثال زیر ، هنگامی که کاربران روی این قسمت کلیک می کنند ، استایل مرزی را تغییر می دهد:

انیمیشن دادن به فرم ها
انیمیشن دادن به فرم ها

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

مرحله 6 : استایل های تصویر خود را تغییر دهید

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

استایل تصاویر
استایل تصاویر

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

و همه همین است!

انتخاب های استایلی که در وب سایت خود انجام می دهید ، بر روشی که بازدید کنندگان نسبت به آن احساس می کنند تأثیر می گذارد. با سازگار بودن ، شما به جهان می گویید: “این سبک برند من است و به نظر خوب می رسد.” البته ، افزایش سرعت هر عنصر در وب سایت شما معمولاً به زمان نیاز دارد.

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

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

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