CSS Hero Review: سفارشی سازی طراحی وردپرس آسان است

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

CSS Hero review

مرور CSS قهرمان ما h4>

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

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

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

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

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

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

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

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

این یک افزونه برتر وردپرس است که قیمت آن از 29 دلار برای یک سایت شروع می شود (با در نظر گرفتن زمان و دردسر بسیار ارزش صرف سرمایه گذاری را دارد ، شما را نجات می دهد).

از کد کوپن CSS Hero استفاده کنید: WPBeginner برای دریافت تخفیف ویژه 34٪ تخفیف. اگر در حال خرید طرح PRO هستید ، با همان کد 40٪ تخفیف چشمگیر به شما تعلق می گیرد.

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

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

CSS Hero button

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

CSS Hero live editor

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

Element properties

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

Editing properties

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

Editing styles for different elements using CSS Hero

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

Using royalty free images in your website's design

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

CSS hero ready-made snippets

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

Save and publish your changes

نحوه لغو تغییرات در قهرمان CSS h4>

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

CSS Hero history

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

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

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

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

Reset a single element

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

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

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

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

Editing in different device modes

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

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

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

در مورد مضامین موجود در لیست سازگاری قالب چطور؟ h4>

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

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

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

کدام افزونه ها با CSS Hero سازگار هستند؟ h4>

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

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

امیدواریم که قهرمان CSS ما را پیدا کنید بررسی مفید است. همچنین ممکن است بخواهید راهنمای نهایی ما را در مورد بهبود سرعت وردپرس و عملکرد برای مبتدیان.

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/.

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