วิธีประหยัดพื้นที่ในส่วนหัวของคุณโดยใช้ไอคอนสลับกับ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลต Global Header ฟรี

หากต้องการใช้เทมเพลตส่วนหัวส่วนกลางฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

1. สร้างโครงสร้างส่วนหัว

สร้างเทมเพลตส่วนหัวส่วนกลางใหม่

เริ่มต้นด้วยการไปที่ Divi Theme Builder และเริ่มสร้างส่วนหัวระดับโลกหรือแบบกำหนดเองใหม่

เพิ่มมาตรา #1

พื้นหลังไล่โทนสี

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

• สี 1: #ffffff
• สี 2: #eaeaea
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมด

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

กล่องเงา

เพิ่มเงากล่องด้วย

• เงาสี: rgba(0,0,0,0.06)

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถว ไปที่แท็บการออกแบบ และเปลี่ยนการตั้งค่าการปรับขนาดดังนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• การจัดแนวแถว: กึ่งกลาง

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

องค์ประกอบหลัก CSS

จากนั้นไปที่แท็บขั้นสูงและใช้บรรทัดโค้ด CSS ที่กำหนดเองขององค์ประกอบหลักในขนาดหน้าจอต่างๆ รหัสนี้จะช่วยให้เราจัดรายการบนเดสก์ท็อปในแนวตั้ง

เดสก์ทอป:

display: flex;
place-items: center;

แท็บเล็ตและโทรศัพท์:

display: block;

คอลัมน์ 1 การตั้งค่า

ระยะห่าง

จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และใช้ช่องว่างภายในด้านซ้ายและขวา

• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

องค์ประกอบหลัก

เรากำลังเปลี่ยนขนาดคอลัมน์บนเดสก์ท็อปและนำกลับมาเป็น "100%" บนแท็บเล็ตและโทรศัพท์โดยใช้ CSS ที่กำหนดเองกับองค์ประกอบหลักของคอลัมน์

เดสก์ทอป:

width: 88% !important

แท็บเล็ตและโทรศัพท์:

width: 100% !important;

การตั้งค่าคอลัมน์ 2

สีพื้นหลัง

ต่อไป เราจะเปิดการตั้งค่าคอลัมน์ 2 และเปลี่ยนสีพื้นหลังเป็นสีขาว

• สีพื้นหลัง: #FFFFFF

ระยะห่าง

เราจะเพิ่มค่าช่องว่างภายในที่ปรับเปลี่ยนตามอุปกรณ์ให้กับการตั้งค่าการเว้นวรรคของคอลัมน์นี้ด้วย

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 50px
  • แท็บเล็ตและโทรศัพท์: 20px
• แผ่นรองด้านล่าง
  • เดสก์ท็อป: 50px
  • แท็บเล็ตและโทรศัพท์: 20px
• ช่องว่างภายในด้านซ้าย: 1%
• ช่องว่างภายในด้านขวา: 1%

องค์ประกอบหลัก CSS

เราจะปรับเปลี่ยนขนาดของคอลัมน์ที่สองบนเดสก์ท็อปด้วย เรากำลังนำสิ่งนี้กลับมาเป็น “100%” บนหน้าจอขนาดเล็กลง

เดสก์ทอป:

display: flex;
place-items: center;
width: 12% !important;

แท็บเล็ตและโทรศัพท์:

width: 100% !important;

เพิ่มโมดูลเมนูไปที่คอลัมน์ 1

เลือกเมนู

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลเมนูในคอลัมน์ 1 เลือกเมนูที่คุณต้องการ

อัพโหลดโลโก้

อัปโหลดโลโก้ต่อไป

ลบสีพื้นหลัง

จากนั้น ให้เอาสีพื้นหลังเริ่มต้นออก

การตั้งค่าข้อความเมนู

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความเมนูตามลำดับ:

• แบบอักษรของเมนู: Playfair Display
• แบบอักษรข้อความเมนู: Playfair Display
• สีข้อความของเมนู: #000000
• ขนาดข้อความของเมนู: 19px
• ความสูงของบรรทัดเมนู: 1.4em
• การจัดตำแหน่งข้อความ: ขวา

การตั้งค่าเมนูแบบเลื่อนลง

จากนั้นเปลี่ยนสีบรรทัดเมนูแบบเลื่อนลง

• สีของเมนูดรอปดาวน์: #ffffff

การตั้งค่าไอคอน

เปลี่ยนสีไอคอนในการตั้งค่าไอคอนด้วย

• ไอคอนรถเข็นช็อปปิ้งสี: #000000
• ค้นหาไอคอนสี: #000000
• ไอคอนเมนูแฮมเบอร์เกอร์สี: #000000

ขนาด

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเปลี่ยนการตั้งค่าขนาดดังนี้:

• โลโก้ความกว้างสูงสุด: 200px
• ความกว้าง: 100%
• การจัดตำแหน่งโมดูล: ศูนย์

เพิ่ม Blurb Module #1 ให้กับคอลัมน์ 2

เว้นช่องเนื้อหาว่างไว้

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

เลือกไอคอน

จากนั้นเลือกไอคอนที่คุณต้องการ

การตั้งค่าไอคอน

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าไอคอนดังนี้:

• ไอคอนสี
  • ค่าเริ่มต้น: #dbdbdb
  • โฮเวอร์: #000000
• ตำแหน่งไอคอน: Top
• การจัดตำแหน่งไอคอน: ศูนย์
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 200%

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

• ความกว้างของเนื้อหา: 100%
• ความกว้าง: 32%

องค์ประกอบหลักและภาพนำเสนอ CSS

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มโค้ด CSS สองบรรทัดลงในตัวเลือก CSS ที่กำหนดเองในแท็บขั้นสูงของ Blurb Module

องค์ประกอบหลัก:

display: inline-block;

นำเสนอภาพ:

margin-bottom: 0px !important

โคลน Blurb โมดูลสองครั้ง

เมื่อคุณเสร็จสิ้นการสลับไอคอน Blurb Module แรกแล้ว คุณสามารถโคลนได้สองครั้ง

เปลี่ยนไอคอน

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนไอคอนในแต่ละรายการที่ซ้ำกัน

2. เพิ่มรายการสลับ

เพิ่มส่วน #2

ขนาด

ตอนนี้เราได้กำหนดรากฐานของส่วนหัวแล้ว เรายังคงต้องรวมรายการสลับ ในการทำเช่นนั้น เราจะเพิ่มส่วนใหม่ด้านล่างส่วนก่อนหน้า เปิดการตั้งค่าส่วนและตรวจสอบให้แน่ใจว่าความสูงของส่วนนี้เป็น "0px" วิธีนี้จะช่วยป้องกันไม่ให้ส่วนนี้กินพื้นที่ในการออกแบบส่วนหัวของเรา เหตุผลเดียวที่เราต้องการส่วนนี้คือแสดงรายการสลับของเรา

• ส่วนสูง: 0px

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมด

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าแถวและแก้ไขการตั้งค่าการปรับขนาดดังนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ตำแหน่ง

และปรับตำแหน่งทั้งแถว การเปลี่ยนแถวนี้แบบสัมบูรณ์จะช่วยเราป้องกันไม่ให้แถวนั้นกินพื้นที่ในการออกแบบ

• ตำแหน่ง: Absolute
• ตำแหน่ง: มุมบนขวา

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 2

เพิ่มหมายเลขโทรศัพท์ลงในกล่องเนื้อหา

ถึงเวลาเพิ่มรายการสลับ! ขั้นแรก เราจะเพิ่มหมายเลขโทรศัพท์ เพิ่มโมดูลข้อความใหม่ในคอลัมน์ 2 และใส่หมายเลขโทรศัพท์ในกล่องเนื้อหา

สีพื้นหลัง

เพิ่มสีพื้นหลังสีดำต่อไป

• สีพื้นหลัง: #000000

การตั้งค่าข้อความ

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรข้อความ: Playfair Display
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 27px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ขนาด

ตรวจสอบให้แน่ใจว่าความกว้างเป็น 100% ด้วย

• ความกว้าง: 100%

ระยะห่าง

จากนั้น ให้เพิ่มค่าช่องว่างภายในที่กำหนดเองลงในการตั้งค่าการเว้นวรรค

• ช่องว่างภายในด้านบน: 10%
• แผ่นรองด้านล่าง: 10%
• ช่องว่างภายในด้านซ้าย: 2%
• ช่องว่างภายในด้านขวา: 2%

โมดูลข้อความโคลน

เมื่อคุณเสร็จสิ้นการสลับรายการโมดูลข้อความแรกแล้ว ให้โคลนหนึ่งครั้ง

เปลี่ยนเนื้อหาเป็นที่อยู่อีเมล

เปลี่ยนเนื้อหาในกล่องเนื้อหา

เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์ 2

เพิ่มเครือข่ายโซเชียลทางเลือก

จากนั้น เพิ่ม Social Media Follow Module ลงในคอลัมน์ 2 เพิ่มเครือข่ายโซเชียลได้มากเท่าที่คุณต้องการ

เปลี่ยนสีพื้นหลังของโซเชียลเน็ตเวิร์กเป็นสีขาว

จากนั้นเปลี่ยนสีพื้นหลังเป็นสีขาวสำหรับแต่ละเครือข่ายโซเชียล

• สีพื้นหลัง: #FFFFFF

สีพื้นหลัง

จากนั้นกลับมาที่การตั้งค่าโมดูลทั่วไปและใช้สีพื้นหลังสีดำ

• สีพื้นหลัง: #000000

การจัดตำแหน่ง

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการจัดตำแหน่งโมดูล

• การจัดตำแหน่งโมดูล: ศูนย์

การตั้งค่าไอคอน

เปลี่ยนสีไอคอนในการตั้งค่าไอคอนด้วย

• ไอคอนสี: #000000

ขนาด

จากนั้น ใช้ความกว้าง "100%" กับการตั้งค่าการปรับขนาด

• ความกว้าง: 100%

ระยะห่าง

ใช้การเติมด้านบนและด้านล่างแบบกำหนดเองด้วย

• ช่องว่างภายในด้านบน: 10%
• แผ่นรองด้านล่าง: 10%

ชายแดน

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มมุมโค้งมนให้กับการตั้งค่าเส้นขอบ

• ทุกมุม: 100px

3. เพิ่มฟังก์ชันการทำงาน

เพิ่ม CSS ID ที่ต่อเนื่องกันให้กับโมดูล Blurb ส่วนแรก

เมื่อองค์ประกอบทั้งหมดพร้อมแล้ว เราก็เริ่มเพิ่มเอฟเฟกต์การสลับได้ สิ่งแรกที่คุณต้องทำคือเปิดโมดูล Blurb แต่ละโมดูลและเพิ่ม CSS ID ที่ต่อเนื่องกัน

• Blurb 1: header-cta-1
• Blurb 2: header-cta-2
• Blurb 3: header-cta-3

เพิ่มรหัส CSS ที่ต่อเนื่องกันเพื่อสลับรายการ

ทำสิ่งเดียวกันสำหรับโมดูลรายการสลับ ตัวเลขที่อยู่ท้าย CSS ID ควรตรงกับ CSS ID ที่คุณใช้สำหรับไอคอนในขั้นตอนก่อนหน้า

• โมดูลข้อความ 1: header-item-1
• โมดูลข้อความ 2: header-item-2
• โมดูลติดตามโซเชียลมีเดีย: header-item-3

เพิ่มตำแหน่งที่แน่นอนให้กับรายการสลับทั้งหมด

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

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนขวา

เพิ่มโมดูลโค้ดในคอลัมน์แรกของส่วน #1

ตอนนี้ CSS ID ทั้งหมดพร้อมแล้ว เราสามารถเพิ่มโค้ดเพื่อให้ฟังก์ชันการคลิกทำงานได้ เพิ่มโมดูลโค้ดใหม่ด้านล่างโมดูลเมนูในคอลัมน์ 1

ใส่โค้ด CSS

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

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

ใส่รหัส JQuery

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

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

4. สร้างส่วนหัว + รายการสลับ Sticky

ทำให้ส่วนที่ #1 เหนียว

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

• ตำแหน่งติดหนึบ: Stick to Top
• ขีด จำกัด ติดหนึบด้านล่าง: ไม่มี
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: ใช่
• รูปแบบเริ่มต้นของการเปลี่ยนและรูปแบบติดหนึบ: ใช่

ทำให้ส่วน #2 เหนียว

และทำเช่นเดียวกันกับส่วนที่ 2 เท่านั้น!

• ตำแหน่งติดหนึบ: Stick to Top
• ขีด จำกัด ติดหนึบด้านล่าง: ไม่มี
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: ใช่
• รูปแบบเริ่มต้นของการเปลี่ยนและรูปแบบติดหนึบ: ใช่

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

หากคุณอยากเรียนรู้เพิ่มเติมเกี่ยวกับ Divi และรับ Divi freebies เพิ่มเติม อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้เป็นหนึ่งในคนกลุ่มแรกๆ ที่รู้จักและรับประโยชน์จากเนื้อหาฟรีนี้เสมอ