مراجعة CSS Hero (2022): البرنامج المساعد # 1 Live WordPress Theme Editor Plugin
نشرت: 2022-03-17الموقع الإلكتروني هو أهم أداة تسويقية للأعمال التجارية. إنه أول انطباع لدى العملاء المحتملين عن شركتك. يمكن أن يساعدك موقع الويب المصمم جيدًا في جذب عملاء جدد واستمرار عودتهم
لذلك إذا كنت تبحث عن طريقة رائعة لتحسين تجربة مستخدم موقع الويب الخاص بك ، فيجب أن تفكر في استخدام CSS Hero.
من السهل أن تفهم أن سطرًا واحدًا من الشفرة غير الصحيحة أو فقدان فاصلة يمكن أن يفسد موقع الويب الخاص بك. لذلك مع معظم أدوات إنشاء الصفحات ، يمكنك بسهولة تخصيص موقع الويب الخاص بك بصريًا.
ومع ذلك ، لا يحب الجميع Elementor أو WP Bakery. بالنسبة لهم ، يعد CSS صداعًا لأن سمة WordPress قد لا تتمتع بقدرة التحرير التي تتطلبها.
للتغلب على هذه الصعوبات ، يمكنك استخدام البرنامج المساعد CSS Hero WordPress . يقوم تلقائيًا بإنشاء رمز CSS لموقع WordPress الخاص بك دون الحاجة إلى لمس سطر من الترميز.
أشارك أفكاري حول هذه الأداة الرائعة هنا. أيضا ، كيف تحقق أقصى استفادة منه.
يمكنك قراءة CSS Hero Vs Yellow Pencil: الأفضل مقارنة
مراجعة CSS Hero: مقدمة سريعة
CSS Hero هو محرر CSS مرئي يساعدك على إدارة وتخصيص مظهر موقع الويب الخاص بك. يوفر مجموعة من الأدوات لمساعدتك في إنشاء أنماط مخصصة وتطبيقها على عناصر محددة على صفحتك ، ومعاينة تأثيراتها في الوقت الفعلي.
الأدوات التي يوفرها هي فئات CSS ، والتي تتيح لك إضافة أنماط شائعة وأنماط مخصصة دون كتابة أي كود CSS. يتيح لك CSS hero تعديلها على أي حال ، بخلاف أداة إنشاء الصفحات حيث يمكنك إنشاء عناصر أو تحريرها من البداية.
تساعد ميزة التراجع والإعادة المبتدئين على ترقية أي سمة WordPress دون كسرها. يسمح لك المحرر المرئي بالنقر فوق العناصر ومشاهدة التغييرات في المعاينة المباشرة.
يضيف CSS Hero جميع الرموز في ملف منفصل ، لذلك لا داعي للقلق بشأن فقدان خصائص CSS إذا قمت بتغيير أي شيء.
إلى جانب ذلك ، يمكنك إضافة تغييرات خصائص CSS المخصصة في سمة الطفل وتنفيذ ذلك في أي وقت أو على أي موقع ويب آخر.
الميزات الرئيسية لبطل CSS نظرة سريعة
CSS Hero هو محرر Visual CSS بدون تشفير. يمكن لكل من مطوري CSS المبتدئين والخبراء الاستفادة من الفوائد منه. ولجعلها قابلة للاستخدام لكليهما ، فقد أضافوا الكثير من الميزات. هنا قائمة هؤلاء.
- واجهة مستخدم بسيطة
- الكثير من التخصيص
- الأنماط الجاهزة
- مفتش بطل CSS
- نمط CSS المعقد
- منتقي الألوان يحمل في ثناياه عوامل
- الرسوم المتحركة
- تم إنشاء CSS
- البصمة الخفيفة
- أضف صور الخلفية
- المعاينة المباشرة للهاتف المحمول مع وضع الكمبيوتر اللوحي
- أكثر من 600 خط
- خلفية فيديو لأي قسم
- محرر Visual JS
- المعاينات الحية
- مقتطف مدمج
- مكتبة لوح الألوان
- إزالة الانسداد لتحرير أي جزء من الموقع
- تصميم صفحة تسجيل الدخول
- سجل سير العمل
إلى جانب كل هذه الميزات الممتازة ، تحصل أيضًا على بعض المكافآت مع الاشتراكات المميزة.
- مدير استعلام الوسائط: يسمح هذا بتعيين وسائط مختلفة لأجهزة مختلفة.
- CSS Code Exporter: تصدير الأكواد من موقع المرحلة إلى الموقع المباشر.
- وضع التحويم: يتضمن الإصدار الجديد معاينة وضع التمرير.
كيفية استخدام البرنامج المساعد CSS Hero؟
CSS Hero هو مكون إضافي ممتاز تحتاج إلى تثبيته يدويًا على موقع WordPress. إنه يعمل مثل منشئ الصفحة Elementor. يجب عليك فتح الصفحة التي تريد تحريرها والنقر فوق الزر "CSS Hero".
بعد النقر على الزر ، سيظهر شريط جانبي أيسر مع الوثائق. يمكنك قراءة الوثائق التي تشرح أساسيات بطل CSS.
تقول بشكل أساسي أن CSS Hero عبارة عن مكوّن إضافي لمحرر WYSIWYG CSS متقدم WordPress يساعدك في التخصيص المتقدم للموضوع.
انقر فوق أي عنصر ، وسترى خيارات قابلة للتخصيص على الجانب الأيسر وأسفل الشاشة. ثم يمكنك تغيير الخلفية ، والخطوط ، والحشو ، والرسوم المتحركة ، والتدرج ، وأي شيء تريده.
أيضًا ، إذا كنت تريد إنشاء زر بطل لأي رابط ، فيمكنك استخدام ميزة المقتطف الخاصة به. يمكنك إضافة الظل المسقط ، والفاصل ، وأيقونات الأزرار ، وليس مجرد زر.
إذا كنت تريد ، يمكنك إضافة رسوم متحركة إلى العناصر أيضًا. تعد إضافة الرسوم المتحركة سهلة للغاية باستخدام محرر CSS المرئي ؛ انقر فوق العناصر ، وانتقل إلى الشريط الجانبي الأيسر ، وأضف الرسوم المتحركة.
نظرة أساسية على الواجهة:
لا يحتوي CSS Hero على أي منطقة إعدادات مخصصة. بدلاً من ذلك ، يستخدم واجهة أمامية بسيطة. الواجهة هي في الغالب المعاينة الحية للموقع.
بعد النقر على " زر CSS Hero " ، سترى القائمة وأداة المفتش على اليسار. يمكنك الحصول على جميع أدوات العرض سريعة الاستجابة في الجزء العلوي الأوسط ، ويحتوي الجزء العلوي الأيمن على التراجع والإعادة والمحفوظات والأدوات.
ستتمكن من العثور على محرر JS وتكامل الفيديو في الأسفل مع ميزات أخرى. أيضًا ، سيؤدي وضع المؤشر فوق عنصر ما إلى إظهار منطقة المحتوى ، وسيفتح النقر بزر الماوس الأيمن أو النقر بزر الماوس الأيسر علامات تبويب الإعدادات.
بشكل عام ، تعد واجهة المستخدم سهلة الاستخدام للغاية للمبتدئين وليست مربكة جدًا لتضيع في الإعدادات.
مراجعة CSS Hero: نظرة عامة على الميزات
خيارات التخصيص / محرر CSS Hero:
ستحصل على 3 إعدادات تخصيص في قائمة CSS Hero: الخصائص والمقتطفات والرسوم المتحركة. تحتوي الخصائص على معظم ميزات التحرير. يمكنك تغيير لون الخلفية ونمط الخط ولون الخلفية والتحول.
تتم إضافة المساحة المتروكة والحدود والتباعد وإظهار العناصر وإخفائها وتحديد المواقع والقياسات ، كل هذه التحرير تحت علامة تبويب الخصائص.
يحتوي Snippet على أزرار معدة مسبقًا ويسقط الظل والفواصل وفنون الخلفية وما إلى ذلك. يمكنك إضافة تصميمات متعددة إلى عنصر واحد.
أيضًا ، من خلال إنشاء مجموعات من الإعدادات المختلفة ، يمكنك الخروج بتصميمات جديدة. تتيح لك علامة تبويب الرسوم المتحركة إضافة رسوم متحركة مختلفة مثل التلاشي والتلاشي وما إلى ذلك.
معاينة مستجيبة:
يحتوي CSS Hero على 4 أنواع من إعدادات التصميم سريعة الاستجابة . يمكنك جعل موقع الويب الخاص بك مستجيبًا لجميع الأجهزة مثل إعدادات استجابة سطح المكتب والجهاز اللوحي والجوال.
ليس ذلك فحسب ، بل يمكنك أيضًا التعديل وفقًا للوضع الأفقي والعمودي للجوال والكمبيوتر اللوحي. يمكنك أيضًا إخفاء قسم معين لأي جهاز.
على سبيل المثال ، يمكنك إخفاء مقطع فيديو قسم البطل للتحميل السريع على الهاتف المحمول. من ناحية أخرى ، قم بإخفاء زر الاتصال على سطح المكتب.
مدير الاستعلام الإعلامي:
يجعل CSS Hero جميع الشفرات مستجيبة للأجهزة المختلفة. ومع ذلك ، فإنه يوفر Media Query Manager للتحرير اليدوي أيضًا.
على سبيل المثال ، إذا كنت تريد أن تظهر صورة على سطح المكتب ولكن لا تظهر على الهاتف المحمول ، فيمكنك القيام بذلك من هنا. يمكنك أيضًا تغيير أبعاد الصورة أو القسم للجوال.
أداة CSS Hero Inspector:
أداة CSS Hero inspector هي أحد الأصول لمطوري الويب. يمكنك تحسين أكواد CSS الخاصة بك هنا. ما لم تكن أحد محددات CSS الجيدة ، فقد لا يعمل هذا جيدًا.
ومع ذلك ، فإن هذه الميزة تأتي فقط في خطة Pro وما فوق. ما لم تكن مهتمًا جدًا بالحفاظ على كود CSS نظيفًا ، فلن تحتاجه.
مصدر كود CSS:
هذه ميزة رائعة لمطوري مواقع الويب. يمكنك تحرير موقع الويب التجريبي أو المرحلي وتصدير جميع التعليمات البرمجية في ملف. أضف هذا الملف الذي يمكنك استيراده إلى موقع الويب المباشر ، وسيتم إصلاح جميع CSS دون الحفاظ على الموقع تحت الصيانة.
تراجع / إعادة سجل المراجعة:
أثناء تحرير موقع الويب ، ستخرج بتصميمات لن تعجبك أولاً ، لكنك قد ترغب في التراجع بعد إجراء بعض التغييرات. هناك زر التراجع والإعادة في متناول يدي.
إذا ارتكبت خطأ ، بأي فرصة ، فإن نقرة واحدة على زر التراجع عن زر CSS البطل يصلح كل شيء. أيضًا ، إذا كنت ترغب في المقارنة بين التغييرات ، فإن ميزة الإعادة والتراجع تعمل مثل السحر في محرر CSS المباشر.
أنا أحب زر التاريخ أكثر. افترض أنك تريد الانتقال إلى أي جزء من التحرير أثناء التحقق من التحسين. لذلك ، يمكنك النقر فوق أي جزء من محددات CSS ومشاهدة التغييرات التي أجريتها حتى النهاية.
تكاملات CSS Hero:
بعد التحديثات الجديدة في الإصدار 5 ، أصبح CSS Hero الآن أكثر من مجرد مكون إضافي لمحرر WordPress CSS. يمكنك التعامل مع كود JS ودمجه مع العديد من مكتبات JS. يمكنك أيضًا التحقق من ميزة Page Inspector التي تعرض لك كود HTML وراء الكواليس.
بما في ذلك ، يأتي مع تكامل Unsplash و Coverr المدمج. سيوفر Unsplash صورًا غير محدودة بدون حقوق ملكية ، بينما يوفر Coverr مقاطع فيديو.
أداء CSS Hero:
أثناء تحسين تصنيفات محرك البحث ، يمكن أن تكون سرعة التحميل مصدر قلق كبير. لكن يمكنني أن أخبرك من التجربة أنها لا تجعل موقع الويب بطيئًا بشكل سيئ.
نظرًا لأن CSS Hero يستخدم ملف CSS ثابتًا واحدًا ، فلا يستغرق أي مساحة. في الواقع ، يتضمن هذه الرموز في ملف ورقة CSS الموجود لديك.
بشكل عام ، لن يقوم CSS Hero بتحويل سرعة تشغيل موقعك مثل أي مكون إضافي آخر منشئ الصفحات. لذلك يمكنك استخدام هذا دون قلق.
مراجعة CSS Hero: إيجابيات وسلبيات
نعلم جميعًا أن CSS هي واحدة من أفضل إضافات محرر WordPress CSS. ومع ذلك ، يحتوي كل شيء على بعض الميزات الجيدة وغير الجيدة.
على سبيل المثال ، لم يعد تعلم كود CSS إلزاميًا مع محرر CSS Hero. إليكم ما أحبه ولست راضياً كثيراً عن CSS Hero.
الايجابيات
- نقرة بسيطة وتحرير عناصر من الشريط الجانبي المنبثق
- يعمل على أي سمة WordPress تقريبًا للتخصيص
- يدعم Multisite لـ WP
- لا يرتكب أي خطأ في CSS
- أضف محرر CSS مباشر مخصص إضافي
- لا حاجة لتعلم كود CSS
- أوراق الأنماط مسبقة الصنع للعمل بشكل أسرع
- قائمة البطل الصديقة للمبتدئين والتوثيق
سلبيات
- الدعم المباشر مفقود
- لا توجد ميزة لإضافة أو إنشاء طبقة CSS جديدة
دعم وتوثيق CSS Hero
قد يفوتك الدعم المباشر على هذا البرنامج المساعد الرائع لمحرر WordPress CSS ، لكن الوثائق مفصلة جيدًا.
يمكنك الحصول على كل شيء في أقسام جيدة التنظيم. تتيح لك "الخطوات الأولى" فهم المكون الإضافي وتثبيته بشكل صحيح ، وتظل ميزة " Feature Highlight Videos " متوافقة مع الإعدادات.
تأتي كل مقالة أيضًا مع برنامج تعليمي يمكنك من الوصول إلى مقاطع فيديو مجانية على قناتهم على YouTube.
كم تكلفة CSS Hero؟
يتوفر المكون الإضافي CSS Hero WordPress بـ 4 أسعار. يبدأ من 29 دولارًا أمريكيًا في العام حزمة بداية إلى 599 دولارًا أمريكيًا لصفقة مدى الحياة. بالنسبة إلى عمل واحد ، يمكنك الحصول على 29 دولارًا في السنة وبالنسبة للوكالات ، فإن 99 دولارًا في السنة هي صفقة ممتازة.
ملاحظة : أثناء كتابة المراجعة ، كانوا يقدمون عرضًا للخصم.
بدائل CSS Hero
CSS Hero عبارة عن مكون إضافي لبرنامج WordPress لإطار التكوين المميز ، وهو أحد أفضل المكونات. ومع ذلك ، إذا كنت تريد التنافس معهم ، فلن يكون هناك سوى عدد قليل جدًا من البدائل.
أهم بدائل CSS Hero هي:
- قلم رصاص أصفر
- Siteorigin CSS
- ميكروثيمر
هؤلاء هم منافسوها المباشرون. ومع ذلك ، يقدم CSS Hero صفقة أفضل إلى حد ما مقارنة بالآخرين.
الأسئلة الشائعة حول CSS Hero
هل يعمل CSS Hero مع أي سمة WordPress؟
على ما يبدو ، يعمل CSS Hero على كل سمة شائعة تقريبًا في WP repo. كما أنه يعمل مع السمات المميزة مثل DIVI. قد يكون هناك بعض السمات حيث قد لا يعمل المكون الإضافي لمحرر WordPress CSS كما يحلو لك.
قد لا يعمل على كل عنصر من عناصر السمة ، ولكن طالما أن السمة تعمل على إضافات ووردبريس لإطار التكوين الأخرى ، فأنت على ما يرام.
هل CSS Hero هو الحل المناسب لك؟
إذا كنت مهتمًا بتطوير موقع WordPress ، فإن الأمر يستحق الحصول عليه. أولاً ، ليس عليك تعلم كود CSS ، ولا يرتكب أي أخطاء في الترميز.
أيضًا ، ستتمكن من تحرير كود JS باستخدام المحرر المرئي. إن النظر إلى المراجعة الرائعة للمستخدم سيجعل من السهل عليك تحديدها.
هل يعمل CSS Hero مع WooCommerce؟
نعم. يعمل بشكل جيد مع WooCommerce. ليس ذلك فحسب ، فهو يعمل مع معظم المكونات الإضافية ومنشئي الصفحات المشهورين. إذا كنت تريد أن تعرف ، دعني أقول إنها تعمل مع Gravity Forms و Slider Revolution و Visual Composer وغيرها الكثير.
هل يعمل CSS Hero مع إضافات منشئ الصفحة مثل Elementor؟
إنه يعمل مع كل مكون إضافي منشئ الصفحات الشهير. Elementor و Beaver Builder و genesis framework و WP Bakery هي بعض منها.
ماذا يحدث إذا انتهت خطتي؟
لا يهم ما هي الخطة التي تحصل عليها ما لم تحصل على صفقة مدى الحياة. ستحصل على دعم وتحديثات لمدة عام. إذا انتهت صلاحية خطتك ، فستظل قادرًا على استخدام المكون الإضافي ، لكنك لن تحصل على أي ترقية.
هل يبطئ CSS Hero موقع الويب الخاص بك؟
يعد امتلاك موقع ويب خفيف الوزن عاملاً مهمًا في تحسين تصنيفات محرك البحث. على الرغم من أن CSS Hero يضيف ورقة CSS للواجهة الأمامية ، فهو مكون إضافي لمحرر WordPress CSS خفيف جدًا. بشكل عام ، لا يبطئ موقع الويب الخاص بك بشكل كبير.
ما هي متطلبات المتصفح والخادم لتشغيل البرنامج المساعد CSS Hero؟
سيكون من الأفضل إذا كان لديك أحدث متصفح ويب chrome للعمل بسهولة. يمكنك أيضًا العمل في أحدث متصفح Firefox أو Safari. يعمل المكون الإضافي بشكل مثالي على أحدث إصدارات / بيئات Linux و Apache و MySQL و PHP. يجب أن يكون لديك خطة استضافة على أي من هذه الخوادم.
مراجعة CSS Hero: الأفكار النهائية
شارك معظم مستخدمي هذا المكون الإضافي تعليقاتهم الرائعة حوله. يعجبني أيضًا بسبب السعر والميزات التي يقدمها. كمبتدئ لا يعرف الكثير عن ترميز CSS ، يجعل CSS hero من السهل تحرير وتصميم موقع الويب الخاص بي.
لا تحتاج إلى مطور خبير لاستخدام الأداة لأنها تشرح نفسها تقريبًا - الشيء الوحيد الذي يفتقد دعم الدردشة الحية. ومع ذلك ، إذا كنت شخصًا لديه الآن موقع ويب ويفعل كل شيء بمفردك ، فإن CSS Hero يعد استثمارًا جيدًا.
