آموزش افزونه مداد زرد
در این دوره آموزشی، قصد داریم افزونه قدرتمند مداد زرد (Yellow Pencil) را به شما عزیزان معرفی کنیم. این افزونه با امکانات و ویژگی های فوق العاده ای که دارد کار طراحی وبسایت را برای شما لذت بخش میکند. در واقع شما بدون نیاز به حتی یک خط کدنویسی قادر خواهید بود تغییرات بسیار زیادی را روی صفحات سایتتان اعمال کنید.
افزونه مداد زرد با داشتن ویرایشگر زنده و حرفه ای به شما برای ویرایش صفحات وبسایت و قالب سایتتان کمک میکند و میتوانید هرچه را میخواهید به وسیله کدهای سی اس اس (CSS) که اتوماتیک ایجاد میشوند تغییر دهید. این افزونه مستقل از نوع قالب تمام تگ های قالب شما را شناسایی میکند و امکان ویرایش آن ها را در اختیار شما قرار میدهد.
شما میتوانید با تهیه و نصب افزونه مداد زرد تحولی در طراحی سایت ایجاد کنید. نسخه اصلی و اورجینال این افزونه در سایت ابزاروردپرس برای تهیه و دانلود شما عزیزان در دسترس قرار گرفته است.
نصب افزونه مداد زرد
پس از تهیه و دانلود افزونه مداد زرد از سایت ابزار وردپرس، یک فایل فشرده با فرمت .zip در اختیار شما قرار میگیرد.
برای نصب افزونه در وردپرس، در پیشخوان “مسیر افزونه ها > افزودن” را انتخاب کرده و سپس دکمه بارگذاری افزونه را کلیک کنید. سپس فایل فشرده پلاگین مداد زرد که تهیه کردید را از جعبه بارگذاری افزونه و با کلیک دکمه Browse انتخاب کنید و دکمه “هم اکنون نصب کن” را کلیک کنید. پس از نصب افزونه مداد زرد آن را فعال کنید.
پس از نصب افزونه مداد زرد منو جدید Yellow Pencil به پیشخوان وردپرس اضافه میشود. در زیرگروه های این منو میتوانید تنظیماتی را برای پلاگین مداد زرد اعمال کنید. برای مثال در زیرگروه Customization میتوانید تغییراتی که در طراحی صفحات سایت ایجاد کرده اید را مشاهده، ویرایش و یا حذف کنید.
نکته ای که باید به آن توجه داشته باشید این است که همه تغییرات که شما در طراحی صفحات سایتتان ایجاد میکنید در خود افزونه مداد زرد ذخیره میشود و با حذف یا غیر فعال کردن افزونه، تغییرات نیز غیرفعال خواهند شد.
حال برای اعمال تغییرات CSS با مداد زرد کافیست صفحه مورد نظر که میخواهید ویرایش کنید را در مرورگر باز کنید. در منو مدیریتی گزینه “Edit With Yellow Pencil” را مشاهده خواهید کرد. با کلیک این دکمه وارد ویرایشگر زنده افزونه خواهید شد. همچنین به همه برگه های سایت دکمه “Edit Page – Yellow Pencil” اضافه میشود که اگر برگه را در حالت ویرایش باز کنید این دکمه را مشاهده کرده و با کلیک روی آن وارد صفحه تغییرات با مداد زرد خواهید شد.
ایجاد تغییرات با مداد زرد
صفحه سایت که قصد ویرایش آن با پلاگین مداد زرد را دارید با هر کدام از روش های گفته شده در بالا باز کنید تا وارد صفحه ویرایشگر زنده مداد زرد برای ایجاد تغییر شوید. با حرکت و قرار گرفتن موس روی هر کدام از المان ها، یک کادر آبی رنگ به دور المان اضافه میشود که به معنی انتخاب آن المان است. فقط کافیست با انتخاب المان روی آن کلیک کنید و به دلخواه تغییر دهید.
برای انتخاب المان ها میتوانید از گزینه Cursor از منو سمت چپ استفاده کنید. این گزینه دارای دو نوع انتخابگر تکی (Single Inspector) و انتخابگر انعطاف پذیر (Flexible Inspector) است که برای انتخاب المان ها به صورت تکی و گروهی (انعطاف پذیر) مورد استفاده قرار میگیرند.
مورد دیگری که خوب است بدانید اعمال تغییر مشترک در صفحات است. فرض کنید المانی در همه صفحات سایت مشترک است و شما قصد تغییر آن در همه صفحات را دارید. برای این کار کافیست از منو سمت راست، گزینه “Global Customization” را انتخاب کنید. با انتخاب این گزینه و ویرایش المان روی یکی از صفحات، المان روی صفحات دیگر نیز تغییر خواهد کرد.
در این قسمت گزینه “Single Customization” تغییرات فقط روی صفحه جاری اعمال میشود.
برای تغییر و ویرایش CSS المان ها میبایست از منو سمت چپ استفاده کنید. این منو دارای گزینه های متعددی است که هر آنچه را بخواهید تغییر دهید برایتان اعمال میکند. در ادامه به معرفی این منو میپردازیم.
Text
برای تغییر المان های متنی از این گزینه استفاده کنید. در این منو میتوانید فونت، اندازه، رنگ، سایه و… متن را ویرایش کنید.
Background
برای اضافه کردن پس زمینه های مختلف مانند پس زمینه رنگی، گرادینت، الگوها و… به المان ها از این گزینه استفاده کنید.
Margin
فاصله خارجی المان ها از چپ، راست، بالا و پایین را تغییر میدهد.
Padding
فاصله داخلی المان ها از چپ، راست، بالا و پایین را تنظیم میکند.
Border
با استفاده از این گزینه برای المان ها کادر ایجاد کرده و تغییراتی را در محیط بیرونی المان ایجاد کنید.
Border Radius
برای گرد کردن زاویه کادر المان ها کاربرد دارد.
Position
اگر میخواهید المان ها را جابجا کنید و حرکت دهید از منو Position استفاده کنید.
Size
برای تغییر اندازه عرض و ارتفاع المان ها مورد استفاده قرار میگیرد.
Animation
با استفاده از گزینه Animation میتوانید انیمیشن های زیبا به المان ها اضافه کنید. حتی میتوانید حالت نمایش انیمیشن را در زمان لود صفحه، با کلیک موس، Hover و… تنظیم کنید.
Box Shadow
برای زیبایی بیشتر سایت و المان ها از جعبه سایه استفاده کنید. با استفاده از این گزینه میتوانید سایه های جذابی به المان ها اضافه کنید.
Extra
تنظیمات اضافه CSS در مداد زرد مانند عدم نمایش المان ها و… در این قسمت قرار دارد.
با افزونه مداد زرد میتوانید تغییرات ظاهر سایت خود را در حالت ریسپانسیو (Responsive) نیز اعمال نمایید. برای فعال کردن حالت ریسپانسیو در این افزونه از منو سمت چپ گزینه ریسپانسیو (Responsive Mode) را کلیک کرده و سپس اندازه صفحه را برای دستگاه مورد نظرتان تغییر داده و با کمک ابزارهای مداد زرد ظاهر المان های سایت را برای نمایش در حالت ریسپاسیو ویرایش کنید.
به شما عزیزان پیشنهاد میکنیم ویدئو آموزش تغییرات CSS در سایت با افزونه مداد زرد از سری آموزش های جامع و رایگان وردپرس را مشاهده نمایید.
در پایان توصیه میکنیم از امکانات کم نظیر پلاگین مداد زرد در طراحی سایت استفاده کنید و به موفقیت و پیشرفتتان نزدیکتر شوید. البته ذکر این نکته ضروری است که در استفاده از افزونه مداد زرد دقت کافی کنید تا با تغییراتی که اعمال میکنید، واکنشگرا (ریسپانسیو) بودن سایتتان از بین نرود.
