كيفية عرض الخدمات بشكل جميل على الأجهزة المحمولة باستخدام Divi (تنزيل مجاني!)
نشرت: 2019-02-25إذا كنت تركز على تصميمات الجوال أولاً ، فقد تساعدك هذه المشاركة. لقد أنشأنا مثالين رائعين لواجهات عرض الخدمات التي تبدو رائعة على أحجام الشاشات الأصغر. علاوة على ذلك ، فقد تم تصميمها خصيصًا لتبدو بأفضل مظهر على الهاتف المحمول مع الحفاظ على تصميم جيد على سطح المكتب. في هذا المنشور ، سنوضح لك كيفية إعادة إنشائها من البداية خطوة بخطوة. نأمل أن يلهمك هذا البرنامج التعليمي لإطلاق العنان لإبداعك عند تصميم أقسام الخدمات لأي موقع ويب تقوم بإنشائه. في نهاية البرنامج التعليمي ، ستتمكن أيضًا من تنزيل ملفات JSON لكلا القسمين.
دعنا نذهب اليها!
معاينة
قبل أن نتعمق في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على المثالين المتحركين اللذين سنقوم بإعادة إنشائهما.
مثال 1
المثال رقم 2
لنبدأ في إعادة إنشاء المثال رقم 1
اشترك في قناتنا على اليوتيوب
إضافة قسم جديد
خلفية متدرجة
قم بإنشاء صفحة جديدة وإضافة قسم عادي إليها. افتح إعدادات القسم وأضف خلفية متدرجة.
- اللون 1: # ff0f83
- اللون 2: rgba (255،255،255،0)
- نوع التدرج: شعاعي
- اتجاه شعاعي: يسار
- موقف البداية: 20٪
- موضع النهاية: 20٪
أضف الصف رقم 1
هيكل العمود
تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:
أضف وحدة نصية # 1
إضافة محتوى
الوحدة الأولى التي سنحتاجها هي وحدة نصية. أضف بعض المحتوى إلى مربع المحتوى.
إعدادات النص
بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات النص.
- خط النص: بوبينز
- وزن خط النص: ثقيل
- لون النص: #ffffff
- حجم النص: 20vw
- ارتفاع خط النص: 1em
- قوة تمويه ظل النص: 0.95em
- لون ظل النص: rgba (0،0،0،0.13)
- اتجاه النص: الوسط
أضف وحدة نصية # 2
أضف محتوى H2
أضف وحدة نصية أخرى أسفل الوحدة السابقة مباشرةً. أدخل بعض محتوى H2 من اختيارك.
إعدادات نص H2
بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات نص H2.
- خط العنوان 2: بوبينز
- وزن خط العنوان 2: غامق
- العنوان 2 محاذاة النص: الوسط
- لون نص العنوان 2: # 000000
- حجم نص العنوان 2: 10vw (الهاتف والكمبيوتر اللوحي) ، 10vw (سطح المكتب)
تباعد
قم بإنشاء تداخل بين كلتا الوحدتين النصيتين باستخدام بعض الهامش العلوي السلبي.
- الهامش العلوي: -12vw (الهاتف) ، -10vw (الجهاز اللوحي) ، -8vw (سطح المكتب)
أضف الصف رقم 2
هيكل العمود
تابع بإضافة صف آخر باستخدام بنية العمود التالية:
خلفية متدرجة
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف خلفية متدرجة.
- اللون 1: # 3239ff
- اللون 2: rgba (255،255،255،0)
- نوع التدرج: شعاعي
- الاتجاه الشعاعي: صحيح
- موقف البداية: 30٪
- موضع النهاية: 30٪
تحجيم
انتقل إلى إعدادات التحجيم التالية واسمح للصف بأن يشغل عرض الشاشة بالكامل.
- جعل هذا الصف بعرض كامل: نعم
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
تباعد
أضف بعض قيم التباعد أيضًا. ستعمل هذه القيم على التأكد من أن كل شيء يبدو جيدًا عبر جميع أحجام الشاشات.
- الحشوة اليسرى: 0vw (الهاتف والكمبيوتر اللوحي) ، 15vw (سطح المكتب)
- الحشو الأيمن: 0vw (الهاتف والكمبيوتر اللوحي) ، 15vw (سطح المكتب)
لغة تنسيق ويب حسب الطلب
نحن أيضًا نضع العمودين بجوار بعضهما البعض عن طريق إضافة سطر واحد من كود CSS في علامة التبويب المتقدمة.
display: flex;
أضف وحدة نصية إلى العمود 1
أضف H3 وربط المحتوى
الآن يمكننا البدء في إضافة وحدات! أضف وحدة نصية إلى العمود الأول مع بعض نسخ H3 ورابط.
لون الخلفية
بعد ذلك ، انتقل إلى إعدادات الخلفية للوحدة النمطية وأضف لونًا للخلفية.
- لون الخلفية: rgba (255،255،255،0.95)
إعدادات النص
تابع عن طريق تغيير اتجاه النص في إعدادات النص للوحدة.
- اتجاه النص: الوسط
إعدادات نص الارتباط
قم بتعديل إعدادات نص الارتباط أيضًا.
- خط الارتباط: Poppins
- وزن خط Linke: غامق
- نمط خط الارتباط: تسطير
- لون تسطير الرابط: # 000000
- لون نص الرابط: # 000000
- حجم نص الرابط: 3vw (هاتف) ، 2vw (جهاز لوحي) ، 1vw (سطح المكتب)
إعدادات نص H3
جنبا إلى جنب مع إعدادات النص H3.
- خط العنوان 3: بوبينز
- وزن خط العنوان 3: خفيف للغاية
- لون نص العنوان 3: # 000000
- حجم نص العنوان 3: 4vw (هاتف) ، 3vw (جهاز لوحي) ، 2vw (سطح المكتب)
- العنوان 3 ارتفاع سطر النص: 1.9em لشكل دائرة أو 3em لشكل بيضاوي
تباعد
لإنشاء شكل من هذه الوحدة ، سنضيف بعض قيم الهوامش والحشو المخصصة في إعدادات التباعد.
- الهامش الأيسر: 5vw
- الهامش الأيمن: -5vw
- الحشوة العلوية: 17vw (هاتف) ، 20vw (كمبيوتر لوحي) ، 15vw (سطح المكتب)
- الحشوة السفلية: 17vw (هاتف) ، 20vw (كمبيوتر لوحي) ، 15vw (سطح المكتب)
الحدود
نقوم بتحويل المربع إلى دائرة باستخدام الزوايا الدائرية بإضافة "100vw" إلى كل ركن من الزوايا.
مربع الظل
ولخلق بعض العمق ، سنضيف ظل صندوق دقيق.
- مربع قوة طمس الظل: 100 بكسل
- لون الظل: rgba (0،0،0،0.12)
استنساخ وحدة النص 4 مرات
الآن بعد أن انتهينا من تعديل أول وحدة نصية ، يمكننا المضي قدمًا واستنساخها أربع مرات. ضع نسختين من التكرارات في العمود الثاني.
تعديل تكرار # 1
تباعد
تابع عن طريق تعديل إعدادات التباعد الأولى للنسخة المكررة.
- الهامش العلوي: 20vw
- الهامش الأيسر: -5vw
- الهامش الأيمن: 5vw
تعديل تكرار # 2
لون الخلفية
افتح النسخة الثانية التالية وقم بتغيير لون الخلفية.
- لون الخلفية: rgba (255،248،209،0.92)
تباعد
قم بتعديل إعدادات التباعد أيضًا.
- الهامش العلوي: -5vw
تعديل تكرار # 3
لون الخلفية
ثم افتح النسخة الثالثة وقم بتغيير لون الخلفية.
- لون الخلفية: rgba (219،255،223،0.95)
تباعد
عدّل إعدادات التباعد بعد ذلك.
- الهامش العلوي: -5vw
- الهامش الأيسر: -5vw
- الهامش الأيمن: 5vw
تعديل تكرار # 4
تباعد
افتح آخر نسخة أيضًا وأضف بعض الهامش العلوي السلبي لإنهاء التصميم.
- الهامش العلوي: -5vw
لنبدأ في إعادة إنشاء المثال رقم 2
إضافة قسم جديد
إلى المثال الثاني! أضف قسمًا جديدًا إلى صفحتك.
أضف الصف رقم 1
هيكل العمود
تابع بإضافة صف جديد باستخدام بنية العمود التالية:
أضف وحدة نصية
أضف محتوى H2
الوحدة الأولى التي سنحتاجها هي وحدة نصية. أدخل بعض محتوى H2 من اختيارك.
إعدادات نص H2
بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات نص H2.
- خط العنوان 2: بوبينز
- العنوان 2 محاذاة النص: الوسط
- لون نص العنوان 2: # 333333
- حجم نص العنوان 2: 7vw (الهاتف والكمبيوتر اللوحي) ، 4vw (سطح المكتب)
إضافة وحدة المقسم
الرؤية
أضف وحدة Divider أسفل وحدة النص مباشرةً. تأكد من تمكين خيار "إظهار الحاجز".
اللون
بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتعديل لون المقسم.
- اللون: # 333333
تحجيم
العب مع إعدادات التحجيم أيضًا.
- وزن الحاجز: 5 بكسل
- العرض: 12٪
- محاذاة الوحدة: المركز
أضف الصف رقم 2
هيكل العمود
تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:
لون الخلفية
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف لون خلفية أبيض.
- لون الخلفية: #ffffff
تحجيم
انتقل إلى إعدادات التحجيم التالية واسمح للصف بأن يشغل عرض الشاشة بالكامل.
- جعل هذا الصف بعرض كامل: نعم
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
تباعد
أضف بعض قيم الهوامش والحشو المخصصة إلى جانب تحسين التصميم لجميع أحجام الشاشات.
- الهامش العلوي: 2vw
- الهامش السفلي: 2vw
- الحشوة العلوية: 10vw (الهاتف والكمبيوتر اللوحي) ، 5vw (سطح المكتب)
- الحشوة السفلية: 10vw (الهاتف والكمبيوتر اللوحي) ، 5vw (سطح المكتب)
- الحشوة اليسرى: 2vw (الهاتف والكمبيوتر اللوحي) ، 20vw (سطح المكتب)
- الحشو الأيمن: 2vw (الهاتف والكمبيوتر اللوحي) ، 20vw (سطح المكتب)
مربع الظل
نحن نستخدم ظل الصندوق الخفيف أيضًا.
- مربع قوة طمس الظل: 50 بكسل
- لون الظل: rgba (0،0،0،0.07)
لغة تنسيق ويب حسب الطلب
أخيرًا وليس آخرًا ، ضع كلا العمودين بجوار بعضهما البعض عن طريق إضافة سطر كود CSS واحد إلى العنصر الرئيسي في علامة التبويب المتقدمة.
display: flex;
أضف الوحدة النمطية للدعاية إلى العمود 1
حدد أيقونة
يمكننا الآن البدء في إضافة وحدات! الوحدة الوحيدة التي نحتاجها في العمود 1 هي Blurb Module. حدد أيقونة من اختيارك.
خلفية متدرجة
ثم أضف خلفية متدرجة.
- اللون 1: # 7b28ef
- اللون 2: # 29b6e5
- اتجاه التدرج: 142 درجة
إعدادات الرمز
عدّل إعدادات الأيقونة بعد ذلك.
- لون الأيقونة: #ffffff
- وضع الرمز: الأعلى
- استخدام حجم خط الأيقونة: نعم
- حجم خط الرمز: 5vw (الهاتف والكمبيوتر اللوحي) ، 4vw (سطح المكتب)
تحجيم
وتغيير حول إعدادات التحجيم.
- العرض: 48٪ (الهاتف والجهاز اللوحي) ، 78٪ (سطح المكتب)
تباعد
نضيف أيضًا بعض قيم الهوامش والحشو المخصصة لتحسين التصميم عبر جميع أحجام الشاشات.
- الهامش العلوي: 2vw (الهاتف)
- الحشوة العلوية: 8.5vw (الهاتف) ، 9vw (الجهاز اللوحي) ، 6vw (سطح المكتب)
- الحشوة السفلية: 3vw (هاتف) ، 5vw (جهاز لوحي) ، 4vw (سطح المكتب)
الحدود
قم بتحويل الوحدة إلى دائرة بعد ذلك عن طريق إضافة "100vw" إلى كل زاوية من الزوايا في إعدادات الحدود.
مربع الظل
نحن نضيف ظل الصندوق أيضًا.
- مربع الظل الرأسي: 10 بكسل
- قوة انتشار الظل المربع: 5 بكسل
- لون الظل: rgba (2،185،252،0.35)
أضف وحدة النص رقم 1 إلى العمود 2
أضف محتوى H3
إلى العمود الثاني! الوحدة الأولى التي نحتاجها هي وحدة نص العنوان. أضف بعض محتوى H3.
إعدادات نص H3
بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات نص H3.
- خط العنوان 3: بوبينز
- حجم نص العنوان 3: 4vw (هاتف) ، 3vw (جهاز لوحي) ، 2vw (سطح المكتب)
تباعد
أضف بعض قيم التباعد المخصصة بعد ذلك.
- الهامش العلوي: 0vw (الهاتف) ، 3vw (الجهاز اللوحي وسطح المكتب)
- الهامش الأيسر: -20vw (الهاتف والكمبيوتر اللوحي) ، 0vw (سطح المكتب)
- الهامش الأيمن: 0vw
- الحشوة السفلية: 2vw (الهاتف والكمبيوتر اللوحي) ، 1vw (سطح المكتب)
- الحشوة اليسرى: 5vw (الهاتف والكمبيوتر اللوحي) ، 2vw (سطح المكتب)
الحدود
جنبًا إلى جنب مع الحد الأيسر.
- عرض الحد الأيسر: 5 بكسل
- لون الحد الأيسر: # f4f4f4
- نمط الحد الأيسر: مزدوج
أضف وحدة Divider إلى العمود 2
إظهار المقسم
الوحدة الثانية التي نحتاجها هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".
- إظهار الحاجز: نعم
اللون
بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير لون الفاصل.
- اللون: # f4f4f4
الأنماط
قم بتغيير نمط الفاصل في إعدادات الأنماط التالية.
- نمط المقسم: مزدوج
تحجيم
تابع عن طريق تعديل الخيارات المختلفة في إعدادات التحجيم.
- وزن الحاجز: 5 بكسل
- الارتفاع: 0 بكسل
تباعد
والتلاعب بقيم التباعد أيضًا.
- الهامش الأيسر: -20vw (الهاتف والكمبيوتر اللوحي) ، 0vw (سطح المكتب)
أضف وحدة النص رقم 2 إلى العمود 2
إضافة محتوى
الوحدة التالية التي نحتاجها في العمود الثاني هي وحدة نصية أخرى. أضف بعض محتوى الجسم المفضل.
إعدادات النص
بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات النص.
- حجم النص: 2vw (هاتف) ، 1.7vw (جهاز لوحي) ، 0.8vw (سطح المكتب)
- اتجاه النص: يسار
تباعد
تلاعب بقيم التباعد أيضًا.
- الهامش العلوي: 0vw
- الهامش الأيسر: -20vw (الهاتف والكمبيوتر اللوحي) ، 0vw (سطح المكتب)
- الهامش الأيمن: 0vw
- الحشوة العلوية: 3vw (الهاتف والكمبيوتر اللوحي) ، 2vw (سطح المكتب)
- الحشوة اليسرى: 5vw (الهاتف والكمبيوتر اللوحي) ، 2vw (سطح المكتب)
الحدود
وأضف حدًا يسارًا.
- عرض الحد الأيسر: 5 بكسل
- لون الحد الأيسر: # f4f4f4
- نمط الحد الأيسر: مزدوج
أضف وحدة الزر إلى العمود 2
أضف نسخة
الوحدة التالية والأخيرة التي نحتاجها في العمود الثاني هي وحدة الأزرار. أضف بعض النسخ.
إعدادات الزر
بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات الزر.
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 2.5vw (الهاتف) ، 2vw (الجهاز اللوحي) ، 1vw (سطح المكتب)
- لون نص الزر: # 4f77e8
- عرض حد الزر: 1 بكسل
- لون حدود الزر: # 4f77e8
- نصف قطر حدود الزر: 1 بكسل
- خط الزر: بوبينز
تباعد
قم بتعديل قيم التباعد أيضًا.
- الهامش العلوي: 4vw (الهاتف والجهاز اللوحي) ، 2vw (سطح المكتب)
- الهامش الأيسر: -20vw (الهاتف والكمبيوتر اللوحي) ، 0vw (سطح المكتب)
صف استنساخ مرتين
الآن بعد أن انتهينا من تعديل الصف وجميع وحداته ، يمكننا استنساخه مرتين.
تغيير الأيقونات
تأكد من تغيير الرموز لكل من الوحدتين Blurb Modules.
تغيير الخلفيات المتدرجة
قم بتعديل الخلفيات المتدرجة أيضًا.
- اللون 1: # ff2885
- اللون 2: # d6ac24
- اللون 1: # 70ff1e
- اللون 2: # 2699ff
تغيير ألوان ظل الصندوق
طابق لون ظل الصندوق مع خلفية التدرج الجديد.
- لون الظل: rgba (255،208،2،0.37)
- لون الظل: rgba (42،255،0،0.37)
تغيير حدود الزر وألوان النص
وأكمل التصميم عن طريق تغيير حدود الزر وألوان النص.
- لون نص الزر: # e96c54
- لون حدود الزر: # e96c54
- لون نص الزر: # 4dcb93
- لون حدود الزر: # 4dcb93
قم بتنزيل أقسام خدمات الجوال مجانًا
لوضع يديك على أقسام خدمات الهاتف المحمول المجانية ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.
تنزيل مجاني
انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.
لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!
معاينة
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة المتنقلة لكلا المثالين.
مثال 1
المثال رقم 2
افكار اخيرة
في هذا المنشور ، أوضحنا لك طريقتين مبتكرتين حول كيفية عرض الخدمات على الأجهزة المحمولة باستخدام خيارات Divi المدمجة فقط. نأمل أن يلهمك هذا النهج الذي يعتمد على الجوّال أولاً لكي تصبح مبدعًا أيضًا. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه!