How to make Divi Theme Mobile Responsive | 2024 Tutorial

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

حمولة" هناك . وبعد ذلك يمكنك النقر فوق تصغير هذا. ثم في الجزء العلوي هنا ، يمكنك تغيير أبعادك من متجاوب إلى iPhone xR على سبيل المثال. ثم تقوم بالتمرير إلى موقع الويب الخاص بك وتفكر مثل "أوه ، هذا ليس جيدًا تمامًا ، لا يبدو جيدًا على الإطلاق". انظر إلى هذا. قم بتسجيل الدخول إلى موقع WordPress الخاص بك. إذا كنت لا تزال تسجل الدخول باستخدام / wp-admin / ... فهذه ليست طريقة آمنة للغاية ، يرجى مشاهدة دروسي التعليمية حول تأمين موقع WordPress الخاص بك ، لأنك لا تريد أن تتعرض للاختراق. ثم ننتقل إلى "ال

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

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

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

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

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

ئ. انتقل إلى Builder الخاص بك هناك ، وانقر فوق هذا ، ونذهب إلى التصميم الذي ننتقل إليه من الحجم. وسطح المكتب ، أصبح أصغر حجمًا بنسبة 60٪ بحيث يتم تشغيله تلقائيًا يأخذ ذلك إلى الجوال. لا أريد هذا ، سأقوم بتغيير هذا إلى 90٪ على العرض وربما حتى 100٪ لماذا لا. ثم تكون الصياغة كبيرة جدًا ، لذا سأقوم بالمرور فوقها وانقر فوق رمز القلم الرصاص. سنقوم بتغيير الخط هنا. لكن تذكر ليس هذا الخط. سأقوم بالنقر فوق هذا ، ثم سنقوم بتغييره إلى 40 بكسل. الآن هذه الطريقة أجمل. لذا سأقوم بحفظه. وسأقوم بتحديث هذه الصفح

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

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

ف. لإعطاء هامش أكبر على الجانبين. هذه هي الطريقة لتقوم بها. لكنها بنيت بالفعل على هذا النحو. انتقل إلى الإعدادات ، انتقل إلى التصميم ، انتقل إلى التباعد ، انتقل إلى جهازي المحمول ، وقم بتغيير هذا إلى 25 هناك و 25 على يميني. ولكن بعد ذلك يمكننا أن نرى أن شيئًا ما لا شيء هنا. دعنا ننتقل إلى تحديد الحجم آه ، حيث تم ضبط عرض الهاتف المحمول على 100٪. من فعل هذا؟ وحذفه. ثم أرى أن هناك نسبة 50٪ موروثة بالطبع من سطح المكتب ، لذا للتأكد من استمرار عمل كل شيء ، سأضعه على 90٪ واضغط على حفظ. طريقة أفضل مثل ه

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

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

ركز. أم أنها الأيقونة؟ واحد منهم لا تتمحور. لذلك سأقوم بالتمرير لأسفل هنا يمكننا أن نرى أن هذه المحاذاة في المنتصف ، لذلك يجب أن تفعل شيئًا مع تغيير الحجم أو التباعد. اذهب إلى التحجيم. على الهاتف المحمول 60٪ لنضعه على 90. لم تكن هذه هي المشكلة. قم بالتمرير لأسفل قليلاً ، وانتقل إلى التباعد. آه ، هذه مساحة مقدارها 25 بكسل على جميع الأجهزة. دعنا ننتقل إلى الهاتف المحمول ودعنا نحول هذا إلى صفر. ها نحن ذا الآن يتم توسيطه تمامًا بالطريقة التي أحبها. اضغط على "حفظ التغييرات" ونقوم بالتمرير لأسفل إذا ك

ان بإمكاننا رؤية المزيد من الأشياء غير المناسبة في تصميمنا. هنا نذهب إلى واحد آخر ، نضغط عليه ، نحوم فوقه باستخدام رمز القلم الرصاص ، قم بالتمرير لأسفل. واستخدم ارتفاع سطر النص. اضغط على أيقونة الجوال ضعه على 0.9. أصغر ، عظيم 0.8. ممتاز احفظه . وهذه هي الطريقة التي نتحقق بها من كل الأشياء التي نحتاج إلى التحقق منها مرة أخرى هنا ليست على ما يرام. نذهب على طول الطريق إلى أسفل ارتفاع سطر النص للهواتف المحمولة يجب أن يكون 0.8. عظيم احفظه. هذا هو هذا سخيف! من أنشأ هذا الموقع؟ انتقل إلى هنا ، انتقل إل

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

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

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

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

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

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

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

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

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