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

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

ฉันจะทำให้ WordPress ของฉันครอบคลุมความกว้างเต็มได้อย่างไร

ตรวจสอบว่าหน้ามีความกว้างเต็ม 100% โดยแก้ไขใน WordPress เลื่อนลงไปที่แท็บหลักในส่วนการตั้งค่า oceanwordpress และเลือก รูปแบบความกว้าง เต็ม 100%

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

ปลั๊กอินตัวสร้างเพจยอดนิยมอย่าง Beaver Builder มีการติดตั้งมากกว่าล้านครั้ง เว็บไซต์ Page Builder สามารถมีคุณลักษณะมากมายที่ช่วยให้คุณปรับแต่งให้ตรงกับความต้องการเฉพาะของคุณ สิ่งที่ทำให้หน้าสวยจริง ๆ ควรใช้เสมอ ด้วยความช่วยเหลือของปลั๊กอินเพิ่มเติมเหล่านี้ คุณสามารถสร้างหน้าเต็มความกว้างใน WordPress ปลั๊กอินอื่นที่ควรค่าแก่การสำรวจคือ Live Composer คุณสามารถปรับแต่งธีมของคุณด้วยเครื่องมือนี้ ซึ่งฟรีและพร้อมให้ดาวน์โหลดทันที เมื่อใช้เลย์เอาต์นี้ คุณสามารถลบแถบด้านข้างออกจากหน้า WordPress ได้ เป็นไปได้ไหมที่จะใช้ เค้าโครงหน้าแบบ เต็มความกว้างด้วยการออกแบบที่กำหนดเอง?

ฉันจะเปลี่ยนความกว้างเต็มของธีม WordPress ได้อย่างไร

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

เลย์เอาต์ชนิดบรรจุกล่องใน WordPress คืออะไร?

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

เลย์เอาต์ชนิดบรรจุกล่อง: โซลูชั่นที่สมบูรณ์แบบสำหรับเพจพื้นฐาน

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

ความกว้างของคอนเทนเนอร์ใน WordPress คืออะไร?

คุณสามารถเปลี่ยนความกว้างของคอนเทนเนอร์ใน ธีม GeneratePress WordPress ภายใต้ ลักษณะที่ปรากฏ ให้คลิกที่ส่วนคอนเทนเนอร์ ด้วยแถบเลื่อน คุณสามารถเปลี่ยนความกว้างของพิกเซลหรือป้อนหมายเลขของคุณลงในฟิลด์ได้โดยตรง (เช่น 1200)

ในการสร้างคอนเทนเนอร์ ก่อนอื่นคุณควรเลือกชื่อ กำหนดขนาดฟอนต์และความสูงของบรรทัด จากนั้นจึงใช้สไตล์พื้นฐานสองสามแบบ คอนเทนเนอร์จะใช้ Div parent ทั้งหมดโดยไม่คำนึงถึงความกว้างของ Div parent
คอนเทนเนอร์ทำหน้าที่เป็นบรรทัดฐานของกริดและกำหนดลำดับ เส้นที่มองไม่เห็นที่ทุกองค์ประกอบในตารางปรากฏอยู่ด้านบน ด้วยการตั้งค่าความกว้างเส้นฐานของกริดให้เท่ากับความกว้างของคอนเทนเนอร์โดยอัตโนมัติ คุณสามารถจัดแนวเนื้อหาของคุณกับเส้นที่มองไม่เห็นได้
คอนเทนเนอร์สร้างศูนย์เนื้อหาที่ยอดเยี่ยมเนื่องจาก Div หลัก ถูกจำกัดความกว้างอย่างเต็มที่ เมื่อพาเรนต์ของ Div มีความกว้าง 980 พิกเซล คอนเทนเนอร์จะครอบครอง 980 พิกเซล โดยไม่คำนึงถึงขนาดของคอนเทนเนอร์ภายใน
ในทางกลับกัน คอนเทนเนอร์อาจใช้งานยากบนอุปกรณ์ขนาดเล็กเนื่องจากมีความกว้างเต็ม ซึ่งทำให้อุปกรณ์บางตัวเข้ากันไม่ได้ ในการจัดกึ่งกลางเนื้อหาในคอนเทนเนอร์ คุณจะต้องตั้งค่าระยะขอบเพื่อชดเชยเนื้อหาจากขอบ

วิธีใช้คอนเทนเนอร์ WordPress เพื่อปรับปรุงเค้าโครงเว็บไซต์ของคุณ

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

เว็บไซต์เค้าโครงแบบกล่อง

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

ในการสร้างเอฟเฟกต์ที่ไม่ซ้ำกัน องค์ประกอบ HTML แต่ละรายการจะใช้คุณสมบัติระยะขอบ เส้นขอบ และช่องว่างภายใน เราจะเรียนรู้เกี่ยวกับรูปแบบกล่องในบทช่วยสอนนี้ และวิธีที่แต่ละเลเยอร์ทำงานร่วมกันเพื่อจัดระเบียบเนื้อหาบนเว็บไซต์ แต่ละชั้นในแบบจำลองกล่องมีสี่ชั้นมีวัตถุประสงค์เฉพาะ และแต่ละชั้นมีลักษณะเฉพาะของตัวเอง คุณสมบัติเส้นขอบในโมเดลกล่อง CSS เป็นคุณสมบัติที่เป็นส่วนหนึ่งของเลเยอร์ที่สาม คุณลักษณะนี้ช่วยให้นักพัฒนาสามารถจัดการด้านข้างขององค์ประกอบ HTML ที่มีคุณสมบัติเฉพาะได้ มีเพียงหนึ่งคุณสมบัติที่จำเป็นในการทำงานเป็นคุณสมบัติชายแดน แม้ว่าคุณสมบัติ border-style จะมีค่าเริ่มต้นเป็นศูนย์ แต่คุณสามารถเปลี่ยนเป็นค่าต่างๆ ได้หลายค่า

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

ทำไมคุณควรเปลี่ยนไปใช้เทมเพลตเว็บไซต์แบบเต็มความกว้าง

สาขาการออกแบบเว็บมีการเปลี่ยนแปลงตลอดเวลาเนื่องจากมีการพัฒนาเทคนิคใหม่และซับซ้อนขึ้นทุกวัน เว็บไซต์แบบเต็มความกว้างกำลังเป็นที่นิยมมากขึ้นในขณะนี้ เนื่องจากใช้ประโยชน์จากพื้นที่พิเศษที่ปรากฏบนหน้าจอขนาดใหญ่ หากคุณยังคงใช้เค้าโครงแบบกล่อง คุณควรย้ายไปยังเทมเพลตแบบเต็มความกว้าง เทมเพลต WordPress จำนวนหนึ่งรวมถึงเทมเพลต No Sidebar และเทมเพลต Full-Width ซึ่งทั้งคู่จะลบแถบด้านข้างออกจากหน้า การใช้คุณสมบัตินี้ทำให้การออกแบบดูทันสมัยและสะอาดตายิ่งขึ้น ซึ่งเหมาะอย่างยิ่งสำหรับใช้กับตัวสร้างเพจ สร้างเว็บไซต์ที่ตอบสนองได้อย่างสมบูรณ์ด้วยหนึ่งในเทมเพลตเหล่านี้ และเริ่มต้นได้ทันที