วิธีปรับขนาดบล็อกใน WordPress

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

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

วิธีปรับขนาดบล็อกในตัวแก้ไข

บล็อกบางส่วน—แต่ไม่ใช่ทั้งหมด—มีตัวเลือกการปรับขนาดในตัว สิ่งเหล่านี้เป็นวิธีที่ง่ายที่สุดในการปรับขนาดด้วยเหตุผลที่ชัดเจน อย่างไรก็ตาม ตัวเลือกการปรับขนาดจะอยู่ในตำแหน่งต่างๆ ทั้งนี้ขึ้นอยู่กับบล็อก

ตัวอย่าง #1: บล็อกรูปภาพ

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

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

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

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

และสุดท้าย คุณสามารถคลิกที่ภาพเพื่อสร้างเส้นขอบสีน้ำเงินที่มี จุดยึดวงกลมสีขาว คุณสามารถลากสิ่งเหล่านี้เพื่อปรับขนาดบล็อก

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

ตัวอย่าง #2: บล็อกเหตุการณ์

สำหรับบล็อกเหตุการณ์ การตั้งค่าการปรับขนาดจะอยู่ในเมนูบริบทในตัวแก้ไขเท่านั้น (บล็อกเหตุการณ์เป็นปลั๊กอินแยกต่างหากโดย Automattic ที่คุณจะติดตั้ง และไม่ได้เป็นส่วนหนึ่งของตัวแก้ไขหลักของ Gutenberg)

เช่นเดียวกับตัวเลือกบล็อกรูปภาพบางตัวเลือก ตัวเลือกการปรับขนาดที่นี่เป็นตัวเลือกการเว้นวรรคในทางเทคนิค แต่สองตัวเลือกคือ Align Center และ Wide Width คุณสามารถเลือกหนึ่งรายการที่จะจัดกึ่งกลางในคอนเทนเนอร์หรือให้เต็มความกว้างทั่วทั้งหน้าจอ

การปรับความสูงของบล็อกในตัวแก้ไขนั้นค่อนข้างยุ่งยาก แต่ก็ได้ผล หากคุณเพียงแค่กด Enter/return ในฟิลด์บล็อคว่าง คุณสามารถขยายความสูงได้โดยการแทรกบล็อควรรคพิเศษที่ว่างเปล่า

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

ตัวอย่างที่ 3#: การใช้คอลัมน์เพื่อปรับขนาดบล็อกใน WordPress

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

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

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

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

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

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

ต้องการตัวเลือกการปรับขนาดเพิ่มเติมหรือไม่ พิจารณาตัวสร้างเพจขั้นสูงเพิ่มเติม

เราตระหนักดีว่าวิธีการเหล่านี้บางวิธีในการปรับขนาดบล็อกอาจรู้สึกจำกัด หากคุณพบว่ามันจำกัดเกินไปสำหรับคุณ อาจถึงเวลาพิจารณาตัวสร้างเพจขั้นสูง

ตัวอย่างเช่น Divi ของเรามีตัวเลือก การปรับขนาด และ การแปลง สำหรับแต่ละโมดูล (บล็อก) ที่ให้คุณควบคุมรูปร่าง ขนาด และระยะห่างได้มากกว่าใน Gutenberg เครื่องมือสร้างเพจขั้นสูงส่วนใหญ่ก็เช่นกัน ดังนั้นหากคุณพบว่าตัวเลือกของ Gutenberg นั้นจำกัดเกินไป การลองใช้ Divi อาจเป็นขั้นตอนต่อไปที่ดีที่สุด

วิธีปรับขนาดบล็อกใน WordPress โดยใช้ CSS

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

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

ไม่ว่าคุณจะใส่คลาสลงในช่องข้อความก็ตาม ห้ามใส่จุด/จุดหน้าชื่อคลาสในช่องนี้

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

เราขอแนะนำให้หลีกเลี่ยงการใช้หน่วยวัดเป็น พิกเซล (px) เนื่องจากเป็นค่าสัมบูรณ์ คุณควรใช้ vw (ความกว้างวิวพอร์ต) , vh (ความสูงของวิวพอร์ต) หรือ % (เปอร์เซ็นต์) เพื่อปรับบล็อก สิ่งเหล่านี้จะปรับขนาดตามอุปกรณ์และ/หรือเนื้อหาอื่น ๆ รอบตัว

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

โปรดทราบว่า % และ vw/vh นั้นแตกต่างกัน แม้ว่าจะทำงานเหมือนกันก็ตาม พวกเขาทั้งหมดทำงานเป็นเปอร์เซ็นต์ แต่จะสัมพันธ์กับจุดยึดที่ต่างกัน

การวัดเปอร์เซ็นต์นั้นสัมพันธ์กับคอนเทนเนอร์ที่องค์ประกอบนั้นถืออยู่ ดังนั้นหากส่วนหรือแถวขององค์ประกอบนั้นไม่ไปถึงขอบของหน้าจอ แม้แต่การตั้งค่า width:100% ก็ยังไม่ถึงขอบเขต

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

บทสรุป

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

มีเคล็ดลับและกลเม็ดอะไรบ้างที่คุณสามารถแชร์เกี่ยวกับการปรับขนาดบล็อกใน WordPress ได้

บทความภาพโดย 3rieart / shutterstock.com