CSS Hero این فایل نقد می نویسید:، یکی از محبوب ترین ها ویرایشگرهای CSS به WordPress. خود را سفارشی کنید WordPress بدون نیاز به دانش کدنویسی، مانند یک حرفهای سایت بسازید.
یکی از دلایل اصلی محبوبیت گسترده WordPress CMS پتانسیل سفارشیسازی جامع آن را خواهد داشت.
با این حال، برخی از WordPress themes، با گزینههای محدودش، طراحی صحیح مطابق با سلیقه شما را دشوار میکند.
سفارشیسازی دستی فایلهای اصلی قالب امکانپذیر است، اما اگر دقت نکنید، میتواند کمی دست و پا گیر باشد و مشکلاتی را ایجاد کند. اما این نباید مشکلی برای ... ایجاد کند. CSS Hero WordPress پلاگین.
پس از نصب، این افزونه به شما امکان دسترسی به یک رابط کاربری اشاره و کلیک را میدهد که به کاربر اجازه میدهد ظاهر و حس وبسایت شما را در لحظه تنظیم کند.
بیشتر تنظیمات اولیه مانند تنظیم رنگ، ترازبندی و اندازه فونت را میتوان از طریق رابط کاربری گرافیکی معمولی خود انجام داد.
با این حال، برای پیکربندی پیشرفتهتر، به یک ویرایشگر کد اختصاصی دسترسی خواهید داشت که به شما امکان میدهد کد خود را وارد کنید. CSS سفارشی.
خلاصه کلام اینکه، وقتی در نظر بگیرید که این افزونه چقدر پتانسیل طراحی و سفارشیسازی دارد، این رویای یک توسعهدهنده وب است.
اما با این اوصاف، لازم به ذکر است که این افزونه پولی است و بنابراین، ممکن است افراد در حال بررسی این باشند که آیا این یک سرمایهگذاری خوب برای آنهاست یا خیر.
به همین دلیل است که برای این مطالعه، ما یک مطالعه جامع را گردآوری کردهایم که تمام جزئیات و نکات مهم را بررسی میکند. CSS Hero ارائه میدهد، بنابراین میتوانید در مورد افزونه تصمیم آگاهانهای بگیرید.
بنابراین بدون آگاهی بیشتر ، بیایید شروع کنیم:
CSS Hero - امکانات
برای شروع بررسی، بیایید به سرعت تمام ویژگیها و قابلیتهایی که این افزونه ارائه میدهد را مرور کنیم:
- سبکهای فونت و تایپوگرافی
- مدیریت جامع رنگ
- قطعه کدهای آماده
- واگرد / انجام مجدد تاریخچه
- ویرایشگر کد CSS
- ذخیره نسخههای ویرایش
- و بیشتر
سفارشیسازی برای اندازههای مختلف صفحه نمایش
CSS Hero به شما گزینههایی برای ویرایش و پیشنمایش نحوه نمایش سایتتان در صفحات نمایش با اندازههای مختلف مانند دسکتاپ، تبلت و موبایل میدهد.
این به شما امکان میدهد طراحی را به گونهای تنظیم کنید که کاربرانی که از تلفنهای با صفحه نمایش کوچک و همچنین مانیتورهای صفحه نمایش بزرگ میآیند، از بهترین تجربه کاربری ممکن لذت ببرند.
شما به یک صفحه ویرایش زنده دسترسی خواهید داشت که به شما امکان میدهد تغییرات را در زمان واقعی اعمال کنید.
همچنین، این افزونه به شما امکان میدهد طرحهای مختلفی را برای اندازههای مختلف صفحه نمایش ایجاد کنید و به شما آزادی کامل در سفارشیسازی میدهد.

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

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

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

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

گزینهای برای لغو/بازگردانی تاریخچه
اگر فکر میکنید هنگام ویرایش اشتباه کردهاید، تمام تغییرات و اصلاحاتی که با استفاده از افزونه ایجاد میکنید، قابل لغو/دوباره انجام شدن هستند. تمام تغییرات ایجاد شده با استفاده از افزونه در یک تاریخچه اختصاصی ذخیره میشوند.
همه چیز با جزئیات بسیار خوب است، بنابراین رفتن به عقب یا جلو در فرآیند ویرایش به سادگی کلیک کردن روی نسخهای است که میخواهید به آن برگردید. این باعث میشود آزمایش بسیار آسانتر شود!
ذخیره نقاط بازرسی
این افزونه همچنین به شما امکان میدهد برای فرآیند ویرایش قالب خود، نقاط کنترل ایجاد و ذخیره کنید. در اینجا میتوانید از ویرایشهای خود عکس بگیرید و آنها را به عنوان نسخههای مختلف ذخیره کنید.
بعداً میتوانید این نسخهها را بررسی کنید، نسخهای را که بیشتر میپسندید انتخاب کنید و برای انتشار آن روی یک دکمه کلیک کنید.
البته، میتوانید از ویژگی چکپوینت برای ذخیره پیشرفت ویرایش خود نیز استفاده کنید تا بعداً به آن برگردید.
و این نیمی از ماجرا نیست
در اینجا برخی از ویژگیهای قابل توجه دیگر که این افزونه ارائه میدهد، آورده شده است:
- بدون قفل – این افزونه شما را محدود نمیکند، بنابراین مجبور هستید فقط از افزونه استفاده کنید. در واقع، شما قادر خواهید بود به راحتی کل سایت خود را به همراه تمام سفارشیسازیهای انجام شده با استفاده از افزونه، بدون هیچ زحمتی، خروجی بگیرید.
- سایت خود را به عنوان یک کاربر بدون ورود به سیستم سفارشی کنید کاربرانی که وارد سیستم نشدهاند، دیدگاه متفاوتی نسبت به وبسایت شما دارند و بنابراین، ممکن است تجربه کاربری متفاوتی نسبت به آنچه شما در نظر دارید، داشته باشند. اما این نباید مشکلی ایجاد کند زیرا این افزونه به شما امکان میدهد قالب خود را از دیدگاه یک کاربر وارد نشده، سبکبندی/سفارشیسازی کنید.
- صفحه ورود خود را شیک کنید – این افزونه حتی به شما امکان میدهد صفحه ورود خود را سفارشی کنید تا به شما در ایجاد یک تجربه منحصر به فرد و سفارشی برای اعضای سایت هنگام ورود به وبسایتتان کمک کند.
- انیمیشن را به طرحهای خود اضافه کنید این افزونه طیف گستردهای از انیمیشنها و جلوههای CSS فوقالعاده را در خود جای داده است که میتوانید به راحتی در وبسایت خود اعمال کنید و طراحی کلی و تجربه کاربری را بهبود بخشید.
- ادغام Unsplash – با ادغام بومی Unsplash، شما قادر خواهید بود به راحتی تصاویر با کیفیت بالا و بدون حق امتیاز را مستقیماً از فهرست عظیم تصاویر استوک فوقالعاده Unsplash در وبسایت خود ادغام کنید.
- ویرایش غیر مخرب - CSS Hero هیچ تغییر مستقیمی در فایلهای اصلی قالب ایجاد نمیکند. در واقع، تمام تغییرات شما یک فایل واحد ایجاد میکنند. شیوهنامه استاتیک اضافی طوری طراحی شده که CSS پیشفرض قالب شما را نادیده بگیرد.
- برای عملکرد بهینه شده است – این افزونه به همراه کد سفارشی تولید شدهاش فوقالعاده سبک است و هیچ بار اضافی به وبسایت شما وارد نمیکند، که منجر به افت عملکرد تقریباً صفر میشود. سایت شما زمان بارگذاری مانند قبل از نصب و استفاده از افزونه خواهد بود.
CSS Hero – رابط کاربری

CSS Hero به شما امکان دسترسی به a تجربه ویرایش WYSIWYG در رابط کاربری که شبیه به آنچه در تصویر زیر نشان داده شده است، خواهد بود:
همانطور که میبینید، یک نوار ابزار در بالا خواهید داشت که به شما امکان دسترسی به تمام گزینههای اساسی، مانند اندازه صفحه نمایشی که میخواهید ویرایش کنید، گزینههای undo/redo، ایجاد چکپوینتها و موارد دیگر را میدهد.
اصلی سردبیر بازرس به عنوان یک نوار کناری در سمت چپ صفحه نمایش قرار دارد.
بسته به اینکه کدام عنصر یا ماژول را ویرایش میکنید، رابط کاربری گزینههای مختلفی را نشان میدهد که میتوانید برای شروع فرآیند ویرایش خود به آنها دسترسی پیدا کنید.
همچنین در اینجا به رابط ویرایشگر کد دسترسی خواهید داشت. پس از انجام سفارشیسازی، میتوانید روی دکمه ذخیره و انتشار کلیک کنید.
از طرف دیگر، اگر نمیخواهید کار خود را همین الان منتشر کنید، میتوانید از گزینه Checkpoints در نوار ابزار بالا برای ذخیره کار خود اما عدم انتشار آن استفاده کنید.
همچنین به نوار ابزار پایینی دسترسی خواهید داشت که به شما امکان میدهد به سرعت بین بخشهای مختلف طرح خود جابجا شوید، بنابراین میتوانید به سرعت سفارشیسازیهای خود را روی آنها انجام دهید.
با این حال، شما همچنین مجاز هستید که عنصر HTML مورد نظر برای ویرایش را به طور خاص انتخاب کنید و لازم نیست سفارشیسازی خود را به صورت تکهتکه انجام دهید.
آیا باید استفاده کنید؟ CSS Hero?
همه در همه، CSS Hero یک افزونه سفارشیسازی عالی است که مجموعهای از ویژگیهای قدرتمند را در یک رابط کاربری بصری ارائه میدهد.
توسعهدهندگان مطمئناً این را ابزاری ارزشمند در زرادخانه خود خواهند یافت. همین امر در مورد مدیران وب که از جستجوی طراحی قالب مناسب خسته شدهاند و فقط یک ابزار ویرایش قدرتمند میخواهند تا به آنها در سفارشیسازی صحیح طرحبندی وبسایتشان کمک کند، نیز صدق میکند.
علاوه بر این، به یاد داشته باشید که این افزونه هیچ محدودیتی ندارد و میتوانید به راحتی تمام استایلشیتهای خود را از یک وبسایت استخراج کرده و به وبسایت دیگری وارد کنید.
بنابراین، اگر بتوانید از راحتی ایجاد تغییرات مستقیم در رابط کاربری وبسایت خود صرف نظر کنید، میتوانید طرح پایه ۲۹ دلاری سالانه آنها را تهیه کنید که وقتی به آن فکر میکنید، عملاً یک دزدی است.










