تغییر CSS در وردپرس با افزونه مداد زرد

افزونه مداد زرد

تغییر CSS در وردپرس با افزونه مداد زرد

 افزونه مداد زرد وردپرس این امکان را به شما می دهد که بتوانید بدون کد نویسی و به صورت زنده، استایل تمامی المان های موجود در صفحات وبسایتتان (از قبیل ایجاد تغییر در فونت، رنگ، پس زمینه، موقعیت، اندازه، انیمیشن، و…) را بدون هیچ گونه محدودیتی و مطابق سلیقه خودتان، ویرایش و شخصی سازی کنید!

 افزونه مداد زرد

افزونه مداد زرد وردپرس (Yellow Pencil)

مداد زرد جزو یکی از محبوب ترین و پر فروش ترین افزونه های دنیای وردپرس می باشد. به نحوی که نسخه Pro آن توانسته است در مارکت CodeCanyon تا این لحظه، 22.000+ فروش موفق را به ثبت برساند! و همچنین نسخه رایگان افزونه Yellow Pencil توانسته است تا این لحظه، 40.000+ نصب فعال را در مخزن وردپرس به خود اختصاص بدهد.

 افزونه مداد زرد

آموزش افزونه Yellow Pencil

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

1.نصب افزونه مداد زرد Yellow Pencil

همانطور که در بالا ذکر شد مداد زرد دارای دو نسخه رایگان و پرو می باشد. شما می توانید نسخه رایگان افزونه مداد زرد را از مخزن وردپرس دانلود کنید. یا نسخه پرو آن را از مارکت جهانی Code Canyon یا مارکت های ایرانی وردپرس تهیه کنید. به این موضوع توجه داشته باشید که نسخه رایگان افزونه مداد زرد کاربرد چندانی برای شما شما نخواهد داشت. چون اکثر قابلیت های آن قفل می باشد. به همین دلیل پیشنهاد می کنیم که از نسخه PRO افزونه مداد زرد استفاده کنید!

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

2.شروع کار با افزونه Yellow Pencil

پس از نصب و فعال سازی افزونه، بخشی با عنوان Yellow Pencil به منوی پیشخوان سایت شما اضافه خواهد شد که با کلیک روی آن می توانید تنظیمات افزونه را مشاهده و مدریت کنید. برای ورود به ادیتور افزونه مداد زرد، کافیست در صفحه تنظیمات روی عبارت Lets start کلیک کنید و افزونه به صورت خودکار صفحه اصلی سایت شما را برای ویرایش اجرا می کند.

همچنین پس از نصب این افزونه، در ادمین بار موجود در کلیه صفحات سایت، دکمه ای با عبارت Edit With Yellow Pencil اضافه خواهد شد که با کلیک روی آن می توانید صفحه مورد نظرتان را به وسیله ادیتور مداد زرد ویرایش کنید. پس از اجرای ویرایشگر، مداد زرد کلیه عناصر به کار رفته در صفحه را شناسایی می کند و برای شروع کار و سفارشی سازی، می بایست روی المان مورد نظرتان کلیک کنید.

CSS چیست؟

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

 افزونه مداد زرد

CSS کجا اضافه می شود؟

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

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

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

بعد از اطمینان از تغییرات، روی دکمه انتشار در بالای منو کلیک کنید تا کدهای اضافه شده ذخیره شوند.

تغییر کد css در وردپرس با افزونه مداد زرد

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

با مراجعه به پیشخوان وردپرس، قسمت Yellow pencil و انتخاب گزینه “درباره مداد زرد” یا با کلیک بر روی گزینه “ویرایش با مداد زرد” در بالای صفحه، وارد بخش ویرایش با این افزونه شوید.
با ورود به صفحه تغییرات مداد زرد، کادری به شما نشان داده می شود. در این کادر صفحه ای که می خواهید در آن تغییرات اعمال کنید و نوع سفارشی سازی را انتخاب کنید.

ویرایش زنده کدهای css

سفارشی سازی تکی برای ایجاد تغییر در یک صفحه است. در سفارشی سازی عمومی، تغییرات در کل سایت اعمال می شود و سفارشی سازی قالب که تغییرات در قالب اعمال می شود. معمولاً بیشتر از سفارشی سازی تکی و عمومی استفاده می شود.

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

 افزونه مداد زرد

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

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

این را هم بخوانید : بهترین افزونه های وردپرس

Share this post

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

نشانی ایمیل شما منتشر نخواهد شد.