---
url: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8'
title: 'جعل تخطيطكم يعمل على الهواتف | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:23:49+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  تتكيّف صفحاتكم مع الهواتف والأجهزة اللوحية بنفسها: فتجلس الأعمدة جنبًا إلى
  جنب على الشاشات العريضة وتتكدس على الصغيرة. توضح هذه الصفحة كيفية تولّي
  السيطرة. فتضبطون تخطيط أعمدة لكل حجم شاشة، وتعكسون الترتيب على الشاشات
  العريضة، وتعرضون العناصر على بعض الأجهزة فقط. يحوّل المثال صفًا من أربعة
  أعمدة إلى اثنين باثنين على الأجهزة اللوحية.
  يخفي الفيديو صورة على الهواتف، ثم يضيّق النافذة ليعرض اختفاءها.
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'جعل تخطيطكم يعمل على الهواتف'
      description: |-
        تتكيّف صفحاتكم مع الهواتف والأجهزة اللوحية بنفسها: فتجلس الأعمدة جنبًا إلى
        جنب على الشاشات العريضة وتتكدس على الصغيرة. توضح هذه الصفحة كيفية تولّي
        السيطرة. فتضبطون تخطيط أعمدة لكل حجم شاشة، وتعكسون الترتيب على الشاشات
        العريضة، وتعرضون العناصر على بعض الأجهزة فقط. يحوّل المثال صفًا من أربعة
        أعمدة إلى اثنين باثنين على الأجهزة اللوحية.
        يخفي الفيديو صورة على الهواتف، ثم يضيّق النافذة ليعرض اختفاءها.
      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:49+0000'
      dateModified: '2026-10-24T17:19:22+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/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8'
      articleSection: 'أدلة التصميم'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8'
      description: |-
        تتكيّف صفحاتكم مع الهواتف والأجهزة اللوحية بنفسها: فتجلس الأعمدة جنبًا إلى
        جنب على الشاشات العريضة وتتكدس على الصغيرة. توضح هذه الصفحة كيفية تولّي
        السيطرة. فتضبطون تخطيط أعمدة لكل حجم شاشة، وتعكسون الترتيب على الشاشات
        العريضة، وتعرضون العناصر على بعض الأجهزة فقط. يحوّل المثال صفًا من أربعة
        أعمدة إلى اثنين باثنين على الأجهزة اللوحية.
        يخفي الفيديو صورة على الهواتف، ثم يضيّق النافذة ليعرض اختفاءها.
      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
---
[مركز المساعدة](/ar/hc)/[التوثيق](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82) /[تعلّم DXPR Builder](/ar/hc/documentation/learn-dxpr-builder) /[بناء الصفحات](/ar/hc/documentation/learn-dxpr-builder/build) /[تنسيق العناصر](/ar/hc/documentation/learn-dxpr-builder/element-settings) /[أدلة التصميم](/ar/hc/documentation/learn-dxpr-builder/design/overview) # جعل تخطيطكم يعمل على الهواتف.

 تعلّم DXPR Builderبناء الصفحاتتنسيق العناصرأدلة التصميم

   ## في هذا الدليل

 أدلة ذات صلة

- [إضافة صف](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B7%D9%8A%D8%B7/%D8%A7%D9%84%D8%B5%D9%81%D9%88%D9%81-%D9%88%D8%A7%D9%84%D8%A3%D8%B9%D9%85%D8%AF%D8%A9)
- [تحرير صفحة على هاتفكم أو جهازكم اللوحي](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AD%D8%B1%D9%8A%D8%B1/%D8%A7%D9%84%D8%AA%D8%AD%D8%B1%D9%8A%D8%B1-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D8%AC%D9%88%D8%A7%D9%84)
- [تشغيل مقطع بعرض الشاشة الكامل](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%A8%D8%B9%D8%B1%D8%B6-%D8%A7%D9%84%D8%B4%D8%A7%D8%B4%D8%A9-%D8%A7%D9%84%D9%83%D8%A7%D9%85%D9%84)

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

يخفي الفيديو صورة على الهواتف، ثم يضيّق النافذة ليعرض اختفاءها.

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

- صف بأربعة أعمدة متساوية على الصفحة؛ انظر [الصفوف والأعمدة](/ar/hc/documentation/learn-dxpr-builder/layout/rows-and-columns).

## اختيار تخطيط لكل حجم شاشة

1. حوّموا فوق الصف وانقروا أيقونة الشبكة في شريط تحكمه. فيُفتَح مربع حوار التخطيط مع لوحة **الأجهزة المتوسطة (≥ 768px)**.
2. انقروا **إضافة حجم شاشة**. فتُفتَح لوحة ثانية مضبوطة على **صغيرة جدًا (< 576px)**.
3. في القائمة المنسدلة لتلك اللوحة، اختاروا **الأجهزة الصغيرة (≥ 576px)**.
4. انقروا **تخطيط مخصص** واكتبوا `1/2 + 1/2 + 1/2 + 1/2` وانقروا **حفظ**.
5. انقروا **حفظ** على شريط الأدوات.

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

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

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

ينطبق التخطيط من حجم شاشته فصاعدًا، حتى يحمل حجم شاشة أكبر تخطيطًا خاصًا به. يبدأ كل صف جديد بتخطيط واحد لـ **الأجهزة المتوسطة (≥ 768px)**، فتتكدس أعمدته على الهواتف والأجهزة اللوحية الصغيرة. ويحذف **إزالة حجم شاشة** في لوحة ذلك التخطيط مجددًا.

## عكس الترتيب على الشاشات العريضة

افتحوا قائمة **المزيد** الخاصة بالصف واختاروا **الإعدادات** وشغّلوا **عكس الصف**. ومن 768 بكسل فصاعدًا، تظهر الأعمدة بترتيب معكوس؛ وعلى الشاشات الأصغر تتكدس بترتيب المحرّر.

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

## عرض عنصر أو إخفاؤه لكل حجم شاشة

1. افتحوا قائمة **المزيد** الخاصة بالعنصر واختاروا **الإعدادات**.
2. ضمن **فئات HTML**، اختاروا رقاقة من مجموعة **الظهور المتجاوب**، مثلًا **مخفي على الأجهزة الصغيرة جدًا، الهواتف (<576px)**.
3. انقروا **حفظ**.

تخفي كل رقاقة **مخفي على** العنصر على حجم شاشة واحد فقط. وتعرضه كل رقاقة **مرئي على** على ذلك الحجم الواحد وتخفيه في كل مكان آخر.

## أحجام الشاشات

| التسمية في مربع حوار التخطيط | عرض الشاشة |
|---|---|
| **صغيرة جدًا (< 576px)** | الهواتف بالوضع العمودي |
| **الأجهزة الصغيرة (≥ 576px)** | الهواتف الكبيرة والأجهزة اللوحية الصغيرة |
| **الأجهزة المتوسطة (≥ 768px)** | الأجهزة اللوحية |
| **الأجهزة الكبيرة (≥ 992px)** | الحواسيب المحمولة |
| **كبيرة جدًا (≥ 1200px)** | أجهزة سطح المكتب |
| **كبيرة جدًا جدًا (≥ 1400px)** | أجهزة سطح المكتب الكبيرة |

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

## إذا لم تروا التغيير

- **ما زالت الأعمدة تتكدس على جهاز لوحي.** لا يحمل الصف تخطيطًا لحجم الشاشة ذاك، فتتكدس الأعمدة تحت 768 بكسل. افتحوا أيقونة شبكة الصف وانقروا **إضافة حجم شاشة** واختاروا **الأجهزة الصغيرة (≥ 576px)**.
- **اختفى عنصر على كل حجم شاشة.** يحمل رقاقتي **مرئي على**، وكل منهما تخفيه حيث تعرضه الأخرى. أبقوا واحدة، أو استخدموا رقاقات **مخفي على**، واحدة لكل حجم تُخفونه.
- **عكس الصف دون أثر على هاتف.** **عكس الصف** يعمل من 768 بكسل فصاعدًا. ولتغيير الترتيب على الهواتف، حرّكوا الأعمدة في المحرّر بدل ذلك.

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

- [الصفوف والأعمدة](/ar/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): بناء الصفوف التي تجعلونها متجاوبة هنا.
- [تحرير صفحة على هاتفكم أو جهازكم اللوحي](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AD%D8%B1%D9%8A%D8%B1/%D8%A7%D9%84%D8%AA%D8%AD%D8%B1%D9%8A%D8%B1-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D8%AC%D9%88%D8%A7%D9%84): التحقق من الصفحات وإصلاحها على شاشة صغيرة.
- [تشغيل مقطع من حافة إلى حافة](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%A8%D8%B9%D8%B1%D8%B6-%D8%A7%D9%84%D8%B4%D8%A7%D8%B4%D8%A9-%D8%A7%D9%84%D9%83%D8%A7%D9%85%D9%84): تقرير مدى اتساع المحتوى.