ویرایش زنده استایل ها و جلوه های ویژه با 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)
  • استفاده از حالت قاب و تعیین فاصله برای هر قسمت از قالب شما
  • بیش از ۵۰ حالت انیمیشنی آماده برای استفاده در قالب وردپرس
  • راهنمای هوشمند هر بخش جهت سهولت در استفاده از افزونه
  • قرارگیری اطلاعات طراحی و قابلیت مشاهده و ویرایش کد های ایجاد شده در استایلها
  • انتخاب رنگ دلخواه جهت نسبت به متون و بخش های وب سایت شما
  • امکان استفاده از جلوه های ویژه و فیلتر های سی اس اسی در نسخه پیشرفته
  • پشتیبانی از انتخاب خصوصیات هر نطقه ای از وب سایت که کلیک خواهید کرد
  • پشتیبانی از تغییر سایز، تغییر استایل و مدیریت استایل ها در افزونه
  • قابلیت بازگردانی به حالت قبل در صورت بروز مشکل
  • امکان تغییر قالب استایل ها برای صفحات مجزا و بکارگیری در مطالب خاص
  • کلید های میانبر ، بروز رسانی خودکار و مستندات افزونه
  ساخت برگه ها در وردپرس

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

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

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

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

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

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

result-hamyarwp

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

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

خرید قالب

افزونه Visual CSS Style Editor

دانلود صفحه افزونه
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

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

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.