การออกแบบหน้ารายชื่อโฟลเดอร์

โฟลเดอร์ช่วยให้คุณสร้างชุดหน้าเว็บของคุณในรูปแบบหน้าแสดงรายการหรือแบบดรอปดาวน์ได้

ให้คิดว่าโฟลเดอร์เป็นที่เก็บรายการเมนูหลายรายการและแสดงในรูปแบบภาพ (ตาราง สไลด์โชว์ การเลื่อนแนวตั้งหรือแนวนอน และเค้าโครงอื่นๆ อีกมากมาย)

ดูโฟลเดอร์สาธิต

เมื่อคุณสร้างโฟลเดอร์แล้ว คุณสามารถจัดการการออกแบบของโฟลเดอร์ได้ตามที่แสดงด้านล่าง


จัดการรูปแบบโฟลเดอร์:

  • ป้อน โฟลเดอร์ ชื่อเรื่อง (1) ในแถบค้นหา
  • คลิกที่ โฟลเดอร์ (2) ภายใต้ รายการเมนูไซต์ 

  • หรือจาก จองทางเว็บไซต์ ส่วนคุณสามารถคลิกที่ สามจุด (1) ไอคอนที่คุณจะเห็นเมื่อวางเคอร์เซอร์ไว้เหนือโฟลเดอร์
  • คลิกที่ การตั้งค่า (2) ตัวเลือก
  • สิ่งนี้จะนำคุณไปสู่ การตั้งค่าโฟลเดอร์ หน้าที่คุณสามารถคลิกได้ ออกแบบ (3) แท็บเพื่อเปิด การออกแบบโฟลเดอร์ ลิ้นชัก.


คุณจะเห็นตัวเลือกการออกแบบต่อไปนี้ที่นี่: 


เค้าโครงโฟลเดอร์

  1. แบบ – เลือกรูปแบบที่จะใช้กับโฟลเดอร์ คุณสามารถเลือกจากรูปแบบมากกว่า 20 แบบเพื่อแสดงรายการย่อยของโฟลเดอร์บนเว็บไซต์ของคุณ
  2. ความกว้าง – ตั้งค่าความกว้างของโฟลเดอร์เป็นความกว้างแบบเต็ม กล่อง หรือความกว้างของไซต์
    • 'เต็มความกว้าง' จะแสดงโฟลเดอร์โดยครอบคลุมความกว้างทั้งหมดโดยไม่มีระยะขอบ
    • 'ชนิดบรรจุกล่อง' จะแสดงโฟลเดอร์โดยเว้นช่องว่างด้านขวาและซ้ายของหน้าจอไว้จำนวนหนึ่ง
    • 'ความกว้างของไซต์' สามารถระบุได้ใน ออกแบบ ส่วน. คุณสามารถระบุความกว้างคงที่ได้ที่นั่น
      จะแสดงโฟลเดอร์ตามความกว้างคงที่ที่กำหนด
  3. ระยะห่างกริด – ระบุช่องว่างระหว่างรายการย่อยในรูปแบบกริด (0- 250 พิกเซล)
  4. รัศมีมุม – ปรับแต่งมุมของรายการกริดภายในโฟลเดอร์โดยการปรับรัศมีมุมให้เป็นมุมมนหรือมุมสี่เหลี่ยม
  5. แสดงตัวกรองตามแท็ก – ตรวจสอบสิ่งนี้เพื่อ เปิดใช้งานการกรองตามแท็กในรายการย่อยของโฟลเดอร์ของคุณ.
  6. การจัดตำแหน่งแท็ก – ตั้งค่าการจัดตำแหน่งของแท็กบนหน้าจอ


ชื่อ

แสดงชื่อเรื่อง (1): คุณสามารถเปิดใช้งานชื่อเรื่องย่อยใต้รูปภาพตารางพร้อมชื่อเรื่องและแท็กได้

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


แบบอักษรชื่อเรื่อง

  1. คลิกที่ เปลี่ยนรูปแบบข้อความ ปุ่มเพื่อเยี่ยมชม ออกแบบ ส่วนและ จัดการขนาดและรูปแบบตัวอักษรของคุณ 
  2. ตั้ง ชื่อหนังสือ รูปแบบอักษรสำหรับรายการภายในโฟลเดอร์
  3. สีตัวอักษร: ระบุสีสำหรับแบบอักษรของชื่อเรื่อง


ขอบภาพ

ดูวิธีการจัดการขอบรูปภาพได้ที่นี่


สไตล์กริด

  1. เอฟเฟกต์โฮเวอร์: เอฟเฟ็กต์โฮเวอร์สามารถใช้ได้ในเค้าโครงกริดเท่านั้น คุณสามารถแสดงตัวเลือกต่อไปนี้เมื่อโฮเวอร์ในโหมดกริด
    • ไม่มีผลกระทบ: เพื่อไม่ให้มีผลกับรายการย่อยในโหมดกริด
    • สี: สำหรับสีซ้อนทับเฉพาะในรายการย่อยของคุณในโหมดกริด
    • สีและไอคอน: สำหรับสีซ้อนทับของรายการย่อยที่มีไอคอน
  2. โฮเวอร์สี: ระบุสีเมื่อโฮเวอร์
    • หากต้องการระบุสี ให้เลือก สีที่เลือก. หากคุณเลือกตัวเลือกนี้ คุณจะพบตัวเลือกด้านล่างเพื่อระบุสี
    • เลือก ภาพเน้นสี เพื่อให้สีเฉพาะจุดของรูปภาพปรากฏขึ้นเมื่อโฮเวอร์ หากคุณเลือกตัวเลือกนี้ คุณจะพบตัวเลือกด้านล่างเพื่อระบุความทึบของสีที่เน้นของรูปภาพ
  3. สีฐาน: ระบุสีของฐานกริด
    • หากต้องการระบุสี ให้เลือก สีที่เลือก. หากคุณเลือกตัวเลือกนี้ คุณจะพบตัวเลือกด้านล่างเพื่อระบุสี
    • เลือก ภาพเน้นสี เพื่อให้สีเฉพาะจุดของภาพกลายเป็นสีพื้นฐาน หากคุณเลือกตัวเลือกนี้ คุณจะพบตัวเลือกด้านล่างเพื่อระบุความทึบของสีที่เน้นของรูปภาพ
  4. ไอคอนกริด: เลือก Plus, ลูกศร, ข้าม, or ตา ไอคอน. ไอคอนนี้จะปรากฏเมื่อวางเมาส์เหนือภาพตาราง
  5. สีไอคอน: ระบุสีไอคอนกริด


ตัวอย่างเช่นลองดูโฟลเดอร์นี้ที่เลือกรูปแบบ "เค้าโครงโฟลเดอร์ขนาดใหญ่แบบสี่เหลี่ยม" และ "ป้ายกำกับแบบตาราง – ชื่อเรื่องและแท็ก":

การนำทาง Breadcrumb

เรียนรู้เกี่ยวกับระบบนำทางแบบ Breadcrumb อย่างละเอียด


จอแสดงผลมือถือ

  1. ระบุ ช่องว่างระหว่างรายการย่อย ในรูปแบบกริดสำหรับมือถือ (ระหว่าง 0- 250 พิกเซล)
  2. เลือกกระเป๋า จำนวนคอลัมน์ เพื่อแสดงรายการภายในโฟลเดอร์บนอุปกรณ์เคลื่อนที่


สไลด์โชว์ (สำหรับเค้าโครง 'Full-Image Slider' เท่านั้น)

  1. พฤติกรรม: เปิดใช้งานสไลด์โชว์จากที่นี่
  2. ความเร็วสไลด์โชว์: ตั้งค่าความเร็วในการเปลี่ยนสไลด์โชว์ (ระหว่าง 1 ถึง 10 วินาที)
  3. การเปลี่ยนภาพสไลด์: ระบุประเภทการเปลี่ยนสไลด์โชว์ คุณสามารถใช้ตัวเลือก 'การปัดในแนวนอน' หรือ 'จาง'


ไม่พบสิ่งที่คุณกำลังมองหา?

ติดต่อกับผู้เชี่ยวชาญของ Pixpa

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