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

في كتلة جدول ، يمكننا تخصيص الخصائص التالية:

يمكننا أيضًا الإشارة في كل خلية إلى محاذاة النص وما إذا كان الخط غامقًا أم مائلًا ، وإضافة روابط. بالإضافة إلى ذلك ، يمكننا تعديل الجدول في أي وقت عن طريق إضافة أو إزالة صفوف و / أو أعمدة.
بهذه الطريقة ، نرى أنه يمكننا بسهولة إنشاء الجدول التالي:
| خطط اختبار Nelio A / B | ||
|---|---|---|
| الأساسي | احترافي | مشروع |
| لأصحاب الأعمال الحرة والمواقع الشخصية | لأصحاب المشاريع الصغيرة | لفرق تركز على التحسين |
| 29 يورو / شهر | 89 يورو / شهر | 259 يورو / شهر |
| موقع واحد | 5 مواقع | ؟ 10 مواقع |
| 5000 زيارة لصفحات تم اختبارها | 35000 زيارة للصفحات المختبرة | 200000 زيارة للصفحات المختبرة |
| الإشتراك | الإشتراك | الإشتراك |
هذا أبسط وأسرع بكثير مما يمكننا فعله بالمحرر الكلاسيكي. والنتيجة التي تم الحصول عليها يمكن أن تفيد بالتأكيد في إظهار جدول البيانات.
قيود كتلة الجدول
على الرغم من أنه كان من السهل جدًا علينا إنشاء الجدول السابق ، إلا أننا واجهنا بعض القيود. من ناحية أخرى ، لا تستجيب الجداول التي تصممها باستخدام كتلة نوع الجدول في Gutenberg. أي أن الجدول لا ينكسر ولكنه يصبح أصغر دون أن يكون قادرًا على إظهار العناصر المختلفة للجدول حسب الأعمدة:

يعرض الجدول الذي يتكيف تمامًا مع الأجهزة عناصر الجدول عن طريق تقسيم الجدول إلى أعمدة ، بحيث يتم عرض جميع الخلايا بشكل أفضل.
بالإضافة إلى القدرة (in) على التكيف مع الأجهزة ، كما قد تكون لاحظت ، في كتلة الجدول لا يمكننا بسهولة تغيير نوع الخط وحجمه والألوان وما إلى ذلك في كل خلية. وهذا يعني أنه نظرًا لجميع قيودها ، فإن كتلة جدول Gutenberg ليست مفيدة لإنشاء جدول أسعار جذاب لمنتجاتك.
كيف يمكننا إنشاء هذه الجداول المتجاوبة؟
البدائل
كتلة الأعمدة
قد يكون البديل هو محاولة تخطيط الجدول مع كتلة العمود:
الأساسي
لأصحاب الأعمال الحرة والمواقع الشخصية
29 يورو / شهر
موقع واحد
5000 زيارة لصفحات تم اختبارها
احترافي
لأصحاب المشاريع الصغيرة
89 يورو / شهر
5 مواقع
35000 زيارة للصفحات المختبرة
مشروع
لفرق تركز على التحسين

259 يورو / شهر
؟ 10 مواقع
200000 زيارة للصفحات المختبرة
ميزة كتلة العمود ، مقارنةً بكتلة الجدول ، هي أنها تستجيب بشكل كامل ، وعلى شاشة الهاتف المحمول سنرى أن كل خطة معروضة خلف الأخرى.

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

Getwid
وبالمثل ، يتضمن المكون الإضافي Getwid أيضًا مجموعة كاملة من الكتل المتوافقة تمامًا مع محرر Gutenberg. بسرعة ، يمكنك بسهولة إنشاء جدول أسعار سريع الاستجابة مثل هذا:

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

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

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

بعد تحديد تصميم الجدول المطلوب ، لديك محرر يسمح لك بتعديل عدد الأعمدة وتخصيص الكثير من الميزات لكل من الخطط المعروضة. ويمكنك أيضًا تغيير التخطيط في أي وقت. أخيرًا ، كما في السابق ، يمكن تضمين الجدول في أي صفحة أو منشور برمز قصير.
المكونات الإضافية المجانية الأخرى التي تدمج محرري جدول الأسعار هي:
- جدول التسعير بواسطة ARPrice
- جداول التسعير WordPress Plugin - جداول أسعار سهلة بواسطة تطبيقات Fatcat
- منشئ جدول التسعير المستجيب - wpPricing Builder
- جداول تسعير WRC
- منشئ جدول التسعير - جداول تسعير AP Lite
- جدول تسعير TC حسب الموضوع
- جدول التسعير - bh A WP Life
خاتمة
كما ترى ، في WordPress لديك مجموعة متنوعة من البدائل لبناء جداول الأسعار دون أي تكلفة إضافية ودون الحاجة إلى كتابة التعليمات البرمجية مباشرةً. لذا فإن الأمر يتعلق فقط باختيار الخيار الأنسب لاحتياجاتك.
تذكر أن الصفحة التي تعرض فيها أسعار منتجاتك في نهاية المطاف هي الأكثر أهمية لجذب العملاء. لذا ، فإن الوقت الذي تقضيه في جعلها جذابة لن تذهب سدى. ولإلهامك ، يمكنك إلقاء نظرة على تصميم جدول الأسعار لمنتج اختبار Nelio A / B ، وهو المنتج الذي يبرز كصورة مميزة لهذا المنشور؟
