Hướng dẫn cấu hình cài đặt trước thiết kế nút

Giới thiệu

Các nút Kêu gọi hành động (CTA) rất quan trọng để thúc đẩy sự tương tác của người dùng, tạo khách hàng tiềm năng và chuyển đổi. PolyCMS tích hợp hệ thống Cài đặt sẵn thiết kế nút linh hoạt và mạnh mẽ, cho phép người tạo nội dung và quản trị viên tạo kiểu ngay lập tức cho các nút bằng cách sử dụng hệ thống thiết kế hài hòa, được định cấu hình trước mà không cần viết bất kỳ mã CSS hoặc HTML tùy chỉnh nào.

Hướng dẫn này trình bày chi tiết về các giá trị đặt trước tiêu chuẩn được tạo sẵn, cấu trúc lược đồ JSON linh hoạt của chúng và cách bạn có thể tải, quản lý và tạo các giá trị đặt trước tùy chỉnh trực tiếp trong Block Editor.

Cài đặt trước thiết kế dựng sẵn

PolyCMS được cài đặt sẵn 9 nút cài sẵn cao cấp, cấp sản xuất được thiết kế để mang lại khả năng chuyển đổi cao và tính nhất quán trực quan trên tất cả các chủ đề bố cục:

Kiến trúc cơ sở dữ liệu và lược đồ JSON

Dưới lớp vỏ bọc, các cài đặt trước được lưu trữ trong cơ sở dữ liệu dưới polycms_presets và được sắp xếp theo cấp bậc bằng cách sử dụng bảng polycms_preset_categories.

Mỗi giá trị đặt trước chứa tải trọng JSON có khả năng tùy chỉnh cao, chỉ định khoảng cách, cách phối màu, kiểu chữ, đường viền, căn chỉnh và hành vi di chuột tương tác chính xác:

{
  "style": "custom",
  "alignment": "center",
  "target": "_self",
  "label": "Action Button",
  "bg_type": "solid",
  "bg_color": "#4f46e5",
  "text_color": "#ffffff",
  "border_color": "#4f46e5",
  "hover_bg_type": "solid",
  "hover_bg_color": "#4338ca",
  "hover_text_color": "#ffffff",
  "hover_border_color": "#4338ca",
  "border_radius": "9999px",
  "inner_padding_top": 14,
  "inner_padding_right": 36,
  "inner_padding_bottom": 14,
  "inner_padding_left": 36,
  "font_size": "1rem",
  "font_weight": "600"
}

Thuộc tính khoảng cách và kiểu chữ

• Phần đệm (inner_padding_*): Được khai báo bằng pixel (px) để kiểm soát chính xác các khoảng trống bộ đệm văn bản bên trong.

• ** Kiểu chữ (font_size, font_weight)**: Hỗ trợ thang đo kích thước tiêu chuẩn (0.875rem, 1rem) và ánh xạ trọng số CSS (600, 700).

• Biên giới (bán kính_biên giới): Định cấu hình kiểu góc từ các cạnh sắc nét (0px) và các khối cổ điển (4px, 6px) đến các viên tròn hoàn toàn (9999px).

Tích hợp trình chỉnh sửa (Trình quản lý phương thức tải & cài đặt sẵn)

Khi chỉnh sửa nội dung trong Bảng quản trị, Block Editor sẽ nhúng hệ thống tương tác gắn kết được cài sẵn:

1. Bảng quản lý cài sẵn

Khi bạn chọn hoặc thêm khối Nút, ngăn cài đặt thanh bên phải sẽ tải biểu mẫu cấu hình ButtonSettings.vue. Trực tiếp trong bảng này, Preset Manager (PresetManager.vue) cung cấp:

• Một cửa sổ xem trước của thiết kế hiện đang hoạt động.

• Thanh trượt và bộ chọn màu trực tiếp để ghi đè các tham số mặc định.

• Trình khởi chạy hành động "Tải cài sẵn".

2. Tải kiểu dáng thiết kế

Nhấp vào nút "Tải cài sẵn" sẽ kích hoạt cửa sổ bật lên PresetLoadModal.vue:

• Tìm kiếm & Lọc: Tìm kiếm cài đặt trước theo tên hoặc duyệt theo thư mục phân cấp (ví dụ: mặc định hệ thống, mẫu đại lý tùy chỉnh).

• Xem trước tức thì: Di chuột hoặc chọn kiểu sẽ hiển thị kết xuất trực tiếp của nút.

• Áp dụng kiểu: Xác nhận lựa chọn của bạn sẽ cập nhật ngay tải trọng JSON của nút trong Block Editor, tái cấu trúc bản trình bày trực quan trong thời gian thực.

Kết luận & Thực tiễn tốt nhất

Để duy trì chất lượng hình ảnh cao trên trang web của bạn:

• Giới hạn độ trải màu: Sử dụng một cài đặt trước chính duy nhất cho các CTA đăng ký chính và các cài đặt trước phác thảo cho các liên kết phụ.

• Phạm vi hệ thống: Lưu các thiết kế đã được xác minh dưới dạng Cài đặt trước hệ thống để các tác giả khác có thể sử dụng lại bố cục nút nhất quán trên các trang khác nhau.