كيفية إضافة رأس ثابت مخصص للجوال باستخدام Divi

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

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

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

إليك نظرة خاطفة سريعة على الشكل الذي سيبدو عليه العنوان.

وانشاء

هذا الإعداد مشابه لمنشورتي السابقة حول تبديل شعارك على رأس ثابت. قبل أن تبدأ ، تأكد من إكمال ما يلي:

1. تأكد من تثبيت أحدث إصدار من Divi.
2. قم بإنشاء قائمة أساسية نشطة لموقعك.
3. من الواجهة الخلفية لموقع WordPress الخاص بك ، انتقل إلى Theme Customizer> Header & Navigation> Header Format وتأكد من تحديد نمط الرأس الافتراضي.

   

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

   

5. قم بإعداد القائمة الأساسية الخاصة بك مع عناصر القائمة.

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

   انتقل إلى Header & Navigation settings في Theme Customizer. حدد شريط القوائم الأساسي وقم بتحديث ما يلي:

   ارتفاع القائمة: 105
   أقصى ارتفاع للشعار: 80
   حجم النص: 20

   

   عد الآن إلى Header & Navigation. حدد إعدادات الملاحة الثابتة وقم بتحديث ما يلي:

   ارتفاع القائمة الثابتة: 60
   حجم النص: 20

   

بمجرد الانتهاء من هذه الخطوات ، تكون جاهزًا للبدء.

كيفية إضافة رأس ثابت مخصص للجوال باستخدام Divi

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

ابدء

سنقوم بتنفيذ هذا التصميم بإدخال CSS مخصص ضمن قسم CSS الإضافي في Divi Theme Customizer. نظرًا لأننا سنستهدف الأجهزة المحمولة فقط ، فسنقوم بتغليف جميع CSS الخاصة بنا في استعلام وسائط يحد من التصميم إلى عرض متصفح أقل من 980 بكسل. انطلق وابدأ بإدخال ما يلي في مربع CSS الإضافي:

@media (max-width: 980px) {



}

إنشاء الموبايل الثابت الخاص بك باستخدام CSS

نظرًا لأن Divi تضيف بالفعل فئة تسمى "et-fix-header" عندما يقوم المستخدم بالتمرير لأسفل الصفحة ، يمكننا استخدام هذا المحدد في CSS المخصص لدينا لإنشاء وتصميم رأسنا الثابت المحمول.

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

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

تقترح Apple أن تكون جميع عناصر واجهة المستخدم القابلة للنقر لتطبيقاتها على الأقل 44 × 44 بكسل بحيث يمكن لإبهامنا وأصابعنا النقر عليها بسهولة. سيكون هذا دليلًا جيدًا للعناصر الموجودة في الرأس الثابت المتنقل. يجعل CSS التالي رمز التنقل 45 بكسل.

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

أخيرًا ، دعنا نضيف ارتفاعًا أكبر لشعارنا على الرأس الثابت حتى نتمكن من رؤيته بشكل أفضل. أدخل CSS التالية:

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

هذا كل شيء! لقد انتهينا جميعا.
فيما يلي المجموعة النهائية من CSS لإنشاء رأس ثابت للجوال الخاص بك:

@media (max-width: 980px) {

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

}

احفظ إعداداتك. الآن لديك رأس ثابت متنقل يعمل.

تبديل شعارك على العنوان الثابت للجوال الخاص بك

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

بمجرد حصولك على كلا عنوان URL ، انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Options> Integrations. ابحث عن مربع الإدخال "إضافة رمز إلى رأس مدونتك" وأدخل نص jQuery التالي:

<script>
    var imageUrl = [
  'ENTER DESKTOP LOGO IMAGE URL',
  'ENTER MOBILE LOGO IMAGE URL',
    ];

    jQuery(window).on('scroll', function() {
        var $header = jQuery('header');
        var $logo = jQuery('#logo');

        if ((jQuery(window).width() < 981) &&
        ($header.hasClass('et-fixed-header'))) {
            return $logo.attr('src', imageUrl[1]);
        };

        return $logo.attr('src', imageUrl[0])
    });
</script>

الآن استبدل النص "ENTER DESKTOP LOGO IMAGE URL" بعنوان url الخاص بالشعار الذي تستخدمه حاليًا لموقعك.

ثم استبدل النص "ENTER MOBILE LOGO IMAGE URL" بعنوان URL للشعار الذي تريد استخدامه للأجهزة المحمولة فقط.

حفظ الإعدادات وتحقق من النتائج.

دعم المتصفح

في هذا المنشور ، قمت بإنشاء رأس ثابت باستخدام CSS فقط ، معتمداً بشكل كبير على خاصية CSS "position: fixed". يمكن أن تكون خاصية CSS هذه غير متوافقة مع الإصدارات القديمة من متصفحات الأجهزة المحمولة ، خاصةً على iOS Safari و Android. ولكن هذه الأيام يتم دعم "position: fixed" على الإصدارات الأحدث من متصفحات الأجهزة المحمولة (باستثناء Opera Mini).

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

افكار اخيرة

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

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

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

هتافات!