วิธีเพิ่มส่วนหัวคงที่ที่กำหนดเองสำหรับมือถือโดยใช้ Divi

การมีส่วนหัวคงที่ (หรือการนำทาง) บนมือถือสามารถเพิ่มความสามารถในการใช้งานเว็บไซต์ของคุณได้หากทำอย่างถูกต้อง การนำทางแบบคงที่โดยทั่วไปดูเหมือนว่าจะนำทางได้เร็วกว่าส่วนหัวมาตรฐานถึง 22% ในโลกแห่งเทคโนโลยีความเร็วสูง นั่นเป็นสถิติที่สำคัญแม้ว่าจะเป็นครึ่งหนึ่งของจำนวนนั้นก็ตาม

และด้วย Divi การเพิ่มส่วนหัวคงที่ให้กับไซต์ของคุณก็สามารถทำได้ด้วย CSS สองสามบรรทัด Divi อนุญาตให้คุณปรับแต่งส่วนหัวมือถือของคุณโดยใช้ Theme Customizer แต่ขณะนี้ยังไม่มีการตั้งค่าในตัวสำหรับการปรับใช้ส่วนหัวคงที่สำหรับมือถือ ในบทช่วยสอนนี้ ฉันจะแสดงวิธีเพิ่มส่วนหัวคงที่แบบกำหนดเองบนมือถือที่มีข้อมูลต่อไปนี้:

• โลโก้ (เหมาะกับอุปกรณ์พกพามากกว่า) ที่แตกต่างจากเวอร์ชันเดสก์ท็อปของคุณ
• ส่วนหัวที่สั้นลงเพื่อให้มีพื้นที่การรับชมมากขึ้น
• ไอคอนการนำทางแฮมเบอร์เกอร์ที่คลิกได้ขนาดใหญ่ขึ้นเพื่อให้ปรับใช้การนำทางบนมือถือได้ง่ายขึ้น
• พื้นหลังแบบกึ่งโปร่งใสที่ทำให้ส่วนหัวดูน่ารำคาญยิ่งขึ้นเมื่อดูไซต์

นี่คือตัวอย่างคร่าวๆ ว่าส่วนหัวจะหน้าตาเป็นอย่างไร

การตั้งค่า

การตั้งค่านี้คล้ายกับโพสต์ก่อนหน้าของฉันในการเปลี่ยนโลโก้ของคุณบนส่วนหัวคงที่ ก่อนที่คุณจะเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณได้ทำสิ่งต่อไปนี้ให้ครบถ้วน:

1. ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Divi เวอร์ชันล่าสุด
2. สร้างเมนูหลักที่ใช้งานได้สำหรับเว็บไซต์ของคุณ
3. จากส่วนหลังของไซต์ WordPress ให้ไปที่ Theme Customizer > Header & Navigation > Header Format และตรวจสอบให้แน่ใจว่าคุณได้เลือกรูปแบบส่วนหัวเริ่มต้นแล้ว

   

4. สร้างโลโก้ของคุณสองเวอร์ชันที่มีขนาด 200×131 และเพิ่มลงในไลบรารี WordPress Media ของคุณ โลโก้หนึ่งโลโก้จะใช้สำหรับส่วนหัวหลักและอีกโลโก้หนึ่งจะใช้สำหรับส่วนหัวแบบคงที่ หากทำได้ ให้ทำให้โลโก้เวอร์ชันส่วนหัวตายตัวเป็นแนวนอนมากขึ้น เพื่อไม่ให้ถูกกดทับในแนวตั้งบนส่วนหัวคงที่ที่เล็กกว่า นี่คือตัวอย่างโลโก้ส่วนหัวหลักที่ฉันใช้อยู่ นี่คือตัวอย่างโลโก้ส่วนหัวคงที่ของฉัน สังเกตว่าฉันครอบตัดข้อความเพื่อสร้างโลโก้แนวนอนที่เรียบง่ายขึ้นและพอดีกับส่วนหัวที่มีความสูงน้อยกว่า ไม่น่าจะมีใครอ่านข้อความนั้นได้อยู่แล้ว และแบรนด์ก็ยังเป็นตัวแทนอยู่

   

5. ตั้งค่าเมนูหลักของคุณด้วยรายการเมนู

   เนื่องจากเราจะเพิ่ม CSS ที่กำหนดเองเพื่อให้ส่วนหัวคงที่สำเร็จ เราจึงไม่จำเป็นต้องปรับแต่งตัวเลือกส่วนหัวมาตรฐานหรือส่วนหัวคงที่ในเครื่องมือปรับแต่งธีม แต่ถ้าคุณต้องการทำซ้ำการตั้งค่าสำหรับขนาดเมนูและโลโก้ในตัวอย่างของฉัน ให้ทำดังต่อไปนี้ (ตัวเลือกนี้เป็นทางเลือกทั้งหมด):

   ไปที่การตั้งค่าส่วนหัวและการนำทางในตัวปรับแต่งธีม เลือกแถบเมนูหลักและอัปเดตรายการต่อไปนี้:

   ความสูงของเมนู: 105
   โลโก้ความสูงสูงสุด: 80
   ขนาดตัวอักษร: 20

   

   ตอนนี้กลับไปที่ส่วนหัวและการนำทาง เลือกการตั้งค่าการนำทางคงที่และอัปเดตสิ่งต่อไปนี้:

   ความสูงของเมนูคงที่: 60
   ขนาดตัวอักษร: 20

   

เมื่อคุณทำตามขั้นตอนเหล่านี้เสร็จแล้ว คุณก็พร้อมที่จะเริ่มต้น

วิธีเพิ่มส่วนหัวคงที่ที่กำหนดเองสำหรับมือถือโดยใช้ Divi

สมัครสมาชิกช่อง Youtube ของเรา

เริ่มต้น

เราจะนำการออกแบบนี้ไปใช้ใน CSS ที่กำหนดเองภายใต้ส่วน CSS เพิ่มเติมในเครื่องมือปรับแต่งธีม Divi เนื่องจากเราจะกำหนดเป้าหมายไปที่อุปกรณ์เคลื่อนที่เท่านั้น เราจะรวม CSS ทั้งหมดของเราไว้ในคิวรีสื่อที่จำกัดการจัดสไตล์ให้มีความกว้างของเบราว์เซอร์น้อยกว่า 980px ไปข้างหน้าและเริ่มต้นด้วยการป้อนข้อมูลต่อไปนี้ในกล่อง CSS เพิ่มเติม:

@media (max-width: 980px) {



}

การสร้างส่วนหัวคงที่บนมือถือของคุณโดยใช้ CSS

เนื่องจาก Divi ได้เพิ่มคลาสที่เรียกว่า "et-fixed-header" เมื่อผู้ใช้เลื่อนหน้าลงมา เราจึงสามารถใช้ตัวเลือกนั้นใน CSS ที่กำหนดเองเพื่อสร้างและจัดรูปแบบส่วนหัวคงที่สำหรับมือถือของเรา

CSS กลุ่มแรกด้านล่างนี้ทำให้ส่วนหัวคงที่ (หรือติดหนึบ) ที่ด้านบนของหน้า แล้วปรับความสูงของส่วนหัวคงที่เป็น 55px นอกจากนี้ยังเพิ่มสีพื้นหลังสีขาวกึ่งโปร่งใส เพิ่มสิ่งต่อไปนี้ใน CSS เพิ่มเติมของคุณใน Theme Customizer ภายในวงเล็บ Media Query

/*********************************
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 แนะนำว่าองค์ประกอบ UI ที่คลิกได้ทั้งหมดสำหรับแอพของพวกเขาต้องมีขนาดอย่างน้อย 44 × 44 พิกเซลเพื่อให้นิ้วโป้งและนิ้วของเราสามารถคลิกได้อย่างง่ายดาย นี่จะเป็นแนวทางที่ดีสำหรับองค์ประกอบในส่วนหัวคงที่สำหรับอุปกรณ์พกพา CSS ต่อไปนี้ทำให้ไอคอนการนำทาง 45px

/*********************************
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 แบบง่ายแก่คุณ โปรดพิจารณาสำรวจตัวเลือกเหล่านั้นหากวิธีนี้ใช้ไม่ได้ผลสำหรับคุณ

ความคิดสุดท้าย

เป็นมูลค่าการกล่าวขวัญว่าส่วนหัวคงที่สำหรับมือถืออาจเป็นอันตรายต่อการใช้งาน เนื่องจากมันยังคงบล็อกส่วนบนของเบราว์เซอร์ของคุณอยู่ตลอดเวลา ถ้าคุณไม่ระวัง คุณอาจสูญเสียอสังหาริมทรัพย์อันมีค่าไปโดยไม่มีเหตุผลอันสมควร จำไว้ว่าไม่ใช่ทุกคนที่มี phablet แบบผู้ชายคนนี้

นั่นเป็นเหตุผลสำคัญที่ต้องปรับแต่งส่วนหัวคงที่สำหรับอุปกรณ์มือถือโดยให้ความสูงสั้นลง โลโก้ที่แตกต่าง และปุ่มนำทางที่ใหญ่ขึ้น และด้วยการเพิ่ม CSS สองสามบรรทัดลงในเว็บไซต์ Divi ของคุณ คุณสามารถมีส่วนหัวคงที่บนมือถือโดยไม่ต้องใช้ปลั๊กอินของบุคคลที่สาม ดังนั้น ถ้ามันสมเหตุสมผลที่จะเพิ่มมันเข้าไปในโปรเจ็กต์ถัดไปของคุณ ก็ลงมือเลย การมีฟังก์ชันประเภทนี้สามารถปรับปรุง UI ของเว็บไซต์ของคุณได้

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!