آموزش کار با افزونه مداد زرد Yellow Pencil

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

پیشنهاد خرید: بررسی و خرید افزونه Yellow Pencil

آموزش کار با افزونه مداد زرد Yellow Pencil

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

1- نحوه نصب افزونه مداد زرد

در ابتدا افزونه مداد زرد را خریداری و دانلود کنید ( برای خرید پلاگین Yellow Pencil کلیک کنید). بعد از دانلود افزونه یک فایل زیپ در اختیار شما قرار داده می شود که باید آن را در سایت خود بارگذاری نمائید. برای اینکار ابتدا وارد پیشخوان وردپرس خود شوید و از بخش “افزونه ها” روی “افزودن” کلیک کنید. سپس از بالای صفحه روی دکمه “بارگذاری افزونه” کلیک نمائید. بعد از آن روی دکمه “Browse” کلیک کنید و فایل افزونه را بارگذاری نمائید. در نهایت روی دکمه نصب کلیک کنید تا افزونه برای شما نصب و فعال شود. همچنین اگر با نحوه نصب افزونه آشنا نیستید، می توانید آموزش نصب افزونه وردپرس را مشاهده کنید.

2- آموزش کار با افزونه مداد زرد

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

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

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

بخش2: زمانی که شما یک عنصر را انتخاب می کنید، اینجا در این بخش می توانید تنظیمات مربوط به استایل آن عنصر را سفارشی کنید.

بیشتر بخوانید: آموزش اضافه کردن استایل دلخواه به ابزارک ها در وردپرس

آموزش کار با ابزار Inspector در افزونه مداد زرد

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

• Cursor: این گزینه به شما این امکان را می دهد با وب سایت خود به گونه ای تعامل داشته باشید که گویی یک بازدیدکننده معمولی هستید. به عنوان مثال، می توانید روی یک پیوند کلیک کنید تا یک صفحه جدید برای ویرایش بارگذاری شود.
• Flexible Inspector: تمام عناصر یک کلاس را انتخاب می کند. برای مثال، اگر روی پیوندی در منوی پیمایش خود کلیک کنید، می‌توانید به تمام پیوندهای منوی پیمایش استایل بدهید.
• Single Inspector: این گزینه تنها عنصری را انتخاب می کند که شما روی آن کلیک می کنید. به عنوان مثال، به شما اجازه می دهد تا به جای انتخاب تمام پیوندهای منوی پیمایش، فقط یک پیوند خاص را در منوی پیمایش خود استایل بدهید.

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

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

برای نمونه، اگر قصد دارید یک حاشیه اضافه کنید، کافیست از گزینه های بخش Border استفاده نمائید تا تمام پیوندهای منوی شما حاشیه دار شود.

بیشتر بخوانید: افزودن استایل سفارشی به ویرایشگر ویژوال | چگونه به ویژوال ادیتور کد سفارشی بیافزاییم؟

همچنین اگر قصد دارید تنها یک حاشیه به پیوند حساب من اضافه کنید، می ‌توانید به جای آن از single inspector استفاده نمائید.

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

• متن
• پس زمینه
• حاشیه
• لایه گذاری
• شعاع مرزی
• موقعیت
• اندازه
• انیمیشن
• و…

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

بیشتر بخوانید: آموزش ویرایش قالب وردپرسی | چگونه پوسته وردپرس را بدون کدنویسی ویرایش کنیم؟

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

همچنین اگر اندازه و موقعیت را تنظیم می کنید، حتی می توانید یک حالت Wireframe ویژه را فعال نمائید تا بتوانید موقعیت و تراز بودن عناصر را به سادگی انجام دهید.

آموزش ریسپانسیو کردن صفحات با افزونه مداد زرد

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

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

بیشتر بخوانید: افزودنی Gravity Forms Styles Pro – افزودنی زیباسازی فرم های گراویتی فرمز

درج کد CSS سفارشی در افزونه مداد زرد

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

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

بیشتر بخوانید: آموزش کامل و جامع شروع کار با وردپرس فارسی

جمع بندی

افزونه YellowPencil یی از افزونه های محبوب برای وردپرس می باشد که به کمک آن می توانید به بخش های مختلف سایت خود استایل دهید. ما در این مطلب آموزش yellow pencil را در اختیار شما قرار دادیم. امیدوارم از این آموزش رضایت داشته باشید.

منبع: wplift