ทำให้เว็บไซต์แสดงผลถูกต้องบนโทรศัพท์และแท็บเล็ต
ดูว่าร้านค้าของคุณแสดงผลอย่างไรบนแท็บเล็ตและโทรศัพท์ ซ่อนบล็อกบนหน้าจอขนาดเล็ก และปรับตำแหน่งของบล็อกเฉพาะขนาดหน้าจอหนึ่ง ๆ
ผู้เข้าชมส่วนใหญ่เข้าร้านค้าผ่านโทรศัพท์ ดังนั้นหน้าของคุณต้องใช้งานได้ในทุกขนาด คุณออกแบบเพียงครั้งเดียว และ Payly จะปรับหน้าให้เหมาะกับแท็บเล็ตและโทรศัพท์ให้ บทความนี้อธิบายสิ่งที่เกิดขึ้นเองโดยอัตโนมัติ และวิธีเปลี่ยนแปลงเมื่อคุณต้องการให้บล็อกทำงานต่างออกไปบนหน้าจอที่เล็กกว่า
เลย์เอาต์ของคุณปรับตัวอย่างไร
บล็อกจะอยู่ในช่องของตารางกริดสิบสองคอลัมน์ ไม่ได้อยู่ที่ตำแหน่งพิกเซลตายตัว จึงไม่ซ้อนทับกันบนหน้าจอขนาดเล็ก หน้าจะเปลี่ยนเลย์เอาต์ที่สองจุด ดังนี้
- แท็บเล็ต (หน้าจอที่แคบกว่า 1024 พิกเซล) ยังคงใช้ตารางกริดเดิม บล็อกจะอยู่ที่เดิมจนกว่าคุณจะย้ายสำหรับแท็บเล็ต
- โทรศัพท์ (760 พิกเซลหรือแคบกว่า) จะวางบล็อกทุกบล็อกไว้คนละแถวในความกว้างเต็ม เรียงจากบนลงล่างตามลำดับที่คุณอ่านบนเดสก์ท็อป คือจากบนลงล่าง แล้วจากซ้ายไปขวา
บางบล็อกปรับตัวเพิ่มเติม ลิงก์ในส่วนหัวจะพับไปอยู่หลังปุ่มเมนู กริดจะยุบเหลือหนึ่งคอลัมน์ และแกลเลอรีกับแถบโลโก้จะแสดงสองคอลัมน์ ผลลัพธ์คือร้านค้าที่ใช้งานบนโทรศัพท์ได้โดยไม่ต้องตั้งค่าเพิ่มเติม
สลับระหว่างขนาดหน้าจอ
- ในแถบด้านบนของตัวแก้ไข คลิก แท็บเล็ต หรือ มือถือ หน้าจะแคบลงเพื่อแสดงว่าหน้าดูเป็นอย่างไรในขนาดนั้น
- ดูหน้าเพื่อหาส่วนที่อ่านไม่ค่อยดี เลื่อนดู และเลือกบล็อกตามปกติ
- คลิก เดสก์ท็อป เพื่อกลับไปยังเลย์เอาต์ขนาดเต็ม
ปุ่มเหล่านี้ทำมากกว่าการดูตัวอย่าง ปุ่มยังเลือกด้วยว่าคุณกำลังแก้ไขเลย์เอาต์ใด เมื่อคุณเปลี่ยนไปที่ แท็บเล็ต หรือ มือถือ ข้อความจะเตือนว่าการเปลี่ยนแปลงจะใช้กับขนาดนั้นเท่านั้น สิ่งที่คุณเปลี่ยนที่นั่นจะไม่กระทบเลย์เอาต์ของเดสก์ท็อป
ซ่อนบล็อกบนหน้าจอขนาดเล็ก
รูปขนาดใหญ่หรือบล็อกตกแต่งที่ยาวอาจทำให้โทรศัพท์แน่นเกินไป คุณซ่อนบล็อกนั้นบนหน้าจอขนาดเล็กได้ และยังคงแสดงบนเดสก์ท็อปได้
- คลิก มือถือ (หรือ แท็บเล็ต) ในแถบด้านบน
- เลือกบล็อก
- ในแผงการตั้งค่า เปิด ขนาดและตำแหน่ง
- เปิด ซ่อนบนมือถือ (หรือ ซ่อนบนแท็บเล็ต) บล็อกจะหายไปจากมุมมองนั้น และไม่ทิ้งช่องว่างไว้บนหน้าที่เผยแพร่
บล็อกที่ซ่อนบนแท็บเล็ตจะถูกซ่อนบนโทรศัพท์ด้วย เว้นแต่คุณจะปิดสวิตช์นี้อีกครั้งขณะดู มือถือ หากต้องการซ่อนบล็อกในทุกหน้าจอ ให้ใช้ ซ่อนบล็อกนี้ บน เดสก์ท็อป
วางบล็อกต่างออกไปในขนาดหนึ่ง
- เลือก แท็บเล็ต หรือ มือถือ ในแถบด้านบน
- เลือกบล็อกแล้วเปิด ขนาดและตำแหน่ง
- เปลี่ยน เริ่มที่คอลัมน์ กว้างกี่คอลัมน์ เริ่มที่แถว หรือ สูงกี่แถว หรือคลิก เต็มความกว้าง คุณยังสามารถลากและปรับขนาดบล็อกบนหน้าได้ด้วย
แถบที่ด้านบนของ ขนาดและตำแหน่ง จะบอกว่าคุณกำลังแก้ไขเลย์เอาต์ใดอยู่ แถบจะแสดง สืบทอดมา ขณะที่บล็อกทำตามขนาดที่ใหญ่กว่า และจะแสดงปุ่ม รีเซ็ต เมื่อบล็อกมีการตั้งค่าของตนเอง คลิก รีเซ็ต เพื่อให้บล็อกกลับไปทำตามขนาดที่ใหญ่กว่า คลิก ใช้เลย์เอาต์นี้กับทุกหน้าจอ เพื่อคัดลอกเลย์เอาต์ปัจจุบันไปยังทุกขนาด
แถบด้านบนยังนับจำนวนบล็อกที่ต่างจากเลย์เอาต์เดสก์ท็อป เช่น มี 1 บล็อกที่ต่างจากเลย์เอาต์มือถือ คลิกตัวเลขเพื่อไปยังบล็อกถัดไปที่ต่างออกไป
ทำให้บล็อกเหมือนกันทุกหน้าจอ
เปิด เหมือนกันทุกหน้าจอ ในส่วน ขนาดและตำแหน่ง เพื่อให้บล็อกมีเลย์เอาต์เดียวทุกที่ การตั้งค่าสำหรับแท็บเล็ตหรือโทรศัพท์ที่บล็อกนั้นเคยมีจะถูกลบออก และการแก้ไขหลังจากนั้นจะใช้กับทุกขนาดพร้อมกัน
หมายเหตุ: การย้ายบล็อกไปยังส่วนอื่นจะเปลี่ยนบล็อกในทุกขนาดหน้าจอ Payly จึงอนุญาตให้ทำเช่นนั้นได้เฉพาะบน เดสก์ท็อป หากต้องการวางบล็อกต่างออกไปบนโทรศัพท์ ให้เพิ่มบล็อกลงในทั้งสองส่วน แล้วซ่อนส่วนที่คุณไม่ต้องการในแต่ละขนาด
ตรวจสอบผลลัพธ์
ใช้ ดูตัวอย่าง เพื่อคลิกดูหน้าต่าง ๆ ของคุณในความกว้างของโทรศัพท์และแท็บเล็ต และดูร้านค้าที่เผยแพร่แล้วบนโทรศัพท์จริงก่อนประกาศเปิดร้าน ดูได้ที่ ดูตัวอย่างเว็บไซต์ก่อนเผยแพร่