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

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

هيا بنا نبدأ.

نظرة خاطفة

ابدء

في هذا البرنامج التعليمي ، كل ما ستحتاجه هو Divi. وسنستخدم Visual Builder. نظرًا لأننا سنبني الجداول من البداية ، فستحتاج إلى إنشاء صفحة جديدة ونشر المنشئ المرئي ثم تحديد الخيار "إنشاء مخطط من الصفر".

بعد ذلك ، أنت جاهز للبدء. لنفعلها!

إعداد صف الأعمدة الخمسة لجداول التسعير الأفقية

بالنسبة للمبتدئين ، دعنا نعطي تخطيطًا من خمسة أعمدة للقسم الذي ينتظرنا بالفعل في المنشئ المرئي.

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

العرض: 1200 بكسل
محاذاة القسم: المركز
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

لون الخلفية: # 00cbc9
لون خلفية العمود 2: # 00cbc9
لون خلفية العمود 3: #eeeeee
لون خلفية العمود 4: #eeeeee

ثم قم بتحديث الحجم على النحو التالي:

اجعل هذا الصف بعرض كامل: نعم
عرض الحضيض: 1
معادلة ارتفاعات العمود: نعم

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

ملء الأعمدة بوحدات المحتوى

عنوان المنتج

في العمود الأول ، أضف وحدة نصية بالعنوان التالي في مربع المحتوى (تحت علامة تبويب النص):

<h2>Starter</h2>

سيكون هذا بمثابة مكان لعنوان خطتك أو منتجك الذي تعرضه. في هذا المثال ، ستكون هذه خطة "بداية" من نوع ما.

ثم قم بتحديث إعدادات التصميم التالية:

نمط خط العنوان 2: TT
لون نص العنوان 2: #ffffff
حجم نص العنوان 2: 38 بكسل
الحشو المخصص (سطح المكتب): 90٪ علوي ، 90٪ سفلي ، 10٪ يسار
حشوة مخصصة (كمبيوتر لوحي): 30٪ علوي ، 30٪ سفلي

إضافة دعاية مغالى فيها لعناوين فئة الميزة

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

انتقل إلى علامة تبويب التصميم وقم بتحديث بقية الإعدادات على النحو التالي:

لون الأيقونة: # 00cbc9
وضع الصورة / الرمز: اليسار
حجم نص العنوان: 16 بكسل
الحشو المخصص: أسفل 2vw
عرض حد الصف السفلي: 4 بكسل
لون الحد السفلي: #cccccc

نظرًا لأنه سيتم استخدام هذا التصميم الدعاية الدعاية كعنوان لفئة ميزة في الأعمدة 2 و 3 و 4 ، يمكنك نسخ وحدة الدعاية الدعاية ولصقها في العمود الثاني والثالث.

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

أضف وحدات نصية لقائمة أوصاف الميزات

التالي أضف وحدة نصية تحت دعاية مغالى فيها في العمود الثاني. ثم قم بإضافة كود html للجدول التالي في مربع المحتوى:

• وصف الميزة هنا.
• وصف الميزة هنا.
• وصف الميزة هنا.
• وصف الميزة هنا.

نوع نمط قائمة غير مرتبة: مربع
مسافة بادئة لعنصر قائمة غير مرتبة: 4 بكسل
الحشو المخصص: 20 بكسل أعلى ، 20 بكسل أسفل ، 5٪ يسار ، 5٪ يمين

الآن كما فعلنا مع الدعاية المغلوطة ، امض قدمًا وانسخ وحدة النص والصقها أسفل كل وحدة من وحدات الدعاية الدعاية في العمودين 3 و 4.

إضافة السعر والزر إلى العمود الأخير

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

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

ثم تخلص من لون الخلفية عن طريق إضافة رمز لون شفاف تمامًا.

لون الخلفية: rgba (255،255،255،0)

ثم قم بتحديث ما يلي:

لون خلفية رأس الجدول: rgba (255،255،255،0)
لون نص العملة والتردد: #ffffff
حجم نص العملة والتردد: 30 بكسل
لون نص السعر: #ffffff
عرض الحدود: 0 بكسل
الهامش المخصص (الكمبيوتر اللوحي): -100٪ يمين
الهامش المخصص (الهاتف الذكي): 0٪ يمين
الحشو المخصص: 0 بكسل أعلى ، 10 بكسل أسفل ، 0 بكسل يسار ، 0 بكسل يمين

انتقل الآن إلى إعدادات الجدول الفردية عن طريق النقر فوق رمز الترس على يسار قائمة عرض الجدول الفردي.

الآن احذف المحتوى الافتراضي للعنوان والعنوان الفرعي والمحتوى. سيؤدي هذا إلى ترك نص العملة والسعر فقط.

الآن أعرف ما تفكر فيه في هذه المرحلة. ماذا تفعل حيال هذا الخط الحدودي تحت نص السعر؟ حسنًا ، هناك مقتطف صغير من css المخصص لذلك. انتقل إلى علامة التبويب "خيارات متقدمة" وأضف CSS التالي إلى مربع إدخال "أعلى التسعير":

أعلى الأسعار:

border: none;

الآن هذه هي الطريقة التي نجحت بها في تحديد جدول التسعير لنص التسعير ورمز العملة فقط!

بالنسبة للزر ، أضف وحدة زر ضمن وحدة جداول التسعير وقم بتحديث ما يلي:

محاذاة الزر: الوسط
لون النص: فاتح
الهامش المخصص (الكمبيوتر اللوحي): -100٪ يمين
الهامش المخصص (الهاتف الذكي): 0٪ يمين

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

إضافة تصميم السهم وتباعد الأعمدة المتجاوب

إضافة السهم عن طريق طبقات التدرجات

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

لإضافة خلفية متدرجة ، انتقل إلى إعدادات الصف وأضف ما يلي:

العمود 1 خلفية متدرجة اللون الأيسر: rgba (255،255،255،0)
العمود 1 خلفية متدرجة اللون الأيمن: #eeeeee (يجب أن يتطابق هذا مع لون خلفية العمود 2)
اتجاه التدرج: -245deg
موقف البداية: 75٪
موقف النهاية: 0٪

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

العمود 1 خلفية متدرجة اللون الأيسر: #eeeeee
العمود 1 خلفية متدرجة اللون الأيمن: rgba (255،255،255،0)
اتجاه التدرج: 245 درجة
موقف البداية: 25٪
موقف النهاية: 0٪

لاحظ أن القيم متقابلة بالتساوي. على سبيل المثال ، تغير ترتيب الألوان ، تغير 245 درجة من سلبي إلى إيجابي ، و 75٪ الآن 25٪ (الفرق). هذه هي الطريقة التي تجعل من جانبي نقطة السهم متناظرة تمامًا.

التباعد بين الصفوف والأعمدة

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

الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل ، 0 بكسل يسار ، 0 بكسل يمين
حشوة مخصصة 2: 5٪ علوي ، 5٪ سفلي ، 2٪ يسار ، 2٪ يمين
حشوة مخصصة 3: 5٪ علوي ، 5٪ سفلي ، 2٪ يسار ، 2٪ يمين
الحشو المخصص 4: 5٪ علوي ، 5٪ سفلي ، 2٪ يسار ، 2٪ يمين
حشوة مخصصة 5: 10٪ علوي ، 10٪ سفلي

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

تكرار الجدول للجداول وأنظمة الألوان الجديدة

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

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

ضمن "ضمن" اختر "هذا القسم".
ضمن "استبدال العرض" ، أضف اللون: # f84f51
ثم حدد المربع لاستبدال جميع القيم الموجودة في القسم (وليس لون الخلفية فقط).

ثم انقر فوق "استبدال" وراقب حدوث السحر. هذه طريقة سريعة وسهلة لتغيير كل مثيلات اللون السابق بلون جديد.

لا تنس حفظ إعدادات الصف قبل الخروج لحفظ التغييرات.

الآن لديك جدول جديد بنظام ألوان جديد.

كرر هذه العملية مرة أخرى لإضافة جدول آخر باللون: # bdc958

صنع طاولة مميزة

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

للقيام بذلك ، انتقل إلى إعدادات القسم للقسم الثاني (الجزء الأوسط) وقم بتحديث ما يلي:

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الرأسي: 0 بكسل
مربع قوة طمس الظل: 80 بكسل

لاستبدال لون الخلفية الرمادية ، انتقل إلى إعدادات الصف وابحث عن لون خلفية العمود 2 (#eeeeee). انقر بزر الماوس الأيمن فوقه وانقر فوق "بحث واستبدال". التحديث التالي:

ضمن "ضمن" اختر "هذا القسم".
ضمن "استبدال العرض" ، أضف اللون: #ffffff
ثم حدد المربع لاستبدال جميع القيم الموجودة في القسم (وليس لون الخلفية فقط).
ثم انقر فوق "استبدال".

استخدام البحث والاستبدال لاختبار الخطوط

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

تحت "ضمن" ، احتفظ بـ "هذه الصفحة".
ضمن "استبدال العرض" ، حدد خطًا (أنا أستخدم Roboto Condensed).
ثم حدد المربع لاستبدال جميع القيم الموجودة في القسم (أو لا يمكنك تحديده لاستبدال جميع خطوط h2).
ثم انقر فوق "استبدال".

الآن تم تغيير جميع الخطوط في جميع أنحاء الصفحة بأكملها.

هذا كل شيء! الآن اكتملت جداول التسعير الأفقية.

دعنا نتحقق من النتيجة.

يعمل التعديل المكون من خمسة أعمدة على الجهاز اللوحي والهاتف الذكي بشكل جميل أيضًا.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!