بررسی افزونه مداد زرد YellowPencil: سفارشی سازی آسان CSS با ویرایش ویژوال

  • صفحه اصلی
  • >
  • بررسی افزونه مداد زرد YellowPencil: سفارشی سازی آسان CSS با ویرایش ویژوال
21 مرداد 1399

بررسی افزونه مداد زرد YellowPencil: سفارشی سازی آسان CSS با ویرایش ویژوال

تاریخ آخرین به روزرسانی: 1399/05/21

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

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

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

در این مطلب در مورد چگونگی دستیابی افزونه مداد زرد به CSS سایت برای همه کاربران وردپرس ارائه شده است.

اول از همه باید بگوییم، مداد زرد به شما این امکان را می دهد تا CSS را به دو روش مختلف ویرایش کنید:

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

ویرایشگر کد - اگر با CSS آشنا هستید، می توانید مستقیماً کد مورد نظر خود را اضافه کنید. این راه حل هنوز هم مناسب است زیرا ابزار بازرس یا inspector انتخاب CSS مناسب را برای شما ساده می کند.

مداد زرد همچنین شامل طراحی آسان واکنش گرا یا responsive است. شما می توانید سبک های CSS را برای یک Media Queries خاص در سایت را به صورت کاملا واکنش گرا اعمال کنید و همچنین می توانید نحوه عملکرد نمایش داده های رسانه خود را در صورت دلخواه ویرایش کنید. (Media Queries یا جستجوی رسانه ای یک ماژول از نسخه سوم زبان CSS است که این امکان را فراهم می ‌آورد تا بتوان در طراحی وب، طرح‌ ها و وب سایت‌ ها را بر اساس مشخصات رسانه ‌ای که در آن نمایش می‌ یابد، سازگار کرد.) 

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

تغییر اندازه بصری - شما می توانید عناصر را تغییر اندازه دهید دقیقاً مانند تغییر اندازه یک تصویر در Microsoft Word.
کشیدن و رها کردن - می توانید عناصر جداگانه را در صفحه خود بکشید و رها کنید.
حالت Wireframe – این گزینه باعث می شود ترتیب چیدمان ها بدون اینکه عناصر زیبایی شناختی از بین برود، آسان تر شود. (وایر فریمینگ طرح اولیه از ساختار و چیدمان یک صفحه از وبسایت شما است و به طور کلی اولین گام در فرآیند طراحی سایت محسوب می شود.)
ابزار انیمیشن - انیمیشن ها را روی عنصر یا عناصر انتخاب شده به راحتی و مطابق با سلیقه خود اعمال کنید.
Undo/redo – استفاده ابزارهای بازگردانی و خنثی سازی در صورت بروز هر گونه اشتباه.

نحوه انجام ویرایش طراحی سایت با افزونه مداد زرد

اکنون که می دانید مداد زرد چه کاری انجام می دهد، بیایید نحوه استفاده از آن را کمی بیشتر توضیح دهیم.

من یک صفحه آزمایشی ایجاد کرده ام که با Elementor و قالب Astra ساخته شده است، که باید مثال خوبی از نحوه عملکرد افزونه مداد زرد با قالب و خروجی افزونه باشد. 

نگاهی گذرا به رابط افزونه مداد زرد

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

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


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

نحوه استفاده از ابزار بازرس مداد زرد

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

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

بازرس انعطاف پذیر Flexible Inspector - این همه عناصر یک کلاس را انتخاب می کند. به عنوان مثال، اگر روی لینکی در منوی پیمایش کلیک کنید، می توانید همه لینک های منوی پیمایش را مطابق با سبک مورد نظر خود ویرایش کنید.

بازرس تنها Single Inspector- این گزینه عنصر مشخصی را که روی آن کلیک می کنید، انتخاب می کند. به عنوان مثال، به شما این امکان را می دهد که به جای همه لینک های منوی پیمایش، فقط یک لینک خاص را مطابق با سبک مورد نظر خود ویرایش کنید.

نحوه ایجاد سبک های مختلف بر روی عناصر با استفاده از افزونه مداد زرد

در این قسمت می خواهیم چند عنصر را با سبک های مختلف ویرایش کنیم. این کار همچنین به ما فرصتی می دهد تا تفاوت بین Flexible Inspector و Single Inspector را با جزئیات بیشتری بررسی کنیم.

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

اگر می خواهید، به عنوان مثال یک مرز اضافه کنید، تنها از گزینه های Border استفاده می کنید و دقیقاً مطابق با آن، هر لینک منو تنها یک مرز جدید دارد:

اگر فقط می خواهید یک مرز به لینک My Account اضافه کنید، می توانید به جای آن از Single Inspector استفاده کنید. که بیشتر شبیه این است:

در مجموع، افزونه مداد زرد به شما 50+ گزینه CSS می دهد که می توانید از آنها در طرح های خود استفاده کنید. 

Text
Background
Margin
Padding
Border
Border Radius
Position
Size
Animation
Box Shadow

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

به طور مشابه، انتخاب اندازه به شما امکان می دهد یک عنصر را با استفاده از کشیدن و رها کردن تغییر اندازه دهید:

صادقانه بگویم، کار با این افزونه بسیار جالب است!

اگر اندازه و موقعیت را تنظیم می کنید، حتی می توانید یک حالت ویژه Wireframe را فعال کنید تا موقعیت و تراز کردن عناصر مختلف ساده تر شود:

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

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

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

ایجاد ویرایش مستقیم بر روی کدها

اگر قبلاً با CSS آشنا هستید، هنوز هم می توانید ویرایش مستقیم کدها را در صورت لزوم انجام دهید. تنها کاری که باید بکنید فعال کردن Code Editor از نوار کناری سمت چپ و یک ویرایشگر کد زنده است که به سه برگه تقسیم می شود:

می توانید CSS موجود را تغییر دهید و یا CSS جدید خود را اینجا اضافه کنید.

بررسی تنظیمات افزونه مداد زرد و کد صادرکننده

فراتر از گزینه های رابط که در بالا به شما نشان دادیم، می توانید پیکربندی کنید که آیا کد CSS خود را به عنوان یک فایل CSS خارجی استاتیک یا CSS درون خطی پویا درج کنید (YellowPencil فقط کد را به صفحه (های) مربوط اضافه می کند):

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

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

نتیجه نهایی در رابطه با افزونه مداد زرد

افزونه مداد زرد به ویژه برای مبتدیان که قادر به کدنویسی نیستند، گزینه ای عالی محسوب می شود.

اگر برنامه نویس حرفه ای هستید، با استفاده از این افزونه، برخی از ابزارهای پیشرفته CSS مانند جزئیات و متغییرهایی را که برخی از ویرایشگرهای CSS دیگر دارند را از دست نخواهید داد.

اما مداد زرد همچنین پیچ و تاب های منحصر به فرد خود را دارد، مانند تغییر موقعیت و تغییر اندازه، که این امر را برای کاربران جذاب می کند.

اگر تا کنون به این مسئله فکر کرده اید که بتوانید کنترل بیشتری بر نحوه طراحی قالب و افزونه های WordPress خود داشته باشید، بهتر است حتما افزونه مداد زرد را امتحان کنید.

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

          

  • (1 امتیاز، میانگین 5.00 از 5)

نظرات

ثبت نظر

یادداشت شما با موفقیت ثبت شد، پس از تایید مدیریت، در وب سایت نمایش داده خواهد شد