วิธีสร้างการนำทางคงที่ 4 มุมด้วย Divi

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

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

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

มาเริ่มกันเลย.

พรีวิว

มาดูการนำทาง 4 มุมที่เราจะสร้างในวันนี้กัน รูปแบบแรกจะวางปุ่มไว้ที่ขอบของหน้าจอ และอีกรูปแบบหนึ่งมีลักษณะลอยอยู่ภายใน

สไตล์ #1

สไตล์ #2

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

สร้างหน้าเปล่าใหม่

เปิดหน้าใหม่และก่อนที่จะแก้ไขด้วย Divi ให้เลือก 'หน้าว่าง' ในแอตทริบิวต์ของหน้า หลังจากนั้นให้เปิดใช้งาน Divi Builder

อัปโหลดเค้าโครงหน้า Landing Page ของ Cryptocurrency

เมื่ออยู่ใน Divi Visual Builder ให้อัปโหลดหน้า Landing Page ของ Cryptocurrency Layout Pack จากแท็บ Premade Layouts

2. สร้างส่วนใหม่ด้วยแถว 4 คอลัมน์

เพิ่มส่วนปกติใหม่ด้วยแถว 4 คอลัมน์

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

ลบช่องว่างภายในเริ่มต้นของ Section

ก่อนเพิ่มโมดูล ตรวจสอบให้แน่ใจว่าได้ลบช่องว่างภายในส่วนโดยเพิ่ม '0px' ที่ด้านบนและด้านล่าง นอกจากนี้ ให้ตรวจสอบอีกครั้งว่าส่วนนั้นไม่มีสีพื้นหลังหรือพื้นหลังแบบไล่ระดับสี

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

เพิ่มดัชนี Z

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

• ดัชนี Z: 10

3. ปรับขนาดของแถว

ต่อไป เราต้องปรับการตั้งค่าขนาดของแถว เปิดแท็บการออกแบบและปรับการตั้งค่าตามนั้น:

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

ลบช่องว่างภายในเริ่มต้นของแถว

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

เพิ่มโมดูลให้กับคอลัมน์

ตอนนี้ได้เวลาเพิ่มโมดูลบางส่วนลงในแต่ละคอลัมน์ โดยเริ่มจากซ้ายไปขวา

• คอลัมน์ #1: รูปภาพ
• คอลัมน์ #2: Button
• คอลัมน์ #3: โซเชียลมีเดียติดตาม
• คอลัมน์ #4: ปุ่ม

4. จัดรูปแบบแต่ละคอลัมน์

คอลัมน์ #1 – โมดูลรูปภาพ

เพิ่มโลโก้บริษัท

เปิด Image Module ในคอลัมน์ #1 อัปโหลดโลโก้ของคุณ (กว้าง 220px และสูง 100px) ตรวจสอบให้แน่ใจว่าเป็นภาพที่โปร่งใสโดยที่โลโก้อยู่ตรงกลาง

จัดตำแหน่งโมดูล

เราต้องการวางโลโก้ไว้ที่มุมบนซ้ายของหน้า เราจึงต้องจัดโมดูลให้ชิดซ้าย เปิดแท็บ Design ใน Image Module แล้วเลือก Image Alignment ทางซ้าย

• การจัดตำแหน่ง: ซ้าย

เพิ่ม CSS ที่กำหนดเองเพื่อแก้ไขตำแหน่งของโมดูล

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

position: fixed;
top: 0;
left: 0;

คอลัมน์ #2 – ปุ่ม

เพิ่มปุ่ม

ในคอลัมน์ #2 เพิ่มโมดูลปุ่ม

สไตล์ปุ่ม

ในแท็บเนื้อหา ให้เพิ่มข้อความสำหรับปุ่มของคุณ

• เนื้อหา-ข้อความ: ขุดหา Bitcoin

ถัดไป ในแท็บออกแบบ เลือกการจัดตำแหน่งปุ่มซ้าย

• การจัดตำแหน่ง: ซ้าย

หลังจากนั้น ให้เลื่อน Custom Button Styles เป็น yes และปรับค่าตามนั้น:

• รูปแบบปุ่มกำหนดเอง: ใช่
  • ขนาดข้อความของปุ่ม: เดสก์ท็อป; 25px, แท็บเล็ต: 20px, โทรศัพท์:20px
  • สีข้อความของปุ่ม: ขาว #ffffff
  • สีพื้นหลังของปุ่ม: ไล่ระดับสี
    • สีด้านบน:#1c076d, สีล่าง: #185475
    • ประเภทการไล่ระดับสี: เชิงเส้น
  • รัศมีเส้นขอบของปุ่ม: 7 px
  • แบบอักษรของปุ่ม: แทนทิลเลียมเว็บ (เหมือนกับเลย์เอาต์)
  • แสดงไอคอนปุ่ม: ใช่
  • ไอคอนปุ่ม: กรวยจราจร
  • ปุ่มไอคอนสี: ขาว #ffffff
  • ตำแหน่งไอคอนปุ่ม: ขวา

เพิ่ม CSS ที่กำหนดเองเพื่อแก้ไขตำแหน่งของโมดูล

สุดท้าย เปิดแท็บขั้นสูงและเพิ่ม CSS ที่กำหนดเองเพื่อแก้ไขตำแหน่งของโมดูลที่มุมล่างซ้ายของหน้า

position: fixed;
bottom: 0;
left: 0;

คอลัมน์ #3 – โซเชียลมีเดียติดตาม

เพิ่มโมดูลติดตามโซเชียลมีเดีย

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

ถัดไป ในแท็บ ออกแบบ ให้เลือก การจัดตำแหน่งโมดูล ด้านขวา

• การจัดตำแหน่ง: ขวา

จัดสไตล์ไอคอนโซเชียลมีเดีย

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

• ไอคอนสี: ขาว #ffffff
• ใช้ขนาดไอคอนที่กำหนดเอง: ใช่
  • ขนาดตัวอักษรของไอคอน: เดสก์ท็อป; 25px, แท็บเล็ต: 20px, โทรศัพท์:20px
• ความเป็นมา: ไม่มี

คัดลอกและวางรูปแบบรายการ

กลับไปที่หน้าต่างหลัก Social Media Follow คลิกขวาที่รายการแรกและเลือก 'Copy Item Styles' จากนั้นคลิกขวาที่สองเครือข่ายโซเชียลที่เหลือแล้ววางสไตล์

เพิ่ม CSS ที่กำหนดเองให้กับโมดูล

สุดท้าย ในแท็บขั้นสูง เพิ่มโค้ด CSS ต่อไปนี้เพื่อให้โมดูลติดอยู่ที่มุมบนขวาของหน้า:

position: fixed; 
top: 0; 
right: 0;

คอลัมน์ #4 – ปุ่ม

คัดลอกลักษณะโมดูลจากโมดูล #2 และปรับ

เพื่อให้ปุ่มในโมดูล #4 ดูเหมือนกับปุ่มในโมดูล #2 เราจะใช้ตัวเลือก 'คัดลอกลักษณะโมดูล' ขั้นแรก ให้คลิกขวาที่โมดูลปุ่มในคอลัมน์ 2 คลิก 'คัดลอกลักษณะโมดูล' แล้ววางลงในโมดูลปุ่มในคอลัมน์ 4

ตอนนี้ได้เวลาเปลี่ยนการตั้งค่าในแท็บเนื้อหา ขั้นแรก เปลี่ยนเนื้อหาข้อความ

• ข้อความ: จาก “Mine for Bitcoin” ถึง “Read our Blog”

จากนั้นเปลี่ยนการจัดตำแหน่งปุ่ม

• การจัดตำแหน่ง: จากซ้ายไปขวา

สุดท้าย เปลี่ยนโค้ด CSS ที่กำหนดเองในแท็บขั้นสูง:

• เปลี่ยนรหัสเป็น:

position: fixed; 
bottom: 0; 
right: 0;

ผล

5. เปลี่ยน CSS ที่กำหนดเองเพื่อให้ได้ StyleExample ที่สอง

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

เพียงปรับ CSS ที่กำหนดเองในแท็บขั้นสูงของทั้งสี่โมดูล

โมดูล#1

position: fixed; 
top: 1vw; 
left: 1vw;

โมดูล#2

position: fixed; 
bottom: 2vw; 
left: 2vw;

โมดูล#3

position: fixed; 
top: 3vw; 
left: 2vw;

โมดูล#4

position: fixed; 
bottom: 2vw; 
right: 2vw;

ผลสุดท้าย

บทสรุป

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