กำหนดค่าส่วนหัวของเว็บไซต์ Cloudbeds ของคุณ

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

บทนำ

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

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

สารบัญ

เลือกประเภทส่วนหัว

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

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

เข้าถึงการตั้งค่าการออกแบบส่วนหัว

พฤติกรรมของส่วนหัวจะถูกกำหนดค่าจากแผงการออกแบบหลังจากที่คุณเลือกส่วนหัวในตัวแก้ไข Cloudbeds Websites

  1. เปิดเว็บไซต์ Cloudbeds ของคุณในตัวแก้ไข Cloudbeds Websites
  2. เลือก ส่วนหัว
  3. ใช้ แผงการออกแบบ เพื่อเปิดการตั้งค่าที่มีให้สำหรับส่วนหัว

หลังจากเลือกส่วนหัวแล้ว ให้ใช้แผงการออกแบบเพื่อเข้าถึงการตั้งค่าส่วนหัวที่มีให้ ในตัวอย่างนี้ การควบคุมการทับซ้อนของส่วนหัวจะแสดงอยู่

ตัวแก้ไขเว็บไซต์ Cloudbeds ที่เลือกส่วนหัวและแสดงการตั้งค่า Header Overlap ในแผงการออกแบบ

กำหนดค่าส่วนหัวแบบคงที่

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

  1. เลือก ส่วนหัว
  2. ในแผงการออกแบบ ให้ขยายเมนู ตำแหน่ง
  3. ตรวจสอบให้แน่ใจว่า ทับซ้อนกับส่วนบนของหน้า ปิดอยู่
  4. ตรวจสอบให้แน่ใจว่า ตั้งค่าเป็นส่วนหัวแบบติดอยู่ ปิดอยู่

กำหนดค่าส่วนหัวแบบติดอยู่

ส่วนหัวแบบติดอยู่จะคงที่ที่ด้านบนของหน้าเว็บขณะที่ผู้เยี่ยมชมเลื่อนหน้า

  1. เลือก ส่วนหัว
  2. ในแผงการออกแบบ ให้ขยายเมนู ตำแหน่ง
  3. เปิดใช้งาน ตั้งค่าเป็นส่วนหัวแบบติดอยู่

กำหนดค่าส่วนหัวแบบย่อขนาด

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

  1. เลือก ส่วนหัว
  2. ในแผงการออกแบบ ให้ขยายเมนู ตำแหน่ง
  3. เปิดใช้งาน ตั้งค่าเป็นส่วนหัวแบบติดอยู่
  4. เปิดใช้งาน เปลี่ยนส่วนหัวเมื่อเลื่อนหน้า
  5. ในการตั้งค่าการออกแบบส่วนหัว ให้ขยายเมนู ระยะห่าง และตั้งค่าค่า padding-top และ padding-bottom เริ่มต้น
  6. กลับไปที่ ตำแหน่ง และกำหนดพฤติกรรมการเลื่อนหน้า:
    • พื้นหลังเมื่อเลื่อนหน้า: เลือกสีพื้นหลังและความทึบแสง
    • ระยะห่างเมื่อเลื่อนหน้า: ตั้งค่า padding-top และ padding-bottom ให้มีค่าน้อยกว่าระยะห่างเริ่มต้นของส่วนหัว
    • ขนาดโลโก้: ใช้แถบเลื่อนหรือกล่องข้อความเพื่อกำหนดขนาดที่โลโก้จะย่อเมื่อส่วนหัวเปลี่ยนแปลงขณะเลื่อนหน้า ค่าเริ่มต้นคือ 66%

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

การตั้งค่าพฤติกรรมการเลื่อนส่วนหัวของ Cloudbeds Websites แสดงการตั้งค่า ตั้งค่าเป็นส่วนหัวแบบติดอยู่, เปลี่ยนส่วนหัวเมื่อเลื่อนหน้า, พื้นหลังเมื่อเลื่อนหน้า, ระยะห่างเมื่อเลื่อนหน้า และขนาดโลโก้เมื่อเลื่อนหน้า

กำหนดค่าส่วนหัวแบบทับซ้อน

ส่วนหัวแบบทับซ้อนจะรวมภาพกับส่วนแรกของหน้าโดยการวางส่วนหัวทับบนส่วนนั้น

  1. เลือก ส่วนหัว
  2. ในแผงออกแบบ ให้ขยาย ตำแหน่ง
  3. เปิดใช้งาน ทับซ้อนกับส่วนบนของหน้า
  4. เลือกสีพื้นหลังและความทึบของส่วนหัวที่ทับซ้อน

กำหนดค่าส่วนหัวที่ซ่อนอยู่

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

  1. เลือก ส่วนหัว
  2. ในแผงออกแบบ ให้ขยาย ตั้งค่าล่วงหน้า
  3. เลือกเลย์เอาต์ตั้งค่าล่วงหน้าที่เหมาะกับการออกแบบของคุณ

 ปุ่มเมนูแฮมเบอร์เกอร์จะมีให้ใช้เฉพาะในเลย์เอาต์สำหรับแท็บเล็ตและอุปกรณ์มือถือเท่านั้น


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

บทความนี้มีประโยชน์หรือไม่
0 จาก 0 เห็นว่ามีประโยชน์

ข้อคิดเห็น

0 ข้อคิดเห็น

โปรด ลงชื่อเข้าใช้ เพื่อแสดงข้อคิดเห็น