كيفية إضافة تبديل شهري وسنوي إلى جدول تسعير العنصر

الوجبات السريعة الرئيسية

• يحتاج تبديل جدول تسعير Elementor إلى مجموعتين من البطاقات، واحدة بأسعار شهرية والأخرى بأسعار سنوية، وتحكم يوضح مجموعة واحدة في كل مرة.
• يمكن للمكون الإضافي Elementor المجاني القيام بذلك باستخدام أداة علامات التبويب المتداخلة: علامة تبويب واحدة لكل فترة فاتورة، وصف من بطاقات التسعير داخل كل علامة تبويب، بدون إضافة.
• تمنح أداة تبديل المحتوى في Master Addons Pro المحول المظهر الذي يتوقعه الأشخاص، وحبة أقراص تحمل ملصقات شهرية وسنوية، وتحميل كل مجموعة من قالب القسم المحفوظ.
• تحمل أداة جدول تسعير الإضافات الرئيسية سعرًا واحدًا لكل بطاقة ولا تحتوي على مفتاح فوترة خاص بها، لذلك يقوم كل مسار في هذه الصفحة بإقرانها بأداة ثانية.
• يتم تخزين القوالب المحفوظة من حاوية Elementor كنوع الحاوية، وتعرض قائمة أقسام تبديل المحتوى قوالب نوع القسم فقط، لذا احفظ صف التسعير كقسم.
• اعرض الأسعار السنوية شهريًا باستخدام مذكرة “pilled سنويًا، لذا فإن حالتي التبديل تقارنان الإعجاب بالإعجاب.

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

يبني هذا الدليل التبديل بثلاث طرق على نفس الخطط الثلاث. يستخدم المسار 1 أداة Elementor Nested Tabs المجانية. يستخدم المسار 2 عنصر واجهة مستخدم تبديل المحتوى من الإضافات الرئيسية مع قالبين للقسم المحفوظ، وهو الإصدار الذي يبدو وكأنه مفتاح فواتير حقيقي. يغطي الطريق 3 الأدوات التي يتم شحنها مع مفتاح مدمج وما تتخلى عنه من أجل الراحة.

كيف يعمل تبديل التسعير في Elementor

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

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

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

الخطوة الأولى: إنشاء البطاقات الشهرية والسنوية

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

الآن انقر بزر الماوس الأيمن على الحاوية الأصلية واختر نسخة مكررة. في النسخة، افتح كل بطاقة وقم بتغيير السعر. بالنسبة للفوترة السنوية، قم بتشغيل مفتاح البيع، وأدخل السعر الشهري بالسعر الأصلي والسعر السنوي للشهر بالسعر، وقم بتعيين الفترة على “/شهر، يتم إصدار فاتورة سنويًا بعملة. الرقم الشهري المشطوب يقوم بالبيع.

لديك الآن صفين في الصفحة. يقرر الطريقان 1 و2 كيفية عرضهما واحدًا تلو الآخر.

المسار 1: علامات التبويب المتداخلة (عنصر مجاني)

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

1. اسحب علامات التبويب عنصر واجهة المستخدم (المتداخل، مع رمز الحاوية) على الصفحة أعلاه حيث يجب أن يكون السعر موجودًا.
2. في علامة التبويب "المحتوى"، أعد تسمية علامة التبويب #1 إلى شهري وعلامة التبويب #2 إلى سنويا. حذف علامة التبويب الثالثة.
3. اسحب حاوية التسعير الشهرية إلى لوحة علامات التبويب الشهرية والحاوية السنوية إلى اللوحة السنوية. استخدم Navigator (لوحة الطبقات) إذا كان من الصعب الوصول إلى هدف الإسقاط.
4. في علامة التبويب "النمط"، قم بتعيين محاذاة عنوان علامة التبويب في المنتصف وامنح علامة التبويب النشطة لون التركيز الخاص بك.

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

المسار 2: تبديل المحتوى بقالبين من الأقسام

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

احفظ كل صف كقالب قسم

1. انقر بزر الماوس الأيمن فوق مقبض حاوية التسعير الشهرية واختر حفظ كقالب.
2. قم بتسميتها “Pricing شهريًا واحفظها. افعل الشيء نفسه بالنسبة للحاوية السنوية مثل “Pricing سنويًا”.
3. يفتح القوالب > القوالب المحفوظة في مسؤول WordPress وتحقق من عمود النوع.

يقوم Elementor بحفظ الحاوية كـ حاوية اكتب، وتعرض قائمة أقسام عنصر واجهة مستخدم Toggle Content قوالب فقط قسم اكتب، ولهذا السبب تقوم الخطوة 3 بفحص العمود. إذا كان القالبان الخاصان بك يقولان حاوية، فلن يُظهر الجزء المنسدل “Choose division” شيئًا. الإصلاح هو إنشاء الصف داخل قسم قديم (العنصر > الإعدادات > الميزات، أو إضافة قسم من الملاح) قبل الحفظ، أو الاختيار صفحة كنوع القالب في عنصر واجهة المستخدم وحفظ الصفوف كقوالب صفحة بدلاً من ذلك. يعمل كلا المسارين؛ يحتفظ القسم الأول بالإعدادات الافتراضية لعنصر واجهة المستخدم.

أضف عنصر واجهة مستخدم تبديل المحتوى

1. يجر تبديل المحتوى من مجموعة الإضافات الرئيسية إلى الصفحة التي ينتمي إليها التسعير. احذف حاويتي التسعير الأصليتين، حيث أن القوالب تحتوي عليهما الآن.
2. في ال عناصر مكرر، افتح العنصر الأول. اضبط التسمية على شهرياكتب ل قالب، نوع القالب ل قسمواختر “Pricing شهريًا” ضمن قسم اختر.
3. افتح العنصر الثاني، وقم بتعيين التسمية على سنويا واختر “Pricing سنويًا”.
4. تحت تبديل الإعدادات، اترك Active Index عند 1 حتى يظهر شهريًا أولاً، ثم اضبط اللون النشط على لهجتك.

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

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

الطريق 3: أداة تسعير مزودة بمفتاح مدمج

تقوم بعض الإضافات بشحن عنصر واجهة مستخدم التسعير مع مفتاح الفوترة الموجود بداخله بالفعل، لذلك تقوم بإدخال سعر شهري وسعر سنوي لكل بطاقة وتقوم الأداة بسحب التبديل. يحتوي HT Mega على أداة Flip Switcher Pricing Table التي تعمل بهذه الطريقة. معظم الآخرين، بما في ذلك الإضافات الأساسية والإضافات المميزة وPowerPack وThe Plus Addons، يفعلون ما يفعله الطريق 2: أداة تبديل أو تحويل منفصلة (Pro في كل من هذه المكونات الإضافية) تغلف مجموعتين من البطاقات. توجد قوائم مقارنة عناصر واجهة المستخدم في جدول التسعير التي تخطط لكل عنصر واجهة مستخدم للتبديل.

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

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

أقسام تسعير التبديل الجاهزة

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

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

أي طريق للاختيار

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

الأسئلة المتداولة

الأفكار النهائية

التبديل الشهري والسنوي في جدول تسعير Elementor هو صفين تسعير وعنصر تحكم واحد. تمنحك علامات التبويب المتداخلة التحكم مجانًا وتقرأ كعلامات تبويب. يمنحك تبديل المحتوى، في Master Addons Pro، مفتاح حبوب منع الحمل ويقوم بتحميل كل صف من قالب القسم المحفوظ، مع ميزة واحدة وهي أن القوالب يجب أن تكون من نوع القسم. توفر الأداة المزودة بالمفتاح المدمج خطوة وتكلفك اختيار التخطيط.

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

القراءة ذات الصلة

• تصميم جدول التسعير: 10 نصائح مع أمثلة
• تبديل عنصر واجهة المستخدم للمحتوى
• تبديل وثائق المحتوى
• وثائق عناصر واجهة المستخدم لجدول التسعير
• كيفية إنشاء علامات التبويب في العنصر