ทำความเข้าใจการตั้งค่าเค้าโครงหน้าใน Elementor

เมื่อออกแบบกับ Elementor การตั้งค่าเค้าโครงหน้ามีบทบาทสำคัญในการออกแบบเว็บไซต์ของคุณ

การตั้งค่าเหล่านี้ช่วยให้คุณสามารถควบคุมโครงสร้างสไตล์และแม้แต่รากฐานการออกแบบเริ่มต้นของหน้าเว็บของคุณ
คุณอาจกำลังสร้างบล็อกหน้า Landing Page หรือ Layout ที่กำหนดเอง ในทุกกรณีการทำความเข้าใจกับตัวเลือกเหล่านี้จะช่วยให้คุณออกแบบอย่างมั่นใจ

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

ทำความเข้าใจการตั้งค่าเค้าโครงหน้าใน Elementor

วิธีแก้ไขเค้าโครงหน้าใน Elementor?

หากต้องการแก้ไขเค้าโครงหน้าใน Elementor ให้เข้าสู่แผงควบคุม WordPress ของคุณและไปที่หน้า เลือกหน้าคุณต้องการปรับแต่งและคลิกแก้ไขด้วย Elementor

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

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

การตั้งค่าทั่วไป

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

1. ชื่อเรื่อง: อธิบายชื่อหน้าเพื่ออธิบายวัตถุประสงค์ของเนื้อหาของคุณ ชื่อที่ได้รับการคัดเลือกมาอย่างดีช่วยเพิ่มความสามารถในการอ่านสำหรับผู้เข้าชมและมีส่วนร่วมใน SEO
2. สถานะ: เลือกว่าหน้าของคุณเป็นร่าง (ไม่สามารถมองเห็นได้สำหรับผู้เข้าชม) เผยแพร่ (สดบนเว็บไซต์ของคุณ) หรือส่วนตัว (มองเห็นได้เฉพาะกับผู้ใช้ที่เข้าสู่ระบบด้วยสิทธิ์ที่ถูกต้อง)
3. ข้อความที่ตัดตอนมา: เขียนบทสรุปของเนื้อหาหน้า สิ่งนี้มีประโยชน์สำหรับตัวอย่างของเครื่องมือค้นหาและสำหรับการแสดงตัวอย่างในหน้าเก็บถาวรหรือหน้ารายชื่อ
4. ภาพที่โดดเด่น: ตั้งค่าภาพเด่นเพื่อแสดงหน้าภาพ มันมีประโยชน์เมื่อแชร์ลิงก์บนโซเชียลมีเดียหรือเมื่อแสดงโพสต์ในบล็อกกริดและวิดเจ็ต
5. คำสั่งซื้อ: ใช้หมายเลขเพื่อจัดเรียงลำดับหน้าของคุณในเมนูหรือรายการหน้า หน้าเว็บที่มีตัวเลขต่ำกว่าจะปรากฏขึ้นก่อนช่วยให้คุณควบคุมลำดับการแสดงผล
6. อนุญาตความคิดเห็น: ตัดสินใจว่าผู้เข้าชมสามารถแสดงความคิดเห็นในหน้าหรือไม่ โดยปกติจะเปิดใช้งานสำหรับโพสต์บล็อก แต่มักจะปิดการใช้งานสำหรับหน้า Landing Pages หรือเนื้อหาคงที่
7. ซ่อนชื่อเรื่อง: สลับตัวเลือกนี้หากคุณต้องการลบชื่อหน้าเริ่มต้นและเริ่มต้นด้วยผ้าใบที่สะอาด นี่คือ
8. เค้าโครงหน้า: Elementor ให้ตัวเลือกเค้าโครงหลายหน้าเพื่อควบคุมว่าเนื้อหาของคุณปรากฏอย่างไร แต่ละตัวเลือกมีวัตถุประสงค์ที่แตกต่างกันขึ้นอยู่กับประเภทของหน้าเว็บที่คุณต้องการสร้าง
   • ค่าเริ่มต้น: เค้าโครงนี้เป็นไปตามเทมเพลตหน้าเริ่มต้นที่ตั้งอยู่ใน แผง Elementor >> เมนูแฮมเบอร์เกอร์ >> การตั้งค่าไซต์ มันช่วยให้โครงสร้างการออกแบบกำหนดโดยธีมของคุณ เหมาะอย่างยิ่งสำหรับหน้าปกติหรือบล็อกที่คุณต้องการความสอดคล้องในเว็บไซต์ของคุณ
   • Elementor Canvas: จัดเตรียมหน้าว่างอย่างสมบูรณ์โดยไม่มีส่วนหัวส่วนท้ายหรือแถบด้านข้าง ตัวเลือกนี้เหมาะสำหรับการออกแบบที่ปราศจากสิ่งรบกวนเช่นหน้า Landing Pages หน้าเร็ว ๆ นี้หรือหน้าขาย
   • Elementor Full Width: ช่วยให้ส่วนหัวและส่วนท้ายจากธีมของคุณ แต่จะลบแถบด้านข้างทำให้เนื้อหาหลักยืดข้ามความกว้างเต็มของหน้าจอ ตัวเลือกที่ดีเมื่อออกแบบเลย์เอาต์ที่ดื่มด่ำส่วนฮีโร่หรือแถบเลื่อนแบบเต็มความกว้าง
   • ชุดรูปแบบ: ใช้เทมเพลตหน้าเริ่มต้นจากธีมที่ใช้งานของคุณ หากธีมของคุณมาพร้อมกับรูปแบบเทมเพลตหลายรูปแบบ (เช่น“ ไม่มีแถบด้านข้าง” หรือ“ เนื้อหาเท่านั้น”) พวกเขาอาจปรากฏขึ้นที่นี่
   • หน้าไม่มีชื่อเรื่อง: ลบชื่อหน้าในขณะที่รักษาส่วนที่เหลือของโครงสร้างของธีมยังคงอยู่ ตัวเลือกนี้มีประโยชน์เมื่อคุณต้องการการออกแบบที่สะอาดโดยไม่ต้องแสดงชื่อเริ่มต้นที่ด้านบน

การตั้งค่าสไตล์

แท็บสไตล์มุ่งเน้นไปที่ลักษณะที่ปรากฏของหน้าเว็บของคุณ ที่นี่คุณสามารถกำหนดพื้นหลังและระยะห่างที่กำหนดเนื้อหาของคุณ

1. ประเภทพื้นหลัง: เลือกสีทึบพื้นหลังการไล่ระดับสีหรือภาพเพื่อตั้งค่าอารมณ์สำหรับหน้าของคุณ พื้นหลังที่ได้รับการคัดเลือกเป็นอย่างดีสร้างผลกระทบด้านภาพและตอกย้ำการสร้างแบรนด์ของคุณ
2. ระยะห่าง: ปรับระยะขอบและช่องว่างภายในเพื่อควบคุมจำนวนพื้นที่ที่ปรากฏขึ้นภายในและรอบ ๆ เนื้อหาของคุณ ระยะขอบผลักองค์ประกอบออกจากกันในขณะที่ช่องว่างภายในสร้างห้องหายใจภายในภาชนะ

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

การตั้งค่าขั้นสูง

เพื่อความยืดหยุ่นมากขึ้น Elementor จะรวมแท็บขั้นสูงพร้อมตัวเลือกที่นอกเหนือไปจากพื้นฐาน

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

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

การตั้งค่าเค้าโครงทั่วโลก

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

จากที่นี่คุณสามารถปรับ:

1. ความกว้างของเนื้อหา: กำหนดความกว้างสูงสุดของเนื้อหาของคุณ การตั้งค่ามาตรฐานคือ 1140px ซึ่งทำงานได้ดีสำหรับหน้าจอเดสก์ท็อปส่วนใหญ่
2. ช่องว่างของคอนเทนเนอร์: ตั้งค่าระยะห่างภายในค่าเริ่มต้นสำหรับคอนเทนเนอร์ คุณสามารถใช้ช่องว่างเดียวกันได้ทุกด้านหรือปรับแต่งด้านบนด้านล่างซ้ายและขวาเป็นรายบุคคล
3. ช่องว่าง: ควบคุมช่องว่างระหว่างคอลัมน์และแถวภายในภาชนะ สิ่งนี้จะช่วยรักษาการจัดตำแหน่งที่สะอาดและระยะห่างที่สอดคล้องกัน
4. ตัวเลือกชื่อหน้า: หากธีมของคุณใช้ตัวเลือกที่ไม่ซ้ำกันสำหรับชื่อหน้าให้ระบุที่นี่ สิ่งนี้ช่วยให้ Elementor ซ่อนชื่อหรือสไตล์หน้าสไตล์ได้อย่างถูกต้อง
5. ส่วนยืดพอดีกับ: กำหนดว่า HTML Tag Elementor ใดที่ควรใช้เมื่อยืดส่วนไปสู่ความกว้างเต็ม แท็กที่พบบ่อยที่สุดคือร่างกาย แต่บางธีมอาจใช้เสื้อคลุมที่แตกต่างกัน
6. เค้าโครงหน้าเริ่มต้น: เลือก Global Default เช่น Elementor Canvas หรือ Elementor Full Width แทนที่จะพึ่งพาการตั้งค่าชุดรูปแบบของคุณสำหรับทุกหน้าใหม่

เมื่อคุณกำหนดค่าการตั้งค่าของคุณแล้วให้คลิก บันทึกการเปลี่ยนแปลง เพื่อนำไปใช้กับเว็บไซต์ของคุณ

ความกว้างเค้าโครงเริ่มต้นใน Elementor คืออะไร?

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

คุณสามารถเปลี่ยนการตั้งค่านี้ใน การตั้งค่าไซต์ >> เลย์เอาต์ หากการออกแบบของคุณต้องการเค้าโครงที่แคบหรือกว้างขึ้น

วิธีที่ดีที่สุดในการสร้างหน้าด้วย Elementor คืออะไร?

วิธีที่ดีที่สุดขึ้นอยู่กับเป้าหมายของคุณ:

• หากคุณกำลังสร้างหน้าเนื้อหาหรือบล็อกปกติให้ติดกับ เค้าโครงเริ่มต้น เพื่อให้ส่วนหัวส่วนท้ายและแถบด้านข้างของคุณยังคงไม่บุบสลาย
• สำหรับหน้า Landing Pages หรือช่องทางการขายให้ใช้ Elementor Canvas สำหรับการออกแบบที่ปราศจากสิ่งรบกวน
• หากคุณต้องการเลย์เอาต์ที่กว้างและดื่มด่ำ แต่ยังต้องการการนำทางและองค์ประกอบส่วนท้ายให้ไปด้วย ความกว้างของ Elementor เต็มรูปแบบ

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

ห่อ!

การตั้งค่าเค้าโครงหน้าใน Elementor ให้คุณควบคุมทั้งสองหน้าและเว็บไซต์ของคุณโดยรวม

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

หากคุณกำลังสร้างหน้า Landing Page ครั้งเดียวการตั้งค่าเฉพาะหน้าจะเพียงพอ

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

ด้วยตัวเลือกการตั้งค่าเหล่านี้ Elementor ช่วยให้คุณมีความยืดหยุ่นในการออกแบบเว็บไซต์ของคุณอย่างที่คุณจินตนาการ