الأخبار التكنولوجية والاستعراضات والنصائح!

مراجعة CSS Hero: قم بتحرير CSS لموضوع WordPress الخاص بك دون تعلم كيفية البرمجة

ستساعدك المقالة التالية: مراجعة CSS Hero: قم بتحرير CSS لموضوع WordPress الخاص بك دون تعلم كيفية البرمجة

إذا لم تكن على دراية بهذا الاختصار المكون من ثلاثة أحرف في عنوان المنشور، فإن CSS هي لغة ترميز تجعل من السهل تصميم كل جانب من جوانب مظهر موقع WordPress الخاص بك. إنها قوية للغاية وتتيح لك تخصيص موقعك إلى مستوى لا يمكن أن يضاهيه أي قالب أو لوحة خيارات المكونات الإضافية…

ولكن كانت هناك دائمًا مشكلة واحدة في استخدام CSS لتحرير موقع WordPress الخاص بك:

لا يمكن للمستخدمين العاديين الوصول إليه لأنه يتطلب معرفة متخصصة بالبرمجة. وحتى إذا اكتسبت بعضًا من هذه المعرفة، فقد تستغرق الكثير من الوقت إذا لم تكن خبيرًا في CSS.

بطل CSS هو مكون إضافي لبرنامج WordPress يعمل على حل نقاط الألم هذه.

فهو يوفر لك واجهة بسيطة وسهلة للمبتدئين حيث يمكنك تحرير كل عنصر على موقعك بسرعة.

إذا كنت مستخدمًا عاديًا، فيمكنك الالتزام بالواجهة الرسومية حيث ستتمكن من تطبيق الأنماط باستخدام القوائم المنسدلة البسيطة ومنتقيات الألوان – لا يلزم معرفة فعلية بـ CSS. وإذا كنت مطورًا، فيمكنك أيضًا الاستفادة من محرر التعليمات البرمجية الموجود في لوحة المعلومات لتطبيق تعديلاتك الخاصة بسرعة أيضًا.

في مراجعتي وتعليمي لـ CSS Hero، سأوضح لك أولاً كيف يمكنك استخدام CSS Hero لتخصيص قالب WordPress الخاص بك (والمكونات الإضافية!). بعد ذلك، سأقدم لك بعض أفكاري الخاصة حول البرنامج المساعد في النهاية.

كيف يعمل CSS Hero (على مستوى عالٍ)

سأبدأ بإلقاء نظرة سريعة عالية المستوى على كيفية عمل CSS Hero. بعد ذلك، سأنتقل إلى طريقة أكثر تفصيلاً في الأقسام التالية.

بشكل أساسي، يمنحك CSS Hero واجهة محرر مباشرة لإجراء تغييراتك. على اليسار والأعلى، تحصل على قائمتين. وفي الجزء الأكبر من شاشتك، ستشاهد معاينة مباشرة لموقعك:

لتحرير عنصر على موقعك، ما عليك سوى النقر عليه في المعاينة المباشرة. بعد ذلك، ستتمكن من استخدام الشريط الجانبي لتطبيق أنماط جديدة باستخدام القوائم المنسدلة ومنتقيات الألوان والخيارات الأخرى المناسبة للمبتدئين:

سهل بما فيه الكفاية، أليس كذلك؟

كيفية استخدام CSS Hero لتخصيص قالب WordPress الخاص بك

حسنًا، حان الوقت الآن للانتقال إلى بعض الأمثلة الفعلية.

لنفترض أنك تريد تغيير لون كل عنوان منشور على موقعك. مع CSS Hero، كل ما عليك فعله هو:

  • انقر على عنوان المنشور في المعاينة المباشرة لموقعك
  • استخدم ال الطباعة علامة التبويب لاختيار لون جديد

هذا كل شيء! يشاهد:

وهذا مثال بسيط…

لذلك دعونا نصبح أكثر إبداعا …

الآن، لنفترض أنك تريد إضافة حد حول اتصال في قائمة التنقل العلوية بموقعك لجذب الانتباه إليه. هذا شيء قمت به على موقع محفظتي وتلقيت بعض التعليقات المختلفة التي تسألني عن كيفية القيام بذلك.

حسنًا، باستخدام CSS Hero، ما عليك سوى النقر بزر الماوس الأيمن على رابط قائمة الاتصال وتحديده هذا فقط:

عن طريق اختيار هذا فقط، فأنت تخبر CSS Hero أنك تريد التحرير فقط، وليس الجميع روابط التنقل ().

بمجرد الانتهاء من ذلك، يمكنك تطبيق الحدود بسرعة باستخدام الواجهة الرسومية:

سهل جدا!

ترى الفرق؟ عندما تنقر بزر الماوس الأيسر للتو – تحدد مثيلًا لهذا النوع من الارتباط. ولكن عند النقر بزر الماوس الأيمن، يمكنك تحديد مثيل محدد فقط.

يمكنني الاستمرار في عرض المزيد من الأمثلة لك …ولكن بصراحة، الأمر نفسه تقريبًا بالنسبة لكل عنصر لأن كل ما عليك فعله هو “النقر على → النمط”.

في المجمل، يوفر لك CSS Hero 7 أقسام لخيارات التصميم:

  • خلفية
  • الطباعة
  • الحدود
  • نصف قطر الحدود
  • المباعدة
  • القوائم
  • إضافي

هناك أيضًا بعض الخيارات المفيدة عند إجراء تغييرات فردية. على سبيل المثال، إذا كنت تقوم بتعديل الألوان، فيمكنك الوصول إلى لوحات الألوان المعدة مسبقًا لجماليات تصميم معينة:

أصبح أكثر تقدمًا مع واجهة CSS Hero

بالإضافة إلى واجهة “Click → Style” البسيطة، إليك بعض الأشياء الأكثر تقدمًا التي يمكنك القيام بها باستخدام CSS Hero.

التحكم في التصميم المستجيب للأجهزة المختلفة

إذا قمت بالنقر فوق جهاز أيقونة، يمكنك القيام بأمرين:

  • قم بإعداد “استعلامات الوسائط” الخاصة بك. إذا لم تكن على دراية بماهية استعلام الوسائط، فهو يتيح لك بشكل أساسي التحكم في كيفية ظهور موقعك على الأجهزة المختلفة. على سبيل المثال، يمكنك إعداد استعلام وسائط واحد لاستهداف “smartphones”.
  • اختر من استعلامات الوسائط المعدة مسبقًا للأجهزة الشائعة.

هذه الميزة قوية للغاية. إليكم السبب:

إذا قمت بتحديد أحد الأجهزة المختلفة، فستشاهد معاينة مباشرة لموقعك على هذا الجهاز.

ولكن الأهم من ذلك، أي تعديلات تجريها أثناء وجودك في هذا الوضع ستنطبق فقط على هذا الجهاز المحدد.

على سبيل المثال، يمكنك تغيير حجم الخط لمحتوى منشورك ولكن فقط للهواتف المحمولة. أو يمكنك إخفاء زر CTA ولكن فقط على الأجهزة المحمولة. أو قم فقط بإجراء أي تعديل آخر على CSS لأجهزة معينة!

أضف الخطوط المخصصة الخاصة بك لاستخدامها على موقعك

يمنحك CSS Hero بالفعل إمكانية الوصول إلى مجموعة من الخطوط. ولكن إذا كنت تريد إضافة المزيد من الخطوط من Google Fonts أو Adobe Typekit، فيمكنك القيام بذلك من خلال Font Manager المضمن:

العمل مع CSS مباشرة (إذا كنت تعرف CSS بالفعل)

يعد CSS Hero رائعًا لأنه يتجاوز الحاجة إلى فهم كود CSS الأساسي. ولكن إذا كنت تفهم CSS بالفعل، فإن CSS Hero يتضمن أيضًا بعض الميزات الرائعة التي يمكنها تسريع سير عملك.

أولاً، يمكنك الوصول إلى محرر التعليمات البرمجية الكامل الذي يمكنك توسيعه/طيه حسب الحاجة. عندما تنقر على عنصر في المعاينة المباشرة، سيضيف CSS Hero تلقائيًا المحدد المناسب:

يمكنك أيضًا تكبير هذا المحرر إذا كنت تريد مساحة أكبر. وإذا قمت بإطلاق كامل مفتش الواجهة، يمكنك استخدام بناء جملة LESS CSS، أيضًا ():

أخيرًا، يتضمن CSS Hero أيضًا طريقة رسومية لإضافة محددات CSS الخاصة بك:

استخدم المقتطفات والمتغيرات لتسريع سير عملك

مقتطفات و المتغيرات هناك مفهومان رائعان يمكن للمبتدئين الوصول إليهما ويمكنهما تسريع سير عملك:

  • مقتطفات – يتم حفظ المقتطفات، وتعديلاتها القابلة لإعادة الاستخدام والتي يمكنك تطبيقها بسرعة “أثناء التنقل”. يتضمن CSS Hero مجموعة من المقتطفات المضمنة، ولكن يمكنك أيضًا حفظ تعديلاتك لإعادة استخدامها لاحقًا.
  • المتغيرات – تساعدك المتغيرات على التحكم في القيم شائعة الاستخدام. على سبيل المثال، يمكنك حفظ اللون الأساسي لعلامتك التجارية كمتغير. بعد ذلك، يمكنك استخدام هذا المتغير في كود CSS الخاص بك بدلاً من ترميز اللون الفعلي. وتتمثل الفائدة في أنه إذا كنت بحاجة إلى تغيير لون علامتك التجارية في المستقبل، فستحتاج فقط إلى تعديل المتغير مرة واحدة، بدلاً من تحرير كل مثيل على حدة كما تفعل إذا قمت بترميز اللون بشكل ثابت.

على سبيل المثال، للحصول بسرعة على زر ذو مظهر رائع، يمكنك فقط تطبيق أحد مقتطفات الأزرار المضمنة بدلاً من إجراء جميع تعديلات CSS بنفسك:

ويمكنك بسهولة حفظ وإدارة المتغيرات عبر الواجهة الرسومية:

Switch بين أوضاع التحديد والتنقل للتصفح إلى الصفحات الأخرى

افتراضيًا، في كل مرة تنقر فيها على عنصر في موقعك، سيحدد CSS Hero هذا العنصر لتحريره.

ولكن ماذا لو كنت تريد الانتقال إلى صفحة مختلفة لتصميم تلك الصفحة؟

بدلاً من الحاجة إلى إعادة تحميل محرر CSS Hero، يمكنك فقط تبديل ملف انقر فوق الوضع من يختار ل التنقل:

في التنقل الوضع، يمكنك النقر للتصفح حول موقعك. وبعد ذلك، عندما تكون مستعدًا للعودة إلى التحرير، ما عليك سوى التبديل مرة أخرى إلى حدد الوضع.

إدارة المراجعات واستخدام التراجع/الإعادة

ميزة أخرى للواجهة! إذا ارتكبت أي خطأ، يمكنك استخدام أزرار القائمة العلوية للتراجع عن/إعادة تغيير فردي. ويمكنك أيضًا الوصول إلى سجل المراجعة التفصيلي للرجوع إلى أبعد من ذلك:

يمكنك استخدام CSS Hero لتخصيص مخرجات البرنامج الإضافي أيضًا!

هل سبق لك أن قمت بتثبيت مكون إضافي يقوم بذلك…ولكن الإخراج على الرغم من أنه مثالي؟

وهذا شيء شائع بشكل خاص مع المكونات الإضافية المجانية. وهي أيضًا نقطة ألم يمكن لـ CSS Hero التخلص منها تمامًا.

في الأساس، كل ما ذكرته بالتفصيل أعلاه ينطبق على مكوناتك الإضافية أيضًا.

على سبيل المثال، إليك ما يبدو عليه تصميم تصميم منشئ الصفحة Elementor:

وإليك ما يبدو عليه تخصيص نموذج نموذج الاتصال 7:

وداعًا لإخراج البرنامج المساعد القبيح إلى الأبد!

ثلاثة أشياء محددة ستعجبك في CSS Hero

في هذه المرحلة، أتمنى أن تكون لديك فكرة جيدة عن كيفية عمل CSS Hero. الآن، سأنتقل أكثر قليلًا إلى جزء مراجعة CSS Hero مع بعض الأشياء المحددة التي أعتقد أنها ستعجبك:

1. عملية اختيار العنصر بسيطة وخالية من الأخطاء

أنا أعتبر نفسي ماهرًا في استخدام CSS، ولكن لا يزال من الممكن أن أجد صعوبة في العثور على محدد CSS المناسب في بعض الأحيان. أعتقد أنني لست الوحيد أيضًا…

لكن مع CSS Hero، يمكنك دائمًا اختيار المحدد الصحيح من المحاولة الأولى. لذلك، حتى إذا كنت تفضل العمل مباشرة مع CSS بدلاً من الخيارات الرسومية لـ CSS Hero، أعتقد أنه قد يؤدي إلى تسريع سير عملك فقط بسبب مدى سهولة التنقل بين المحددات ().

2. يمكنك استخدام أوضاع التحرير المتعددة

عند الحديث عن التحرير المباشر لـ CSS، فأنا أحب أن CSS Hero لديه ما يقدمه لكل من المستخدمين العاديين والمطورين.

إذا لم تكن لديك أي فكرة عن كيفية عمل CSS، فيمكنك فقط تصغير محرر التعليمات البرمجية وإجراء جميع تعديلاتك من خلال الواجهة الرسومية باستخدام القوائم المنسدلة ومنتقيات الألوان وما إلى ذلك.

ولكن إذا كنت تعرف كيفية استخدام كود CSS، فيمكنك استخدام محرر الكود وأدوات المفتش للعمل مباشرة مع الكود.

وهذا ليس سيناريو “سيد كل المهن على لا شيء” أيضًا. أعتقد حقًا أن CSS Hero يقوم بعمل رائع في .

3. يمكنك تصدير كود CSS النهائي الخاص بك وتعطيل المكون الإضافي

أخيرًا، يعجبني أن CSS Hero لا يقيدك أبدًا. في أي وقت، يمكنك تصدير كل تعليمات CSS البرمجية الخاصة بك من مفتش أداة:

يمكنك تصدير:

  • عادي CSS
  • CSS المصغر
  • ملف مشروع JSON

لذا، يمكنك تصميم موقعك باستخدام CSS Hero. وبعد ذلك، بمجرد الانتهاء من كل شيء، يمكنك:

  • قم بتصدير كود CSS الخاص بك
  • قم بإضافته مباشرة إلى ورقة أنماط قالب WordPress الخاص بك
  • احذف المكون الإضافي CSS Hero من موقعك

شيء واحد يجب مراعاته حول CSS Hero

هناك ميزة غريبة في CSS Hero تؤثر على سير عملك:

يتطلب CSS Hero اتصالاً نشطًا بالإنترنت حتى يعمل.

لذا، إذا كنت تعمل في أي وقت مضى على مواقع على مضيف محلي في بيئة لا يوجد بها إنترنت، فلن تتمكن من استخدام CSS Hero.

هذا مكان جميل. وإذا كنت تخطط للعمل على موقع الويب المباشر الخاص بك طوال الوقت، أو لا تعرف ما أعنيه بـ “المضيف المحلي”، ربما لن تواجه هذه المشكلة أبدًا.

سعر CSS Hero: ما هي التكلفة؟

جميع خطط CSS Hero كاملة الميزات – والفرق الوحيد هو عدد المواقع التي تدعمها كل خطة:

  • 1 موقع – 29 دولارًا
  • 5 مواقع – 59 دولارًا
  • 999 موقعا – 199 دولارًا

تأتي جميع الخطط مع عام واحد من التحديثات والدعم أيضًا.

مراجعة CSS Hero: الأفكار النهائية

سواء كنت مبتدئًا أو خبيرًا في CSS، أعتقد أن CSS Hero لديه ما يقدمه. فهو لا يصنع CSS فحسب، بل يصنع CSS أيضًا. لذلك بغض النظر عن أي من هذين الأمرين الذي تسعى إليه، يمكنك الاستفادة.

أنا أيضا أحب ذلك يعمل على الإضافات. يعد جعل محتوى المكونات الإضافية يبدو أمرًا يعاني منه الكثير من مستخدمي WordPress، لذا فإن الأداة التي يمكن الوصول إليها مفيدة للغاية.

بالإضافة إلى ذلك، إذا كنت شخصًا يرغب في التحسن في CSS الفعلي، فإن CSS Hero رائع بهذه الطريقة أيضًا. نظرًا لأنه يمكنك استخدام كل من المحرر الرسومي ومحرر التعليمات البرمجية، يمكنك التعرف على CSS من خلال دراسة كيفية اتصال التعليمات البرمجية الأساسية بالأشياء التي تقوم بها في المحرر الرسومي.

بشكل عام، إذا شعرت يومًا ما أنك مقيد بخيارات تخصيص القالب والمكونات الإضافية الخاصة بك، أو إذا كنت تريد فقط طريقة لتسريع كيفية إنشاء مواقع WordPress، فقم بإلقاء نظرة على CSS Hero.

يقدم CSS Hero مجموعة من العروض التوضيحية للموضوعات والمكونات الإضافية على موقعه، حتى تتمكن من تجربة المحرر الكامل قبل فتح محفظتك!