Visual CSS Style Editor افزونه ویرایشگر بصری CSS وردپرس

افزونه Visual CSS Style Editor با نام قبلی Yellow Pencil یک افزونه ویرایش CSS در وردپرس است که به شما امکان می دهد هر صفحه و قالبی را بدون کدنویسی ویرایش کنید. کافی است روی المان مورد نظر خود در صفحه کلیک کنید و پس از آن می توانید تمام ویژگی های آن المان شامل رنگ ها، فونت ها، اندازه ها، موقعیت قرارگیری و غیره را به صورت بصری و بدون نیاز به مهارت CSS ویرایش کنید.

برخی ویژگی های این افزونه عبارت است از:

• سفارشی سازی هر صفحه یا هر المان
• سفارشی سازی صفحه ورود به وردپرس
• سلکتورهای CSS خودکار
• کشیدن و رها کردن بصری
• ویرایش مارجین و پدینگ بصری
• ویرایشگر CSS زنده
• پیش نمایش زنده
• تاریخچه undo/redo
• برون بری فایل استایل شیت

در این مقاله افزونه Visual CSS Style Editor که از بهترین افزونه های ویرایش قالب وردپرس است را آموزش داده و نحوه استفاده از آن را بررسی می کنیم.

آموزش افزونه Visual CSS Style Editor و نحوه ویرایش بصری CSS وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه وارد صفحه خوش آمدگویی مشابه شکل زیر می شوید.

روی دکمه Lets start کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

در این صفحه می توانید صفحه هدف و نوع سفارشی سازی را تعیین کنید.

Customizing Type یا نوع سفارشی سازی مشخص می کند که چه صفحاتی تحت تأثیر تغییرات ایجاد شده قرار می گیرند. سه نوع سفارشی سازی در افزونه Visual CSS Style Editor وجود دارد که شامل global، template و single است.

• اگر نوع Single را انتخاب کنید، سفارشی سازی فقط به صفحه هدف اعمال می شود. به عنوان مثال اگر می خواهید رنگ پس زمینه را فقط در صفحه فعلی تغییر دهید، از سفارشی سازی Single استفاده کنید.
• اگر نوع Template را انتخاب کنید، استایل ها به تمام صفحات از همان نوع پست اعمال می شود. به عنوان مثال اگر می خواهید رنگ پس زمینه صفحات را فقط در صفحات محصول سفارشی کنید، از سفارشی سازی Template استفاده کنید.
• اگر نوع Global را انتخاب کنید استایل به تمام وب سایت اعمال می شود. به عنوان مثال اگر می خواهید رنگ پس زمینه صفحات را در کل وب سایت تغییر دهید، از سفارشی سازی Global استفاده کنید.

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

پس از مشخص کردن صفحه هدف و نوع سفارشی سازی، روی دکمه Continue کلیک کنید. صفحه ای مشابه شکل زیر مشاهده می کنید.

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

این پنل از قسمت های زیر تشکیل شده است:

• پیش نمایش زنده: اگرچه افزونه Visual CSS Style Editor به صورت زنده کار می کند، اما برای تست حالت های CSS (شبه کلاسها) و انیمیشن های CSS به پیش نمایش زنده نیاز خواهید داشت. دکمه پیش نمایش در کنار دکمه ذخیره در پنل سمت راست قرار دارد.
• بررسی تغییرات: این ابزار به شما اجازه می دهد تمام تغییراتی که به صفحه اعمال می کنید را مدیریت نمایید.
• سوئیچ صفحه در ویرایشگر: با کلیک بر روی عنوان صفحه فعلی در پنل سمت راست می توانید بین صفحات مختلف سایت خود در ویرایشگر سوئیچ کنید.
• مدیریت نوع سفارشی سازی

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

همانطور که مشاهده می کنید، تمام خصوصیات CSS در این پنل ظاهر می شود.

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

برای تغییر سریع نوع سفارشی سازی، در پنل سمت راست روی نوع سفارشی سازی کلیک کنید. در این پنل می توانید نوع سفارشی سازی را تغییر دهید، آن را ریست کنید یا استایل ها را در این نوع مدیریت کنید.

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

اگر یک المان یکسان را در چندین نوع سفارشی سازی ویرایش کنید، افزونه Visual CSS Style Editor تغییرات سفارشی سازی single را به عنوان اولویت اول اعمال می کند. اولویت ها به ترتیب زیر اعمال می شوند:

• سفارشی سازی Single
• سفارشی سازی Template
• سفارشی سازی Global

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

• فهرست المان را باز کنید
• المان را تغییر نام دهید
• سلکتور را ویرایش کنید

با کلیک بر روی آیکون سه خط در سمت چپ نوار ابزار می توانید فهرست المان را باز کنید. در این فهرست می توانید کارهای زیر را انجام دهید:

• وضعیت المان را به صورت hover و active تغییر دهید.
• سلکتور را ویرایش کنید.
• CSS بنویسید
• المان والد مشخص کنید
• استایل ها را بررسی کنید
• استایل ها را ریست کنید
• و خارج شوید

در سمت چپ صفحه یک نوار ابزار مشاهده می کنید. این نوار ابزار دارای ابزارهای مفید و ویژگی های اضافی است.

تمام ویژگی ها و ابزارهای نوار ابزار سمت چپ شامل موارد زیر است:

Element Inspector: این گزینه به طور پیش فرض فعال است. inspector به شما امکان می دهد با کلیک کردن روی المان های موجود در صفحه، آنها را انتخاب کنید. سه نوع Inspector وجود دارد:

• Cursor: مکان نمای نرمال است که از آن برای ناوبری صفحات استفاده می شود.
• Flexible inspector: این ابزار به شما امکان انتخاب المان ها را می دهد. این inspector ممکن است سایر المان های مشابه المان هدف را انتخاب کند.
• Single inspector: این ابزار به شما امکان می دهد فقط عنصر کلیک شده را انتخاب کنید.

ابزار جستجو: این ابزار به شما امکان می دهد با استفاده از کلاس ها، شناسه ها و برچسب های HTML المان، آن را انتخاب کنید. اگر از قبل سلکتور دارید، می توانید از این ابزار برای انتخاب المان هدف استفاده کنید یا می توانید سلکتورهای ویژه CSS را ایجاد کنید.

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

در بالای ویرایشگر می توانید تب های نوع سفارشی سازی را مشاهده کنید. مطمئن شوید که در نوع سفارشی سازی صحیح کدگذاری می کنید.

شما می توانید ویرایشگر CSS را از فهرست المان باز کنید. کافی است در نوار ابزار آبی رنگ المان انتخاب شده فهرست را باز کنید و گزینه Write CSS را انتخاب کنید.

ابزار رسپانسیو: افزونه Visual CSS Style Editor با یک ابزار طراحی پاسخگو پیشرفته ارائه می شود که به شما امکان می دهد وب سایت خود را برای هر دستگاهی شامل تلفن همراه، تبلت، دسکتاپ و موارد دیگر شخصی سازی کنید.

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

ابزار Wireframe: این ابزار به شما کمک می کند تا روی طرح بندی صفحه تمرکز کنید. به این ترتیب می توانید ساختار وب سایت خود را به راحتی مشاهده کنید.

اطلاعات طراحی: این ابزار اطلاعات پایه و پیشرفته طراحی مانند تایپوگرافی صفحه را در اختیار شما قرار می دهد. این ابزار سه تب دارد. تب Element کلیه اطلاعات مربوط به المان انتخاب شده را فراهم می کند. تب تایپوگرافی کلیه اطلاعات مربوط به تایپوگرافی صفحه را ارائه می دهد. اطلاعات ارائه شده در تب Advanced معمولاً برای توسعه دهندگان است.

مدیریت انیمیشن: ابزار مدیریت انیمیشن به شما امکان می دهد تمام انیمیشن های صفحه را مدیریت کرده و انیمیشن های جدید اضافه کنید. همچنین می توانید تنظیماتی مانند دوره زمانی انیمیشن، زمان تأخیر و غیره را به صورت بصری تنظیم کنید.

ابزار کشیدن و رها کردن افزونه Visual CSS Style Editor

افزونه Visual CSS Style Editor یک ابزار کشیدن و رها کردن دارد که با استفاده از آن می توانید هریک از المان های موجود در صفحه را کشیده و در مکان مورد نظر خود جابجا کنید.

کافی است المان را انتخاب کرده و هنگامی که مکان نما نمایش داده می شود المان را کشیده و در محل مورد نظر خود رها کنید. این ابزار از ویژگی موقعیت CSS (نسبی) برای کشیدن عناصر استفاده می کند.

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

ابزار بصری تغییر اندازه المان ها و margin و padding

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

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

ابزار Review Changes

ابزار بررسی تغییرات یا Review Changes به شما امکان می دهد تمام تغییرات اعمال شده در صفحه را مدیریت کنید.

با کلیک روی دکمه “Review changes” در کنار دکمه ذخیره در پنل سمت راست، ابزار Review Changes افزونه Visual CSS Style Editor باز می شود.

تمام استایل های اعمال شده توسط افزونه  Visual CSS Style Editorدر صفحه فعلی در این ابزار قابل مشاهده هستند. با این ابزار می توانید عملیات زیر را انجام دهید:

• با کلیک بر روی ویژگی ها می توانید ویژگی های CSS را غیرفعال یا فعال کنید.
• با کلیک بر روی Value ها می توانید مقادیر خاصیت ها را ویرایش کنید.
• با کلیک بر روی نام المان ها می توانید نام المان را تغییر دهید.
• می توانید فیلتر خاصی را از ورودی فیلتر اعمال کنید.
• با کلیک روی انتخابگرهای CSS می توانید عنصر موجود در صفحه را پیدا کنید.

برای بررسی المان ها به صورت زیر عمل کنید.

• عنصری که می خواهید تغییرات آن را بررسی کنید، انتخاب نمایید.
• بر روی عنصر انتخاب شده کلیک کرده و از فهرست کشویی گزینه review styles را انتخاب کنید.
• استایل ها را همانطور که می خواهید مدیریت کنید.

پس از اعملا تغییرات مورد نظر خود روی دکمه Save کلیک کنید تا تغییرات ذخیره شود.

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.

دانلود افزونه