کسب و کار اینترنتی

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

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

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

پس با ما از نصب تا نحوه استفاده از این افزونه شاهکار همراه باشید و در صورتی که سوالی داشتین می تونید در قسمت نظرات بپرسین.

برای آشنایی بهتر با کارکرد افزونه مداد زرد ویدیو را تماشا کنید:

ویژگی های پلاگین مداد زرد

  • ویرایش ظاهر سایت بصورت زنده
  • 3 پالت رنگی متفاوت
  • 50 انیمیشن آماده
  • خروجی CSS بدون خطا
  • سازگار با همه قالب ها
  • پشتیبانی کامل از فارسی
  • تغییر اندازه با موس
  • سازگار با همه افزونه ها
  • انیمیشن ساز اختصاصی
  • و ده ها ویژگی دیگر …

> دوره جامع آموزش سئو


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

برای شروع کار ما نیاز داریم که اقدام به دانلود و نصب این افزونه کنیم. این افزونه دو نسخه رایگان و غیر رایگان دارد که در رایگان فقط میتونید نحوه کار آن را ببینید و هیچگونه کاربرد دیگری ندارد پس متونید برای خرید آن از همینجا اقدام نمایید و یا اگر میخواهید فعلا با نسخه رایگان این افزونه را تست نمایید می توانید از قسمت افزونه ها > افزودن کلمه yellow pencil را جستجو نمایید و پلاگین Visual CSS Style Editor را نصب و فعال نمایید.

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

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

زمانی که شما نصب کردید این افزونه را حالا می تونید به صفحاتی که می خواهید تغییرات روی آن اعمال کنید را باز کرده و از بالای صفحه گزینه Edit With YellowPencil را انتخاب نمایید. بعد از چند ثاینه با تصویر زیر بر روی آن صفحه مواجه خواهید شد.

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


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

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

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

خب گزینه اول Text هست که امکان تغییرات در نوشته ها را می دهد. به این صورت که شما می توانید اندازه ، فونت ، رنگ و … تکست ها را در اینجا تغییر دهید.

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

Margin و Padding مربوط به فاصله های داخلی و خارجی موضوع انتخاب شده است. به این صورت که شما با تغییر اندازه های آن می توانید فاصله نوشته یا تصاویر خود را از حاشیه آن تغییر دهید.

شما با Border می توانید برای محتوا خود حاشیه بگذارید حالا این حاشیه را می توانید بصورت نقطه چین ، خط چین یا … در بیاورید و یا اینکه رنگ آن را تغییر دهید.

Border Radius مربوط به کناری حاشیه است که با آن می توانید کناره های آن را در با شعاع های مختلف تغییر دهید.

Position به معنا جایگاه است شما با پوزیشن می توانید مکان محتوا انتخابی را تغییر دهید.

Size مربوط به تغییر اندازه محتوا انتخابی است.

Animation مربوط به انیمیشن دار کردن محتوا است به این منظور که زمانی شما محتوایی را می بینید بصورت انیمیشن به شما نمایش داده شود یا خیر که این انیمیشن ها شامل ورود و خروج آن محتوا به شکل های گوناگون است.

Box Shadow شما با این گزینه می توانید محتوای خود را سایه دارد کنید و یک جلوه زیبا به آن بدهید که معمولا در باکس ها استفاده می شود.

Extera به شما گزینه های مختلفی را می دهد که هر کدام را در ادامه بررسی می کنیم.


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

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

  • Font Family
  • Font Weight
  • Color
  • Tex Shadow
  • Font Size
  • Line Height
  • Font Style
  • Text Align
  • Text Transform
  • Letter Spacing
  • Word Spacing
  • Text Decoration
  • Text Indent
  • Word Warp

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

شما در Font Family می توانید نوع فونت نوشته خود را تغییر دهید. اگر فونت جدید را در قالب خود اضافه کرده باشید در اینجا می توانید آن را ببینید.

Font Weight یا وزن فونت برای درشت کردن فونت که مانند بولد Bold شدن در ورد عمل می کند و برای شما تغییراتی را نیز به همراه دارد و ترجیحا این قسمت را تغییر ندهید.

Color شما در اینجا می توانید رنگ نوشته های خود را تغییر دهید و یا اینکه با انتخاب گزینه های زیر این قسمت مانند Flat , Material و …. رنگ خود را انتخاب نمایید.

> آموزش کامل گوگل سرچ کنسول جدید


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

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

  • Background Color
  • Background Image
  • Background Clip
  • Background Blend Mode
  • Background X Position
  • Background Y position
  • Background Size
  • Background Repeat
  • Background Attachment

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

Background Color : شما در این قسمت می توانید به باکس خود رنگ اختصاص دهید که از چند روش این مورد امکان پذیر است. اولین روش انتخاب پالت رنگ است که می توانید با کشیدن موس بر روی آن رنگ ها را تغییر دهید و یا اینکه اگر کد رنگ خاصی را دارید آن را وارد کنید. همچنین می توانید از روش هایی مثل Flat استفاده کنید که یک رنگ اختصاصی می دهد که ثابت است و باید یکی از آن ها را انتخاب کنید. روش های Flat , Material و …. هم هست که می توانید از آن ها استفاده نمایید.

Background Image : شما با این گزینه می توانید به جای انتخاب رنگ برای بک گراند از عکس استفاده کنید.


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

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

بطور مثال شما یک باکس دارید و می خواهید نوشته های داخل آن از حاشیه یک فاصله بیشتر یا کمتری داشته باشید خب برای این موضوع می توانید از Padding استفاده کنید. شما در این قسمت با اسامی زیر روبرو هستید:

  • Margin Left
  • Margin Right
  • Margin top
  • Margin Bottom
  • Padding Left
  • Padding Right
  • Padding top
  • Padding Bottom

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

شما با استفاده از هر کدام از مقادیر بالا می توانید فاصله ها را از سمت راست ، چپ ، بالا و پایین تغییر دهید.

> 10 تکنیک افزایش بازدید سایت


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

در قسمت بردر می توانید برای محتوا خود حاشیه بگذارید. در این قسمت از ابزار به شما امکانی داده می شود که می توانید انتخاب کنید که کدام طرف آن محتوا حاشیه داشته باشد و یا اینکه استایل آن خط ثابت باشید یا نقطه چین یا خط چین و … . همچنین می توانید ضخامت خط و رنگ آن را انتخاب کنید و در قسمت های مختلف از سایت استفاده کنید.

  • Border Style
  • Border Width
  • Border Color

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


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

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

  • Top Left Radius
  • Top Right Radius
  • Bottom Left Radius
  • Bottom Right Radius

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


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

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

  • Z Index
  • Position
  • Top
  • Left
  • Bottom
  • Right

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


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

قست Size این امکان را به شما می دهد که بخش های موجود در سایت خود را مثل کادر ها و … را تغییر اندازده دهید و در جهات مختلف آن را بزرگ یا کوچک کنید.

  • With
  • Hight
  • Box Sizing
  • Min Width
  • Min Hight
  • Max Width
  • Max Hight


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

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

 

تست انیمیشن افزونه مداد زرد

  • Animation
  • Condition
  • Animation Iteration
  • Animation Duration
  • Animation Delay
  • Animation Fill Mode

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

Animation : شما در این قسمت می توانید نوع انیمیشن خود را انتخاب کنید. و با دکمه پلی بالای آن، آنرا ببینید.

Condition : در کاندیشن از شما می پرسد که چه زمانی این انیمیشن شروع کند.

Animation Iteration : در اینجا تعداد دفعات پلی انیمیشن را می توانید مشخص کنید که برای تست بالا من 5 بار انتخاب کردم.

> دوره جامع آموزش گوگل آنالیتیکس


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

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

  • Color
  • Blur Radius
  • Spread
  • Position
  • Horzintal Length
  • Vertical Length

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

Blur Radius : با این گزینه میزان زاویه سایه خود را مشخص کنید و دقت کنید که با موضوع انتخابی تناسب داشته باشد.

Spread : اسپرد در فارسی به معنای گسترش دادن است. شما با این گزینه می توانید میزان انتشار سایه خود راتغییر دهید.


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

شما در بخش Extera با بخش های اضافی افزونه مداد زرد سروکار دارید. این بخش ها استفاده زیادی در تغییر دادن صفحات شما ندارند و کم پیش میاد که شما بخواید از آن استفاده کنید. بطور مثال با گزینه Opacity شما می توانید میزان شفافیت محتوا انتخابی خود را مشخص کنید.

  • Filters
  • Transform
  • Opacity
  • Display
  • Cursor
  • Float
  • Clear
  • Visibility
  • Pointer Events
  • Direction
  • Overflow X
  • Overflow Y

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

Float : این گزینه برای راست چین یا چپ چین بودن محتوا انتخابی کاربرد دارد.

Visibility : برای نمایش یا عدم نمایش یک محتوا کاربرد دارد.

Direction : مربوط RTl یا راست چین بودن نوشته انتخابی است که این موضوع را در قالب های راست چین (فارسی) شده داریم.

> بهترین سایت های درگاه پرداخت واسط اینترنتی رایگان

 

چقدر این مطلب مفید بود؟

تبلیغات کتاب
برچسب ها
آموزش افزونه مداد زرد

1 دیدگاه

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
بستن