การใช้งาน Elements Row และ Columns ใน Page Builder CK

Tag :

การใช้งาน Elements Row และ Columns ใน Page Builder CK

สวัสดีครับ ในบทนี้ เราจะมาเริ่มทำการสร้างเนื้อหาข้อมูลกันโดยผ่านทาง Page Bulider CK กันนะครับ โดยที่บทนี้จะเป็นการแนะนำการใช้งานในส่วนของ Elements ที่เป็นประเภท Row และ Columns กันนะครับ เพราะถือว่าเป็นตัวหลักในการวางโครงสร้างของการนำ Elements อื่นๆมาใช้เลยก็ว่าได้ เพราะจำเป็นที่จะต้องสร้าง Elements Row และ Columns นี้ก่อนเสมอ

เราจะทดสอบกันโดยการให้เพื่อนๆ ไปที่ Component > Page Builder CK นะครับ แล้วเลือก New ได้เลย ดังรูปที่.1

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่.1

เราจะเข้ามาที่หน้า Page Builder CK นะครับ ดังรูปที่.2

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่.2

ในส่วนของ Column ( Block)

   เพื่อนๆ จะเห็นว่า โดยเริ่มต้นนี้ Page Builder CK ได้สร้าง Row ไว้ให้เราแล้ว 1 แถว และ 1 Column นะครับ หากเรานำ Mouse ไปวางใน Row ก็จะเกิดเป็นกรอบสีเขียวขึ้นมา ซึ่งจะเป็นการแจ้งให้เราทราบว่าตอนนี้เรากำลังชีไปที่ Columns ของ Row นี้อยู่ โดยใน กรอบสีเขียวนี้ จะมีปุ่มให้เราทำการแก้ไข Columns ดังรูปที่.3

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่.3

Remove the block : เป็นการลบ Columns ใน Row ออกไปนะครับ

Move the block : เป็นการย้ายตำแหน่งของ Columns โดยทำการคลิ๊กค้างแล้ว ลากวางนะครับ โดยสังเกตุตำแหน่งที่เราจะวาง จะเป็นกรอบสีฟ้าให้เราเห็น ถ้าขึ้นเป็นกรอบสีฟ้า แสดงว่าเราสามารถวางได้ครับ ดังรูปที่ 3.1

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่. 3.1

Duplicate Column : เป็นการ Copy Columns ซึ่ง Row จะสร้าง Columns ใหม่ขึ้นมาให้ใน Row เดี่ยวกัน ดังรูปที่.3.2

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่.3.2

Edit the Style : เป็นการเรียกการตั้งค่าต่างๆ ของ Columns ดังรูปที่.3.3

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่.3.3

  • Style เป็นการกำหนดค่าในส่วนต่างๆ ของ Columns
  • Animations เป็นการกำหนด การใช้งาน Animations ของ Row ในการแสดงผล เช่น ให้มีการค่อยๆ Move Row เข้ามาในหน้าเว็บไซต์ โดย Animations จะทำได้แค่ 2 ส่วนคือ Row และ Column นั้นเอง
  • Background video เป็นกรารกำหนดการใช้ภาพพื้นหลังของ Columns เป็น วีดีโอ
  • Overlay styles เป็นการวางซ้อนการกำหนดรูปแบบ เบื้องต้น จะมีในส่วน BACKGROUND (อันนี้ยังไม่ค่อยเข้าใจเท่าไหรนะครับ )

 

ในส่วนของ Row

ต่อมาในส่วนของ Row เอง ก็จะมีรายละเอียดในการจัดการต่างๆ ดังรูปที่.4

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่.4

  Edit the Column : เป็นการสร้าง Columns ในแต่ละ Row ซึ่งเราจะสามารถ เพิ่มได้หลาย Column และยังสามารถกำหนดระยะห่างของแต่ละ Columns ได้ Space between columns (ค่าเริ่มต้นคือ 2%) ดังรูปที่.4.1

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่.4.1

เรายังสามารถปรับขนาดตามรูปแบบที่เขามีมาให้ที่ด้านล่าง หรือ กำหนดเฉพาะ ในแท็บ Advanced Laout โดยให้ระบุเป็น ขนาด % ดังรูปที่.4.2

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่.4.2

เพราะในแท็บ Advanced Laout นี้ ระบบจะไม่ Auto กำหนดขนาดของ Columns อื่นๆให้ เหมือนกับแท็บ Auto width นั้นเอง

 Edit the Style : เป็นการเรียกการตั้งค่าต่างๆ ของ Row ดังรูปที่.4.3

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่4.3

  • Style เป็นการกำหนดค่าในส่วนต่างๆ ของ Row
  • Animations เป็นการกำหนด การใช้งาน Animations ของ Row ในการแสดงผล เช่น ให้มีการค่อยๆ Move Row เข้ามาในหน้าเว็บไซต์ โดย Animations จะทำได้แค่ 2 ส่วนคือ Row และ Column นั้นเอง
  • Background video เป็นกรารกำหนดการใช้ภาพพื้นหลังของ Row เป็น วีดีโอ
  • Overlay styles เป็นการวางซ้อนการกำหนดรูปแบบ เบื้องต้น จะมีในส่วน BACKGROUND (อันนี้ยังไม่ค่อยเข้าใจเท่าไหรนะครับ )

 Duplicate the Row : เป็นการ Copy Row นั้นหมายความว่า หากใน Row มีการกำหนด column หรือ เรียกใช้ Elements ต่างๆ เอาไว้ ก็จะถูก Copy เหมือนกันขึ้นมา ดังรูปที่.5

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่.5

Full width : เป็นการกำหนดให้ Row แสดงขนาดเต็มพื้นที่หน้าจอ โดยไม่อ้างอิงกับขนาดของ Template ที่เราใช้ ซึ่งจะส่งผลในหน้าเว็บไซต์ ดังรูปที่.6

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่.6

Remove the Row : เป็นการลบ Row ทั้งแถวออกไป

อีกส่วนที่ต้องใช้ก็คือ Move the Row ดังรูปที่.7

การใช้งาน Elements Row และ Columns ใน Page Builder CK

รูปที่.7

โดยให้เราคลิ๊กค้าง แล้วลากลงมา หรือขึ้นไป โดยสังเกต ตำแหน่งที่จะวางต้องเป็นกรอบสีฟ้าก่อนนะครับ เราถึงจะวาง Row ลงไปได้

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

สรุป

การใช้งานในส่วน Row และ Column นั้น เราจำเป็นต้องสร้างก่อนการใช้งานในส่วน Elements อื่นๆ โดยเราสามารถปรับรูปแบบ ของแต่ละ Row และ Columns แยกเป็นแต่ละอันได้ โดยไม่จำเป็นต้องเหมือนกัน

ขอบคุณครับ
Webmaster JoomlaHitz.com (ริว)

 

Facebook : https://www.facebook.com/joomlahitz/

JoomlaHItz Channel : https://www.youtube.com/channel/UCM2AHz3ibXztL4qp1B_j1sQ

 รับทำเว็บไซต์  ดูแลเว็บไซต์  สอนทำเว็บไซต์ www.joomla-creative.com

 

Tag :

บทความอื่นๆ ที่น่าสนใจ

คุณอาจสนใจ

สถิติผู้เข้าชม

2.png3.png7.png6.png1.png3.png
Today101
Yesterday503
This week1358
This month6785
Total237613

ผู้เข้าชม

1
Online
22 สิงหาคม 2562