Visual Editor: แก้ไขเว็บไซต์บนหน้าเพจจริง

#เปิดเลย

แท็บ Visual Editor อยู่ข้าง Studio ในเวิร์กสเปซที่ใช้แผนแบบชำระเงิน ส่วนแผน Free จะไม่แสดงแท็บนี้ ตัวแก้ไขจะเต็มหน้าต่าง และลูกศรที่มุมบนซ้ายจะพากลับไปยังโปรเจกต์ ด้านบนมีดังนี้:

#เลือกสิ่งที่จะเปลี่ยน

• คลิกสิ่งใดก็ได้บนหน้า หรือค้นหาใน Layers เปิดลูกศรของแถวเพื่อดูสิ่งที่อยู่ข้างใน การเลือกบนหน้าจะเปิดทางลงไปยังรายการนั้น
• เส้นทางที่ด้านบนของแผงบอกว่าสิ่งที่เลือกอยู่ภายในส่วนใด คลิกขั้นหนึ่งเพื่อเลือกส่วนนั้นแทน หรือกด Escape
• กด Shift แล้วคลิกเพื่อเลือกหลายรายการ การเปลี่ยนรูปลักษณ์จะใช้กับทุกรายการที่เลือก
• เมื่อองค์ประกอบเดียวกันซ้ำกัน เช่น การ์ดในรายการ ทั้งหมดจะสว่างขึ้นพร้อมกัน และการเปลี่ยนรูปลักษณ์จะเปลี่ยนทุกรายการ ส่วนข้อความของแต่ละรายการเป็นของตัวเอง
• คลิกขวาที่สิ่งใดก็ได้ หรือกด Shift+F10 เพื่อเปิดเมนูของสิ่งนั้น

เมนูคลิกขวา

รายการที่ใช้ไม่ได้จะเป็นสีจางและบอกเหตุผล ขณะพิมพ์ จะมีแถบเล็กให้เลือก Bold, Italic, Link และ Line break

#ข้อความและลิงก์

ข้อความที่เก็บไว้ในรายละเอียดของเว็บไซต์ เช่น อีเมลหรือชื่อเว็บไซต์ จะเปลี่ยนในทุกที่ที่แสดง และแผงจะบอกว่ามีกี่แห่ง ตัวแก้ไขจะเตือนเมื่อมีการใช้ขีดกลางเป็นเครื่องหมายวรรคตอนและเสนอให้ใช้จุลภาคแทน และเตือนเมื่อข้อความบนปุ่มขึ้นบรรทัดใหม่เป็นสองบรรทัด Quick edit ในแผงแสดงข้อความและรูปภาพทั้งหมดของส่วนหนึ่งไว้ในแบบฟอร์มเดียว

#รูปลักษณ์

แผงมีห้าแท็บ: Element, Motion, Quick edit, Site และ Check ใต้ Element ส่วน Look มี Layout, Space inside และ Space outside, Text, Fill, Stroke และ Effects ค่าที่ตั้งไว้ที่ความกว้างที่คุณกำลังดูจะแสดงเต็ม ส่วนค่าที่สืบทอดมาจากความกว้างที่เล็กกว่าจะแสดงเป็นสีเทา และเมื่อวางเมาส์เหนือช่อง จะเห็นปุ่มล้างค่า

สีเป็นบทบาทสีของเว็บไซต์คุณเอง ไม่ใช่สีแยกต่างหาก เว็บไซต์จึงสอดคล้องกันเสมอ คลาสที่แผงไม่ได้ตั้งค่าจะคงไว้ตามที่เขียน และแสดงอยู่ใต้ Kept as written

แท็บ Site ตั้งค่าสิ่งที่ทุกส่วนใช้อ่าน: Colours, Type สำหรับพาดหัวและข้อความ, Text styles, Buttons, Boxes และใต้ Page คือโหมด มุม ความกว้าง และจังหวะ เครื่องหมาย × ข้างการตั้งค่าจะคืนค่ากลับเป็นดีไซน์ของเว็บไซต์คุณเอง

#เพิ่มและจัดวาง

• Add มี Section, Text, Heading, Button, Picture, Video, Icon, Divider, Form และ Embed คลิกอันใดอันหนึ่งเพื่อเพิ่มในตำแหน่งที่คุณเลือก หรือลากไปวางตรงที่ต้องการ
• Embed แสดงหน้าจากเว็บไซต์อื่น แผนที่และเครื่องเล่นจาก Google, YouTube, Vimeo, Spotify, SoundCloud และ Calendly ใช้ได้กับทุกเว็บไซต์ ส่วนเว็บไซต์อื่นต้องเพิ่มไว้ก่อนใน Settings, Preferences, Allowed websites
• + Add section ระหว่างสองส่วนให้เลือก Designed (ฟรี ใช้ส่วนที่ Briks สร้างเว็บไซต์ด้วย ในสีของเว็บไซต์คุณ), Blank (ฟรี) หรือ Generate with AI ประมาณ 5 เครดิต โดยข้อความของคุณจะส่งไปยังตัวสร้างเป็นการเปลี่ยนแปลง
• Picture ในแท็บ Element ใช้แทนที่รูปด้วย Replace from your media ตั้ง Alt text (หรือทำเครื่องหมาย Decorative, nothing to read aloud) ครอบตัดรูป และกำหนดจุดที่ยังอยู่ในกรอบในแต่ละความกว้าง Section background… ตั้งสี ไล่เฉดสี รูปภาพ หรือวิดีโอไว้หลังส่วนนั้น
• การเปลี่ยนรูปภาพจะรวมอยู่ในฉบับร่างและเผยแพร่พร้อมกับการเปลี่ยนแปลงอื่นของคุณ
• ใน Layers แถวของเซกชันบนหน้าแรกใช้เลื่อนขึ้นหรือลง คัดลอก หรือซ่อนเซกชันได้ และเซกชันที่ซ่อนจะอยู่ในรายการใต้ Hidden from this page เพื่อนำกลับมาแสดง ในหน้าอื่น แถวของเซกชันใช้เลื่อนเซกชันหรือนำออกจากหน้าได้ Rename ใช้ตั้งชื่อเลเยอร์ตามที่คุณต้องการ ซึ่งใช้ในตัวแก้ไขเท่านั้นและไม่เผยแพร่

#หน้า

Pages แสดงรายการหน้าของเว็บไซต์ Add page เริ่ม Blank page หรือ Copy of a page พร้อม Title และ Address เมนูของแต่ละหน้ามี Search and share (Search title, Search description, Hide from search engines และ Share picture), Rename, Duplicate, Move up, Move down, Hide from menu และ Delete การลบหน้าจะถามว่าลิงก์ที่ชี้ไปหน้านั้นควรไปที่ใดแทน การเปลี่ยนแปลงของหน้าจะรออยู่ในฉบับร่างเหมือนการเปลี่ยนแปลงอื่น

#ทำงานร่วมกัน

• ฉบับร่างเดียวที่ใช้ร่วมกัน การเปลี่ยนแปลงของคุณจะถูกบันทึกลงฉบับร่างของโปรเจกต์ไม่นานหลังจากทำแต่ละครั้ง จึงยังอยู่หลังรีโหลด ปิดแท็บ หรือเปลี่ยนอุปกรณ์ และทุกคนที่เปิดตัวแก้ไขจะเห็น แถบแสดง Draft saved · not live yet พร้อมเวลาและผู้ทำ หากมีคนอื่นแก้ฉบับร่างหลังจากคุณเปิด แถบจะขอให้ Reload ก่อนทำต่อ
• ใครอยู่ที่นี่บ้าง ใบหน้าของคนอื่นที่เปิดตัวแก้ไขอยู่จะแสดงในแถบ วางเมาส์เหนือใบหน้าเพื่อดูหน้าและองค์ประกอบที่เขาอยู่ องค์ประกอบที่เขาเลือกจะมีเส้นขอบสีของเขา ไม่มีอะไรถูกล็อก
• ความคิดเห็น เลือกองค์ประกอบแล้วกด C หรือคลิกขวาแล้วเลือก Comment พิมพ์ @ เพื่อระบุชื่อใครสักคน ความคิดเห็นยาวได้สูงสุด 2,000 ตัวอักษร ปักหมุดไว้กับองค์ประกอบ และมี Reply, Resolve และ Open again ทุกคนในเวิร์กสเปซแสดงความคิดเห็นได้ รวมถึง Viewer แต่มีเพียง Editor, Admin และ Owner เท่านั้นที่ resolve ได้ กระดิ่งแจ้งทุกคน และคนที่คุณระบุชื่อจะได้รับแจ้งในแชตกับบอต Briks ด้วย

Viewer เปิดตัวแก้ไขเพื่อดูเว็บไซต์และแสดงความคิดเห็นได้ หน้าจะแสดงว่า “You can look through this site here. Your role in this workspace can't change it.”

#Ask AI และตัวสร้าง

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

• New design for this section และ Fix the layout จะแสดงว่างานมักใช้เท่าไรเทียบกับยอดคงเหลือของคุณก่อนส่ง เช่น Design it for about 5 credits การเปลี่ยนแปลงจะสร้างและเผยแพร่เหมือนข้อความใน Studio และ Versions ย้อนกลับได้
• Ask about this… ตอบคำถามเกี่ยวกับองค์ประกอบตรงนี้ โดยไม่เสียค่าใช้จ่ายและไม่สร้างอะไร
• โปรดเผยแพร่หรือทิ้งฉบับร่างก่อน เพราะตัวสร้างทำงานจากเว็บไซต์ที่เผยแพร่แล้ว ตัวแก้ไขจึงขอให้ทำเช่นนั้นก่อนส่ง
• Write alt text ใน Picture ไม่เสียเครดิตหากมีคำอธิบายของรูปภาพเก็บไว้แล้ว ไม่เช่นนั้นใช้สูงสุด 0.10 เครดิต Use this จะเก็บข้อความนั้นไว้

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

#เผยแพร่ หรือเปลี่ยนใจ

• ไม่มีอะไรขึ้นใช้งานจริงจนกว่าคุณจะเผยแพร่ ฉบับร่างเก็บการเปลี่ยนแปลงได้สูงสุด 300 รายการ
• Publish เขียนการเปลี่ยนแปลงลงในโค้ดของเว็บไซต์และเผยแพร่เป็นเวอร์ชันใหม่ โดยปกติใช้เวลาราวครึ่งนาที และไม่ใช้เครดิต การเผยแพร่จะล้างฉบับร่าง
• หากทำการเปลี่ยนแปลงไม่ได้ จะไม่มีอะไรถูกเผยแพร่ และตัวแก้ไขจะบอกว่าเป็นอะไรและเพราะอะไร
• Drop this change ใน Changes จะลบการเปลี่ยนแปลงหนึ่งรายการ Discard draft ในเมนู ⋯ จะทิ้งทั้งหมด สำหรับทุกคนที่กำลังแก้ไขเว็บไซต์ และจะถามก่อน
• History แสดงรายการเวอร์ชันของเว็บไซต์ Preview แสดงเวอร์ชันหนึ่งตามที่เผยแพร่ไว้ และ Restore นำกลับมาใช้งานจริง ฉบับร่างของคุณยังคงอยู่ ดู เวอร์ชัน เลิกทำ และทำซ้ำ

#แป้นพิมพ์ลัด