Trình thiết kế giao diện Page Builder

Trình thiết kế Page Builder cho phép Quý Thầy/Cô tự do sắp xếp, lắp ghép các khối thông tin trên trang theo thời gian thực mà không cần viết bất kỳ dòng mã lập trình nào.

---

Tác vụ 1: Thêm khối giao diện mới vào trangCopy Anchor Link

Mục đíchCopy Anchor Link

Bổ sung thêm một phần thông tin mới lên trang web (ví dụ: thêm Banner chào mừng, thêm khung giới thiệu hay danh sách cán bộ).

Các bước thực hiệnCopy Anchor Link

1. Trong màn hình Page Builder, nhìn sang cột bên trái và bấm vào tab Khối giao diện (biểu tượng 4 ô vuông).
2. Duyệt qua các nhóm khối chuẩn hóa (Trang chủ, Giới thiệu, Tin tức, Đội ngũ...).
3. Dùng chuột kéo khối mong muốn và thả vào vị trí phù hợp trong không gian ở giữa màn hình (hoặc bấm dấu + để thêm vào cuối trang).
4. Bấm Lưu thay đổi.

Kết quảCopy Anchor Link

Khối giao diện mới lập tức xuất hiện trên trang với định dạng màu sắc và phông chữ chuẩn hóa của Trường.

Lưu ý nếu cóCopy Anchor Link

• Thầy/Cô có thể gõ từ khóa vào ô Tìm khối ở đầu cột trái để tìm nhanh khối cần dùng.

---

Tác vụ 2: Chỉnh sửa chữ và đổi hình ảnh trong khốiCopy Anchor Link

Mục đíchCopy Anchor Link

Thay thế văn bản mẫu và hình minh họa mặc định thành nội dung thực tế của đơn vị.

Các bước thực hiệnCopy Anchor Link

1. Dùng chuột nhấp trực tiếp vào khối muốn chỉnh sửa ở khu vực giữa màn hình. Khối đang chọn sẽ có đường viền bao quanh.
2. Nhìn sang Cột bên phải (Bảng thuộc tính):
   • Sửa câu chữ: Nhập trực tiếp tiêu đề, đoạn văn mô tả vào các ô tương ứng.
   • Đổi hình ảnh: Bấm vào ô hình ảnh để tải ảnh mới từ máy tính hoặc chọn ảnh từ tab Bộ nhận diện HCM-UTE.
   • Gắn liên kết nút bấm: Nhập đường dẫn trang web hoặc số điện thoại vào ô liên kết.
3. Bấm Lưu thay đổi.

Kết quảCopy Anchor Link

Nội dung của khối được cập nhật tức thì ngay trên màn hình để Thầy/Cô kiểm tra.

Lưu ý nếu cóCopy Anchor Link

• Nếu muốn đổi màu nền hoặc khoảng cách cách lề, Thầy/Cô kéo xuống mục Kiểu dáng (Styles) ở bảng thuộc tính bên phải.

---

Tác vụ 3: Đổi thứ tự hoặc xóa bỏ khối không sử dụngCopy Anchor Link

Mục đíchCopy Anchor Link

Sắp xếp lại trình tự xuất hiện của các phần trên trang từ trên xuống dưới hoặc xóa bớt phần thừa.

Các bước thực hiệnCopy Anchor Link

1. Nhìn sang cột bên trái và bấm chọn tab Quản lý phân tầng (Layers) (biểu tượng các lớp xếp chồng).
2. Danh sách tất cả các khối trên trang sẽ hiển thị từ trên xuống dưới.
3. Đổi thứ tự: Dùng chuột bấm giữ vào tên khối và kéo lên hoặc kéo xuống vị trí mong muốn.
4. Xóa khối: Bấm vào biểu tượng thùng rác màu đỏ cạnh tên khối đó (hoặc bấm vào khối ở giữa màn hình rồi nhấn phím Delete).
5. Bấm Lưu thay đổi.

Kết quảCopy Anchor Link

Trang web được tinh gọn lại và các phần hiển thị theo đúng thứ tự logic mà Thầy/Cô mong muốn.

Lưu ý nếu cóCopy Anchor Link

• Thao tác xóa khối có thể hoàn tác ngay bằng tổ hợp phím Ctrl + Z nếu Thầy/Cô lỡ tay bấm nhầm.

---

💡 Thư viện các khối giao diện tiêu biểu của HCM-UTECopy Anchor Link

• Hero Carousel (Băng chuyền ảnh lớn): Đặt ở đầu trang, hiển thị các hình ảnh sự kiện trọng đại với nút bấm hành động nổi bật.
• About Section (Khối Giới thiệu): Trình bày video giới thiệu và các đoạn tóm tắt lịch sử phát triển đơn vị.
• Leadership Cards (Ban Lãnh đạo): Hiển thị thẻ chân dung Ban Giám hiệu, Ban Chủ nhiệm Khoa kèm học hàm, học vị và email công vụ.
• News Grid (Lưới Tin tức tự động): Tự động lọc và hiển thị 3 - 6 bài viết mới nhất từ chuyên mục được chỉ định.
• Quick Links (Liên kết nhanh): Dãy nút dẫn nhanh đến các cổng thông tin dịch vụ như E-learning, Đăng ký học phần, Thư viện số.

---

⚠️ Các tình huống thường gặp và cách xử lýCopy Anchor Link

Tình huống 1: Sau khi sửa trang, xem trên điện thoại thấy chữ bị tràn hoặc ảnh bị méo?Copy Anchor Link

• Cách xử lý: Trong trình thiết kế, Thầy/Cô bấm vào biểu tượng Điện thoại ở thanh trên cùng để kiểm tra. Nếu chữ quá dài, hãy rút ngắn tiêu đề hoặc điều chỉnh cỡ chữ ở bảng thuộc tính bên phải dành riêng cho chế độ di động.