HeadRandom
Back to Main Site

Trình dựng trang trực quan MTBuilder trong PolyCMS

Last updated on Jul 10, 2026 5:02 AM

Tổng quan về Trình dựng trang trực quan

MTBuilder là plugin dựng trang kéo thả trực quan (visual drag-and-drop page builder) cao cấp được tích hợp sẵn trong PolyCMS. Công cụ loại bỏ hoàn toàn việc phải cài đặt thêm các trang WordPress phụ trợ, cho phép bạn thiết kế các trang đích (landing pages) đẹp mắt, hiện đại, tỷ lệ chuyển đổi cao, các phễu marketing hay trang giới thiệu hồ sơ năng lực trực tiếp ngay trong hệ thống Perfex CRM của mình.

Để truy cập trình soạn thảo trực quan, bạn di chuyển đến mục Blog > Pages, tiến hành tạo mới hoặc chọn chỉnh sửa một trang tĩnh, và click vào nút màu xanh "Edit with MTBuilder" nằm ngay dưới khung soạn thảo nội dung cổ điển.

---

Bố cục không gian làm việc

Không gian làm việc của trình dựng trang MTBuilder được chia thành ba phân khu chức năng chính:

  • Thanh công cụ trên (Topbar): Cung cấp nút điều hướng quay trở lại trang quản trị admin, hiển thị tiêu đề trang hiện tại (đồng bộ theo thời gian thực), các nút chuyển đổi màn hình xem trước (Desktop, Tablet, và Mobile) để tối ưu hiển thị responsive, và nút Save màu xanh lá.
  • Thanh bên trái (Sidebar): Chứa 3 tab chức năng chính:
  • Blocks / Layouts: Danh mục chứa toàn bộ các khối phần tử kéo thả (Tiêu đề, Đoạn văn, Ảnh, Nút, Dòng, Cột) và các Thành phần mẫu (Template Parts) được phân loại theo các chủ đề thiết kế.
  • Layers (Lớp): Hiển thị sơ đồ phân cấp dạng cây (DOM tree) giúp bạn dễ dàng theo dõi và chọn chính xác các phần tử nằm lồng sâu bên trong.
  • Settings (Cài đặt): Tự động xuất hiện khi bạn click vào bất kỳ phần tử nào trên trang để điều chỉnh khoảng cách (padding, margin), căn lề, màu chữ, màu nền, bo góc (border-radius).
  • Khung thiết kế chính (Canvas): Khu vực tương tác trung tâm hiển thị chính xác 100% giao diện trang web ngoài thực tế theo cơ chế WYSIWYG (What You See Is What You Get).

---

Kiến trúc thiết kế: Khung bao, Dòng và Cột

Việc dựng trang trên MTBuilder tuân thủ nghiêm ngặt hệ thống lưới cấu trúc để đảm bảo hiển thị responsive mượt mà:

  1. Section (Khung bao lớn): Container cha bao quát toàn bộ. Mỗi phần của trang đích (ví dụ: Khung đầu trang Hero, Khung tính năng Features, Khung kêu gọi hành động CTA) đều nằm trong một Section riêng. Bạn có thể cấu hình màu nền, ảnh nền và khoảng cách viền dọc cho từng Section.
  2. Row (Dòng): Nằm bên trong Section, đóng vai trò chứa các cột hiển thị.
  3. Column (Cột): Nằm trong Row, chia nhỏ không gian theo chiều ngang (ví dụ: chia 2 cột để đặt chữ một bên, ảnh một bên; chia 3 cột để làm bảng giá dịch vụ).
  4. Content Blocks (Các khối nội dung): Các thành phần cơ bản như Tiêu đề, Đoạn văn, Hình ảnh, Nút bấm được kéo trực tiếp thả vào bên trong Column.

---

Tài liệu chi tiết về 17 khối nội dung mặc định

MTBuilder tích hợp sẵn **17 khối nội dung được đăng ký sẵn** trên thanh công cụ, phân chia theo các nhóm bố cục và phần tử nội dung. Bạn có thể kéo thả trực tiếp và tùy chỉnh chi tiết trong tab Settings:

Nhóm phần tử bố cục (Layout Grid Elements)

  • Root Canvas (root): Khung container tổng quản lý toàn bộ các phân đoạn xếp chồng trên trang. Tự động bỏ qua các khung highlight của admin để bảo toàn giao diện thiết kế mượt mà nhất.
  • Section (section): Phân đoạn dọc của trang web. Hỗ trợ thiết lập ảnh nền, màu nền, khoảng cách viền tùy chọn và căn lề.
  • Row (row): Dòng container nằm trong Section để chứa các cột.
  • Column (column): Các ô cột nằm trong dòng. Dễ dàng tinh chỉnh chiều rộng (như 50%, 33.3%, 100%) để tạo lưới hiển thị responsive chéo nhau.

Nhóm phần tử nội dung cơ bản (Basic Content Elements)

  • Title (title): Khối tiêu đề động (hỗ trợ các thẻ từ <h1> đến <h6>). Cho phép tùy chỉnh kích thước chữ, màu sắc, độ đậm font-weight, khoảng cách chữ và định dạng viết hoa/viết thường trực quan.
  • Text (text): Khối đoạn văn rich text. Hỗ trợ chỉnh khoảng cách dòng (line-height), căn lề và font chữ.
  • Image (image): Tải lên hoặc chọn hình ảnh từ Thư viện phương tiện. Hỗ trợ bo góc, giới hạn chiều rộng, tạo bóng đổ và căn lề hiển thị.
  • Button (button): Các nút bấm kêu gọi hành động. Tùy chỉnh đường dẫn liên kết, cỡ chữ, bo góc, màu nền và hiệu ứng màu khi di chuột vào (hover color) với cơ chế cô lập style CSS thông minh.
  • Icon (icon): Các biểu tượng vector sử dụng thư viện FontAwesome. Cấu hình màu sắc, kích thước hiển thị (như 1x, 2x, 3x) và căn lề.

Nhóm phần tử tương tác (Interactive Components)

  • Accordion (accordion): Khung chứa các dòng nội dung thu gọn/mở rộng. Rất phù hợp để thiết kế khu vực câu hỏi thường gặp FAQ.
  • Accordion Item (accordion_item): Một dòng nội dung trong accordion. Quản lý trạng thái mặc định đóng hay mở, tiêu đề dòng và chi tiết văn bản bên trong.
  • Tabs (tabs): Hệ thống chuyển đổi tab nội dung động. Cho phép người dùng click chuyển đổi xem thông tin gói dịch vụ hoặc chi tiết kỹ thuật ngay trên trang mà không cần tải lại trang.
  • Video (video): Khung nhúng video responsive. Nhúng trực tiếp link YouTube, Vimeo hoặc tệp video HTML5 với các tùy chọn tự động chạy (autoplay) và cấu hình điều khiển hiển thị.

Nhóm phần tử thiết kế nâng cao (Advanced Design Blocks)

  • Divider (divider): Đường kẻ phân tách nội dung. Tùy chỉnh kiểu nét (liền mạch, nét đứt, dấu chấm), màu sắc, độ rộng và căn lề.
  • Style Group (style_group): Khung bao đóng gói thiết kế cao cấp. Gộp nhiều phần tử lại với nhau (ví dụ: gộp biểu tượng, tiêu đề và đoạn văn vào một thẻ tính năng) để thiết lập chung viền, khoảng cách padding và tạo bóng đổ box-shadow cho cả nhóm.
  • HTML Editor (html_editor): Ô chèn mã nguồn HTML, ảnh vector SVG hoặc mã script lấy thông tin liên hệ (web-to-lead script) trực tiếp lên trang thiết kế.
  • Blog Posts (blog_posts): Widget hiển thị danh sách bài viết động. Tự động truy xuất và hiển thị các bài viết mới trên blog theo thiết kế dạng thẻ card đẹp mắt đi kèm tính năng phân trang.

---

Thành phần mẫu (Template Parts)

Template Parts là các khối giao diện và phân đoạn thiết kế được lưu trữ để tái sử dụng, giúp bạn xây dựng một hệ thống nhận diện thương hiệu đồng bộ trên toàn trang web. Thay vì phải thiết kế lại từ đầu các khối lặp đi lặp lại (như bảng câu hỏi FAQ, biểu ngữ kêu gọi hành động CTA, hoặc bảng giá) cho từng trang đích mới, bạn có thể gọi ra sử dụng ngay chỉ bằng thao tác kéo thả:

  • Mẫu cấu trúc thiết lập sẵn (Section Presets): Các khối Section được thiết kế chuyên nghiệp cho từng mục đích như: Banner Hero nổi bật, lưới tính năng 3 cột, đánh giá của khách hàng (testimonials) và các khối trình bày nội dung.
  • Tự lưu trữ giao diện tùy biến: Nhà thiết kế có thể lưu bất kỳ Section hoặc Row nào trên trang canvas hiện tại thành một khối mẫu dùng chung. Hệ thống sẽ ghi nhớ chính xác toàn bộ cấu hình khoảng cách padding, margin, màu nền/ảnh nền và thiết kế nút bấm của bạn.
  • Đồng bộ nhận diện thương hiệu: Việc tái sử dụng các khối mẫu giúp đảm bảo tính nhất quán về khoảng cách viền, bo góc và kích thước chữ trên toàn bộ các phễu marketing, đồng thời tăng tốc đáng kể quy trình thiết kế trang đích của bạn.

---

Tích hợp thiết lập trang trực quan (Page Settings)

Trình soạn thảo tích hợp sẵn bảng Page Settings ngay tại thanh bên của không gian làm việc trực quan, giúp bạn đồng bộ các thiết lập cổ điển của trang trực tiếp trong chế độ kéo thả:

  • Đồng bộ tiêu đề: Thay đổi tiêu đề trang trong ô cấu hình và tên trang ở thanh topbar trên cùng sẽ được cập nhật tương ứng theo thời gian thực.
  • Giao diện mẫu trang (Page Layout Template): Lựa chọn tệp tin template hiển thị cho trang (như Full Width, Contact, Default) thông qua menu chọn thả xuống.
  • Lựa chọn ảnh đại diện (Featured Image): Kết nối trực tiếp với Thư viện phương tiện PolyCMS. Tìm kiếm, chọn lựa, tải lên hoặc xóa ảnh đại diện nhanh chóng.
  • Tối ưu hóa công cụ tìm kiếm Google SEO: Cấu hình đầy đủ các trường Meta Title, Meta Keywords, và Meta Description đi kèm khung hiển thị kết quả tìm kiếm thực tế trên Google (snippet preview) trực quan.

---

Cơ chế bảo toàn tính toàn vẹn dữ liệu (Data Shielding)

MTBuilder được trang bị cơ chế bảo vệ cơ sở dữ liệu ngầm ở backend. Khi một Trang hoặc Bài viết được đánh dấu là đang sử dụng trình dựng MTBuilder (chứa các siêu dữ liệu cấu trúc trang tương ứng), thao tác bấm lưu trang đó trong trang quản trị CRM cổ điển sẽ **tự động bỏ qua và không cập nhật** hai trường dữ liệu content và description.

Cơ chế này giúp đảm bảo khi bạn chỉnh sửa các thông số cài đặt trang (như trạng thái hiển thị, trang cha, hoặc tiêu đề) ở giao diện admin cũ sẽ hoàn toàn không bao giờ làm ghi đè, làm hỏng hoặc xóa mất cấu trúc mã HTML5, màu sắc giao diện và các nút bấm đã được thiết kế kỳ công bên trong MTBuilder.

---

Kết hợp MTBuilder với bộ khung Theme/Plugin

Đối với các dự án thực tế, quy trình làm việc tối ưu nhất là:

  1. Xây dựng bộ khung hiển thị ổn định bằng giao diện theme tùy biến (gồm header, footer, trang lưu trữ, cấu trúc SEO).
  2. Sử dụng MTBuilder để ghép nối các phân đoạn trang đích từ các khối mẫu (Template Parts) hoặc các template trang đầy đủ có sẵn.
  3. Mở rộng thêm các khối nội dung tùy biến riêng cho MTBuilder bằng plugin bổ trợ khi phát sinh các yêu cầu đặc thù của doanh nghiệp.

Phân chia vai trò khuyên dùng:

  • Bộ khung hiển thị của Theme: Đảm nhận cấu trúc tổng quát của trang, font chữ toàn trang, menu điều hướng và các tệp PHP dùng chung.
  • Templates/Parts của MTBuilder: Đảm nhận các phân đoạn chiến dịch marketing, trang bán hàng, trang đích quảng cáo và các thử nghiệm chiến dịch ngắn hạn.
  • Mã nguồn của Plugin: Đăng ký các khối nội dung tùy biến cho MTBuilder, tích hợp phần mềm bên thứ ba và xây dựng các widget gọi dữ liệu động.

Xem thêm các tài liệu hướng dẫn kỹ thuật:

---

Tài liệu hướng dẫn liên quan