كيفية تصميم مخطط مقارنة منتج إبداعي مع Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة خاطفة على مخطط المقارنة الذي سأقوم ببنائه في هذا البرنامج التعليمي.

ما تحتاجه لهذا البرنامج التعليمي

في هذا البرنامج التعليمي ، تحتاج إلى ما يلي:

• موضوع Divi (مثبت ونشط)
• صورتان (حوالي 800 بكسل × 450 بكسل) لتكونا صورتين لمنتجك في مخطط المقارنة.

إنشاء العنوان الخاص بك وصور المنتج

بالنسبة للمبتدئين ، قم بإنشاء صفحة جديدة ، ونشر Visual Builder ، ثم اختر إنشاء صفحتك من البداية.

بعد ذلك ، أضف تخطيط عمود واحد إلى صف القسم الخاص بك.

قبل أن نضيف وحدة نمطية ، دعنا ننتقل إلى إعداد القسم ونقوم بتحديث ما يلي:

لون الخلفية: # 222222
يسار تدرج لون الخلفية: rgba (242،90،71،0.14)
تدرج لون الخلفية لليمين: rgba (255،255،255،0)
نوع التدرج: شعاعي
وضع التدرج فوق صورة الخلفية: نعم

احفظ التغييرات. افتح الآن إعدادات الصف الخاص بك وامنح صفك عرضًا مخصصًا بنسبة 100٪.

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

للمحتوى ، أدخل هذا html:

<h2>Compare</h2>
VS

خط النص: مونتسيرات
وزن خط النص: غامق للغاية
نمط خط النص: TT (أحرف كبيرة)
لون نص النص: rgba (255،255،255،0.3)
حجم نص النص: 3vw
ارتفاع خط النص: 1.8em
اتجاه النص: الوسط

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

خط العنوان 2: مونتسيرات
لون نص العنوان 2: rgba (255،255،255،0.3)
حجم نص العنوان 2: 13vw
العنوان 2 تباعد الأحرف: 1vw
الهامش المخصص: -13vw أسفل

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

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

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

عرض مزراب مخصص: 1
حشوة مخصصة للعمود 1: 2vw يمين
مساحة العمود 2 المخصصة: 2vw يسار

هذا هو المكان الذي سنضع فيه صور منتجين لدينا نرغب في مقارنتها. في العمود الأيسر من صفنا ، أضف صورتك باستخدام وحدة الصورة. في هذا المثال ، أستخدم صورة بتنسيق png تبلغ 800 × 459 بكسل. ثم قم بتحديث إعدادات وحدة الصورة على النحو التالي:

العرض: 70٪
محاذاة الوحدة: صحيح
الحشو المخصص: 40 بكسل للأسفل

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

تحت وحدة الصورة في العمود الأيسر ، أضف وحدة نصية بمحتوى النص التالي: "منتج قديم".

ثم انتقل إلى وحدة النص في الصف الأول أعلاه وانسخ أنماط النص.

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

سيطابق هذا أنماط النص التي نحتاجها بشكل أسرع كثيرًا. الآن كل ما علينا القيام به هو
تحديث حجم النص ومحاذاة:

حجم نص النص: 16 بكسل
اتجاه النص: صحيح

انتقل الآن إلى علامة التبويب خيارات متقدمة وضع CSS المخصص التالي في مربع إدخال العنصر الرئيسي:

text-align:right !important;

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

احفظ التغييرات. ثم انسخ وحدة النص والصقها أسفل الصورة في العمود الأيمن. قم بتغيير محتوى النص إلى "منتج جديد" وقم بتحديث اتجاه النص إلى "يسار".

هذا ما لدينا حتى الآن.

إنشاء مخطط مقارنة المنتج

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

قم بإنشاء صف عمودين جديدين وقم بتحديث إعدادات الصف كما يلي:

العرض المخصص: 100٪
عرض الحضيض: 1
الحشو المخصص: 0 بكسل للأسفل
حشوة مخصصة للعمود 1: 2vw يمين
مساحة العمود 2 المخصصة: 2vw يسار

تُنشئ الحشوة المخصصة للعمود 1 و 2 المساحة التي نحتاجها في منتصف المخططات الشريطية التي سنضيفها.

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

لون الخلفية المتدرج الأيسر: rgba (81،91،214،0.25)
تدرج لون الخلفية لليمين: rgba (255،255،255،0.15)
اتجاه التدرج: 90 درجة
موقف البداية: 35٪
اللون: # 515bd6
وزن الحاجز: 23 بكسل (يجب أن تساوي هذه القيمة قيمة ارتفاع الحاجز وهي 23 بكسل افتراضيًا بحيث يكون الحاجز بنفس عرض خلفية الوحدة النمطية)
المساحة المتروكة المخصصة: 70٪ لليسار (يؤدي ذلك إلى دفع الحاجز إلى اليمين بنسبة 75٪ مما ينتج عنه رسم بياني شريطي بقيمة 25٪ من اليمين)

احفظ التغييرات.

الآن انسخ Divider Module إلى العمود الأيمن من نفس الصف. ثم قم بتحديث الإعدادات التالية:

لون الخلفية المتدرج الأيسر: rgba (255،255،255،0.15)
تدرج لون الخلفية لليمين: rgba (242،90،71،0.25)
موقف البداية: 70٪
اللون: # f25a47
حشوة مخصصة: 30٪ يمين (يؤدي هذا إلى دفع الحاجز إلى اليسار بنسبة 30٪ مما ينتج عنه رسم بياني شريطي بقيمة 70٪ من اليسار.)

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

قم بإنشاء صف عمود واحد بمساحة متروكة مخصصة بمقدار 0 بكسل في الأعلى. ثم أضف وحدة blurb جديدة وقم بتحديث إعدادات وحدة blurb كما يلي:

المحتوى: "ميزة"
استخدام الأيقونة: نعم
الرمز: انظر لقطة الشاشة

لون الأيقونة: rgba (255،255،255،0.3)
استخدام حجم خط الأيقونة: نعم
حجم خط الأيقونة: 30 بكسل
اتجاه النص: الوسط
خط الجسم: مونتسيرات
وزن خط الجسم: عريض للغاية
لون نص النص: rgba (255،255،255،0.3)
تباعد نص الرسالة: 2 بكسل
الهامش المخصص: -20 بكسل

ضمن علامة التبويب "خيارات متقدمة" ، يمكنك إخراج الهامش الافتراضي الموجود أسفل رمز الدعاية المغطاة عن طريق إضافة CSS المخصص التالي في مربع Blurb Image CSS:

margin-bottom: 0px;

الآن بعد أن أصبح لديك أول مثال عملي لميزة مقارنة المنتج ، كل ما عليك فعله هو تكرار الصفين اللذين يشكلان ميزة المقارنة (الصف الذي يحتوي على شريطين / فواصل والصف الذي يحتوي على وحدة دعاية مغالى فيها). أجد أنه من الأسهل استخدام ctrl + c (أو command + c) لنسخ كل صف ثم ctrl + v (أو command + v) للصقها أسفل بعضها البعض. ثم قم فقط بتحديث المساحة المتروكة المخصصة للفواصل المكررة لإظهار قيم مختلفة للمخطط الشريطي.

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

لللمسة الأخيرة ، قد ترغب في إضافة خلفية فاصل إلى القسم الخاص بك. في هذا المثال ، سأضيف ما يلي:

أعلى الحاجز: انظر لقطة الشاشة
لون الفاصل: rgba (255،255،255،0.05)
ارتفاع الحاجز: 19vw

هنا هو النتيجة النهائية.

يعجبني أيضًا مظهر التصميم عندما أقوم بتغيير لون خلفية القسم إلى # 000314.

جعل التصميم مستجيبًا

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

@media (max-width: 980px){
.disable-break .et_pb_column {
    width: 50%!important;
    margin-bottom: 30px;
}
}

سيعمل هذا الرمز على ضبط عرض العمود لأي صف باستخدام فئة CSS "تعطيل الفاصل" إلى 50٪. سيؤدي هذا إلى التأكد من أننا نحتفظ بهيكلنا المكون من عمودين على الأجهزة المحمولة حتى لا ينكسر التصميم. لا تنس نشر التغييرات الخاصة بك.

بمجرد وضع CSS في مكانه ، نحتاج إلى إضافة فئة CSS إلى أي صف يحتوي على هيكل من عمودين.

بالنسبة للمبتدئين ، دعنا نضيف فئة CSS إلى صف العمودين الذي يحمل صورتي المنتج. افتح إعدادات الصف وانتقل إلى علامة التبويب خيارات متقدمة. ثم أدخل "تعطيل - فاصل" في مربع إدخال فئة CSS.

ثم انقر بزر الماوس الأيمن على خيار CSS Class وانقر على "Copy CSS Class".

الآن كل ما عليك فعله هو النقر بزر الماوس الأيمن على كل صف به هيكل من عمودين (جميع الصفوف التي تحتوي على فواصل / أشرطة) وانقر فوق "لصق فئة CSS".

الآن ستحافظ أعمدتك على بنية العمودين على الأجهزة المحمولة وتحافظ على اتساق التصميم ..

افكار اخيرة

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

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

هتافات!