كيفية تحسين الشريط الجانبي الخاص بك على الهاتف المحمول باستخدام Divi Theme Builder

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

في هذا البرنامج التعليمي ، سنستعرض الطرق التي يمكنك من خلالها استخدام Divi Theme Builder لتحسين الشريط الجانبي الخاص بك على شاشة الهاتف المحمول. فيما يلي بعض الأشياء التي سنغطيها في هذا المقال:

• كيفية إنشاء قالب باستخدام شريط جانبي
• إنشاء محتوى الشريط الجانبي باستخدام وحدات Divi و WordPress Widgets
• استخدام مناطق عناصر واجهة مستخدم متعددة لإخفاء / إظهار عناصر واجهة مستخدم معينة على الهاتف المحمول
• التحكم في التباعد بين محتوى الشريط الجانبي على الهاتف المحمول
• إخفاء محتوى الشريط الجانبي تمامًا على الهاتف المحمول
• إخفاء بعض محتوى الشريط الجانبي على الهاتف المحمول
• إخفاء العناصر داخل الوحدات لتقليل المحتوى على الهاتف المحمول
• جعل محتوى الشريط الجانبي مستجيبًا عن طريق ضبط حجم النص والتباعد
• كيفية تغيير ترتيب التراص للشريط الجانبي على الهاتف المحمول

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على تخطيط الشريط الجانبي على سطح المكتب وكيف تم تحسينه لعرض الهاتف المحمول.

قم بتنزيل النموذج المجاني مع الشريط الجانبي المحسن على الهاتف المحمول

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

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

تنزيل مجاني

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

تحميل

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

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

Letis للوصول إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى تثبيت وتفعيل Divi Theme. تأكد من أن لديك أحدث إصدار من Divi.

ستحتاج أيضًا إلى بعض المنشورات / الصفحات التي تم إنشاؤها لأغراض الاختبار حتى يظهر محتوى الصفحة النتائج بالفعل.

بعد ذلك ، أنت على استعداد للذهاب.

كيفية تحسين الشريط الجانبي لقالب Divi على الهاتف المحمول

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

إنشاء النموذج مع الشريط الجانبي

استيراد حزمة Divi Theme Builder # 3

لبدء الأمور ، سنستخدم Divi Theme Builder Pack # 3 لبدء تصميم موقعنا. بعد ذلك ، سنستخدم أحد القوالب لإضافة الشريط الجانبي الذي سنقوم بتحسينه للجوال.

بمجرد تنزيل الحزمة ، قم بفك ضغط المجلد.

من لوحة معلومات WordPress ، انتقل إلى Divi> Theme Builder. ثم انقر فوق رمز قابلية النقل في أعلى القائمة اليمنى بالصفحة. من نمط قابلية النقل ، حدد علامة التبويب استيراد واختر ملف divi-theme-builder-pack-3-all.json من المجلد الذي قمت بتنزيله مسبقًا. ثم انقر فوق زر الاستيراد.

هام: الرجاء استخدام موقع اختبار مع تثبيت جديد لـ Divi حتى لا تتجاوز المحتوى المباشر على موقع الويب الخاص بك أو تكسر شيئًا ما.

سترى أنه تم استيراد جميع القوالب إلى أداة إنشاء السمات.

بناء تخطيط الشريط الجانبي داخل قالب صفحة الفئة

ابحث عن قالب كافة صفحات الفئات وانقر لتحرير تخطيط الهيكل المخصص.

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

الآن سيكون لديك منطقة على الجانب الأيمن للشريط الجانبي الخاص بك.

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

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

ومع ذلك ، نحن بحاجة إلى إضافة لون الخلفية والحشو إلى عمود الشريط الجانبي.

إعدادات عمود الشريط الجانبي

افتح إعدادات العمود المخصص للشريط الجانبي وقم بتحديث ما يلي:

• لون الخلفية: # f2f5f9
• المساحة المتروكة: 25 بكسل للأعلى ، 25 بكسل للأسفل ، 25 بكسل لليسار ، 25 بكسل لليمين

إنشاء محتوى الشريط الجانبي باستخدام وحدات Divi و WordPress Widgets

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

• معلومات المؤلف (الاسم ، الموافقة المسبقة عن علم ، السيرة الذاتية)
• أزرار متابعة وسائل التواصل الاجتماعي
• الاشتراك في البريد الإلكتروني
• روابط للمنتجات و / أو الخدمات
• إعلانات
• فئات
• المشاركات الأخيرة / الشعبية

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

1. وحدة البحث - سيكون هذا بمثابة نموذج البحث.
2. وحدة اختيار البريد الإلكتروني - سيكون هذا بمثابة نموذج اختيار البريد الإلكتروني.
3. وحدة النص - سيكون هذا هو عنوان أزرار متابعة الوسائط الاجتماعية
4. وحدة متابعة الوسائط الاجتماعية - سيعرض هذا أزرار متابعة الوسائط الاجتماعية.
5. وحدة النص (مع صورة bg) - سيكون هذا بمثابة مثال إعلان للشريط الجانبي.
6. الوحدة النمطية Blurb (مع محتوى المؤلف) - سيكون هذا بمثابة منطقة معلومات المؤلف في الشريط الجانبي.
7. وحدة النص - سيكون هذا بمثابة عنوان لوحدة المدونة الموجودة أسفلها.
8. وحدة المدونة - سيكون هذا بمثابة محتوى منشورات حديث / مميز على الشريط الجانبي.

سحب أدوات WordPress باستخدام وحدة الشريط الجانبي

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

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

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

استخدام مناطق عناصر واجهة متعددة

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

لإنشاء أدوات متعددة ، افتح علامة تبويب جديدة وتوجه إلى لوحة تحكم WordPress. انتقل إلى المظهر> الأدوات.

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

كرر العملية لإنشاء منطقة عنصر واجهة مستخدم جديدة تسمى "المحفوظات". ثم اسحب ودجة المحفوظات إلى منطقة عنصر واجهة المستخدم المحفوظات.

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

قم بتكرار وحدة الشريط الجانبي (للحفاظ على التصميم)

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

السيطرة على التباعد بين وحدات الشريط الجانبي

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

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

ثم انقر فوق رمز المزيد من الإعدادات (أو انقر بزر الماوس الأيمن فوق القائمة) على خيار الهامش. ثم حدد "تمديد الهامش".

في وحدة Extend Styles Module ، قم بتحديث الخيارات لتوسيع الهامش إلى "All Modules" في "This Column".

ثم يمكننا إضافة مسافات بين الوحدات باستخدام وحدات الفاصل.

تحسين الشريط الجانبي على الهاتف المحمول

إخفاء الشريط الجانبي على الهاتف المحمول

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

افتح إعدادات الصف وافتح إعدادات العمود المخصص للشريط الجانبي. ثم قم بتحديث الرؤية على النحو التالي:

• تعطيل على: الكمبيوتر اللوحي والهاتف

سيؤدي هذا إلى إخفاء الشريط الجانبي بالكامل على شاشة الكمبيوتر اللوحي والجوال.

إخفاء بعض محتويات الشريط الجانبي على الهاتف المحمول

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

لإخفاء الوحدات على الهاتف المحمول ، افتح وحدة عرض الإطار السلكي ، ثم استخدم ميزة التحديد المتعدد لـ Divi لتحديد جميع الوحدات التي تريد إخفاءها / تعطيلها على الجهاز اللوحي والهاتف. ثم افتح الإعدادات لإحدى الوحدات المحددة وقم بتحديث ما يلي:

• تعطيل في: الهاتف ، الجهاز اللوحي

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

معاينة النتائج على صفحة مدونة

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

تأكد من تحديد صفحة منشورات ضمن المظهر> القراءة.

نتائج

هذا هو الفرق بين الشريط الجانبي لسطح المكتب والشريط الجانبي للجوال. لاحظ كيف يحتوي الشريط الجانبي للجوال على محتوى درس.

تجنب تكرار محتوى الشريط الجانبي والتذييل على الهاتف المحمول

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

إخفاء العناصر داخل الوحدات لتقليل المحتوى على الهاتف المحمول

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

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

جعل محتوى الشريط الجانبي مستجيبًا

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

ضبط حجم النص على الهاتف المحمول

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

ضبط المسافات / المقسمات على الهاتف المحمول

في هذا المثال ، أضفنا فواصل بين الوحدات لخلق مساحة. ومع ذلك ، يمكننا استخدام إعدادات Divider Divider لضبط التباعد بين تلك الفواصل على الهاتف المحمول. سيؤدي ذلك إلى تقليل المساحة المهدورة عند التمرير.

على سبيل المثال ، يمكنك تغيير الهامش العلوي والسفلي لـ Divider من 30 بكسل إلى 15 بكسل على الجهاز اللوحي والهاتف.

تغيير ترتيب التراص للشريط الجانبي على الهاتف المحمول

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

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

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

ثم افتح إعدادات العمود المخصص للشريط الجانبي وأضف CSS المخصص التالي إلى شاشة Main Element Tablet:

order: 2;

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

افكار اخيرة

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

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

لمزيد من المعلومات ، راجع هذا الدليل لاستخدام الأشرطة الجانبية مع Divi Theme Builder.

أتطلع إلى الاستماع منك في التعليقات.

هتافات!