إحدى الصفحات المقصودة الحصرية التي نقدمها لك كأعضاء مدى الحياة وعملاء الجمعة السوداء الجدد هي الصفحة المقصودة لبيع البرامج المذهلة. ستفاجئك هذه الصفحة المقصودة بفواصل أقسامها الفريدة ونماذجها عالية الجودة. سنشرح لك في هذه المقالة كيفية استخدام ميزة المحتوى الديناميكي في Divi لإضافة جداول تسعير ديناميكية إليها!

إذا كنت من عملاء Lifetime الحاليين أو إذا كنت قد اشتريت حسابًا جديدًا أو قمت بالترقية خلال تخفيضات الجمعة السوداء ، فيمكنك تنزيل هذا التصميم الآن.

احصل على الصفحة المقصودة الحصرية لبيع برامج الجمعة السوداء

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

طالب بالصفقة قبل أن تختفي!

استخدام كيفية إنشاء جداول تسعير ديناميكية مع Divi

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

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

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

معاينة

قبل أن نتعمق في الأمر ، دعنا نلقي نظرة سريعة على النتيجة النهائية.

هيا بنا نبدأ!

تثبيت البرنامج المساعد المتقدم الحقول المخصصة

أول شيء عليك القيام به هو تثبيت المكون الإضافي Advanced Custom Fields على موقع WordPress الخاص بك بالانتقال إلى الإضافات> إضافة جديد> البحث عن المكون الإضافي وتثبيته .

إنشاء مجموعة ميدانية جديدة

بمجرد تنشيط المكون الإضافي ، يمكنك البدء. أضف مجموعة حقول جديدة.

الاسم + الموقع

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

أضف حقل مستوى العضوية

حان الوقت لبدء إضافة الحقول! سنحتاج ثلاثة في المجموع. أضف حقل مستوى العضوية باستخدام الإعدادات التالية:

• تسمية الحقل: مستوى العضوية 1
• اسم الحقل: members_level_1
• نوع الحقل: اختر
• الاختيارات: أضف محتوى من اختيارك

إضافة حقل وصف العضوية

تواصل بإضافة حقل وصف العضوية.

• تسمية الحقل: وصف العضوية 1
• اسم الحقل: members_description_1
• نوع الحقل: نص

أضف حقل السعر

الحقل الأخير الذي ستحتاج إليه هو حقل السعر.

• تسمية الحقل: السعر 1
• اسم الحقل: price_1
• نوع الحقل: نص

مجموعة الحقول المكررة مرتين وتعديل الاسم والحقول إلى رقم جدول التسعير

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

تغيير عدد كل الحقول داخل المجموعة

سيظهر كل حقل من الحقول الديناميكية التي تقوم بإنشائها في Visual Builder. للتأكد من أنك تعرف المعلومات التي ترتبط بها ، امنح مجموعات الحقول المكررة وحقولها رقمًا مختلفًا.

قم بإنشاء صفحة جديدة باستخدام الصفحة المقصودة لبيع برامج Divi

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

أضف المحتوى الديناميكي إلى الصفحة

عد إلى الواجهة الخلفية لهذه الصفحة وأضف محتوى ديناميكيًا إلى كل جدول من جداول التسعير.

أضف صفًا جديدًا أسفل جدول الأسعار في الصفحة

هيكل العمود

تابع عن طريق تمكين Visual Builder وإضافة صف جديد هنا:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

بعد ذلك ، انتقل إلى إعدادات التباعد وأضف بعض الهوامش المخصصة.

• الهامش الأعلى: 100 بكسل
• الهامش السفلي: 100 بكسل

أضف وحدة CTA إلى العمود 1

قم بتوصيل حقل العنوان بالمحتوى الديناميكي لمستوى العضوية 1

الوحدة الأولى التي سنحتاجها في العمود 1 هي وحدة دعوة للعمل. اربط حقل العنوان بحقل مستوى العضوية 1 الذي أنشأته في الجزء السابق من هذا البرنامج التعليمي.

ربط مربع المحتوى وصف العضوية 1 المحتوى الديناميكي

وبالمثل ، قم بتوصيل مربع المحتوى بوصف العضوية 1.

لون الخلفية

بعد ذلك ، انتقل إلى إعدادات الخلفية وقم بتغيير لون الخلفية لوحدة CTA.

• لون الخلفية: #ffffff

الصورة الخلفية

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

• صورة الخلفية: software-sale-13.png

إعدادات النص

تابع بالذهاب إلى إعدادات النص وتغيير اتجاه النص للوحدة.

• اتجاه النص: يسار

إعدادات نص العنوان

لمطابقة نمط تصميم الصفحة المقصودة ، قم بإجراء بعض التغييرات على إعدادات نص العنوان أيضًا.

• خط العنوان: Rubik
• وزن خط العنوان: خفيف
• لون نص العنوان: # 4258ff
• حجم نص العنوان: 40 بكسل
• ارتفاع خط العنوان: 1.3em

إعدادات النص الأساسي

الشيء نفسه ينطبق على إعدادات النص الأساسي.

• خط الجسم: روبيك
• وزن خط الجسم: متوسط
• لون نص النص: rgba (0،0،0،0.34)
• حجم النص الأساسي: 15 بكسل
• ارتفاع خط الجسم: 1.8em

تباعد

أضف بعض الحشوة العلوية بعد ذلك.

• الحشوة العلوية: 60 بكسل

الحدود

وأضف "8 بكسل" إلى كل زاوية من الزوايا العلوية للوحدة.

مربع الظل

أخيرًا وليس آخرًا ، سنضيف ظل مربع دقيقًا لإنشاء عمق على الصفحة.

• مربع الظل الوضع الرأسي: 50 بكسل
• مربع قوة طمس الظل: 100 بكسل
• لون الظل: rgba (66،88،255،0.2)

أضف وحدة نصية إلى العمود 1

قم بتوصيل Content Box بالسعر 1 للمحتوى الديناميكي

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

لون الخلفية

تابع عن طريق تغيير لون الخلفية لهذه الوحدة.

• لون الخلفية: #ffffff

إعدادات النص

قم بتعديل إعدادات النص أيضًا.

• خط النص: روبيك
• وزن خط النص: خفيف
• لون النص: # 4258ff
• حجم النص: 70 بكسل
• ارتفاع خط النص: 1em

تباعد

أضف بعض قيم الحشو المخصصة بعد ذلك.

• الحشو السفلي: 60 بكسل
• الحشوة اليسرى: 40 بكسل

الحدود

تابع بالانتقال إلى إعدادات الحدود وإضافة "8 بكسل" إلى كلا الزاويتين السفلية.

مربع الظل

أخيرًا وليس آخرًا ، امنح وحدة النص هذه ظل مربع أيضًا.

• مربع الظل الوضع الرأسي: 80 بكسل
• مربع قوة طمس الظل: 100 بكسل
• لون الظل: rgba (66،88،255،0.2)

اسحب وحدة الزر إلى العمود 1

آخر وحدة سنحتاجها في العمود الأول هي وحدة الأزرار. استنساخ إحدى وحدات الأزرار التي يمكنك العثور عليها في الصف السابق ووضعها في العمود 1.

تغيير التباعد

افتح إعدادات وحدة الأزرار وأضف بعض الهوامش المخصصة.

• الهامش العلوي: 30 بكسل
• أسفل مارين: 50 بكسل

استنساخ جميع الوحدات في العمود 1 ووضعها في الأعمدة المتبقية

لتوفير الوقت ، سنقوم باستنساخ جميع الوحدات الثلاث في العمود 1 مرتين ووضع التكرارات في الأعمدة المتبقية من الصف.

تعديل الوحدات في العمود 2

وحدة CTA

قم بتوصيل حقل العنوان بالمحتوى الديناميكي من مستوى العضوية 2

سنحتاج إلى تعديل التكرارات ، بدءًا من وحدة CTA في العمود الثاني. قم بتوصيل حقل العنوان بالمحتوى الديناميكي من مستوى العضوية 2.

ربط مربع المحتوى وصف العضوية 2 المحتوى الديناميكي

افعل نفس الشيء لمربع المحتوى.

أضف خلفية متدرجة

أضف خلفية متدرجة إلى الوحدة التالية.

• اللون 1: # 6959ff
• اللون 2: # c1bfff
• اتجاه التدرج: 15 درجة
• موقف البداية: 22٪
• موضع النهاية: 95٪

تغيير لون نص العنوان

قم بتغيير لون نص العنوان أيضًا.

• لون نص العنوان: #ffffff

تغيير لون النص الأساسي

الشيء نفسه ينطبق على لون النص الأساسي.

• لون النص الأساسي: #ffffff

تغيير التباعد

لوضع جدول التسعير هذا في دائرة الضوء ، سنقوم بالتلاعب بقيم التباعد أيضًا.

• الهامش العلوي: -50 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الحشوة العلوية: 100 بكسل

وحدة النص

قم بتوصيل Content Box بالسعر 2 للمحتوى الديناميكي

استمر بفتح وحدة النص في العمود 2 واربط مربع المحتوى بالمحتوى الديناميكي للسعر 2.

تغيير لون الخلفية

قم بتغيير لون الخلفية لهذه الوحدة بعد ذلك.

• لون الخلفية: # 6959ff

تغيير لون النص

وتغيير لون النص إلى الأبيض.

• لون النص: #ffffff

تغيير التباعد

أخيرًا وليس آخرًا ، قم بتغيير قيم المساحة المتروكة المخصصة في إعدادات التباعد.

• الحشو السفلي: 120 بكسل
• الحشوة اليسرى: 40 بكسل

تعديل الوحدات في العمود 3

وحدة CTA

قم بتوصيل حقل العنوان بالمحتوى الديناميكي لمستوى العضوية 3

سنحتاج أيضًا إلى تغيير الوحدات في العمود 3. اربط حقل العنوان بالمحتوى الديناميكي من مستوى العضوية 3.

ربط مربع المحتوى وصف العضوية 3 المحتوى الديناميكي

الشيء نفسه ينطبق على مربع المحتوى.

أضف خلفية متدرجة

ثم أضف خلفية متدرجة إلى الوحدة النمطية.

• اللون 1: # c87cff
• اللون 2: # ffbcf8
• اتجاه التدرج: 18 درجة
• موقف البداية: 22٪
• موضع النهاية: 95٪

تغيير لون نص العنوان

قم بتغيير لون نص العنوان إلى اللون الأبيض.

• لون نص العنوان: #ffffff

تغيير لون النص الأساسي

افعل نفس الشيء مع لون النص الأساسي.

• لون النص الأساسي: #ffffff

وحدة النص

قم بتوصيل Content Box بالسعر 3 للمحتوى الديناميكي

استمر بفتح وحدة النص في العمود 3 وتغيير المحتوى الديناميكي هنا أيضًا.

تغيير لون الخلفية

أضف لون خلفية مختلفًا بعد ذلك.

• لون الخلفية: # c87cff

تغيير لون النص

أخيرًا وليس آخرًا ، قم بتغيير لون النص إلى اللون الأبيض وبذلك تكون قد انتهيت! لديك الآن ثلاثة جداول تسعير ديناميكية بالكامل على صفحتك!

• لون النص: #ffffff

افكار اخيرة

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

• خصم 25٪ على كل شيء
• جميع الصفحات المقصودة الست مجانًا
• الوصول إلى السمات والإضافات الرائعة لدينا
• جوائز المكافآت

اغتنم الفرصة وكن عضوا اليوم!