كيفية إنشاء تصميمات للهاتف المحمول أولاً باستخدام Divi

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

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

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

معاينة

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

متحرك

سطح المكتب

مقاربة

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

1. قم بالتبديل إلى عرض الجوال مباشرة بعد إضافة صفحة جديدة

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

2. قم بتمكين خيارات الاستجابة لكل عنصر تصميم وتعديل قيم الجوال أولاً

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

3. إزالة المسافة الافتراضية بين الأعمدة وإضافة الحشو يدويًا إذا لزم الأمر

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

4. ضع 2 أو 3 أعمدة بجانب بعضها البعض لإنشاء تصميم أفقي

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

5. قم بتعديل طرق عرض سطح المكتب والكمبيوتر اللوحي على طول الطريق أو بعد ذلك

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

لنبدأ في إعادة إنشاء المثال!

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

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

أضف الصف رقم 1

هيكل العمود

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

أضف وحدة نصية إلى الصف

أضف محتوى H2

أضف وحدة نصية إلى عمود صفك وأدخل بعض محتوى عنوان H2.

إعدادات نص H2

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

• خط العنوان 2: Didact Gothic
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: # 333333
• حجم نص العنوان 2: 5.5vw (الهاتف) ، 5vw (الجهاز اللوحي) ، 2vw (سطح المكتب)

أضف وحدة المقسم إلى الصف

الرؤية

أسفل وحدة النص التي أضفتها مباشرةً ، امض قدمًا وأضف وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

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

اللون

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

• اللون: # 333333

تحجيم

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

• العرض: 48٪
• محاذاة الوحدة: المركز

أضف الصف رقم 2

هيكل العمود

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

لون الخلفية

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف لونًا للخلفية إلى الصف.

• لون الخلفية: # ffe69e

لون خلفية العمود 2

أضف لونًا للخلفية إلى العمود الثاني من الصف أيضًا.

• لون خلفية العمود 2: # ffd65b

انتقام

ثم قم بتغيير محاذاة الصف.

• محاذاة الصف: اليسار

تحجيم

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

• استخدام العرض المخصص: نعم
• الوحدة: PX
• العرض المخصص: 700 بكسل
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم

تباعد

تابع بالانتقال إلى إعدادات التباعد وإضافة بعض الهوامش المخصصة وقيم الحشو يدويًا.

• الهامش العلوي: 5vw
• الهامش السفلي: 5vw
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة العلوية للعمود 1: 10vw (هاتف) ، 8vw (كمبيوتر لوحي) ، 4vw (سطح المكتب)
• الحشوة السفلية للعمود 1: 10vw (الهاتف) ، 8vw (الكمبيوتر اللوحي) ، 4vw (سطح المكتب)

الحدود

أضف بعض الزوايا الدائرية إلى الصف أيضًا.

• أعلى اليمين: 10 بكسل
• أسفل اليمين: 10 بكسل

مربع الظل

ومنحها ظل مربع خفي أيضًا.

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

لغة تنسيق ويب حسب الطلب

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

display: flex;

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

أضف محتوى H3

حان الوقت لبدء إضافة الوحدات! أضف وحدة نص عنوان إلى العمود الأول وأدخل بعض محتوى H3.

إعدادات نص H3

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات نص العنوان.

• عنوان الخط 3: Didact Gothic
• وزن خط العنوان 3: غامق
• العنوان 3 محاذاة النص: الوسط
• لون نص العنوان 3: # ee6f49
• حجم نص العنوان 3: 4vw (هاتف) ، 3vw (جهاز لوحي) ، 1.5vw (سطح المكتب)

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

الرؤية

أضف وحدة Divider بعد ذلك. تأكد من تمكين خيار "إظهار الحاجز".

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

اللون

ثم قم بتغيير لون الحاجز.

• اللون: #ffffff

تحجيم

جنبا إلى جنب مع إعدادات التحجيم.

• وزن الحاجز: 4 بكسل
• العرض: 30٪
• محاذاة الوحدة: المركز

تباعد

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

• الهامش العلوي: 4vw (هاتف) ، 2vw (جهاز لوحي) ، 1.5vw (هاتف)

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

أضف نسخة

الوحدة التالية والأخيرة المطلوبة في العمود الأول هي وحدة الأزرار. أدخل نسخة.

انتقام

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

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

إعدادات الزر

قم بتعديل مظهر الزر في إعدادات الزر أيضًا.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 3vw (الهاتف) ، 2vw (الجهاز اللوحي) ، 1.5vw (سطح المكتب)
• لون نص الزر: #ffffff
• لون خلفية الزر: # ee6f49
• عرض حد الزر: 0 بكسل
• خط الزر: Didact Gothic
• وزن الخط: عريض

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

أيقونة التحميل

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

انتقام

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

• محاذاة الصورة: المركز

صف استنساخ # 2

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

تغيير لون خلفية الصف

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

• لون الخلفية: # 8ee5cf

قم بإزالة لون خلفية العمود 2

استمر بإزالة لون خلفية العمود 2.

أضف لون الخلفية للعمود 1

نحن نضيف لون الخلفية إلى العمود الأول بدلاً من ذلك.

• لون خلفية العمود 1: # 47e5bd

تغيير الوحدات النمطية في الأعمدة

نقوم أيضًا بتبديل الأعمدة للوحدات النمطية.

تغيير الرمز في وحدة الصورة

بعد ذلك ، قم بتغيير الرمز في وحدة الصورة.

إضافة عامل تصفية إلى وحدة الصورة

وجعلها تتطابق مع ألوان خلفية الصفوف والأعمدة الجديدة عن طريق تغيير تدرج اللون في إعدادات المرشحات.

• هوى: 65 درجة

تغيير محاذاة الصف

قم بتغيير محاذاة الصف التالي.

• محاذاة الصف: صحيح

تغيير حد الصف

جنبا إلى جنب مع الزوايا الدائرية.

• أعلى اليسار: 10 بكسل
• أسفل اليسار: 10 بكسل

تغيير لون النص للوحدة النمطية للنص في العمود 2

نحن نستخدم أيضًا لون نص آخر لوحدة النص في العمود 2.

• لون نص العنوان 3: # 7b9710

تغيير لون خلفية الزر

ونستخدم نفس اللون لخلفية الزر.

• لون خلفية الزر: # 7b9710

استنساخ كلا الصفين

الآن بعد أن أصبح لدينا كلا طرفي الصف ، يمكننا استنساخ كلاهما حتى عدد المرات الذي نحتاجه وترتيبهما بالترتيب.

تعديل تكرار # 1

تغيير لون خلفية الصف

سنبدأ بتغيير لون خلفية الصف لأول نسخة مكررة.

• لون الخلفية: # ffc9cf

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

بعد ذلك ، سنقوم بتعديل لون خلفية العمود 2 أيضًا.

• لون خلفية العمود 2: # ffadb6

تغيير الرمز في وحدة الصورة

قم بتغيير الرمز الموجود في وحدة الصورة إلى رمز آخر من اختيارك.

إضافة عامل تصفية إلى وحدة الصورة

وقم بتغيير الصبغة في إعدادات المرشحات لجعلها تتطابق مع ألوان خلفية الصفوف والأعمدة الجديدة.

• هوى: 309 درجة

تغيير لون النص

نحن نغير لون النص أيضًا.

• لون نص العنوان 3: # f862b0

تغيير لون خلفية الزر

ونستخدم نفس اللون لخلفية الزر.

• لون خلفية الزر: # f862b0

تعديل تكرار # 2

تغيير لون خلفية الصف

إلى التكرار التالي والأخير! تغيير لون خلفية الصف.

• لون الخلفية: # b2c4ff

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

افعل نفس الشيء مع لون خلفية العمود 1.

• لون خلفية العمود 1: # 9eb4ff

تغيير الرمز في وحدة الصورة

بعد ذلك ، قم بتغيير الرمز الذي يتم استخدامه.

إضافة عامل تصفية إلى وحدة الصورة

جنبًا إلى جنب مع التدرج في إعدادات المرشحات لوحدة الصورة.

• هوى: 221 درجة

تغيير لون النص

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

• لون نص العنوان 3: # 6287f9

تغيير لون خلفية الزر

واستخدم نفس اللون لخلفية الزر.

• لون خلفية الزر: # 6287f9

معاينة

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

متحرك

سطح المكتب

افكار اخيرة

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