ویرایش زنده استایل ها و جلوه های ویژه با Visual CSS Style Editor

ویرایش زنده استایل ها و جلوه های ویژه با Visual CSS Style Editor

ویرایش زنده استایل ها و جلوه های ویژه با Visual CSS Style Editor

سلام دوستان؛

در این مقاله از همیارو وردپرس قصد داریم شما را با یکی از ویژگی های بارز و پیشرفته وردپرس آشنا کنیم. ابزاری که با آن آشنا خواهید شد را با نام ویژوال سی اس اس استایل ادیتور (Visual CSS Style Editor) خواهید شناخت. این افزونه به صورت رایگان در مخزن وردپرس در دسترس شما خواهد بود و اما در ادامه…

بسیاری از مواقع پیش آمده که مایل باشید نوع نوشتار، جایگاه المان ها و تصاویر، جلوه های ویژه و نوع نمایش هر محتوایی را تنظیم کنید. برای انجام این فرآیند به صورت پیشفرض گاهی دست به inspect element مرورگر می برید و به صورت دستی استایل ها را در قالب وردپرس خود تغییر میدهید. اما کار برای دوستانی که با سی اس اس (css) و ساختار آن آشنا نیستند کمی دشوارتر خواهد شد اگر با این افزونه ی ویژه وردپرس آشنا نباشند!

افزونه Visual CSS Style Editor

visual css editor hamyarwp

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

در زیر برخی از ویژگی های این افزونه را برای شما نام می بریم:

  1. اختصاص بیش از ۵۰ ویژگی و خصوصیت برای المنت های قالب شما
  2. تغییر استایل های هر المنت بدون نیاز به کد نویسی و دانش تغییر کدی استایل
  3. تغییر زنده و بدون نیاز به بارگذاری مجدد صفحه جهت مشاهده آنی تغییرات اعمال شده
  4. قابلیت کشیدن و رها کردن هر المنت جهت جابجایی همیشگی در قالب ورپرسی شما
  5. تغییر زنده سایز هر المنت بدون نیاز به هرگونه کد نویسی
  6. ساخت انیمیشن برای هر المنت به صورت زنده در حالت های مختلف
  7. وجود بیش از ۵۰ مدل انیمیشن جهت بکارگیری در محتوای وب سایت وردپرسی

همچنین ویژگی های خاص که به کمک آنها می توانید موارد خاص دیگری نیز به قالب وب سایت ورپرسی خود اضافه نمایید.

  • بکارگیری بیش از ۶۰۰ فونت انگلیسی در نسخه پرو و انگلیسی این افزونه
  • بکارگیری بیش از ۳۰۰ تصویر زمینه جهت استفاده در جایگاه های مورد نظر شما
  • استفاده از پالت رنگ های استاندارد فلت ( رنگ های تخت محبوب ) در المان ها
  • ابزار اندازه گیری و تغییر اندازه المان ها و محتوای قالب
  • امکان ساخت انیمیشن دلخواه و ذخیره جهت استفاده های بعدی
  • پشتیبانی از وب سایت های واکنشگرا و عدم تداخل در این خصوصیت قالب ها
  • انتخاب جلوه ویژه جهت هنگامی که موس بروی محتوایی قرار می گیرد یا بروی آن کلیک می شود
  • انتخاب حالت های ویژه جهت مدیریت جستجو در وب سایت شما
  • ویژگی های گرفتن و رها کردن هر المنت و محتوا (drag & drop)
  • استفاده از حالت قاب و تعیین فاصله برای هر قسمت از قالب شما
  • بیش از ۵۰ حالت انیمیشنی آماده برای استفاده در قالب وردپرس
  • راهنمای هوشمند هر بخش جهت سهولت در استفاده از افزونه
  • قرارگیری اطلاعات طراحی و قابلیت مشاهده و ویرایش کد های ایجاد شده در استایلها
  • انتخاب رنگ دلخواه جهت نسبت به متون و بخش های وب سایت شما
  • امکان استفاده از جلوه های ویژه و فیلتر های سی اس اسی در نسخه پیشرفته
  • پشتیبانی از انتخاب خصوصیات هر نطقه ای از وب سایت که کلیک خواهید کرد
  • پشتیبانی از تغییر سایز، تغییر استایل و مدیریت استایل ها در افزونه
  • قابلیت بازگردانی به حالت قبل در صورت بروز مشکل
  • امکان تغییر قالب استایل ها برای صفحات مجزا و بکارگیری در مطالب خاص
  • کلید های میانبر ، بروز رسانی خودکار و مستندات افزونه
  ویرایشگر کلاسیک وردپرس را با افزونه Classic Editor برگردانیم

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

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

تغییر قالب به صورت زنده با افزونه مداد زرد

حال به بخش زیر منتقل شده و سایر تنظیمات را انجام دهید:

تغییر خصوصیت المنت ها به صورت زنده با افزونه مداد زرد وردپرس

در نتیجه با ویرایشگر متنی سی اس اس به صورت تصویر زیر رو به رو خواهید شد:

result-hamyarwp

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

ویرایشگر قالب مداد زرد در مارکت وردپرس

خرید قالب

افزونه Visual CSS Style Editor

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

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

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 2 سال عضو همیار وردپرس

    با سلام خدمت شما من پوسته ای نصب کردم به نام مارکتو و می خواهم این پوسته را سفارشی کنم با افزونه yellow pencil یا همون افزونه Visual CSS Style Editor می توانم پوسته را ویرایش نمایم دقیقا من می خواهم منویی افقی که وجود دارد به این وسیله حذف نمایم با تشکر.

  2. سلام من نسخه پرمیوم رو همراه قالب بود استفاده کردم منتها الان نمیدونم چطوری باید تنظیماتی که با مداد زرد اعمال کردم رو برگردونم میشه همیار کمکی بهم بکنه .ممنون

  3. سلام تنها عيبش اينه كه با اين افزونه نميشه متن هم تغيير داد شايدم من نتونستم پيداش كنم مثلا اگر غلط املايي ديديم همونجا بشه اصلاحش كرد يا ايميل و شماره پيش فرض عوض كرد

  4. سلام اینکه کلا پولیه و نسخه رایگانش اصلا هیچ تغییری را سیو نمیکنه

    • 4 سال عضو همیار وردپرس

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

  5. 4 سال عضو همیار وردپرس

    با سلام.من این افزونه رو دانلود کردم ولی موقع بارگذاری در وردپرس ارور میده که حجمش بیشتر از حد مجازه!!!!چی کار باید کرد؟

    • 4 سال عضو همیار وردپرس

      سلام دوست عزیز، به دو روش می توانید این افزونه رو راه اندازی و فعالسازی بفرمایید.
      – تغییر در فایل htaccess (که مقداری تخصصی هست)
      – آپلود از طریق هاست که این آیتم به شما پیشنهاد میشه.

      مسیر آپلود : public_html/wp-content/plugins

      موفق باشید.

  6. سلام
    افزونه خوبیه، ممنون بابت معرفی…
    منتها این نسخه معمولی صرفا واسه پیش نمایشه و فقط با نسخه پرو میشه تغییرات رو ذخیره کرد.

    • 4 سال عضو همیار وردپرس

      سلام و تشکر از توجه شما،

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

      موفق باشید.

  7. 5 سال عضو همیار وردپرس

    افزونه خیلی جالبیه.
    ولی Inspect element نسبت به این افزونه یه مزیت داره. اون هم اینه که وقتی شما از Inspect element استفاده میکنید، میتونید بطور زنده تغییراتی که توی کدهای css ایجاد میکنید مشاهده کنید.
    البته من هنوز از این افزونه استفاده نکردم و نمیدونم همچین امکانی رو داره یا نه! اگر داشته باشه، خیلی خوبه.

    • 4 سال عضو همیار وردپرس

      با سلام و تشکر از توجه شما،

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

      – امکان ایجاد انیمیشن
      – امکان تعریف حاشیه ها و سایه و کادرهای دلخواه
      – امکان استفاده از تصاویر اختصاصی زمینه این افزونه
      و …

  8. من قبلابااین پلاگین کارکردم ولی مشکلی که داره اینه که وقتی تغیرات به شکل front End اعمال میشه مربوط به همون صفحه اول هستش وبه بقیه صفحات اعمال نمیشه ولی امکاناتش کمتر ازVisual Composer نیستش. کارباهاش هم خیلی آسونه

    • 4 سال عضو همیار وردپرس

      با سلام و آرزوی بهروزی

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

      تفاوت این افزونه با ویژوال کامپوزر،‌در این هست که شما با استفاده از این افزونه، قالب سایت خود رو تغییر میدید و این در حالی است که ویژوال کامپوزر مدیریت محتوا و چیدمان محتوا رو بر عهده داره.

      براتون آرزوی موفقیت دارم

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

    • 4 سال عضو همیار وردپرس

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

      همچنین، نسخه فارسی سازی شده این محصول در مارکت ژاکت، ( که بنده هم از خریداران این محصول بودم) دارای فونت های وب فارسی متنوعی هم هست.

      موفق و پایدار باشید.

مطالب زیر را حتما بخوانید

دوره‌های آموزشی