الأزرار

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

الأزرار

• مصدر ألوان الأزرار - مصدر لون الأزرار الرئيسي. “لون علامة المتجر التجارية” يستخدم اللون الأساسي للعلامة التجارية المحدد لمتجرك في زد مع لون النص المناسب له، وعندها تحتفظ الأزرار الأساسية بنفس اللون عند مرور المؤشر، ويُستخدم لون العلامة أيضاً لنص الأزرار الثانوية. إذا لم يكن لمتجرك لون علامة تجارية، يُستخدم اللون الرئيسي / الأزرار من الثيم. “لون الثيم الأساسي” يستخدم اللون الرئيسي / الأزرار ولون التفاعل (Hover) من تخطيط الصفحة ← الألوان، بما في ذلك نسختيهما للوضع الداكن. “ألوان مخصصة (بالأسفل)” يستخدم الألوان التي تدخلها في مجموعات الزر الأساسي والزر الثانوي والزر المُحدَّد بإطار أدناه، وأي لون تتركه فارغاً يتبع ألوان الثيم الأساسية. الألوان التي تدخلها أدناه تُطبَّق مع جميع الخيارات، وليس مع “ألوان مخصصة” فقط.

الأزرار - الشكل والحجم

• زوايا الأزرار - شكل زوايا جميع الأزرار: حسب زوايا التصميم (يستخدم إعدادات زوايا التصميم في تخطيط الصفحة)، حواف حادة، زوايا صغيرة، زوايا متوسطة، زوايا كبيرة، أو دائري كامل.
• حجم الأزرار - “مُصغّر” يجعل جميع الأزرار أصغر بنحو 10%، و“افتراضي” يحافظ على أحجام الثيم، و“كبير” يجعلها أكبر بنحو 12%.
• سماكة خط الأزرار - درجة سماكة نص الأزرار: افتراضي (يحافظ على سماكة الثيم الخاصة بكل زر)، عادي، متوسط، نصف عريض، أو عريض.
• كتابة النص الإنجليزي بأحرف كبيرة - عند التفعيل، تظهر الحروف الإنجليزية على الأزرار بأحرف كبيرة. لا يتأثر النص العربي.
• إطار الزر - “تلقائي (حسب نمط الزر)” يعطي كل زر الإطار المناسب لنمطه، مثل الإطار الظاهر على الأزرار المُحدَّدة بإطار. “بدون إطار” يزيل الإطار من جميع الأزرار، بما فيها الأزرار المُحدَّدة بإطار. “إطار على كل الأزرار” يضيف إطاراً ناعماً بدرجة أفتح من لون نص الزر إلى جميع الأزرار، ويحل محل ألوان الإطار المحددة أدناه.
• سماكة حدود الأزرار - سماكة إطار الأزرار، من 1 إلى 4 بكسل.
• أزرار بعرض كامل على الجوال - عند التفعيل، تمتد الأزرار على كامل عرض المساحة المخصصة لها على الجوال (الشاشات حتى عرض 640 بكسل). الأزرار التي تحتوي على أيقونة فقط والروابط النصية تحتفظ بحجمها.

الأزرار - حركة الأزرار

تعمل الحركات عند مرور مؤشر الماوس على الزر، لذلك لا تظهر على شاشات اللمس. لا تُطبَّق على الأزرار التي تحتوي على أيقونة فقط ولا على الروابط النصية، والزوار الذين أوقفوا الحركات من إعدادات أجهزتهم يرون حركة قليلة أو لا يرون أي حركة.

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

الأزرار - الزر الأساسي

الأزرار الرئيسية في المتجر، مثل زر الإضافة للسلة وزر إتمام الطلب.

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

الأزرار - الزر الثانوي

أزرار أهدأ بخلفية فاتحة، تُستخدم حيثما يكون نمط الزر في القسم “ثانوي”.

• لون الخلفية - لون تعبئة الأزرار الثانوية. اتركه فارغاً لاستخدام خلفية الأقسام / الأسطح من تخطيط الصفحة ← الألوان.
• لون النص - لون نص الزر. اتركه فارغاً لاستخدام لون الأزرار الرئيسي (لون علامتك التجارية مع “لون علامة المتجر التجارية”، وإلا فاللون الرئيسي / الأزرار).
• لون الخلفية عند المرور - الخلفية أثناء مرور المؤشر على الزر. إذا تُرك فارغاً تبقى لون الخلفية، أو يُستخدم لون خلفية الأسطح عند التمرير من تخطيط الصفحة ← الألوان إذا كان لون الخلفية فارغاً أيضاً.
• لون النص عند المرور - لون النص أثناء مرور المؤشر على الزر. اتركه فارغاً للإبقاء على لون النص.

الأزرار - الزر المُحدَّد بإطار

أزرار بإطار وغالباً بدون تعبئة، تُستخدم مثلاً لزر عرض السلة في سلة التسوق الجانبية، وأرقام الصفحات، وحيثما يكون نمط الزر في القسم “إطار”.

• تعبئة الزر المُحدَّد - “شفاف (افتراضي)” يُظهر الإطار فقط. “تعبئة خفيفة” يضيف درجة خفيفة من لون نص الزر، تصبح أقوى قليلاً عند مرور المؤشر. “تعبئة كاملة” يملأ الزر بلون التعبئة، أو بلون الإطار إذا كان لون التعبئة فارغاً، ويختار الأسود أو الأبيض للنص تلقائياً. مع “تعبئة كاملة” وعدم تحديد أي من اللونين، يُملأ الزر بلون النص الأساسي للصفحة ويأخذ النص لون خلفية الصفحة.
• لون التعبئة - اللون داخل الأزرار المُحدَّدة بإطار، ويُستخدم أساساً مع “تعبئة كاملة”. لاحظ أن إدخال لون هنا يملأ الأزرار المُحدَّدة بإطار أياً كان خيار التعبئة المختار.
• لون الإطار - لون الإطار. اتركه فارغاً لاستخدام الحدود الأساسية من تخطيط الصفحة ← الألوان.
• لون النص - لون نص الزر. اتركه فارغاً لاستخدام النص الأساسي من تخطيط الصفحة ← الألوان، أو اللون الواضح التلقائي مع “تعبئة كاملة”.
• لون الخلفية عند المرور - الخلفية أثناء مرور المؤشر على الزر. اتركه فارغاً للإبقاء على التعبئة العادية.
• لون النص عند المرور - لون النص أثناء مرور المؤشر على الزر. اتركه فارغاً للإبقاء على لون النص.
• لون الإطار عند المرور - لون الإطار أثناء مرور المؤشر على الزر. اتركه فارغاً للإبقاء على لون الإطار.

الأزرار - مظهر الأزرار حسب وظيفتها

امنح أزراراً محددة في المتجر مظهراً خاصاً بها بغض النظر عن نمطها المعتاد. يمكن ضبط كل منها على: حسب تصميم الثيم (يحافظ على تصميم الثيم)، معبأ بالكامل (مملوء بلون الزر مع نص واضح)، مُحدَّد بإطار (شفاف مع إطار ونص بلون الزر، ويمتلئ عند مرور المؤشر)، أو تعبئة خفيفة (درجة خفيفة من لون الزر مع نص بنفس اللون، تصبح أعمق عند مرور المؤشر). لون الزر هو لون الخلفية في الزر الأساسي عندما يكون مظهر الزر الأساسي “معبأ بالكامل”، وإلا فهو اللون القادم من مصدر ألوان الأزرار.

• زر الإضافة للسلة - أزرار الإضافة للسلة وزر “أعلمني عند توفره” في صفحات المنتجات. في بطاقات المنتجات، تكون الأولوية لخيار نمط الزر ضمن بطاقة المنتج ← زر الإضافة للسلة إذا لم يُترك على “حسب إعدادات الثيم (افتراضي)”.
• زر الشراء الآن - زر الشراء الآن في صفحات المنتجات.
• زر إتمام الطلب - زر إتمام الطلب في سلة التسوق الجانبية وصفحة السلة، وزر عرض السلة في سلة التسوق الجانبية.
• أزرار ترقيم الصفحات - أزرار أرقام الصفحات أسفل القوائم الطويلة، مثل صفحة الأسئلة. في صفحات التصنيفات تحتفظ أرقام الصفحات بتصميمها الخاص، لذلك قد لا يظهر لهذا الخيار تغيير يُذكر هناك.