สร้างเพจที่มีประสิทธิภาพด้วย WordPress Columns: Novice to Pro

เผยแพร่แล้ว: 2023-08-06

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

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

คุณยังสับสนอยู่หรือเปล่า? ไม่ต้องกังวล; ไม่สำคัญว่าคุณจะยังใหม่กับ WordPress หรือมีประสบการณ์กับมัน เราขอเชิญคุณค้นพบความมหัศจรรย์ของการใช้คอลัมน์ ดังนั้นเรามาอ่านต่อจนจบกันเถอะ

ซ่อน เนื้อหา
1 คอลัมน์ WordPress คืออะไร?
2 วิธีที่ 1: วิธีเพิ่มคอลัมน์ใน WordPress โดยใช้ Default Editor
2.1 ขั้นตอนที่ 1: เข้าสู่ระบบและสร้างโพสต์/เพจ
2.2 ขั้นตอนที่ 2: เพิ่มบล็อกคอลัมน์
2.3 ขั้นตอนที่ 3: เลือกจำนวนคอลัมน์
2.4 ขั้นตอนที่ 4: เพิ่มรายการในคอลัมน์
3 วิธีที่ 2: วิธีเพิ่มคอลัมน์ใน WordPress โดยใช้ PostX
3.1 ขั้นตอนที่ 1: เข้าสู่ระบบและสร้างเพจ/โพสต์
3.2 ขั้นตอนที่ 2: เพิ่มบล็อกแถว
3.3 ขั้นตอนที่ 3: เลือกเค้าโครง
3.4 ขั้นตอนที่ 4: ปรับแต่งคอลัมน์
4 คำสุดท้าย

คอลัมน์ WordPress คืออะไร?

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

ตัวแก้ไข Gutenberg เริ่มต้นมาพร้อมกับบล็อกคอลัมน์ แต่ถ้าคุณต้องการตัวเลือกการปรับแต่งขั้นสูง คุณสามารถใช้ปลั๊กอินเช่น PostX ที่มีบล็อกเพิ่มเติม

วิธีที่ 1: วิธีเพิ่มคอลัมน์ใน WordPress โดยใช้ Default Editor

เรามาเริ่มกันด้วยวิธีง่ายๆ – บล็อกคอลัมน์ WordPress เริ่มต้น

ขั้นตอนที่ 1: เข้าสู่ระบบและสร้างโพสต์/เพจ

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

add new page
เพิ่มหน้าใหม่

ขั้นตอนที่ 2: เพิ่มบล็อกคอลัมน์

ตอนนี้คลิกตัวเลือกเพิ่มบล็อกหรือปุ่ม "+" แล้วคุณจะพบช่องค้นหา จากนั้นในช่องค้นหา ให้พิมพ์ "คอลัมน์" แล้วคุณจะพบไอคอนบล็อกคอลัมน์

add columns block
เพิ่มบล็อกคอลัมน์

ขั้นตอนที่ 3: เลือกจำนวนคอลัมน์

หลังจากเพิ่มบล็อกคอลัมน์แล้ว ระบบจะขอให้คุณเลือกรูปแบบ มี 6 รูปแบบ เช่น 100, 50/55/, 33/33/33 เป็นต้น เรามาต่อกันที่คอลัมน์ 50/50

choose number of columns
เลือกจำนวนคอลัมน์

ขั้นตอนที่ 4: เพิ่มรายการในคอลัมน์

งานจริงของเราในการเพิ่มคอลัมน์ WordPress เสร็จสิ้นแล้ว ตอนนี้ถึงเวลาที่คุณจะปรับแต่งตามความต้องการของคุณ

สมมติว่าเราต้องเพิ่ม 2 คอลัมน์สำหรับเมนูมื้อกลางวันและมื้อค่ำ ลองเพิ่มพวกเขา

  1. เพิ่มหัวเรื่องและย่อหน้าในคอลัมน์แรก

ก่อนอื่น ให้ไปที่คอลัมน์แรก แล้วคุณจะเห็นปุ่ม "+" วางเคอร์เซอร์ไว้ที่นั่น แล้วคุณจะเห็นข้อความปรากฏขึ้นว่า “เพิ่มบล็อก”

click on add block option
คลิกที่ตัวเลือกเพิ่มบล็อก

คลิกที่นี่และค้นหาบล็อก "หัวเรื่อง"

add heading block
เพิ่มบล็อกหัวเรื่อง

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

add desired text
เพิ่มข้อความที่ต้องการ
  1. เพิ่มสไตล์ให้กับหัวเรื่อง

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

จากการตั้งค่าบล็อก ให้คลิก "พื้นหลัง" จากนั้นคุณจะเห็นตัวเลือกสี มีทั้งสีทึบและไล่ระดับสี เรากำลังเลือกการไล่ระดับสีและเลือกสีของหญ้าไฟฟ้า

add background color
เพิ่มสีพื้นหลัง

ตอนนี้ มาทำเช่นเดียวกันกับคอลัมน์ที่สองเพื่อเพิ่มรายการอาหารเย็น

  1. เพิ่มสีพื้นหลังโดยรวม

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

เราเลือกสีน้ำทะเลอ่อน ทีนี้มาดูผลลัพธ์สุดท้ายกัน

final output
ผลลัพธ์สุดท้าย

อ่านเพิ่มเติม: วิดีโอพื้นหลัง WordPress: เพิ่มใน 2 วิธีที่แตกต่างกัน

วิธีที่ 2: วิธีเพิ่มคอลัมน์ใน WordPress โดยใช้ PostX

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

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

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

รับ PostX Pro เพื่อปลดล็อกคุณสมบัติที่น่าตื่นเต้นทั้งหมดและสร้างเว็บไซต์ที่น่าทึ่ง

ขั้นตอนที่ 1: เข้าสู่ระบบและสร้างเพจ/โพสต์

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

add new page
เพิ่มหน้าใหม่

ขั้นตอนที่ 2: เพิ่มบล็อกแถว

ในขั้นตอนนี้ คลิกปุ่ม “+” แล้วคุณจะเห็นช่องค้นหา ตอนนี้ ในช่องค้นหา พิมพ์ "แถว" แล้วคุณจะเห็นไอคอนบล็อกแถว ชื่อของบล็อกคือแถว แต่เป็นการผสมผสานระหว่างบล็อกแถวและคอลัมน์

add row block
เพิ่มบล็อกแถว

ขั้นตอนที่ 3: เลือกเค้าโครง

คุณจะพบเค้าโครงที่กำหนดไว้ล่วงหน้า 10 แบบ ที่นี่ ระบบจะขอให้คุณเลือกจำนวนคอลัมน์ เลือกรายการใดรายการหนึ่งตามที่คุณต้องการ

choose number of columns
เลือกจำนวนคอลัมน์

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

choose a layout
เลือกเค้าโครง

สำหรับตอนนี้ เรายังคงใช้เลย์เอาต์เริ่มต้น ไปที่ขั้นตอนต่อไปกันเถอะ

ขั้นตอนที่ 4: ปรับแต่งคอลัมน์

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

  1. เพิ่มรูปภาพ

ขั้นแรก ให้คลิกไอคอน “+” ในคอลัมน์แรก และในช่องค้นหาให้ค้นหาคำว่า “Image”

add image block
เพิ่มบล็อกรูปภาพ

ตอนนี้คลิกที่รูปภาพแล้วคลิกที่ปุ่มอัปโหลด (หากเพิ่มรูปภาพลงในไลบรารีสื่อแล้ว คุณสามารถคลิกที่ไลบรารีสื่อเพื่อเพิ่มลงในคอลัมน์ได้) ตอนนี้เลือกรูปภาพที่ต้องการแล้วคลิก "เปิด"

upload desired image
อัปโหลดภาพที่ต้องการ
  1. กำหนดขนาดภาพ

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

Set the Image Dimension
กำหนดขนาดภาพ
  1. เพิ่มชื่อภาพ

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

add image title
เพิ่มชื่อภาพ

ตอนนี้พิมพ์ชื่อของภาพ ภาพแรกของเราคือเมาส์ Razor V3

  1. เพิ่มสีพื้นหลังสำหรับคอลัมน์แรก

เพื่อให้สะดุดตายิ่งขึ้น ให้คลิกคอลัมน์แรกแล้วค้นหาตัวเลือก “พื้นหลังและกระดาษห่อ”

click on background and wrapper option
คลิกที่ตัวเลือกพื้นหลังและกระดาษห่อ

ตอนนี้เพิ่มสีทึบ/ไล่ระดับตามความต้องการของคุณ

add desired background color
เพิ่มสีพื้นหลังที่ต้องการ
  1. ปรับแต่งแถวที่ 2 และ 3

ทำตามขั้นตอนเดียวกันทุกประการและปรับแต่งแถวที่ 2 และ 3 ด้วยภาพและชื่อเรื่อง

  1. ตั้งค่าความกว้างสูงสุดของเนื้อหา

ตอนนี้ ตำแหน่งของรูปภาพอาจไม่อยู่ในแนวที่เหมาะสมเมื่อเทียบกับพื้นหลัง ในกรณีนั้น คุณจะพบตัวเลือก “ความกว้างสูงสุดของเนื้อหา” และเปลี่ยนตามนั้น เรากำลังรักษา 766 ไว้เพื่อให้ได้การจัดตำแหน่งที่ดี

set content max width
กำหนดความกว้างสูงสุดของเนื้อหา
  1. เพิ่มพื้นหลังสำหรับบล็อกแถวหลัก

นี่คือขั้นตอนสุดท้าย เพื่อให้ดูเป็นขั้นสุดท้าย เราจะเพิ่มพื้นหลังสำหรับคอลัมน์ของแถว สำหรับสิ่งนั้น ให้เลือกคอลัมน์ Row แล้วค้นหา “Background and Wrapper” คลิกแล้วเลือกสีทึบ/ไล่ระดับสี

add row background color
เพิ่มสีพื้นหลังของแถว

ในที่สุดก็เสร็จแล้ว ตอนนี้มาตรวจสอบผลลัพธ์สุดท้ายกัน

final out of multiple columns
ผลลัพธ์สุดท้าย

อ่านเพิ่มเติม: WordPress Shape Divider: เชี่ยวชาญศิลปะการแยกส่วน

คำสุดท้าย

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

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

รับ PostX Pro เพื่อปลดล็อกคุณสมบัติที่น่าตื่นเต้นทั้งหมดและสร้างเว็บไซต์ที่น่าทึ่ง

ชอบบทความนี้หรือไม่? กระจายคำ
  • Movie News Layout

    เค้าโครงข่าวภาพยนตร์พิเศษ – PostX: Starter Pack วันพฤหัสบดี

  • How to Customize WooCommerce Thank You Page

    วิธีปรับแต่งหน้าขอบคุณ WooCommerce

  • Timetics

    Timetics: ปลั๊กอินจองนัดหมายที่สมบูรณ์แบบสำหรับ WordPress

  • How to Create WordPress Page Template in Twenty Twenty-two Theme

    วิธีสร้างเทมเพลตหน้า WordPress ในธีม Twenty Twenty-Two