องค์ประกอบทุกอย่างใน Google Web Designer จะมีชุดคุณสมบัติ เช่น ขนาด ตำแหน่ง และรูปแบบ แม้ว่าองค์ประกอบจํานวนมากจะมีคุณสมบัติที่คล้ายกัน แต่องค์ประกอบบางอย่าง เช่น คอมโพเนนต์ จะมีคุณสมบัติเฉพาะของตัวเอง
คุณสามารถดูและแก้ไขคุณสมบัติได้ในแผง "คุณสมบัติ"
คุณสมบัติทั่วไป
หลายองค์ประกอบมีคุณสมบัติทั่วไปเหล่านี้ แต่บางองค์ประกอบอาจไม่มีคุณสมบัติทั่วไปบางอย่าง
รหัสองค์ประกอบ
คุณสมบัติ คำอธิบาย องค์ประกอบ แสดงประเภทขององค์ประกอบ จะมีการสร้างประเภทขององค์ประกอบขึ้นโดยค่าเริ่มต้นสำหรับองค์ประกอบหรือคอมโพเนนต์แบบภาพแต่ละรายการ นอกจากนี้ ยังสามารถสร้างองค์ประกอบแบบกำหนดเองได้อีกด้วย รหัส รหัสองค์ประกอบ มีเพียงองค์ประกอบที่มีรหัสเท่านั้นที่ใช้เป็นเป้าหมายหรือตัวรับของเหตุการณ์ได้ ตำแหน่งและขนาด
คุณสมบัติ คำอธิบาย ซ้าย ระยะห่างจากด้านซ้ายของพื้นที่งาน (หรือองค์ประกอบระดับบน) หน่วยเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ของความกว้างรวมของพื้นที่งาน (หรือองค์ประกอบระดับบน) ด้านบน ระยะห่างจากด้านบนของพื้นที่งาน (หรือองค์ประกอบระดับบน) หน่วยเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ของความสูงรวมของพื้นที่งาน (หรือองค์ประกอบระดับบน) ความกว้าง ความกว้างขององค์ประกอบหน่วยเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ของความกว้างรวมของพื้นที่งาน (หรือองค์ประกอบระดับบน) ความสูง ความสูงขององค์ประกอบหน่วยเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ของความสูงรวมของพื้นที่งาน (หรือองค์ประกอบระดับบน) หากต้องการเลือกระหว่างพิกเซลและเปอร์เซ็นต์ ให้ทำตามขั้นตอนต่อไปนี้
คลิกหน่วยวัด (
pxหรือ%) และเลือกหน่วยที่คุณต้องการใช้จากเมนูป๊อปอัปนอกจากนี้คุณยังเปลี่ยนคุณสมบัติของตำแหน่งและขนาดรวมให้เป็นเปอร์เซ็นต์ได้โดยคลิกปุ่มใช้เปอร์เซ็นต์
ตัวเลือกนี้อาจไม่มีให้กับองค์ประกอบบางประเภท
หากต้องการรักษาสัดส่วนความกว้างและความสูง ให้ทําดังนี้
คลิกปุ่มบังคับสัดส่วนภาพ
เมื่อความกว้างหรือความสูงเปลี่ยนไป อีกมิติขนาดหนึ่งจะปรับสัดส่วนตามโดยอัตโนมัติ
คลิกปุ่มดังกล่าวอีกครั้ง
เพื่อเปลี่ยนความกว้างหรือความสูงโดยไม่ส่งผลกระทบต่ออีกมิติขนาดหนึ่ง
การยึด
การยึดตำแหน่งทําให้คุณจัดองค์ประกอบภายในคอนเทนเนอร์ได้อย่างสอดคล้องกัน แม้แต่ในกรณีที่ขนาด ระยะห่างจากขอบ หรือความกว้างของขอบขององค์ประกอบหรือคอนเทนเนอร์มีการเปลี่ยนแปลงก็ตาม คุณสมบัติของตําแหน่งหรือการเปลี่ยนตำแหน่งใดๆ ที่คุณกําหนดไว้จะออฟเซ็ตองค์ประกอบจากจุดยึด
คุณเลือกโหมดการยึดแนวนอนและโหมดการยึดแนวตั้ง ค่าเริ่มต้นคือ "บนซ้าย"
โหมดการยึดแนวนอน
โหมด เอฟเฟกต์ ซ้าย ขอบด้านซ้ายขององค์ประกอบจะตรงแนวกับขอบด้านซ้ายของคอนเทนเนอร์ ตรงกลาง จุดกึ่งกลางในแนวนอนขององค์ประกอบจะตรงแนวกับจุดกึ่งกลางในแนวนอนของคอนเทนเนอร์ ขวา ขอบด้านขวาขององค์ประกอบจะตรงแนวกับขอบด้านขวาของคอนเทนเนอร์ โหมดการยึดแนวตั้ง
โหมด เอฟเฟกต์ ด้านบน ขอบด้านบนขององค์ประกอบจะตรงแนวกับขอบด้านบนของคอนเทนเนอร์ ตรงกลาง ตรงกลางแนวตั้งขององค์ประกอบตรงแนวกับตรงกลางแนวตั้งของคอนเทนเนอร์ ด้านล่าง ขอบด้านล่างขององค์ประกอบจะตรงแนวกับขอบด้านล่างของคอนเทนเนอร์ ข้อจำกัดด้านขนาด
ข้อจํากัดด้านขนาดจะจํากัดขนาดองค์ประกอบ แม้ว่ามิติข้อมูลที่ระบุจะอยู่นอกข้อจํากัดดังกล่าวก็ตาม หากต้องการลบข้อจํากัดด้านขนาด ให้ลบค่าเพื่อให้ช่องว่างเปล่า (---)
คุณสมบัติ คำอธิบาย ความกว้างต่ำสุด ความกว้างต่ำสุดขององค์ประกอบหน่วยเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ของความกว้างรวมของพื้นที่งาน (หรือองค์ประกอบระดับบน) ความสูงต่ำสุด ความสูงต่ำสุดขององค์ประกอบหน่วยเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ของความสูงรวมของพื้นที่งาน (หรือองค์ประกอบระดับบน) ความกว้างสูงสุด ความกว้างสูงสุดขององค์ประกอบหน่วยเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ของความกว้างรวมของพื้นที่งาน (หรือองค์ประกอบระดับบน) ความสูงสูงสุด ความสูงสูงสุดขององค์ประกอบหน่วยเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ของความสูงรวมของพื้นที่งาน (หรือองค์ประกอบระดับบน) การเปลี่ยนตำแหน่ง การหมุน และการปรับขนาด
ประเภทของค่า 3 มิติ
ประเภท คำอธิบาย เดลต้า ให้คุณสามารถเปลี่ยนตำแหน่งแบบ 3 มิติ การหมุน หรือการปรับขนาดของวัตถุโดยสัมพันธ์กับค่าปัจจุบันของวัตถุ ค่าจะรีเซ็ตเป็น 0 ระหว่างการปรับเปลี่ยน สัมบูรณ์ แสดงตําแหน่งแบบ 3 มิติ การหมุน และการปรับขนาดของวัตถุในแบบ 3 มิติโดยสัมพันธ์กับพื้นที่งาน ค่า X, Y และ Z สำหรับการเปลี่ยนตำแหน่ง การหมุน และการปรับขนาด
คุณสมบัติ คำอธิบาย การเปลี่ยนตำแหน่ง แถวบนสุดของค่า X, Y และ Z จะแสดงค่าการแปลแบบ 3D ขององค์ประกอบ การหมุน แถวที่ 2 จะแสดงการหมุนรอบแกนแต่ละแกน ขนาด แถวที่ 3 แสดงสัดส่วน คลิกปุ่มปรับสัดส่วนให้เป็นแบบเดียวกัน รูปแบบ
เติม
คุณสมบัติ คำอธิบาย ความทึบแสง ความทึบแสงขององค์ประกอบจะเป็นค่าตั้งแต่ 0 (แบบโปร่งใสทั้งหมด) ถึง 1 (แบบทึบสนิท) เติม คลิกกล่องสีเพื่อเลือกสีเติมขององค์ประกอบ ส่วนเกิน วิธีจัดการเมื่อเนื้อหาเกินออกจากคอนเทนเนอร์
visible- เนื้อหาแสดงนอกคอนเทนเนอร์hidden- ครอบตัดเนื้อหาที่ขอบของคอนเทนเนอร์โดยไม่แสดงแถบเลื่อนscroll- ครอบตัดเนื้อหาที่ขอบของคอนเทนเนอร์ แถบเลื่อนจะปรากฏเสมอ แม้ไม่มีส่วนเกินออกมาauto- ครอบตัดเนื้อหาที่ขอบของคอนเทนเนอร์และแถบเลื่อนจะแสดงขึ้นเมื่อจำเป็นinitial- กำหนดให้เนื้อหาใช้ลักษณะการทำงานกับส่วนเกินแบบเดียวกับตอนเริ่มต้นinherit- คอนเทนเนอร์ใช้กฎส่วนเกินต่อจากคอนเทนเนอร์ระดับบนสุดระดับการมองเห็น การมองเห็นองค์ประกอบ
visible- มองเห็นองค์ประกอบได้ (ค่าเริ่มต้น)hidden- ซ่อนองค์ประกอบ แต่ยังคงส่งผลต่อเค้าโครงcollapse- ซ่อนองค์ประกอบและยุบแถวของตารางinitial- กำหนดให้การมองเห็นองค์ประกอบเหมือนกับตอนเริ่มต้นinherit- องค์ประกอบใช้กฎการเปิดเผยต่อจากคอนเทนเนอร์ระดับบนสุดขอบ
คุณสมบัติ คำอธิบาย สีขอบ คลิกตัวอย่างสีเพื่อเลือกสีขอบขององค์ประกอบ ความกว้างของขอบ ค่าความกว้างของขอบเป็นพิกเซลหรือจุด รูปแบบ รูปแบบของขอบ เลือกได้จากตัวเลือกต่อไปนี้
nonesolidhiddendotteddasheddoublegrooveridgeinsetoutsetรัศมีมุม ค่ารัศมีแบบวงกลมโดยมีหน่วยเป็นพิกเซล จุด หรือเปอร์เซ็นต์ โดยค่าเริ่มต้น มุมต่างๆ จะตั้งเป็นรัศมีเดียวกัน คลิกปุ่มใช้อัตราส่วนเดิม ระยะขอบ
สามารถตั้งระยะขอบขององค์ประกอบโดยให้มีหน่วยเป็นพิกเซลหรือเปอร์เซ็นต์ก็ได้ โดยค่าเริ่มต้น ระยะขอบต่างๆ จะตั้งเป็นค่าเดียวกัน คลิกปุ่มใช้อัตราส่วนเดิม
ระยะห่างจากขอบ
สามารถตั้งระยะห่างจากขอบขององค์ประกอบโดยให้มีหน่วยเป็นพิกเซลหรือเปอร์เซ็นต์ก็ได้ โดยค่าเริ่มต้น ระยะห่างจากขอบจะตั้งเป็นค่าเดียวกัน คลิกปุ่มใช้อัตราส่วนเดิม
คุณสมบัติเส้นทางการเคลื่อนไหว
สำหรับองค์ประกอบที่มีเส้นทางการเคลื่อนไหว แผงคุณสมบัติจะแสดงคุณสมบัติเส้นทางการเคลื่อนไหวหลังจากเพิ่มจุดยึดแล้ว หรือเปลี่ยนรูปร่างของเส้นทางการเคลื่อนไหวเป็นส่วนโค้ง
คุณสมบัติของหน้า
หน้าเว็บแต่ละหน้าจะมีชุดคุณสมบัติเป็นของตัวเอง ซึ่งคุณจะดูและเปลี่ยนแปลงได้เมื่อไม่มีการเลือกองค์ประกอบใดไว้
คุณสมบัติของโฆษณาวิดีโอและ GIF แบบเคลื่อนไหว
โฆษณาวิดีโอและ GIF แบบเคลื่อนไหวให้คุณเปลี่ยนขนาดและอัตราเฟรมของโฆษณาวิดีโอได้เมื่อไม่มีการเลือกองค์ประกอบใดไว้
คุณสมบัติของคอมโพเนนต์
นอกเหนือจากคุณสมบัติของคอมโพเนนต์แล้ว องค์ประกอบแต่ละรายการจะมีคุณสมบัติของตัวเอง ดังที่อธิบายไว้ในหน้าความช่วยเหลือสำหรับคอมโพเนนต์แต่ละรายการแล้ว