ابنوا جدول أسعار.

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

يبني الفيديو ثلاث باقات لأداة تقارير.

قبل أن تبدؤوا

• يملك دوركم صلاحية التحرير باستخدام DXPR Builder.
• الصفحة مفتوحة في المنشئ. فلصفحة جديدة، انتقلوا إلى المحتوى > إضافة محتوى > صفحة هبوط (/node/add/landing_page) وانقروا حفظ.
• تهبط العناصر الجديدة في أعلى حاويتها، ففي كل لوحة يدخل الزر قبل السعر.

الخطوة 1: إضافة القسم والأعمدة

1. انقروا إضافة العناصر على الصفحة الفارغة واختاروا القسم من تبويب التخطيط.
2. مرّروا المؤشر فوق القسم وافتحوا المزيد > الإعدادات. تحت فئات HTML اختاروا توسيط النص. افتحوا لوحة النمط، واختاروا خلفية رمادية فاتحة وانقروا حفظ.
3. انقروا + على القسم واختاروا صفًا؛ فيأتي بعمودين متساويين.
4. انقروا أيقونة الشبكة (تخطيط الأعمدة) للصف، واختاروا الإعداد المسبق 1/3 + 1/3 + 1/3 وانقروا حفظ.

الخطوة 2: بناء الباقة الأولى

1. انقروا + في العمود الأول واختاروا اللوحة من تبويب المحتوى.
2. مرّروا المؤشر فوق اللوحة وافتحوا المزيد > الإعدادات. اضبطوا العنوان على «Starter»، وأبقوا النوع على DXPR وانقروا حفظ.
3. انقروا + على اللوحة واختاروا زرًا. اضبطوا العنوان على «اختاروا الباقة» والرابط على /signup والنوع على أساسي. فعّلوا زر الكتلة ليملأ العمود، ثم انقروا حفظ.
4. انقروا + على اللوحة مجددًا واختاروا نصًا؛ فيهبط فوق الزر. اكتبوا السعر كـ عنوان 2، وأضيفوا الميزات واحدة في كل سطر وانقروا حفظ.

الخطوة 3: بناء الباقتين الأخريين

1. كرّروا الخطوة 2 في العمود الثاني لـ «Professional». في لوحة النمط للوحة اختاروا الخلفية الأرجوانية، واضبطوا النوع لزرها على نجاح، لتبرز الباقة.
2. كرّروا الخطوة 2 في العمود الثالث لـ «Enterprise»، مع «تسعير مخصص» كالسعر.

الخطوة 4: إضافة العنوان

1. انقروا + على القسم واختاروا نصًا؛ فيهبط فوق الصف.
2. اكتبوا «اختاروا باقتكم» كـ عنوان 2، وأضيفوا سطرًا واحدًا مثل «تسعير شهري بسيط. ألغوا في أي وقت.» وانقروا حفظ.

الخطوة 5: الحفظ والمعاينة

1. انقروا حفظ على شريط أدوات المنشئ.
2. افتحوا قائمة العرض (أيقونة العين) واختاروا معاينة.

للمضي أبعد

غير معروض في الفيديو:

• أربع باقات: اختاروا الإعداد المسبق 1/4 + 1/4 + 1/4 + 1/4 بدلًا منه وابنوا عمودًا رابعًا.
• شارة الأكثر شعبية: أضيفوا عنصر نص في أعلى اللوحة المميزة مع «الأكثر شعبية» بالعريض.
• السنوي والشهري: أضيفوا سطر نص فوق الصف مثل «شهري | سنوي (وفّروا 20%)». فالسطر ثابت؛ والمبدل الحي يحتاج عنصر HTML مع سكربتكم الخاص.
• علامات الميزات: الصقوا علامة صح قبل كل سطر ميزة، أو أضيفوا عنصر أيقونة فوق القائمة.

ما سترونه

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

إذا لم تظهر الباقات كما هي معروضة

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

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

• صفحة المنتج لصفحة كاملة بميزات وأسعار
• عنصر البطاقة لنمط بطاقة آخر
• عنصر اللوحة لكل إعدادات اللوحة