--- 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%A3%D9%86%D9%85%D8%A7%D8%B7-%D8%A7%D9%84%D8%A3%D8%B2%D8%B1%D8%A7%D8%B1' title: 'اختيار أنماط الأزرار التي توجّه الزوار | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:23:38+00:00' updated: '2026-10-24T19:36:26+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-24T19:36:26+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:38+0000' dateModified: '2026-10-24T19:36:26+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%A3%D9%86%D9%85%D8%A7%D8%B7-%D8%A7%D9%84%D8%A3%D8%B2%D8%B1%D8%A7%D8%B1' 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%A3%D9%86%D9%85%D8%A7%D8%B7-%D8%A7%D9%84%D8%A3%D8%B2%D8%B1%D8%A7%D8%B1' 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%B9%D9%86%D8%A7%D8%B5%D8%B1/%D8%A7%D9%84%D8%B2%D8%B1) - [جعل العناصر تتفاعل عند التحويم](/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%AA%D8%A3%D8%AB%D9%8A%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D8%AD%D9%88%D9%8A%D9%85) - [استخدام ألوان علامتكم](/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%A3%D9%84%D9%88%D8%A7%D9%86-%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A%D8%A9) تقرّرون مدى بروز كل زر. فيميّز الزر المصمت الإجراء الواحد الذي تريدونه أكثر، ويعرض الزر المحدد بجانبه البديل دون منافسة. توضح هذه الصفحة كيفية تنسيق زوج كهذا وأي إعداد يغيّر ماذا. ولإضافة زر وضبط رابطه، انظر [إضافة زر](/ar/hc/documentation/learn-dxpr-builder/elements/button). يتبع الفيديو الخطوات أدناه: فيجعل قدّموا الآن الزر الرئيسي ويضيف زرًا ثانيًا محددًا. ## تنسيق زر رئيسي وزر ثانٍ ابدؤوا بزر على الصفحة، مثل **قدّموا الآن**. 1. حوّموا فوق الزر وافتحوا **المزيد > الإعدادات**. 2. اضبطوا **النوع** على **الأساسي**. 3. اضبطوا **الحجم** على **كبير** وانقروا **حفظ**. 4. حوّموا فوق الزر مجددًا وافتحوا **المزيد > استنساخ**. فتظهر النسخة تحت الأصل مباشرة. 5. افتحوا **المزيد > الإعدادات** على النسخة. غيّروا **عنوانها**، مثلًا إلى `Download brochure`، و**رابطها**. 6. شغّلوا **النمط المحدد** وانقروا **حفظ**. 7. انقروا **حفظ** على شريط الأدوات. ## اختيار نمط لكل إجراء | الإجراء | النمط | مثال | |---|---|---| | الإجراء الواحد الذي تريدونه أكثر | مصمت **الأساسي** | قدّموا الآن | | بديل | **النمط المحدد** بالنوع **نفسه** | نزّلوا الكتيّب | | إجراء ثانوي | **رابط** يبدو كرابط نصي | اقرؤوا الشروط | | تحذير أو خطوة أخيرة | **خطر** أو **تحذير** | إلغاء حجزي | استخدموا زرًا مصمتًا واحدًا لكل مقطع، ليرى الزوار فورًا أين ينقرون. واكتبوا تسميات تقول ما يحدث: "Get started" لا "Click here"، و"Send message" لا "Submit". ## ما الذي ترونه يتكدّس زران كبيران في العمود: مصمت بلون قالبكم الأساسي ومحدد بحدّ ونص باللون نفسه. فيجذب المصمت العين أولًا. ولا تُفتَح الروابط أثناء التحرير. ولاختبارها، احفظوا الصفحة وافتحوا قائمة العرض (أيقونة العين) واختاروا **معاينة**. ## الإعدادات | الإعداد | ما يفعله | الافتراضي | |---|---|---| | **النوع** | نمط الألوان: **الأساسي** أو **الثانوي** أو **نجاح** أو **معلومات** أو **تحذير** أو **خطر** أو **رابط** أو **فاتح** أو **داكن**. وتأتي الألوان من قالبكم. | **الأساسي** | | **النمط المحدد** | حدّ ملوّن ونص دون تعبئة | مغلق | | **الحجم** | **عادي** أو **كبير** أو **صغير** | **عادي** | | **زر كتلي** | يمدّد الزر عبر العرض الكامل لعموده | مغلق | | **هدف الرابط** | **النافذة نفسها** أو **نافذة جديدة**. ويظهر متى كان لـ **الرابط** قيمة. | **النافذة نفسها** | لمنسّقي القوالب: يضيف كل **نوع** فئة Bootstrap ‏`btn-`، مثل `btn-primary`. ومع تفعيل **النمط المحدد**، يصبح `btn-outline-`، إلا **الرابط** الذي يبقى دائمًا `btn-link`. ويضيف **كبير** الفئة `btn-lg`، ويضيف **صغير** الفئة `btn-sm`، ويضيف **زر كتلي** الفئة `btn-block`. ## إذا لم تروا النمط - **الزر المحدد لا يعرض حدًا.** **النوع** هو **رابط** الذي يبدو دائمًا كرابط نصي، فلا أثر لـ **النمط المحدد**. اختاروا **نوعًا** آخر لزر محدد. - **الزر يكاد يختفي.** **فاتح** قريب من الأبيض، فيذوب في مقطع أبيض. اختاروا **نوعًا** أغمق، أو امنحوا المقطع لون خلفية. - **يُفتَح الرابط في التبويب نفسه.** **هدف الرابط** هو **النافذة نفسها**، ولا يظهر إلا متى كان لـ **الرابط** قيمة. املؤوا **الرابط** أولًا، ثم اختاروا **نافذة جديدة**. ## ما الخطوة التالية؟ - [إضافة زر](/ar/hc/documentation/learn-dxpr-builder/elements/button): كل إعدادات الزر، مع فيديو. - [مؤثرات التحويم](/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%AA%D8%A3%D8%AB%D9%8A%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D8%AD%D9%88%D9%8A%D9%85): تغميق زر أو إضافة ظل عندما يبلغه المؤشر. - [اللون والعلامة](/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%A3%D9%84%D9%88%D8%A7%D9%86-%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A%D8%A9): إبقاء ألوان الأزرار متناسقة مع علامتكم.