نقد و بررسی CSS Hero: سفارشی سازی وردپرس آسان شده است

نقد و بررسی CSS Hero: سفارشی سازی وردپرس آسان شده است

اگر شما یکی از مبتدیانی هستید که می خواهد بدون لمس CSS و کدنویسی, قالب سایت وردپرس خود را سفارشی کنند ، بسیار خوش شانس هستید. پلاگین CSS Hero برای وردپرس به شما امکان می دهد بدون لمس یک خط کد ، قالبتان سفارشی سازی کنید. در این بررسی به روز شده CSS Hero ، ما به شما نشان خواهیم داد که چگونه از CSS Hero برای شخصی سازی وب سایت خود استفاده کنید و اینکه چرا ما معتقدیم یکی از افزونه هایی است که هر شخص مبتدی در وردپرس باید آن را امتحان کند.

بررسی CSS Hero

CSS Hero یک افزونه وردپرس است که به شما امکان می دهد قالب وردپرس خود را بدون نوشتن یک خط کد (بدون نیاز به HTML یا CSS) طراحی کنید.

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

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

CSS Hero می تواند باعث صرفه جویی در وقت و سرخوردگی شما در هنگام ایجاد تنظیمات طراحی شود.

معمولاً ما در مورد پلاگین های سفارشی سازی طراحی با کلیک به دلیل متورم بودن آنها ( مشکلات فراوان از جمله سنگین کردن سایت ) بسیار بدبین هستیم. با این حال ، CSS Hero از همان ابتدا واقعاً ما را تحت تأثیر قرار داد.

اگر بخواهید یک بررسی صادقانه CSS Hero را از ما بخواهید ، ما به آن 5 از 5 ستاره می دهیم.

نحوه استفاده از CSS Hero برای شخصی سازی قالب وردپرس

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

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

هدف CSS Hero ارائه یک رابط WYSIWG (آنچه می بینید همان چیزی است که دریافت می کنید . فرانت-اند) برای ویرایش قالب شما است. هنگام ورود به سیستم ، به سادگی از وب سایت خود بازدید کنید و دکمه CSS Hero را در نوار مدیریت وردپرس مشاهده خواهید کرد.

پیش نمایش CSS Hero
پیش نمایش CSS Hero

با کلیک بر روی دکمه ، سایت شما به پیش نمایش زنده تبدیل می شود. اکنون می توانید نوار ابزار CSS Hero را مشاهده کنید.

انتخاب عنصر و اعمال تغییرات سفارشی با CSS Hero
انتخاب عنصر و اعمال تغییرات سفارشی با CSS Hero

انتخاب عنصر و اعمال تغییرات سفارشی با CSS Hero

در مرحله بعدی ، به سادگی بر روی هر عنصر در وب سایت خود کلیک کنید ، و CSS Hero ویژگی های CSS مورد استفاده توسط قالب خود را برای آن عنصر خاص نشان می دهد.

ویژگی های یک عنصر در CSS Hero
ویژگی های یک عنصر در CSS Hero

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

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

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

یافتن تصاویر از unsplash
یافتن تصاویر از unsplash

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

کدهای آماده CSS Hero
کدهای آماده CSS Hero

CSS Hero همچنین چند قطعه آماده دارد که می توانید آنها را روی عناصر مختلف وب سایت خود اعمال کنید. به سادگی به برگه Snippets در ستون سمت چپ بروید.

ذخیره تغییرات توسط CSS Hero
ذخیره تغییرات توسط CSS Hero

همانطور که در وب سایت خود تغییراتی ایجاد می کنید ، CSS Hero این تغییرات را به صورت خودکار ذخیره می کند اما آنها را منتشر نمی کند. برای اعمال این تغییرات در وب سایت زنده خود ، باید روی دکمه ذخیره و انتشار کلیک کنید.

انتشار تغییرات توسط CSS Hero
انتشار تغییرات توسط CSS Hero

نحوه لغو تغییرات در CSS Hero

یکی از بهترین ویژگی های CSS Hero توانایی لغو هر تغییری است که در هر زمان انجام می دهید. CSS Hero سابقه ای از تمام تغییراتی که در قالب خود ایجاد می کنید را نگه می دارد. برای دیدن لیست تغییرات کافیست بر روی دکمه history در نوار ابزار CSS Hero کلیک کنید.

لغو تغییرات CSS Hero توسط تاریخچه
لغو تغییرات CSS Hero توسط تاریخچه

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

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

اما اگر فقط بخواهید تغییراتی را که در مورد خاصی ایجاد کرده اید برگردانید چه می کنید؟

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

لغو تغییرات یک عنصر در CSS Hero

این مورد به تنظیمات پیش فرض تعریف شده توسط قالب وردپرس شما تغییر می کند.

سفارشی سازی سایت خود برای دستگاه های موبایل در CSS Hero

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

به سادگی بر روی نماد دسک تاپ در نوار ابزار CSS Hero کلیک کنید و سپس بر روی نوع دستگاه کلیک کنید. می توانید از بین دستگاه های تلفن همراه ، تبلت و دسک تاپ انتخاب کنید. قسمت Preview به دستگاه انتخابی شما تغییر می کند.

حالت نمایش در CSS Hero
حالت نمایش در CSS Hero

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

سازگاری قالب ها با CSS Hero

وب سایت رسمی CSS Hero لیستی از مضامین سازگار همیشه در حال رشد دارد. این لیست شامل بسیاری از بهترین تم های رایگان وردپرس است. همچنین محبوب ترین تم های برتر از فروشگاه هایی مانند CSSIgniter ، Themify ، StudioPress و غیره برخوردار است.

درباره قالب های موجود در لیست سازگاری قالب ها چه می توان گفت؟

CSS Hero با ویژگی ای به نام Rocket Mode Auto-Detection ارائه می شود. اگر از موضوعی استفاده می کنید که در لیست سازگاری طرح زمینه وجود ندارد ، CSS Hero به طور خودکار شروع به استفاده از حالت موشک می کند.

Rocket Mode سعی می کند انتخاب کنندگان CSS را از درون مایه خود به خودی خود حدس بزند. این در بیشتر مواقع کاملاً کارآمد است. اگر طرح زمینه شما از استانداردهای کدگذاری وردپرس پیروی می کند ، تقریباً می توانید همه موارد را ویرایش کنید.

همچنین ممکن است بخواهید با توسعه دهنده تم خود تماس بگیرید و از آنها بخواهید سازگاری با CSS Hero را ارائه دهند.

کدام پلاگین ها با CSS Hero سازگار هستند؟

CSS Hero به طور منظم با افزونه های برتر وردپرس برای سازگاری آزمایش می شود. این شامل پلاگین های فرم تماس ، سازندگان محبوب صفحه ، ووکامرس و سایر موارد است.

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

امیدواریم که بررسی CSS Hero توسط ما برای شما مفید واقع شده باشد.

منابع لاتین
_ WpBeginner
تیم تولید محتوا _ آلتیمیت وردپرس
ما در تیم تولید محتوای آلتیمیت وردپرس، سخت در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را برای شما فراهم کنیم. محتوای این صفحه توسط یوسف حسینی کنترل و بررسی خواهد شد.

One comment on “نقد و بررسی CSS Hero: سفارشی سازی وردپرس آسان شده است

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

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