كيفية تعظيم عرض Divi للهاتف المحمول باستخدام نسخة مستديرة

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

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

معاينة

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

قم بتنزيل The Maximizing Mobile Viewports Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

تباعد

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

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

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

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

العنصر الرئيسي CSS

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

display: flex;

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

حيوية

بعد ذلك ، سنفتح إعدادات العمود 1 ونضيف الرسوم المتحركة التالية:

• نمط الرسوم المتحركة: تتلاشى

العنصر الرئيسي CSS

سنحتفظ بحجم العمود على أحجام أصغر للشاشة عن طريق إضافة السطر التالي من كود CSS إلى العنصر الرئيسي للعمود:

width: 40% !important;

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

حيوية

بعد ذلك ، سنفتح إعدادات العمود 2 ونطبق الرسوم المتحركة التالية:

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 200 مللي ثانية

العنصر الرئيسي CSS

نحتفظ بحجم العمود على أحجام أصغر للشاشة عن طريق إضافة السطر التالي من كود CSS:

width: 60% !important;

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

تحميل الصور

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

تحجيم

انتقل إلى علامة تبويب تصميم الوحدة وفرض العرض الكامل على الوحدة.

• فرض عرض كامل: نعم

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

أضف محتوى H2

في العمود 1 ، الوحدة الأولى التي نحتاجها هي وحدة نصية تحتوي على محتوى H2.

إعدادات نص H2

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

• خط العنوان 2: مونتسيرات
• وزن خط العنوان 2: خفيف
• محاذاة نص العنوان 2: الوسط (الجهاز اللوحي والهاتف فقط)
• لون نص العنوان 2: # 000000
• حجم نص العنوان 2: 3vw (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 40 بكسل (هاتف)
• العنوان 2 تباعد الأحرف: -3 بكسل

تحجيم

بعد ذلك ، سنقوم بتعديل العرض في إعدادات التحجيم.

• العرض: 89٪ (سطح المكتب) ، 150٪ (الجهاز اللوحي والهاتف)

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

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

• اليسار: ٢٧٠ ديج (الجهاز اللوحي والهاتف فقط)

موقع

نحن أيضًا نعيد وضع الوحدة بشكل مختلف عبر أحجام الشاشات المختلفة.

• الموقف: مطلق
• الموقع: المركز السفلي (سطح المكتب) ، المركز (الجهاز اللوحي والهاتف)
• الإزاحة العمودية: 50 بكسل

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

الرؤية

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

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

خط

انتقل إلى علامة تبويب تصميم الوحدة وتغيير لون الخط.

• لون الخط: # 000000

تحجيم

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

• العرض: 50٪ (سطح المكتب) ، 30٪ (الجهاز اللوحي والهاتف)

موقع

وأكمل إعدادات الوحدة بإعادة ضبط موضع الوحدة وفقًا لذلك:

• الموقف: مطلق
• الموقع: يسار الوسط

أضف الصف رقم 2

هيكل العمود

في الصف التالي ، استخدم بنية العمود التالية:

تحجيم

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

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

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

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

العنصر الرئيسي CSS

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

display: flex;

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

خلفية متدرجة

بعد ذلك ، سنفتح إعدادات العمود 1 وسنطبق خلفية متدرجة.

• اللون 1: # 1a9970
• اللون 2: # 000000
• نوع التدرج: خطي
• اتجاه التدرج: 153 درجة

حيوية

نحن نستخدم الرسوم المتحركة المتأخرة في هذا العمود أيضًا.

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 400 مللي ثانية

العنصر الرئيسي CSS

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

width: 25% !important;

الرؤية

أخيرًا وليس آخرًا ، سنخفي تجاوزات العمود للتأكد من عدم تجاوز أي شيء للحاوية.

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

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

لون الخلفية

إلى إعدادات العمود 2. استخدم لون الخلفية التالي لها:

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

حيوية

تطبيق الرسوم المتحركة المتأخرة أيضا.

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 600 مللي ثانية

العنصر الرئيسي CSS

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

width: 75% !important;

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Open Sans
• حجم النص: 15 بكسل (سطح المكتب) ، 14 بكسل (جهاز لوحي) ، 13 بكسل (هاتف)
• ارتفاع خط النص: 2.4em

تحجيم

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

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

تباعد

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

• حشوة علوية: 15٪
• حشوة سفلية: 15٪

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

أضف نسخة

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

انتقام

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

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

إعدادات الزر

صمم الزر التالي.

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

• زر الخط: مونتسيرات
• إظهار رمز الزر: نعم
• وضع رمز الزر: يسار
• فقط إظهار الرمز عند التمرير للزر: لا

تباعد

وأكمل إعدادات الوحدة بإضافة بعض قيم الحشو المخصصة لإعدادات التباعد.

• حشوة علوية: 2٪
• حشوة سفلية: 2٪
• الحشوة اليسرى: 10٪
• الحشوة اليمنى: 10٪

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

إضافة محتوى

في العمود 1 ، الوحدة الوحيدة التي نحتاجها هي وحدة نصية. أضف المحتوى التالي إلى مربع المحتوى: "- 01".

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: رفيع
• لون النص: #ffffff
• حجم النص: 50 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 35 بكسل (هاتف)
• محاذاة النص: الوسط

تحجيم

قم بزيادة عرض الوحدة بعد ذلك.

• العرض: 150٪

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

بعد ذلك ، انتقل إلى إعدادات التحويل وقم بتغيير موضع الوحدة عن طريق تعديل إعدادات ترجمة التحويل:

• القاع: -50٪ (الجهاز اللوحي والهاتف فقط)

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

نحن ندير الوحدة على أحجام أصغر للشاشة أيضًا.

• اليسار: ٢٧٠ ديج (الجهاز اللوحي والهاتف فقط)

موقع

وسنكمل إعدادات الوحدة عن طريق إعادة وضع الوحدة في علامة التبويب "خيارات متقدمة".

• الموقف: مطلق
• الموقع: المركز

قسم استنساخ لإعادة الاستخدام

بمجرد الانتهاء من القسم الأول ، يمكنك استنساخه عدة مرات كما تريد.

تغيير كافة النسخ والارتباطات

تأكد من تغيير جميع النسخ والروابط.

تغيير الصورة

جنبا إلى جنب مع صورة صورة وانتهيت!

معاينة

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

افكار اخيرة

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

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