fbpx

Block เพิ่มเติม เสริมหน้าเว็บไซต์ WordPress ให้ดูดีใน Block Editor

Block เพิ่มเติม เสริมหน้าเว็บไซต์ Wordpress ให้ดูดีใน Block Editor
https://www.youtube.com/embed/Bo5LTLwAv4E?feature=oembed&autoplay=1

บทเรียนนี้ ก็จะเป็น ภาคต่อของ บทเรียนที่แล้วในเรื่อง Common Blocks นะครับ ถ้าใครยังไม่เคยเรียนเรื่อง Common Blocks ก็ย้อนกลับไปดูก่อนได้เลย เพราะเจ้า WordPress Block Editor มีลูกเล่น ให้เราเล่นเยอะมากๆครับ

ในบทเรียนนี้เราก็จะมาเรียนเพิ่มเติมในเรื่องของ Block อื่นๆ ที่นอกเหนือจาก Common Blocks ครับ มาเริ่มกันเลยครับ

Separator หรือ ตัวคั่น

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

Button หรือ ปุ่ม

ก่อนหน้านี้เราได้ทำปุ่ม Download ลงไปในหน้าเว็บไซต์ แต่พอมาถึงบทเรียนนี้ เราสามารถทำปุ่มอะไรก็ได้ครับ ไม่จำเป็นต้องอัพโหลดไฟล์ลงไปครับ โดยเราสามารถสร้างปุ่ม แล้วใส่ Link หลังจากนั้นค่อยเลือก Style ได้เลย นอกจากนั้นเรายังสามารถที่จะเลือกสีพื้น และ สีของตัวอักษรได้เลยครับ

Column หรือ ตัวจัด Layout

Block นี้ถือว่าเป็น Block ที่ Advance ครับ เพราะว่า เราสามารถที่จะจัด Layout ของเนื้อหาบทความของเราเป็น ลักษณะ Column ได้ครับ วิธีการคือ ในครั้งแรกที่เราสร้าง Column มันจะสร้างให้เรามา 2 Column ครับ

การใส่เนื้อหาลงไปใน Column เราสามารถใส่ได้เลย โดยแต่ละ Column จะมี เครื่องหมายบวก ในการสร้าง Block เอาไว้อยู่แล้วครับ เราก็สามารถที่จะสร้าง Block ภายใน Column ได้อย่างอิสระเลยครับ

ถ้าเราต้องการสร้าง Column เพิ่มทำอย่างไร เราต้องเลือก Column Block ให้ได้ครับ ซึ่งเลือกได้ไม่ง่าย ถ้าไม่ร้เคล็ดลับครับ แต่ถ้ารู้เคล็ดลับแล้ว ไม่ยากเลยครับ ให้เราคลิกตรงกลางระหว่าง Column ก็จะกลายเป็นเลือก Column Block ครับ จากนั้นเราก็จะสามารถ ปรับได้ว่า จะเอากี่ Column ใน Block นี้ครับ

Image & Text หรือ ภาพและตัวอักษร

เราสามารถที่จะใส่ภาพไว้ด้านนึง ตัวอักษรไว้อีกด้านนึงได้ แบบนี้เราจะสร้าง Column ก็ได้ หรือจะใช้ Image & Text ก็ได้ครับ หลักการก็ไม่ยากเลย เราสามารถที่จะ เลือกรูปภาพใส่ได้เลย แล้วอีกฝั่งหนึ่ง เราก็สามารถใส่ตัวอักษรได้ครับ

นอกจากนั้น เรายังสามารถที่จะปรับขนาดของตัวอักษรได้อีกด้วยใน Block Property ของฝั่งตัวอักษรครับ

แต่รู้สึกว่า เจ้า Image & Text จะมี Bug ครับ เพราะว่า เราไม่สามารถเลื่อนตำแหน่งของมันได้ครับ น่าจะต้องรออัพเดท Version ถัดไปครับ น่าจะหาย

Space หรือ ช่องว่าง

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

Table หรือ ตาราง

เวลาที่เราจะสร้างตารางใน WordPress โดยปกติแล้ว เราจะใช้ Plugin ครับ แต่ใน Block Editor มี Widget ตารางแบบง่ายๆอยู่เราซึ่งเราสามารถสร้างได้เลย โดยกำหนดค่าให้กับตารางว่า เราจะเอากี่คอลั่มน์ และ กี่แถว แต่เราก็สามารถเพิ่ม Column หรือ เพิ่ม Row ในภายหลังได้ นอกจากนั้นยังมี Style ให้เลือกแบบง่ายๆได้ครับ

สรุป

การใช้งาน Block เพิ่มเติม ใน Block Editor จะว่าง่ายก็ง่ายครับ จะว่ายากก็ยากครับ เพราะบางตัวมันค่อนข้างที่จะ Advance อย่างเช่น Column เป็นต้นครับ แต่ถ้าเรารู้ไว้ก็จะช่วยให้เราสร้างเว็บไซต์ได้อย่างสวยงามมากยิ่งขึ้นครับผม 🙂

ข่าวประชาสัมพันธ์

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

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *