---
url: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/elements/circle-counter'
title: 'عداد الدائرة | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:27:39+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'قم بترتيب الإحصائيات وعرضها على موقع Drupal الخاص بك باستخدام أداة عداد الدائرة القوية!'
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'عداد الدائرة'
      description: 'قم بترتيب الإحصائيات وعرضها على موقع Drupal الخاص بك باستخدام أداة عداد الدائرة القوية!'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:27:39+0000'
      dateModified: '2026-10-23T14:31:17+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/elements/circle-counter'
      articleSection: 'Data and motion'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/elements/circle-counter'
      description: 'قم بترتيب الإحصائيات وعرضها على موقع Drupal الخاص بك باستخدام أداة عداد الدائرة القوية!'
      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) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Data and motion](/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # عداد الدائرة.

 Learn DXPR BuilderBuild pagesAdd contentData and motion

   ## In this guide

 Related guides

- [علامة تبويب النمط](/ar/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

 قم بترتيب الإحصائيات وعرضها على موقع Drupal الخاص بك باستخدام أداة عداد الدائرة القوية!

 اتبع الخطوات أدناه لبدء استخدام عنصر Circle Counter في موقع الويب الخاص بك:

1. انقر على أيقونة **+**
2. انتقل إلى علامة **التبويب المحتوى**
3. حدد خيار اللون في إعدادات **المقدمة** . هذه هي الحلقة العلوية، والتي ستعرض النسبة المئوية
4. حدد لون الخلفية في إعدادات **الخلفية** . هذه هي خلفية الحلقة العلوية
5. قم بتعيين لون لملء العداد في إعدادات **التعبئة** . هذا هو داخل الدائرة
6. *اختياريًا* ، قم **بتشغيل** إعدادات **نصف الدائرة**
7. إدارة **البعد** **وعرض** الدائرة. البعد هو نصف قطر الدائرة وعرض سمك الحلقة العلوية
8. قم بتعيين وقت العداد بالنسبة المئوية في حقل **النسبة المئوية** . على سبيل المثال، 50 سيكون نصف الدائرة.
9. حدد خيارًا من إعداد **Border Style** للاختيار من بين الأنماط المتنوعة المعدة مسبقًا
10. بمجرد تحديد الإعدادات المفضلة لديك، يمكنك النقر فوق **"حفظ التغييرات"** وبذلك تكون قد انتهيت!

###  تخصيص عداد الدائرة الخاصة بك

1. انتقل إلى علامة التبويب **"محتوى الدائرة"** لمنح العداد **نصًا** **وحجم الخط** **والأيقونة**
2. املأ حقل **النص** بالصيغة المفضلة لديك. سيظهر هذا في الأعلى داخل الدائرة
3. املأ حقل **المعلومات** لإضافة معلومات إضافية للنص. سيظهر هذا أسفل النص الموجود في الدائرة
4. انتقل إلى علامة **التبويب "الأيقونة"** لتحديد أيقونة وإضافتها إلى مركز العداد
5. بمجرد تحديد الإعدادات المفضلة لديك، يمكنك النقر فوق **"حفظ التغييرات"** وبذلك تكون قد انتهيت!