คุณอยู่ที่นี่

หน้าแรก » Forums » Marketplace » ต้องการซื้อ ประกาศหาลูกจ้าง

Canvas Palette: ไลบรารีคอมโพเนนต์สำเร็จรูปสำหรับ Drupal Canvas

รูปภาพของ levmyshkin
เขียนโดย levmyshkin เมื่อ 30 สิงหาคม, 2026 - 00:23

Canvas Palette คือโมดูลสำหรับ Drupal ที่เพิ่มคอลเลกชันคอมโพเนนต์ภาพสำเร็จรูปให้กับ Drupal Canvas ช่วยให้สามารถสร้างเว็บไซต์สมัยใหม่ได้โดยไม่จำเป็นต้องเขียนโค้ดเอง โมดูลนี้ออกแบบมาสำหรับ Site Builder, ผู้ดูแลเนื้อหา และนักพัฒนาเป็นหลัก ซึ่งต้องการวิธีที่สะดวกในการสร้างหน้าเว็บด้วยองค์ประกอบสำเร็จรูป เช่น Section, Columns, Buttons, Images, Videos, Galleries, Tabs, Accordions, Sliders และอื่น ๆ อีกมากมาย Canvas Palette บน Drupal.org:
https://www.drupal.org/project/canvas_palette Live Demo:
https://drupalbook.org/canvas/editor/canvas_page/4 Canvas Palette Demo:
https://drupalbook.org/canvas-palette/demo Drupal Canvas

Canvas Palette คืออะไร?

Drupal Canvas นำเสนอแนวทางการสร้างหน้าเว็บแบบ visual แต่ตัว visual editor เองก็ยังต้องมีชุดคอมโพเนนต์คุณภาพดีสำหรับใช้สร้างหน้าเว็บจริง Canvas Palette แก้ปัญหานี้ด้วยการจัดเตรียมคอลเลกชัน Single Directory Components (SDC) ที่รองรับการใช้งานร่วมกับ Canvas แต่ละคอมโพเนนต์เป็น SDC component มาตรฐาน ส่วนองค์ประกอบแบบ interactive ใช้ JavaScript ที่มีน้ำหนักเบา และยังสามารถแก้ไขได้โดยตรงจากหน้า preview แนวคิดของโมดูลนี้เรียบง่าย:

ไม่ต้องสร้างทุกองค์ประกอบของหน้าเว็บขึ้นมาใหม่ แต่สร้างหน้าด้วยคอมโพเนนต์สำเร็จรูปโดยตรงจาก visual editor

แนวทางนี้เหมาะอย่างยิ่งสำหรับ Landing Pages, เว็บไซต์การตลาด, เว็บไซต์องค์กร, Documentation และเว็บไซต์เชิงบรรณาธิการ ซึ่งเนื้อหาต้องดูทันสมัยและยังคงเป็นไปตาม Design System ที่เป็นหนึ่งเดียวกัน

ทำไมต้องใช้ Canvas Palette?

ด้วย Drupal นักพัฒนาสามารถสร้างโครงสร้างเนื้อหาได้แทบทุกแบบ อย่างไรก็ตาม การออกแบบหน้าเว็บในเชิงภาพมักต้องมีงานเพิ่มเติม เช่น การสร้าง Components, CSS, JavaScript, Paragraph Types หรือ Templates แบบกำหนดเอง Canvas Palette ย้ายงานส่วนใหญ่เหล่านี้เข้าสู่ Visual Editor ผู้ดูแลเนื้อหาสามารถ:

  • เพิ่ม Section
  • เลือกจำนวน Columns
  • เพิ่มข้อความ
  • วางรูปภาพหรือวิดีโอ
  • สร้าง CTA Block
  • เพิ่ม Buttons
  • สร้าง Image Gallery
  • เพิ่ม Tabs หรือ Accordion
  • สร้าง Carousel หรือ Slider
  • แสดง View ที่มีอยู่แล้ว
  • ฝัง Webform

โดยไม่จำเป็นต้องสร้าง Paragraph Type แยกสำหรับองค์ประกอบแต่ละประเภท ในแง่นี้ Canvas Palette จึงเป็น ไลบรารี Building Blocks สำหรับ Drupal Canvas

มีคอมโพเนนต์อะไรบ้าง?

ปัจจุบัน Canvas Palette มีคอมโพเนนต์ในหลายหมวดหมู่หลัก

Design & Layout

คอมโพเนนต์พื้นฐานสำหรับสร้างโครงสร้างของหน้าเว็บ:

  • Section — Section หรือ Container อเนกประสงค์
  • Columns — Layout แบบหลายคอลัมน์ที่รองรับ Responsive
  • Text — Heading และข้อความที่จัดรูปแบบได้

Buttons & Calls to Action

คอมโพเนนต์สำหรับ Buttons และองค์ประกอบ Call-to-Action:

  • Basic Button — ปุ่มที่สามารถกำหนดค่าได้
  • CTA — Block ที่มีรูปภาพและปุ่มได้สูงสุดสองปุ่ม
  • Hero — Banner ขนาดใหญ่พร้อม Heading, รูปภาพ และ Buttons
  • Modal Dialog — ปุ่มที่เปิดหน้าต่าง Modal
  • Webform Popup — ปุ่มที่เปิด Webform ที่มีอยู่แล้วใน Popup

ตัวอย่างเช่น Basic Button สามารถกำหนด Link, สี, สีเมื่อ Hover, รูปทรง, ขนาด และการจัดตำแหน่งของปุ่มได้

Media

คอมโพเนนต์สำหรับจัดการรูปภาพและวิดีโอ:

  • Image
  • Images
  • Image Gallery
  • Video
  • Video Gallery

Image Gallery สามารถเปิดรูปภาพด้วย GLightbox ส่วน Video Gallery รองรับทั้งวิดีโอในเครื่องและแหล่งวิดีโอภายนอก เช่น YouTube, Vimeo และ MP4

Interactive Components & Sliders

สำหรับเนื้อหาแบบ Interactive มีคอมโพเนนต์ เช่น:

  • Accordion
  • Tabs
  • Carousel
  • Slider
  • Sticky Menu

Tabs ใช้การทำงานแบบกำหนดเองโดยไม่ต้องใช้ jQuery ส่วน Slider ใช้ Splide และ Carousel ใช้ tiny-slider ทำให้สามารถสร้างองค์ประกอบแบบ Interactive ได้โดยไม่จำเป็นต้องเพิ่ม JavaScript Framework ขนาดใหญ่

Content & Data

คอมโพเนนต์สำหรับนำเสนอเนื้อหาและข้อมูล:

  • Quote
  • Stats
  • Counter
  • Countdown
  • Tiles
  • Timeline

ตัวอย่างเช่น Counter สามารถใช้สร้างตัวเลขแบบ Animated Counter ขณะที่ Timeline ใช้สร้าง Timeline แนวตั้งสำหรับแสดงเหตุการณ์ต่าง ๆ

การผสานรวมกับ Drupal

Canvas Palette ยังสามารถทำงานร่วมกับเนื้อหา Drupal ที่มีอยู่แล้วได้:

  • Webform — เลือกและแทรกฟอร์มที่มีอยู่แล้ว
  • Views — แสดง View ที่มีอยู่แล้วและส่ง Arguments ได้

สิ่งนี้มีความสำคัญอย่างยิ่งสำหรับโปรเจกต์ Drupal จริง Canvas Palette ไม่ได้จำกัดอยู่แค่คอมโพเนนต์ตกแต่งแบบ Static แต่ยังสามารถใช้ Infrastructure ที่มีอยู่แล้วของ Drupal ได้

Section: พื้นฐานของ Canvas Palette

หนึ่งในคอมโพเนนต์สำคัญของ Canvas Palette คือ Section แทนที่จะเพิ่มการตั้งค่า Margin, Padding, Background และ Border ให้กับทุกคอมโพเนนต์แยกกัน Palette ใช้ Wrapper Component โดยเฉพาะ คอมโพเนนต์อื่น ๆ จะถูกวางไว้ภายใน Section ขณะที่ Section ทำหน้าที่ควบคุมรูปลักษณ์ของพื้นที่โดยรอบ ตัวอย่างเช่น สามารถสร้างโครงสร้างดังนี้: Section → Columns → Text + Image + Button จากนั้นสามารถจัดการ Design ของ Section ทั้งหมดได้จากจุดเดียว

การควบคุมระยะห่างแบบ Visual

Section มีโมเดล DOM Box แบบ Visual ซึ่งมีลักษณะคล้ายกับ Box Model ใน Developer Tools ของเบราว์เซอร์ สามารถกำหนดค่าได้ดังนี้:

  • Margin
  • Padding
  • Border
  • Border Radius
  • ค่าที่แตกต่างกันสำหรับแต่ละด้าน

แนวทางนี้เข้าใจง่ายกว่าการใช้ฟิลด์จำนวนมากที่มีชื่อซับซ้อน เพราะ Visual Diagram จะแสดงให้เห็นโดยตรงว่าค่าแต่ละค่ากำหนดให้กับด้านใดของ Element

พื้นหลังของ Section

Section ยังสามารถใช้สร้าง Visual Block ที่ซับซ้อนมากขึ้นได้ สามารถกำหนดค่าได้ เช่น:

  • สีพื้นฐาน
  • Gradient
  • Background Image
  • Overlay บนรูปภาพ
  • Background Video
  • ตำแหน่งและขนาดของรูปภาพ
  • การทำซ้ำของ Background Image
  • ความโปร่งใสของ Overlay
  • Fallback Image สำหรับวิดีโอบนอุปกรณ์มือถือ

ทำให้สามารถสร้าง Hero Section และ Visual Content Block แบบเต็มรูปแบบได้โดยตรงภายใน Canvas

ทำไมต้องใช้ SDC?

Canvas Palette สร้างขึ้นบนพื้นฐานของ Single Directory Components นี่เป็นส่วนสำคัญของสถาปัตยกรรมโมดูล แทนที่จะสร้าง Paragraph Types หรือ Block Types แบบเฉพาะจำนวนมาก แต่ละ Element จะถูกสร้างเป็น SDC Component ที่แยกจากกัน แนวทางนี้สอดคล้องกับสถาปัตยกรรมของ Drupal และ Canvas รุ่นใหม่: Component → Configuration → Visual Editing → Final Result คอมโพเนนต์สามารถใช้งานแยกจากกัน และสามารถนำมาผสมกันเป็น Composition รูปแบบต่าง ๆ ได้

Canvas Palette และ EPT / EBT

Canvas Palette พัฒนาต่อยอดจากแนวคิดที่เคยใช้ในโปรเจกต์ Extra Paragraph Types (EPT) และ Extra Block Types (EBT) EPT มีคอลเลกชัน Paragraph Types สำเร็จรูป ส่วน EBT มี Drupal Block Types สำเร็จรูป Canvas Palette นำแนวคิดที่คล้ายกันเข้าสู่โลกของ Visual Page Builder แต่ใช้ Single Directory Components ซึ่งสอดคล้องกับสถาปัตยกรรมของ Canvas จึงเกิดแนวทางที่แตกต่างกันสามแบบสำหรับโจทย์เดียวกัน:

  • EPT — คอมโพเนนต์สำเร็จรูปในรูปแบบ Paragraphs
  • EBT — คอมโพเนนต์สำเร็จรูปในรูปแบบ Blocks
  • Canvas Palette — คอมโพเนนต์สำเร็จรูปสำหรับการแก้ไขด้วย Canvas แบบ Visual

ด้วยเหตุนี้ Palette จึงน่าสนใจเป็นพิเศษสำหรับโปรเจกต์ที่ต้องการเปลี่ยนจาก Traditional Content Modeling ไปสู่การสร้างหน้าเว็บแบบ Visual

การสร้างหน้าด้วย Canvas Palette

สมมติว่าเราต้องการสร้าง Landing Page แบบง่าย ๆ ด้วย Canvas Palette โครงสร้างอาจมีลักษณะประมาณนี้:

Section ├── Hero │ ├── Heading │ ├── Image │ └── Button │ Section ├── Columns │ ├── Image │ └── Text │ Section ├── Stats │ ├── Counter │ ├── Counter │ └── Counter │ Section ├── Accordion │ ├── FAQ │ ├── FAQ │ └── FAQ │ Section └── CTA ├── Image └── Buttons

Section สามารถใช้ครอบคอมโพเนนต์เพียงหนึ่งตัวหรือกลุ่มคอมโพเนนต์ทั้งหมดก็ได้ ทำให้สามารถสร้าง Composition แบบซ้อนกันและควบคุม Design ในระดับต่าง ๆ ได้

จำเป็นต้องเขียนโค้ดหรือไม่?

หนึ่งในเป้าหมายหลักของ Canvas Palette คือการลดสถานการณ์ที่ผู้ดูแลเนื้อหาหรือ Site Builder จำเป็นต้องเขียนโค้ดด้วยตัวเอง คอมโพเนนต์สำเร็จรูปสามารถเพิ่มและกำหนดค่าได้แบบ Visual สิ่งนี้เหมาะอย่างยิ่งสำหรับ:

  • Content Managers
  • ทีมการตลาด
  • ผู้ดูแลเนื้อหา
  • Site Builders
  • ทีมขนาดเล็กที่ไม่มี Frontend Developer โดยเฉพาะ

ในขณะเดียวกัน นักพัฒนายังคงควบคุมสถาปัตยกรรมของคอมโพเนนต์ และสามารถสร้าง SDC Components ของตัวเองได้เมื่อชุดคอมโพเนนต์มาตรฐานไม่เพียงพอ ดังนั้น Canvas Palette ไม่ได้มีเป้าหมายเพื่อแทนที่นักพัฒนา แต่ช่วยให้นักพัฒนาสามารถสร้างชุด Building Blocks ไว้ล่วงหน้า เพื่อให้สมาชิกคนอื่น ๆ ในทีมสามารถนำไปใช้งานได้

Performance และ JavaScript

Canvas Palette ไม่จำเป็นต้องใช้ jQuery สำหรับ Interactive Components ตัวอย่างเช่น:

  • Tabs ใช้ JavaScript ของตัวเอง
  • Accordion ทำงานโดยไม่ใช้ jQuery
  • Slider ใช้ Splide
  • Carousel ใช้ tiny-slider
  • Modal Windows ใช้ Implementation ของตัวเอง
  • Galleries ใช้ GLightbox

ทำให้สามารถใช้ Interactive Components สมัยใหม่ได้โดยไม่จำเป็นต้องสร้าง Frontend ทั้งหมดบนพื้นฐานของ jQuery

การติดตั้ง Canvas Palette

Canvas Palette แจกจ่ายในรูปแบบ Drupal Module ทั่วไป สามารถติดตั้งผ่าน Composer ได้ดังนี้:

composer require 'drupal/canvas_palette:^1.0'

ในหน้าโปรเจกต์บน Drupal.org ปัจจุบัน 1.0.2 เป็น Stable Release และโมดูลรองรับ Drupal 10.3 และ Drupal 11 หลังจากติดตั้งแล้ว Palette จะเพิ่มคอมโพเนนต์ที่สามารถใช้งานร่วมกับ Drupal Canvas ได้

Canvas Palette เหมาะกับโปรเจกต์ประเภทใด?

Canvas Palette เหมาะอย่างยิ่งสำหรับโปรเจกต์ที่ต้องการสร้างหน้าเว็บอย่างรวดเร็ว แต่ยังต้องการควบคุม Visual Design ตัวอย่างเช่น:

Landing Pages

สามารถสร้าง Hero Sections, CTAs, รูปภาพ, Buttons, Statistics และ Marketing Blocks อื่น ๆ ได้อย่างรวดเร็ว

เว็บไซต์องค์กร

ทีมงานจะมี Component Library สำเร็จรูปสำหรับสร้างหน้าใหม่โดยไม่ต้องพึ่งพานักพัฒนาทุกครั้ง

เว็บไซต์สื่อและเว็บไซต์เชิงบรรณาธิการ

Tabs, Accordions, Galleries, Videos, Quotes, Timelines และคอมโพเนนต์อื่น ๆ ช่วยให้สามารถสร้างเนื้อหาเชิงบรรณาธิการที่มีความซับซ้อนมากขึ้น

Documentation

สามารถผสมผสานข้อความ รูปภาพ ตารางเนื้อหา Accordions, Tabs และองค์ประกอบอื่น ๆ พร้อมรักษา Visual Style ที่สอดคล้องกัน

Design Systems

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

Canvas Palette ในฐานะตัวเชื่อมระหว่าง Drupal และ Visual Editor

จุดแข็งอย่างหนึ่งของแนวทาง Palette คือการแยกหน้าที่ความรับผิดชอบอย่างชัดเจน Drupal จัดการ Content, Entities, Views, Webforms และข้อมูลอื่น ๆ Canvas รับผิดชอบการแก้ไขหน้าเว็บแบบ Visual Canvas Palette จัดเตรียม Visual Components สำเร็จรูปที่เชื่อมต่อทั้งสองส่วนเข้าด้วยกัน ผลลัพธ์คือผู้ดูแลเนื้อหาได้รับ Visual Interface ในขณะที่นักพัฒนายังคงควบคุม Components และ Architecture ของเว็บไซต์ได้ สิ่งนี้มีความสำคัญอย่างยิ่งสำหรับโปรเจกต์ Drupal ที่ต้องการผสมผสานความอิสระในการออกแบบเข้ากับการควบคุมโครงสร้างและ Design System ของเว็บไซต์

สรุป

Canvas Palette คือคอลเลกชัน SDC Components สำเร็จรูปสำหรับ Drupal Canvas ซึ่งออกแบบมาเพื่อการสร้างหน้าเว็บสมัยใหม่แบบ Visual โมดูลนี้ผสานแนวคิดเรื่อง Reusable Components ที่คุ้นเคยใน Drupal เข้ากับ Visual Page Building ทำให้สามารถสร้างหน้าจากองค์ประกอบสำเร็จรูปได้โดยไม่จำเป็นต้องพัฒนา Block ใหม่ทุกครั้งด้วยตนเอง แนวคิดหลักของ Palette คือการมอบ Palette ที่พร้อมใช้งาน แทนที่จะให้ผู้ใช้เริ่มต้นจาก Canvas เปล่า แทนที่จะเริ่มจากศูนย์ทุกครั้ง คุณสามารถเลือก Section เพิ่ม Columns วาง Text, Image, Button, Gallery หรือคอมโพเนนต์อื่น ๆ และสร้างหน้าที่มีรูปลักษณ์สมบูรณ์ได้ทันที ในขณะเดียวกัน นักพัฒนายังคงควบคุมได้ว่าคอมโพเนนต์ใดจะพร้อมให้ผู้ดูแลเนื้อหาใช้งาน และคอมโพเนนต์เหล่านั้นถูก Implement อย่างไร หากคุณใช้ Drupal Canvas และต้องการขยายชุดคอมโพเนนต์มาตรฐาน Canvas Palette อาจเป็นจุดเริ่มต้นที่ดีสำหรับการสร้าง Visual Page Editor ที่มีความสามารถครบถ้วน

ลิงก์ที่มีประโยชน์

Tags: