تحويل الأعمدة إلى خطط التسعير مع Divi

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

دعنا نذهب اليها.

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط خطط تسعير العمود مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لنبدأ في إعادة التكوين!

اشترك في قناتنا على اليوتيوب

إضافة قسم جديد

خلفية متدرجة

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

• اللون 1: #eded
• اللون 2: #ffffff
• موقف البداية: 30٪
• موضع النهاية: 30٪

تباعد

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

• الحشوة العلوية: 200 بكسل
• الحشو السفلي: 200 بكسل

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 80٪ (كمبيوتر مكتبي وتابلت) ، 90٪ (هاتف)
• العرض الأقصى: 1400 بكسل (سطح المكتب) ، 90٪ (الجهاز اللوحي) ، 100٪ (الهاتف)

إعدادات العمود 1

سنحتاج أيضًا إلى تعديل إعدادات العمود ، بدءًا من الإعداد الأول. افتح إعدادات العمود 1.

خلفية متدرجة

قم بتطبيق خلفية التدرج التالية على العمود 1:

• اللون 1: # f7f7f7
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: أسفل
• موقف البداية: 31٪
• مركز النهاية: 31٪

الحدود

أضف نصف قطر حد "20 بكسل" إلى العمود أيضًا.

مربع الظل

ولإنشاء بعض العمق على الصفحة ، سنضيف ظل مربع دقيقًا أيضًا.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.11)

مقياس التحويل الافتراضي

كما تلاحظ في معاينة هذا المنشور ، تم تغيير الأعمدة قليلاً. انتقل إلى إعدادات التحويل وتأكد من بقاء خيار مقياس التحويل "100٪" في حالته الافتراضية.

• القاع: 100٪
• اليمين: 100٪

تحوم مقياس التحويل

قم بتعديل قيم مقياس التحويل عند التمرير.

• القاع: 120٪
• اليمين: 120٪

ترجمة التحويل الافتراضي

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

• الجزء السفلي: 34 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• اليمين: 0 بكسل

تحوم تحويل الترجمة

أعد تحويل قيم الترجمة إلى وضعها الطبيعي عند التمرير.

• القاع: 0 بكسل
• اليمين: 0 بكسل

تدوير التحويل الافتراضي

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

• اليسار: 352 درجة (سطح المكتب) ، 0 درجة (كمبيوتر لوحي وهاتف)

تحوم تحويل استدارة

أعد القيمة إلى "0deg" عند المرور بالماوس.

• اليسار: 0 درجة

فيضانات

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

• التدفق الأفقي: مرئي
• التدفق العمودي: مرئي

فهرس Z الافتراضي

قم بتغيير الفهرس z للعمود عبر أحجام الشاشات المختلفة بعد ذلك. سيساعدنا هذا في الحفاظ على التكديس بالترتيب.

• الفهرس Z: 9 (سطح المكتب) ، 11 (الجهاز اللوحي والهاتف)

مؤشر تحوم Z.

عند التمرير ، نريد أن يظهر العمود فوق الأعمدة الأخرى. لتحقيق ذلك ، سنزيد مؤشر z عند التمرير.

• الفهرس Z: 11

الانتقالات

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

• مدة الانتقال: 500 مللي ثانية

إعدادات العمود 2

إلى العمود الثاني! انطلق وافتح إعدادات العمود.

خلفية متدرجة

قم بتطبيق إعدادات الخلفية المتدرجة التالية:

• اللون 1: # fff200
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: أسفل
• موقف البداية: 31٪
• مركز النهاية: 31٪

الحدود

أضف "20 بكسل" من نصف قطر الحد بعد ذلك.

مربع الظل

جنبا إلى جنب مع مربع الظل.

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.14)

مقياس التحويل الافتراضي

العمود الثاني هو خطتنا التسعير المميزة. للتأكد من أن هذا لا يمر دون أن يلاحظه أحد ، سنزيد حجم العمود في إعدادات مقياس التحويل.

• السفلي: 112٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
• يمينًا: 112٪ (كمبيوتر مكتبي) ، 100٪ (كمبيوتر لوحي وهاتف)

تحوم مقياس التحويل

قم بتعديل قيم مقياس التحويل عند التمرير.

• القاع: 120٪
• اليمين: 120٪

فيضانات

قم بتغيير الفائض الأفقي والعمودي بعد ذلك.

• التدفق الأفقي: مرئي
• التدفق العمودي: مرئي

فهرس Z الافتراضي

بعد ذلك ، انتقل إلى إعدادات الرؤية وقم بزيادة فهرس العمود z.

• الفهرس Z: 10

مؤشر تحوم Z.

قم بتعديل الفهرس z عند التمرير.

• الفهرس Z: 12

الانتقالات

وزيادة مدة الانتقال في إعدادات الانتقالات.

• مدة الانتقال: 500 مللي ثانية

إعدادات العمود 3

إلى العمود الثالث والأخير! افتح إعدادات العمود.

خلفية متدرجة

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

• اللون 1: # f7f7f7
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: أسفل
• موقف البداية: 31٪
• مركز النهاية: 31٪

الحدود

أضف نصف قطر حد "20 بكسل" بعد ذلك.

مربع الظل

جنبا إلى جنب مع الظل مربع خفية.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.11)

مقياس التحويل الافتراضي

حان الوقت لتحويل العمود! تأكد من بقاء قيم مقياس التحويل الافتراضية "100٪".

• القاع: 100٪
• اليمين: 100٪

تحوم مقياس التحويل

قم بتعديل هذه القيم عند التمرير.

• القاع: 120٪
• اليمين: 120٪

ترجمة التحويل الافتراضي

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

• الجزء السفلي: -34 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• اليمين: 0 بكسل

تحوم تحويل الترجمة

أعد القيم إلى "0 بكسل" عند المرور بالماوس.

• القاع: 0 بكسل
• اليمين: 0 بكسل

تدوير التحويل الافتراضي

تابع عن طريق تدوير العمود في حالته الافتراضية.

• اليسار: 8deg (Desktop) ، 0deg (Tablet & Phone)

تحوم تحويل استدارة

قم بتغيير قيمة تدوير التحويل الأيسر مرة أخرى إلى "0 بكسل" عند التمرير.

• اليسار: 0 درجة

فيضانات

تأكد من ظهور الفائض بعد ذلك.

• التدفق الأفقي: مرئي
• التدفق العمودي: مرئي

فهرس Z الافتراضي

بعد ذلك ، انتقل إلى إعدادات الرؤية وتأكد من أن فهرس z الافتراضي هو 9.

• الفهرس Z: 9

مؤشر تحوم Z.

قم بتعديل الفهرس z عند التمرير.

• الفهرس Z: 11

الانتقالات

وزيادة مدة الانتقال في إعدادات الانتقالات.

• مدة الانتقال: 500 مللي ثانية

أضف الوحدة النمطية للدعاية إلى العمود 1

أضف عنوانا

حان الوقت لبدء إضافة الوحدات النمطية إلى العمود الأول! أضف وحدة Blurb Module جديدة وأدخل عنوانًا.

حدد أيقونة

حدد رمزًا بعد ذلك.

إعدادات الرمز

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات الرمز وفقًا لذلك:

• لون الأيقونة: # 000000
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 50 بكسل

إعدادات العنوان

قم بتغيير إعدادات نص العنوان بعد ذلك.

• خط العنوان: بوبينز
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 000000
• حجم نص العنوان: 27 بكسل

تباعد

وأضف بعض الهامش العلوي أيضًا.

• الهامش العلوي: 80 بكسل

أضف وحدة Divider Module إلى العمود 1

الرؤية

ننتقل إلى الوحدة الثانية ، وهي وحدة فاصل. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

انتقل إلى علامة تبويب التصميم وقم بتغيير لون الفاصل إلى الأسود.

• لون الخط: # 000000

تحجيم

قم بتعديل إعدادات التحجيم أيضًا.

• وزن الحاجز: 6 بكسل
• العرض: 14٪
• محاذاة الوحدة: المركز
• الارتفاع: 0 بكسل

تباعد

أخيرًا ، أضف بعض الهامش العلوي.

• الهامش الأعلى: 50 بكسل

أضف وحدة النص رقم 1 إلى العمود 1

إضافة محتوى

تابع عن طريق إضافة Text Module مباشرة أسفل Divider Module وأدخل بعض المحتوى الذي تختاره.

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: بوبينز
• وزن خط النص: خفيف
• محاذاة النص: الوسط
• لون النص: # 4f4f4f
• ارتفاع خط النص: 2.3em

تباعد

أضف بعض قيم الهوامش والحشو المخصصة أيضًا.

• الهامش الأعلى: 50 بكسل
• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل

أضف وحدة النص رقم 2 إلى العمود 1

إضافة محتوى

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

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: بوبينز
• وزن خط النص: ثقيل
• محاذاة النص: الوسط
• لون النص: # 000000
• حجم النص: 47 بكسل
• ارتفاع خط النص: 1em

تباعد

أضف بعض الهامش العلوي والسفلي المخصص أيضًا.

• الهامش الأعلى: 50 بكسل
• الهامش السفلي: 80 بكسل

أضف وحدة الزر إلى العمود 1

أضف نسخة

الوحدة التالية والأخيرة التي نحتاجها في العمود 1 هي وحدة الأزرار. أدخل نسخة من اختيارك.

انتقام

انتقل إلى علامة تبويب التصميم وقم بتغيير محاذاة الزر إلى المركز.

• محاذاة الزر: الوسط

إعدادات الزر

صمم الزر أيضًا.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 17 بكسل
• لون نص الزر: # 000000
• لون خلفية الزر: #FFFFFF
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل
• خط الزر: بوبينز
• وزن خط الزر: غامق

تباعد

سنضيف أيضًا بعض قيم الهوامش والحشو المخصصة.

• الهامش الأعلى: 50 بكسل
• الهامش السفلي: -40 بكسل
• الحشوة العلوية: 23 بكسل
• الحشو السفلي: 23 بكسل
• الحشو الأيسر: 70 بكسل
• الحشو الأيمن: 70 بكسل

مربع الظل

وسنقوم بإزالتها من خلال منح وحدة الأزرار ظل مربع دقيق.

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.3)

استنساخ جميع الوحدات مرتين ووضع التكرارات في الأعمدة المتبقية

بمجرد الانتهاء من جميع الوحدات في العمود 1 ، يمكنك استنساخها مرتين ووضع التكرارات في العمودين المتبقيين من الصف.

تغيير رموز الدعاية والعناوين

تأكد من تغيير رموز الدعاية والعناوين لكل نسخة مكررة.

تغيير محتوى وحدة النص

جنبا إلى جنب مع محتوى وحدة النص.

تغيير زر # 2

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

• لون نص الزر: #FFFFFF
• لون خلفية الزر: # 8300E9

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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