---
url: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/design/colour-and-branding'
title: 'استخدام ألوان علامتكم | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:23:36+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  طبّقوا ألوان علامتكم على المقاطع والنصوص والأزرار لتبدو كل صفحة جزءًا من
  الموقع نفسه. يعرض كل حقل لون في DXPR Builder لوحة قالبكم كعيّنات، فتختارون
  ألوان العلامة بدل تخمين الرموز. يمنح المثال مقطعًا لون علامتكم الأساسي مع نص
  أبيض.
  يتبع الفيديو الخطوات أدناه: فيلوّن مقطعًا بعيّنة علامتكم ويجعل نصّه أبيض.
tags:
  - Ontwerpgidsen
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'استخدام ألوان علامتكم'
      description: |-
        طبّقوا ألوان علامتكم على المقاطع والنصوص والأزرار لتبدو كل صفحة جزءًا من
        الموقع نفسه. يعرض كل حقل لون في DXPR Builder لوحة قالبكم كعيّنات، فتختارون
        ألوان العلامة بدل تخمين الرموز. يمنح المثال مقطعًا لون علامتكم الأساسي مع نص
        أبيض.
        يتبع الفيديو الخطوات أدناه: فيلوّن مقطعًا بعيّنة علامتكم ويجعل نصّه أبيض.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T01:23:36+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/design/colour-and-branding'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/design/colour-and-branding'
      description: |-
        طبّقوا ألوان علامتكم على المقاطع والنصوص والأزرار لتبدو كل صفحة جزءًا من
        الموقع نفسه. يعرض كل حقل لون في DXPR Builder لوحة قالبكم كعيّنات، فتختارون
        ألوان العلامة بدل تخمين الرموز. يمنح المثال مقطعًا لون علامتكم الأساسي مع نص
        أبيض.
        يتبع الفيديو الخطوات أدناه: فيلوّن مقطعًا بعيّنة علامتكم ويجعل نصّه أبيض.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: الرئيسية
            item: 'https://dxpr.com/ar'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ar
---
[Help Center](/ar/hc)/[Documentation](/ar/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # استخدام ألوان علامتكم.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [جعل العناصر تتفاعل عند التحويم](/ar/hc/documentation/learn-dxpr-builder/design/hover-effects)
- [تنسيق بطاقاتكم](/ar/hc/documentation/learn-dxpr-builder/design/card-styles)
- [تنسيق محتوى المنشئ باستخدام CSS الخاص بقالبكم](/ar/hc/documentation/learn-dxpr-builder/customization/custom-css)

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

يتبع الفيديو الخطوات أدناه: فيلوّن مقطعًا بعيّنة علامتكم ويجعل نصّه أبيض.

  ## قبل أن تبدؤوا

- تعيش ألوان علامتكم في القالب. ومع قالب DXPR، اضبطوها ضمن **المظهر** > **الإعدادات** > **قالب DXPR** (`/admin/appearance/settings/dxpr_theme`)، في لوحة **الألوان**.
- يعرض DXPR Builder أول عشرة ألوان مختلفة من تلك اللوحة كعيّنات.

## تلوين مقطع

1. حوّموا فوق المقطع وافتحوا **المزيد** واختاروا **الإعدادات**.
2. افتحوا لوحة **النمط**.
3. انقروا زر اللون الخاص بـ **الخلفية**. فيُفتَح منتقي الألوان مع عيّناتكم.
4. انقروا عيّنة علامتكم الأساسية.
5. انقروا زر اللون الخاص بـ **لون الخط** واختاروا الأبيض.
6. انقروا **حفظ**. فيتحول نص الفقرة إلى الأبيض؛ وتبقى العناوين بلون عناوين القالب.
7. لجعل عنوان أبيض أيضًا، افتحوا **الإعدادات** الخاصة بعنصر **النص** التابع له، واختاروا الأبيض لـ **لون الخط** في لوحة **النمط** الخاصة به وانقروا **حفظ**.

## ما الذي ترونه

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

لاستخدام لون خارج اللوحة، اكتبوا رمزه في حقل نص المنتقي، مثلًا `#2196F3`. حرّكوا منزلق الشفافية للون شفاف. ويزيل **مسح** اللون.

## إبقاء الألوان مرتبطة بالقالب

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

لجعل عنصر يتبع اللوحة، استخدموا فئة ألوان بدل ذلك. افتحوا **إعدادات** العنصر واختاروا رقاقة ضمن **فئات HTML**:

| الرقاقة | ما تفعله |
|---|---|
| **خلفية أساسية** و**خلفية ثانوية** وغيرهما | ألوان Bootstrap من قالبكم |
| **لون النص الأساسي** و**لون النص الثانوي** وغيرهما | ألوان نصوص Bootstrap من قالبكم |
| **لون الخلفية: الأساسي في قالب DXPR** | اللون **الأساسي** في قالب DXPR، مع لون النص المطابق له |
| **لون النص: التمييز 1 في قالب DXPR** | اللون **الثانوي** في قالب DXPR للنصوص |

لا تظهر رقاقات **قالب DXPR** إلا عندما يكون قالب DXPR مفعّلًا.

## حقول الألوان لكل عنصر

| أين | ما يلوّنه |
|---|---|
| **النمط** في اللوحة: **لون الخط** و**لون الحد** و**الخلفية** | العنصر نفسه |
| **نمط التحويم** في اللوحة: الحقول نفسها | العنصر بينما المؤشر عليه |
| **الزر**: **النوع** | نظام ألوان زر جاهز |
| **البطاقة**: **النوع** | خلفية البطاقة كلها ونصّها |
| **التنبيه**: **النوع** | **نجاح** أو **معلومات** أو **تحذير** أو **خطر** |
| **المقطع**: **مؤثرات الخلفية** > **التدرج اللوني** | مزيج لونين |

## لون مقروء

- حافظوا على تباين كافٍ بين النص والخلفية. يطلب WCAG 2.1 المستوى AA ما لا يقل عن 4.5 إلى 1 للنص العادي.
- لا تستخدموا اللون وحده لحمل المعنى؛ واقرنوه بتسمية أو أيقونة.
- نوّعوا خلفيات المقاطع، مثل الأبيض والرمادي الفاتح ولون علامتكم، لمنح الصفحات الطويلة إيقاعًا.

## إذا لم تروا ألوانكم

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

## ما الخطوة التالية؟

- [جعل العناصر تتفاعل عند التحويم](/ar/hc/documentation/learn-dxpr-builder/design/hover-effects): تغيير الألوان عندما يشير الزوار إلى عنصر.
- [تنسيق بطاقاتكم](/ar/hc/documentation/learn-dxpr-builder/design/card-styles): تطبيق ألوانكم على البطاقات.
- [CSS مخصص](/ar/hc/documentation/learn-dxpr-builder/customization/custom-css): ضبط قواعد العلامة التي لا تغطيها اللوحات.