ما تفعله هذه الصفحة

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

فكّر به مثل محرر بصري الذي يجلس على قمة موقعك، السماح لك أن تشير ونقر لجعل التغييرات التصميمية على الفور.

[Screenshot: page-overview]

كيف يُصبحُ هنا

Navigate to فريق أمين النماذج مدير نموذج

فهم الصفحة

عندما تفتحين أول مديرة الصف، سترى منطقتين رئيسيتين جنبا إلى جنب:

الفريق اليساري: محرر صفاء

هذه هي لوحة التحكم الخاصة بك مع سبعة تابوتات لخيارات مختلفة لكتابات:

• الألوان - الألوان والخلفيات (بما في ذلك التدرجات)
• رسم الخرائط - فونتات، أحجام، وصيغة نصوص
• Spacing - رسوم و هوامش
• الحدود - أساليب الحدود، واللوان، والظلال
• # - أماكن التلاعب، والوضع، والمزلاج
• الآثار -السلامة والتحولات والمرشحات
• الحجم - نسب الزوجة والطول والجانب

عندما تختارين عنصراً في موقعك هذه اللوحة تظهر النمط الحالي وتجعلك تغيرينها

الفريق اليميني:

هذا يُظهر موقعك الفعلي في نافذة ما قبل المقابلة يمكنك:

• الملاحة في صفحات مختلفة
• نقر العناصر لاختيارها وأسلوبها
• النضال بين الحواسيب المكتبية والملفات والآراء المتنقلة
• التحول بين النور والطرق المظلمة
• شاهدْ تغييراتَكَ فوراً بينما تَجْعلُهم

الضوابط الرئيسية

ويشتمل البار على ما يلي:

• مودي النور/الطريق المظلم أزرار - اختر أي طريقة تحررها -
• أنقذوا الجميع -أنقذوا كل تغيرات أسلوبكم
• Reset All - إزالة جميع أساليب العرف وبدء الطازجة

المهام المشتركة

كيف لـ (ستايل)

هذا هو سير العمل الأساسي الذي ستستخدمه في جميع المهام المتشابكة.

1. اضغط Edit Mode الزر (إكور إيكون) في مقياس ما قبل المقابلة
2. مؤشر "الحركة النشيطة" الأخضر يظهر على قمة شاشتك
3. نقل الفأر الخاص بك على العناصر في ما قبل الاستعراض - أنها سوف تبرز مع المخطط الأزرق.
4. إضغط على عنصر لاختياره
5. سترى معلومات عن العنصر المختار في أعلى اللوحة اليسرى
6. (ب) استخدام المقتنيات (المالكون والطباعة، وما إلى ذلك) لتغيير ما تبدو عليه.
7. راقبي تغيراتك تظهر على الفور في العرض التمهيدي
8. عندما تكون سعيداً بالتغييرات إنقاذ التغييرات في أسفل اللوحة اليسرى

[الطلقة: اختيار وتحرير العنصر]

How to Change Colors

بعد اختيار عنصر:

1. اضغط الألوان في اللوحة اليسرى
2. توسيع النص جزء لتغيير لون النص
3. قم بمسح اللون (المربع الملون) لفتح ملتقط لون
4. إختر لونًا أو طباعًا رمزًا للثعلب في ميدان النص.
5. ويستكمل العنصر على الفور في الاستعراض الأولي.

لتغيير الخلفية:

1. في الألوان تاب، توسيع نطاق معلومات أساسية القسم
2. الاختيار صلب لون واحد أو العيادة لون بلون
3. لخلفيات صلبة، نقر مسحة اللون واختيار لونك.
4. تحقق الشفافية إذا كنت لا تريد خلفية على الإطلاق.

[Screenshot: color-picker-interface]

How to Create a Gradient background

العجائز يخلطون ألوان متعددة معا بسلاسة

1. إختار عنصرك واذهب إلى الألوان تاب.
2. التوسع معلومات أساسية ونقر العيادة الزر
3. اختر اتجاهاً بتصفح أحد أزرار الإتجاهات الثمانية (أو الدخول إلى زاوية العرف).
4. سترى على الأقل محطتين لون قم بلعق كل ممسحة لون لاختيار الألوان
5. عدّل المزلاجات (0-100%) للتحكم في المكان الذي يظهر فيه كل لون
6. Click + مضاف توقف لإضافة المزيد من الألوان لدرجتك
7. اضغط الزر X بجانب لون توقف لإزالته
8. راقبوا التخرج المُستجدات في حانة ما قبل العرض بينما تقومون بتغييرات

[Screenshot: gradient-builder]

How to Change Fonts and Text

بعد اختيار النص أو أي عنصر يتضمن النص:

1. اضغط رسم الخرائط تاب.
2. التوسع حجم الأسرة الناشطة.
3. اختر علامة من الأسرة الناشطة هبوط (روبوتو، إنتر، مونتسيرات، إلخ).
4. وضع حجم الفونت (ب) استخدام عدد المدخلات واختيار الوحدة (باكس أو ريم أو إيم أو ٪).
5. اختيار Font Weight لجعل النص أرق أو أكثر جرأة (400) طبيعي، 700 جريئ.

بالنسبة لصيغة النص:

1. توسيع النص القسم
2. أزرار التواؤم لليسار أو المركز أو اليمين أو التبرير
3. الاختيار النص لجعل النص البريدي الموحد، أو أدنى، أو مرسملة.
4. الاختيار النص لإضافة التأكيدات أو الإضراب أو الإفراط

[الطلقة الصاروخية: typography-options]

How to Add Spacing

التباعد يتحكم في الفضاء الفارغ حول العناصر وداخلها

1. إختار عنصرك ونقر Spacing تاب.
2. التوسع Padding ويدخل رقماً ليضيف مكاناً داخل العنصر
3. التوسع Margin وأدخل رقماً لإضافة مساحة خارج العنصر

كيفية إضافة الحدود والظل

بعد اختيار عنصر:

1. اضغط الحدود تاب.
2. التوسع الحدود لتكييف الحدود
3. اختر خط الحدود (سودان، داهون، دهون، إلخ).
4. وضع سفاح الحدود في بيكسلز
5. اضغط عقيد الحدود امسح لاختيار لون
6. المجموعة الحدود إلى الزاوية

لإضافة الظل:

1. توسيع الإطار القسم
2. اضغط زر الظل المسبق (None, SM, MD, LG, XL) لأساليب الظل المشتركة.
3. أو نوع الظل العرفي القيمة في الظل العرفي الحقل

[Screenshot: border-and-shadow-controls]

How to Style Hover Effects

تفجر التأثيرات عندما يحرك أحدهم فأرهم على عنصر (مثل الأزرار).

1. إختاري العنصر الذي تريدين أن تضيفي له تأثيرات القفز
2. ابحث عن الدولة المختارة حواجز تحت المعلومات الأساسية
3. اضغط : الزر
4. المُختار يُطلع على آخر المستجدات ليُظهر أنّك تُحرّر أساليب القفز.
5. قم بتغيير ملابسك حاول تغيير لون الخلفية أو إضافة تحول
6. حرك الفأر الخاص بك على العنصر في الاستعراض التمهيدي لرؤية تأثير الهوفر.
7. Click إنقاذ التغييرات عندما تنتهي

[Screenshot: state-selector-hover]

كيف لـ (ستايل) للضوء والظلام بشكل منفصل

موقعك يمكن أن يبدو مختلفاً في وضع الضوء مقابل نمط مظلم

1. Click لايت موديل في الرأس لتحرير أساليب النور
2. اختيار العناصر وتكييفها على النحو المطلوب.
3. Click إنقاذ التغييرات لكل عنصر
4. Click موديل الظلام في الرأس للتحول إلى تحرير النظام المظلم
5. الاستعراض الأوّلي يتحول تلقائياً إلى وضع مُظلم لترى ما تُحرره
6. إختار نفس العناصر و أعدها لطريقة مظلمة
7. أنقذوا تغيرات أسلوبكم المظلم

How to Apply Styles to Specific Pages

عن طريق التقصير، تنطبق المواسم على موقعك بأكمله. لكن يمكنك صنع اساليب تظهر فقط على صفحات معينة

المدير الطيفي يكتشف تلقائياً أي صفحة تنظر إليها

تطبيق أساليب خاصة بكل صفحة:

1. إستخدم الملاحه المسبقه لتذهب إلى الصفحة التي تريد أن تصممها
2. Click Edit Mode واختيار عناصر في تلك الصفحة
3. اجعل أسلوبك يتغير
4. Click إنقاذ التغييرات.
5. هذه الأساليب سوف تنطبق فقط على تلك الصفحة المحددة.

How to Reset Styles

Reset a single Element:

1. اختاري العنصر الذي تريدين إعادة تحديده
2. Click إعادة العنصر في أسفل اللوحة اليسرى
3. التأكيد بالنقر حسنا في البابا
4. جميع أساليب العرف لهذا العنصر قد أزيلت
5. ويعود العنصر إلى مظهره الأصلي.

أعد كل شيء

1. Click Reset All في الرأس
2. اقرأ التحذير بعناية هذا يحذف كل اسلوبك
3. Click حسنا للتأكيد
4. جميع أساليب العرف عبر موقعك بالكامل تم إزالتها
5. موقعك يعود للمظهر الافتراضي

الضوابط التمهيدية

سفينة الملاحة

الحاجز في قمة المسابقة يسمح لك بالإبحار والتحكم في العرض التمهيدي

Device Preview

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

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

[الطلقة الصارخة: نماذج الاستعراض المستجيبة]

أسلوب الظلام

القمر في مُدير العرض التمهيدي يُنظّفُ العرض التمهيدي بين النور والوضع المُظلم. هذا منفصل عن أزرار الموضة في الرأس الرئيسي

• أزرار جهاز التحكم - التحكم في أي اساليب تتجسسين عليها
• زر العرض -التحكم في أيّ طريقة تنظر إليها

فهم الطوابق

ويركز كل شريط في اللوحة اليسرى على خصائص بصرية مختلفة.

Colors Tab

• النص - لون النص داخل العنصر
• معلومات أساسية - اللون الصلب أو التدرج أو الخلفية الشفافة
• البناء العالي -خلق خليط لون سلس مع توقفات لون متعددة

تابوغرافيا

• الأسرة الناشطة - اختر من الويب المهني
• حجم الفونت - حجم النصوص بالوحدات المرنة (px, rem, em, %)
• Font Weight -كم يبدو النص رقيقاً أو جريئاً
• خط مرتفع - الفضاء بين خطوط النص
• Letter Spacing - الفضاء بين الرسائل الفردية
• النص - المواءمة، الرسملة، التأكيدات، الخ.

Spacing Tab

• Padding - الفضاء داخل العنصر (المحتوى والحدود بين)
• Margin - الفضاء خارج العنصر (بين العنصر والجيران)

الحدود

• خط الحدود - صلبة، محطمة، مطهرة، أو خطوط مزخرفة
• سفاح الحدود -كم هو سميك الحدود
• عقيد الحدود - كولور خط الحدود
• الحدود -كم تدور الزاوية
• الإطار -القي الظل لخلق العمق

تاب

• التلاعب - كيف يتصرف العنصر (القفل، الخط، الدقيق، الشبكة، الخ)
• المنصب - كيفية وضع هذا العنصر (الوضعية، النسبية، المطلقة، إلخ).
• Flexbox - مراقبة ترتيب عناصر الأطفال في الصفوف أو الأعمدة

Effects Tab

• Opacity - مدى شفافية العنصر (0% = غير مرئي، 100٪ = صلب)
• Transform - Scale, rotate, or move the element
• الأفلام - Blur, brightness, contrast, and grayscale effects

Size Tab

• Width -ما مدى اتساع العنصر
• مرتفع -كم طول العنصر
• Min/Max Width ' Height - قيود الحجم
• اعتراض - كيف تلائم الصور والفيديو داخل حاوياتها
• نسبة المشتبه فيهم - الحفاظ على النسب (المحيط 16:9، وما إلى ذلك)

تيبس للمستعملين الجدد

الاضطرابات

العرض لا يحمّل أو يظهر صفحة فارغة

ما تراه: اللوحة الصحيحة فارغة أو بيضاء أو تظهر خطأ

كيفية إصلاحه:

1. اضغط التجديد الزر في مأدبة ما قبل المقابلة
2. تحقق إذا كان موقعك يعمل من خلال فتحه في كتاب جديد
3. إذا كان الموقع يعمل ولكن العرض لا يعمل، الاتصال مدير موقعك - هذا قد يكون مشكلة تشكيلية.

لا أستطيع اختيار العناصر عندما أضغط عليهم

ما تراه: لعق العناصر في العرض التمهيدي لا يفعل أي شيء.

كيفية إصلاحه:

1. تأكد من Edit Mode ويسلط الضوء على الزر (أيكور) في اللون الأخضر.
2. حاول أن تعيد فتح المسابقة باستخدام زر التجديد
3. بعض العناصر الصغيرة جداً لا يمكن اختيارها

تغييراتي لا تظهر في الموقع الحي

ما تراه: التغييرات تظهر في العرض التمهيدي لكن ليس في الموقع الفعلي

كيفية إصلاحه:

1. تأكد من النقر إنقاذ التغييرات في قاع اللوحة اليسرى
2. نظفوا مخبأكم ونظفوا الموقع الحي
3. إذا كنت تنظر إلى الموقع بطريقة مختلفة (الضوء ضد الظلام)، تبديل النماذج لمعرفة ما إذا كانت تغييراتك تنطبق هناك.

تأثيرات الغطس لا تعمل

ما تراه: لقد صممت الولاية ولكن لا شيء يحدث عندما تقفز

كيفية إصلاحه:

1. تأكد من أن تنقر : الزر في محرر الولاية قبل إجراء التغييرات
2. التأثيرات الهوائية تعمل فقط مع فأر مستعملين متنقلين لن يرواهم
3. تأكّدْ إذا أسلوبِ موقعِكَ الأصليِ عِنْدَهُ تأثيراتُ متضاربةِ التي تَتجاوزُ آثارَكَ.

الألوان تبدو خاطئة أو لا تطابق ما اخترت

ما تراه: ملتقط الألوان يظهر لون واحد لكن العنصر يظهر آخر

كيفية إصلاحه:

1. اضغطي على العنصر مرة أخرى لتصلحه وتجديد قيم الألوان الحالية
2. تأكّدْ بأنّك تُحرّرُ الملكيةَ الصحيحةَ.
3. انقذوا و اعيدوا النظرية لرؤية النتيجة النهائية

لا استطيع ان انقذ تغيراتي

ما تراه: جميع أزرار "الإنقاذ للجميع" و "إعادة ضبط جميع الأزرار" مُعاقة و مُزدحمة

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

درجتي لا تظهر

ما تراه: لقد خلقت تدرجاً لكن العنصر مازال يظهر لون صلب

كيفية إصلاحه:

1. تأكد من أن تنقر العيادة الزر (ليس صلبا) في قسم المعلومات الأساسية
2. تأكّدْ بأنّك عِنْدَكَ على الأقل محطّتان لونِ مَع ألوانِ مختلفةِ.
3. انقذوا تغيراتكم و اعيدوا النظر

الصفحات ذات الصلة

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