CSS Hero إضافة الووردبرس شرح كامل 2020

CSS Hero هي اضافة لبرنامج ووردبريس تسمح لك بتصميم قالب ووردبريس الخاص بك دون كتابة سطر واحد من التعليمات البرمجية (لا يلزم وجود HTML أو CSS). وهذا بالطبع يكون بإستخدام وضع المعاينة الحية مع واجهة مستخدم رسومية سهلة. بزيارة موقع الاضافة

وغالبية مستخدمي ووردبريس ليسوا مطوري ويب. هؤلاء المستخدمون لا يعرفون الكثير من CSS / HTML لتعديل أو تخصيص مظهر مواقعهم. إذا لم يكن هناك خيار لتغيير شيء ما في موضوعهم ، مهما كان صغيراً أو سهلاً ، فهم عالقون فيه.

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

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

اعدادات CSS Hero :

تحتاج أولاً إلى تثبيت وتفعيل اضافة CSS Hero. ولكن الاضافة غير مجانية بل بسعر يبدأ من 29 دولارًا لموقع واحد (يستحق تمامًا الشراء مع الأخذ في الاعتبار الوقت والجهد الذي سيوفره لك).

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

الهدف من CSS Hero هو تزويدك بواجهة WYSIWG (ما تراه هو ما تحصل عليه) لتحرير المظهر الخاص بك. ما عليك سوى زيارة موقع الويب الخاص بك أثناء تسجيل الدخول ، وستلاحظ زر CSS Hero في شريط إدارة ووردبريس.

 

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

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

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

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

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

كيفية التراجع عن التغييرات في CSS Hero

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

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

ولكن ماذا لو أردت فقط إرجاع التغييرات التي أجريتها على عنصر معين؟

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

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

تخصيص موقعك للأجهزة المحمولة في CSS Hero :

الجانب الأكثر صعوبة في تصميم الويب هو توافق الجهاز. تحتاج إلى التأكد من أن موقعك يبدو رائعًا بنفس القدر على جميع الأجهزة وأحجام الشاشات. يستخدم مصممو الويب مجموعة متنوعة من الأدوات لاختبار توافق المتصفح والجهاز. من حسن حظك أن CSS Hero يأتي مع أداة معاينة مدمجة.

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

يمكنك الآن تعديل موقعك أثناء معاينته للأجهزة المحمولة. هذه الأداة مفيدة بشكل خاص لتعديل تصميم المظهر الخاص بك للجوال والأجهزة اللوحية.

التوافق مع قوالب CSS Hero :

يحتوي موقع CSS Hero الرسمي على قائمة متزايدة من الوقالب المتوافقة. تتضمن هذه القائمة العديد من أفضل قوالب ووردبريس المجانية. كما أن لديها أكثر القوالب المميزة شيوعًا من المتاجر مثل CSSIgniter و Themify و StudioPress والمزيد.

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

يحاول Rocket Mode تخمين محددات CSS من قالبك بمفرده. هذا يعمل بشكل مثالي في معظم الأوقات. إذا كان المظهر الخاص بك يتبع معايير ووردبريس للترميز ، فستتمكن من تعديل كل شيء تقريبًا.

تصميم قوائم التنقل في ووردبريس باستخدام css :

يستخدم قالب ووردبريس الخاص بك CSS لتصميم قوائم التنقل. يمكنك تصميم قوائم التنقل بالنقر فوق الزر CSS هيرو في شريط أدوات مسؤول ووردبريس.

سيؤدي النقر فوق الزر إلى نقلك إلى موقع الويب الخاص بك مع شريط أدوات CSS Hero عائم مرئي على الشاشة.

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

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

يمكنك النقر فوق أي خاصية تريد تغييرها. سيُظهر لك CSS هيرو واجهة بسيطة حيث يمكنك إجراء تغييراتك.

في لقطة الشاشة ، اخترنا الخلفية ، وأظهرت لنا واجهة رائعة لتحديد لون الخلفية والتدرج والصورة والمزيد.

أثناء إجراء التغييرات ، ستتمكن من رؤيتها مباشرة في معاينة القالب.

بمجرد أن تكون راضيًا عن التغييرات ، انقر فوق الزر حفظ في شريط أدوات CSS هيرو لحفظ التغييرات.

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

ما هي الإضافات المتوافقة مع CSS Hero؟ :

يتم اختبار CSS Hero بانتظام باستخدام أفضل اضافات ووردبريس من أجل التوافق. يتضمن ذلك اضافات لنماذج الاتصال ومنشئي الصفحات المشهورين و WooCommerce وغيرها.

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

إضافات خاصة بالإضافة :

1- تتيح لك أداة Color Picker اختيار الألوان من أي مكان تريده .

2-يمكنك  تصدير التغييرات التي قمت بها  في ملف CSS مصغر.

3- استخدم خصائص CSS المعقدة مثل التدرجات وظلال الصندوق وما إلى ذلك بسهولة.

4- مدمج لدعم 600+ من خطوط جوجل.

5- إعادة تعيين بسهولة إلى الإعدادات الافتراضية للموضوع الخاص بك.