كيفية إنشاء جدول أسعار WordPress باستخدام Toggle

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

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

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

إنشاء جداول جميلة
مع محرر الكتل

كيفية إنشاء جدول أسعار WordPress باستخدام Toggle

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

بمجرد تثبيت المكونات الإضافية على موقعك، انتقل إلى عملية البرنامج التعليمي.

الخطوة 01: إضافة كتلة المحتوى المبوبة

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

إضافة كتلة المحتوى المبوبة

سيتم إضافة كتلة المحتوى المبوب إلى المحرر على الفور.

تمت إضافة علامة تبويب إلى المحرر

الخطوة 02: إضافة كتلة TableBerg داخل كتلة المحتوى المبوب

ستتيح لك كتلة المحتوى المبوب إضافة كتل أخرى داخلها. انقر فوق زر الجمع (+). ابحث عن كتلة TableBerg وأضفها.

الخطوة 03: إنشاء جدول الأسعار في علامة التبويب الأولى

قم بتحديد عدد الصفوف والأعمدة للجدول الخاص بك. نحن نختار 3*3 لأننا نريد إنشاء جدول بثلاثة أعمدة.

قم بتحديد الصفوف والأعمدة لجدولك

يمكنك رؤية أن تخطيط الجدول جاهز.

تخطيط الجدول جاهز

الخطوة 04: إضافة المحتوى إلى الجدول

تتيح لك كتلة TableBerg إضافة أنواع مختلفة من المحتوى إلى خلاياها. يمكنك إضافة نصوص وقوائم وصور وأزرار CTA والمزيد.

# إضافة عناوين الأعمدة

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

يمكنك أن ترى أننا أضفنا ثلاثة عناوين، ومحاذاتها في المنتصف، وزاد حجمها.

# إضافة خطط التسعير

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

إضافة خطط التسعير

# قائمة ميزات المنتج

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

يمكنك أن ترى أننا قمنا بإدراج جميع ميزات كل خطة في جميع الأعمدة.

عرض ميزات المنتج

# إضافة أزرار CTA

أخيرًا، ابدأ بإضافة أزرار CTA إلى الأعمدة باستخدام كتلة الأزرار.

إضافة أزرار CTA

أصبحت أزرار CTA جاهزة على جدول التسعير.

أزرار CTA في جدول التسعير

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

الخطوة 05: إنشاء جدول جديد في علامة تبويب أخرى

قم بإنشاء علامة تبويب جديدة بالنقر فوق أيقونة زائد (+)لا تنسى إعادة تسمية علامات التبويب حسب تفضيلاتك.

إنشاء علامة تبويب جديدة باستخدام كتلة المحتوى المبوب

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

إنشاء جدول جديد في علامة تبويب جديدة

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

خاتمة

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

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

أخبرنا برأيك في مربع التعليقات أدناه. ولا تتردد في سؤالنا إذا كان لديك أي أسئلة.



فريق Tableberg