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

( یکشنبه ، 3 مرداد سال 1400 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

آموزش مداد زرد

آموزگار :

مهدی جبین پور

در این ویدئو آموزشی افزونه مداد زرد یا همان Yellow pencil قدرتمند را به شما معرفی کردیم و آموزش دادیم تا بتوانید قدرت طراحی سایتتان را هزاران برابر کنید و از آن لذت ببرید ... ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

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

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

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

خرید محصول ویدئو بالا

جهت خرید کلیک کنید.

مهدی جبین پور

مـهـدی جـبین پـور

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

مهدی جبین پور

مـهـدی جـبین پـور

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

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

( یکشنبه ، 3 مرداد سال 1400 )

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

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

افزونه مداد زرد با داشتن ویرایشگر زنده و حرفه ­ای به شما برای ویرایش صفحات وب­سایت و قالب سایتتان کمک می­کند و می­توانید  هرچه را می­خواهید به وسیله کدهای سی اس ­اس (CSS) که اتوماتیک ایجاد می­شوند تغییر دهید . این افزونه مستقل از نوع قالب تمام تگ­ های قالب شما را شناسایی می­کند و امکان ویرایش آن­ ها را در اختیار شما قرار می­دهد.

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

دانلود نسخه اورجینال افزونه مداد زرد(Yellow Pencil)

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

پس از تهیه و دانلود افزونه مداد زرد از سایت ابزار وردپرس، یک فایل فشرده با فرمت .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 در سایت با افزونه مداد زرد از سری آموزش ­های جامع و رایگان وردپرس را مشاهده نمایید.

 

در پایان توصیه می­کنیم از امکانات کم ­نظیر پلاگین مداد زرد در طراحی سایت استفاده کنید و به موفقیت و پیشرفتتان نزدیک­تر شوید. البته ذکر این نکته ضروری است که در استفاده از افزونه مداد زرد دقت کافی کنید تا با تغییراتی که اعمال می­کنید، واکنشگرا(ریسپانسیو) بودن سایتتان از بین نرود.

برای نوشتن دیدگاه باید وارد بشوید.

77 دیدگاه. ارسال دیدگاه جدید

فهرست